<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-10-31 19:20:15
 * @FilePath: /swx/src/pages/myCreateActivity/index.vue
 * @Description: 创建的活动页面
-->
<template>
  <div class="my-create-activity-page">
    <view id="page-header" style="width: 100%; background-image: url(http://gyzs.onwall.cn/userinfo_bg-top%402x.png); background-size: contain; background-repeat: no-repeat;">
      <view style="height: 4rem; padding: 1rem;">
        <van-row>
          <van-col span="18">
            <view style="position: relative;">
              <AtAvatar circle size="large" :image='icon_company' style="display: inline-block;"></AtAvatar>
              <view style="display: inline-block; position: absolute; top: 30%; left: 28%;">
                <text style="font-size: 1.05rem;">{{ host_name }}</text>
                <!-- <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" /> -->
              </view>
            </view>
          </van-col>
          <van-col span="6">
            <view @tap="show_host_popup=true" style="background-color: #DABE73; color: white; padding: 0.5rem 0; border-radius: 1rem; text-align: center; font-size: 0.85rem;margin-top: 1rem;">切换主办方</view>
          </van-col>
        </van-row>
      </view>
      <view class="my-create-activity-header">
        <view class="activity-title">
          <view class="box">
            <text class="bg-gradient" style="font-size: 1.15rem;">活动统计</text>
          </view>
          <!-- <view @tap="goToPartner" class="partner-box">用户陪伴</view> -->
        </view>
        <view class="header-info">
          <view class="activity">
            <view><text style="font-size: 1.25rem;">{{ activity_count }}</text>场</view>
            <view>
              <van-icon :name="icon_join" size="1.5rem" color="" style="vertical-align: sub;" />
              <text style="font-size: 0.9rem; color: #999999;">活动总数</text>
            </view>
          </view>
          <view class="job">
            <text style="font-size: 1.25rem;">{{ volunteer_count }}</text>人
            <view>
              <van-icon :name="icon_job" size="1.25rem" color="" style="vertical-align: sub;" />
              <text style="font-size: 0.9rem; color: #999999;">岗位人数</text>
            </view>
          </view>
          <view class="sign">
            <view><text style="font-size: 1.25rem;">{{ player_count }}</text>人</view>
            <view>
              <van-icon :name="icon_sign" size="1.25rem" color="" style="vertical-align: sub;" />
              <text style="font-size: 0.9rem; color: #999999;">用户总数</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view style="padding: 0 1rem;">
      <view id="navbar-page" style="background-color: white; border-radius: 0.65rem; padding: 1rem;overflow: auto; margin-bottom: 1px;">
        <view @tap="show_status_popup=true" style="float: left; color: #666666; font-size: 0.9rem; border: 1px solid #DBDBDB; border-radius: 1rem; padding: 0.3rem 1rem 0.3rem 1rem;">
          &nbsp;{{ status_type === '' ? '全部' : status_type }}&nbsp;&nbsp;
          <van-icon :name="icon_sel2" size="0.8rem" color="" style="vertical-align: middle;" />
        </view>
        <view style="float: right; margin-top: 0.25rem;">
          <text style="font-size: 1rem; color: #999999; vertical-align: super;">仅看进行中</text>&nbsp;
          <van-switch :checked="check_status" @change="onChange" size="22px" active-color="#199A74" />
        </view>
      </view>
      <scroll-view :scroll-y="true" :style="scrollStyle" @scrolltolower="onScrollToLower">
        <!-- <view style=""> -->
          <activity-card @on-handle="onHandle" v-for="(item, index) in activity_list" :key="index" :data="item" status="creator" style="margin-bottom: 1rem;"></activity-card>
        <!-- </view> -->
      </scroll-view>
      <view style="height: 3rem;"></view>
    </view>
  </div>

  <!-- 切换主办方弹出框 -->
  <van-popup :show="show_host_popup" position="bottom" custom-style="height: 50%;" :lock-scroll="true">
    <van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="host_columns"
      :default-index="defaultHostIndex"
      toolbar-class="picker-toolbar" @confirm="onHostConfirm" @cancel="onHostCancel" />
  </van-popup>
  <!-- 切换时间弹出框 -->
  <van-popup :show="show_status_popup" position="bottom" custom-style="height: 50%;" :lock-scroll="true">
    <van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="status_type_columns"
      :default-index="defaultIndex"
      toolbar-class="picker-toolbar" @confirm="onStatusTypeConfirm" @cancel="onStatusTypeCancel"/>
  </van-popup>
  <van-toast id="van-toast" />

  <van-dialog title="温馨提示" :show="copy_show" :show-cancel-button="true" message="是否确认复制活动？" confirm-button-color="#199A74" @confirm="onCopyConfirm" @cancel="onCopyCancel"></van-dialog>
  <van-dialog title="温馨提示" :show="edit_show" :show-cancel-button="true" message="是否确认编辑活动？" confirm-button-color="#199A74" @confirm="onEditConfirm" @cancel="onEditCancel"></van-dialog>
  <van-dialog title="温馨提示" :show="finish_show" :show-cancel-button="true" message="是否确认结束活动？" confirm-button-color="#199A74" @confirm="onFinishConfirm" @cancel="onFinishCancel"></van-dialog>
  <van-dialog title="温馨提示" :show="delete_show" :show-cancel-button="true" message="是否确认删除活动？" confirm-button-color="#199A74" @confirm="onDeleteConfirm" @cancel="onDeleteCancel"></van-dialog>
</template>

<script setup>
import { ref } from "vue";
import icon_vip from '@/images/icon/vip@2x.png'
import Taro from '@tarojs/taro'
import { AtAvatar } from 'taro-ui-vue3'
import "taro-ui-vue3/dist/style/components/avatar.scss"
import icon_join from '@/images/icon/baoming@2x.png'
import icon_job from '@/images/icon/yigong@2x.png'
import icon_sign from '@/images/icon/qiandao@2x.png'
import icon_sel2 from '@/images/icon/sel02@2x.png'
import activityCard from '@/components/activity-card.vue'
import icon_company from '@/images/icon/zhubanfang@2x.png'
import Toast from '@/components/vant-weapp/toast/toast';

</script>

<script>
import "./index.less";
import { $ } from '@tarojs/extend'
import mixin from '@/utils/mixin';
import { getCurrentPageParam } from "@/utils/weapp";
import { hostListAPI } from '@/api/Host/index'
import moment from '@/utils/moment.min.js'
import { addListAPI, endActivityAPI, delActivityAPI, copyActivityAPI } from '@/api/Activity/index';
import { hostStore } from '@/stores/host'

export default {
  name: "myCreateActivityPage",
  mixins: [mixin.init],
  async onShow () {
    // 先看一下有没有缓存过主办方ID
    const id = hostStore().id;
    let host_id = '';
    if (id) {
      host_id = id;
    } else {
      host_id = getCurrentPageParam().host_id;
    }
    // 获取主办方列表信息
    const host = await hostListAPI();
    if (host.code) {
      host.data.my_hosts.forEach((item,index) => {
        if (item.id == host_id) {
          this.host_id = item.id;
          this.host_name = item.name;
          this.defaultHostIndex = index;
        }
        item.text = item.name;
        item.key = item.id;
      });
      this.host_columns = host.data.my_hosts;
    }
    const params = {
      host_id: this.host_id,
      time_begin: this.time_begin,
      time_end: this.time_end,
      status: this.status,
      only_start: this.only_start,
      page: this.page,
      limit: this.limit
    }
    const { code, data } = await addListAPI(params);
    if (code) {
      this.activity_list = data.activity_list;
      this.activity_count = data.activity_count ? data.activity_count : 0;
      this.volunteer_count = data.volunteer_count ? data.volunteer_count : 0;
      this.player_count = data.player_count ? data.player_count : 0;
      this.server_time = this.formatDate(data.server_time);
      this.activity_list.forEach(item => {
        item.server_time = this.server_time
      });
      this.page = this.page + 1;
    }
  },
  onHide () { // 离开当前页面
    this.page = 0;
    this.flag = true;
  },
  mounted () {
    // 设置滚动列表可视高度
    const windowHeight = wx.getSystemInfoSync().windowHeight;
    setTimeout(async () => {
      const headerHeight = await $('#page-header').height();
      const navHeight = await $('#navbar-page').height();
      this.scrollStyle = {
        height: windowHeight - headerHeight - navHeight - 50 + 'px'
      }
    }, 500);
  },
  data() {
    return {
      activity_list: [],
      flag: true,
      page: 0,
      limit: 10,
      scrollStyle: { height: '1000rpx' },
      status: '',
      activity_count: '',
      player_count: '',
      volunteer_count: '',
      show_status_popup: false,
      status_type: '',
      status_type_columns: ['全部', '一个月之内', '三个月之内', '一年之内'],
      show_host_popup: false,
      defaultHostIndex: 0,
      host_columns: [],
      time_begin: '',
      time_end: '',
      only_start: 0,
      host_id: '',
      host_name: '',
      check_status: false,
      filter_time: '',
      server_time: '',
      defaultIndex: 0,
      activity_id: '',
      edit_show: false,
      copy_show: false,
      finish_show: false,
      delete_show: false,
    };
  },
  methods: {
    formatDate (date) {
      return moment(date).format('YYYY-MM-DD HH:mm')
    },
    onScrollToLower () {
      if(!this.flag){
        return
      }
      this.flag = false;
      this.getList();
    },
    async getList () {
      // 获取推荐活动列表
      const params = {
        host_id: this.host_id,
        time_begin: this.time_begin,
        time_end: this.time_end,
        status: this.status,
        only_start: this.only_start,
        page: this.page,
        limit: this.limit
      }
      const { code, data } = await addListAPI(params);
      if (code) {
        if (data.activity_list.length) {
          this.activity_list = this.activity_list.concat(data.activity_list);
          this.activity_count = data.activity_count ? data.activity_count : 0;
          this.volunteer_count = data.volunteer_count ? data.volunteer_count : 0;
          this.player_count = data.player_count ? data.player_count : 0;
          this.page = this.page + 1;
          this.flag = true;
          this.activity_list.forEach(item => {
            item.server_time = this.server_time
          });
        } else {
          Toast('没有数据')
        }
      }
    },
    onStatusTypeConfirm (event) { // 时间过滤
      const { picker, value, index } = event.detail;
      this.show_status_popup = false;
      this.filter_time = value;
      // '一个月之内', '三个月之内', '一年之内'
      let yearMonthDay = '';
      if (this.filter_time === '一个月之内') {
        yearMonthDay = moment(this.server_time).subtract(1, 'month');
        this.defaultIndex = 1;
        this.status_type = '一个月之内';
      }
      if (this.filter_time === '三个月之内') {
        yearMonthDay = moment(this.server_time).subtract(3, 'month');
        this.defaultIndex = 2;
        this.status_type = '三个月之内';
      }
      if (this.filter_time === '一年之内') {
        yearMonthDay = moment(this.server_time).subtract(1, 'year');
        this.defaultIndex = 3;
        this.status_type = '一年之内';
      }
      this.time_begin = `${moment(yearMonthDay).format('YYYY-MM-DD')} ${moment(this.server_time).format('HH:mm')}`;
      this.time_end = this.server_time;
      if (this.filter_time === '全部') {
        this.time_begin = '';
        this.time_end = '';
        this.defaultIndex = 0;
        this.status_type = '全部';
      }
      // 查询数据
      this.activity_list = [];
      this.flag = true;
      this.page = 0;
      this.getList();
    },
    onStatusTypeCancel (event) {
      this.show_status_popup = false;
    },
    onHostConfirm (event) {
      const { picker, value, index } = event.detail;
      this.show_host_popup = false;
      this.host_id = value.key;
      this.host_name = value.text;
      // 缓存主办方ID
      const store = hostStore();
      store.add(value.key);
      // 查询数据
      this.activity_list = [];
      this.flag = true;
      this.page = 0;
      this.getList();
    },
    onHostCancel (event) {
      this.show_host_popup = false;
    },
    onChange({ detail }) {
      this.check_status = detail;
      this.only_start = detail ? 1 : 0;
      // 查询数据
      this.activity_list = [];
      this.flag = true;
      this.page = 0;
      this.getList();
    },
    onHandle ({ id, type }) { // 活动操作后回调
      this.activity_id = id;
      if (type === 'edit') {
        this.edit_show = true;
      }
      if (type === 'copy') {
        this.copy_show = true;
      }
      if (type === 'finish') {
        this.finish_show = true;
      }
      if (type === 'delete') {
        this.delete_show = true;
      }
    },
    onEditConfirm () {
      this.edit_show = false;
      Taro.navigateTo({
        url: '../createActivity/index?id=' + this.activity_id + '&type=edit'
      })
    },
    onEditCancel () {
      this.edit_show = false;
    },
    async onFinishConfirm () {
      const { code, data } = await endActivityAPI({ i: this.activity_id });
      if (code) {
        Toast({
          duration: 1000,
          type: 'success',
          message: '结束成功',
          onClose: () => {
            this.finish_show = false;
            // 查询数据
            this.activity_list = [];
            this.flag = true;
            this.page = 0;
            this.getList();
          },
        });
      }
    },
    onFinishCancel () {
      this.activity_id = '';
      this.finish_show = false;
    },
    async onDeleteConfirm () {
      const { code, data } = await delActivityAPI({ i: this.activity_id });
      if (code) {
        Toast({
          duration: 1000,
          type: 'success',
          message: '删除成功',
          onClose: () => {
            this.delete_show = false;
            // 查询数据
            this.activity_list = [];
            this.flag = true;
            this.page = 0;
            this.getList();
          },
        });
      }
    },
    onDeleteCancel () {
      this.activity_id = '';
      this.delete_show = false;
    },
    async onCopyConfirm () {
      const { code, data } = await copyActivityAPI({ i: this.activity_id });
      if (code) {
        Toast({
          duration: 1000,
          type: 'success',
          message: '复制成功',
          onClose: () => {
            this.copy_show = false;
            // 查询数据
            this.activity_list = [];
            this.flag = true;
            this.page = 0;
            this.getList();
          },
        });
      }
    },
    onCopyCancel () {
      this.activity_id = '';
      this.copy_show = false;
    }
  },
};
</script>