<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-12-08 09:44:01
 * @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: 0.5rem 1rem;overflow: auto; margin-bottom: 1px;">
        <view @tap="show_time_popup=true" style="float: left; color: #666666; font-size: 0.8rem; border: 1px solid #DBDBDB; border-radius: 1rem; padding: 0.3rem 1rem 0.3rem 1rem; margin-top: 0.85rem;">
          &nbsp;{{ filter_status_time === '' ? '全部' : filter_status_time }}&nbsp;&nbsp;
          <van-icon :name="icon_sel2" size="0.8rem" color="" style="vertical-align: middle;" />
        </view>
        <view style="float: right; margin-top: 0.25rem;">
          <view style="font-size: 0.85rem; color: #999999; vertical-align: super;">仅看进行中</view>&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 v-if="activity_list.length">
          <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>
        <!-- TODO: 缺省页 -->
        <van-empty v-else description="暂无创建活动" class="custom-image" :image="icon_no_create" />
      </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-popup :show="show_time_popup" position="bottom" custom-style="height: 30%;" :lock-scroll="true">
    <view class="time-wrapper">
      <view class="form-item border" style="padding: 0.25rem 0.25rem 0.25rem 1rem;">
        <van-row>
          <van-col span="10" offset="0">
            <view class="form-item-title fix">
              活动开始时间
              <!-- <van-icon name="question-o" size="1rem" color="" class="vip-icon" /> -->
            </view>
          </van-col>
          <van-col span="14" offset="0">
            <!-- 报名开始时间 -->
            <van-field @tap="showBeginTime" :value="filter_begin_time" label-class="label-class-super" input-class="input-class" label=""
            :right-icon="icon_sel" input-align="right" placeholder="请选择时间" placeholder-style="color: #999;" customStyle=""
            maxlength="" type="" :border="false" :required="false" :disabled="true" />
          </van-col>
        </van-row>
      </view>
      <view class="form-item border" style="padding: 0.25rem 0.25rem 0.25rem 1rem;">
        <van-row>
          <van-col span="10" offset="0">
            <view class="form-item-title fix">
              活动结束时间
              <!-- <van-icon name="question-o" size="1rem" color="" class="vip-icon" /> -->
            </view>
          </van-col>
          <van-col span="14" offset="0">
            <!-- 活动结束时间 -->
            <van-field @tap="showEndTime" :value="filter_end_time" label-class="label-class-super" input-class="input-class" label=""
            :right-icon="icon_sel" input-align="right" placeholder="请选择时间" placeholder-style="color: #999;" customStyle=""
            maxlength="" type="" :border="false" :required="false" :disabled="true" />
          </van-col>
        </van-row>
      </view>
    </view>
    <van-row>
      <van-col span="12" offset="0">
        <view class="time-button-wrapper">
          <view class="button cancel" @tap="closeTime">重置</view>
        </view>
      </van-col>
      <van-col span="12" offset="0">
        <view class="time-button-wrapper">
          <view class="button confirm" @tap="confirmTime">确定</view>
        </view>
      </van-col>
    </van-row>
  </van-popup>
  <van-popup :show="show_begin_time" position="bottom" custom-style="height: 50%;" :lock-scroll="true">
    <van-datetime-picker
      type="date"
      :value="currentBeginDate"
      :formatter="formatter"
      @confirm="onBeginConfirm"
      @cancel="onBeginCancel"
    />
  </van-popup>
  <van-popup :show="show_end_time" position="bottom" custom-style="height: 50%;" :lock-scroll="true">
    <van-datetime-picker
      type="date"
      :value="currentEndDate"
      :formatter="formatter"
      @confirm="onEndConfirm"
      @cancel="onEndCancel"
    />
  </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 icon_no_create from '@/images/icon/no-chuangjian@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';
import moment from '@/utils/moment.min.js'

</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 { addListAPI, endActivityAPI, delActivityAPI, copyActivityAPI } from '@/api/Activity/index';
import { hostStore } from '@/stores/host'
import { formatDate } from '@/utils/tools.js'
import icon_sel from '@/images/icon/sel@2x.png'

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.server_time = formatDate(data.server_time);
      data.activity_list.forEach(item => {
        item.server_time = formatDate(data.server_time);
      });
      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.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,
      show_time_popup: false,
      filter_begin_time: '',
      filter_end_time: '',
      currentBeginDate: new Date().getTime(),
      currentEndDate: new Date().getTime(),
      minDate: new Date().getTime(),
      filter_status_time: ''
    };
  },
  methods: {
    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, 'months');
        this.defaultIndex = 1;
        this.status_type = '一个月之内';
      }
      if (this.filter_time === '三个月之内') {
        yearMonthDay = moment(this.server_time).subtract(3, 'months');
        this.defaultIndex = 2;
        this.status_type = '三个月之内';
      }
      if (this.filter_time === '一年之内') {
        yearMonthDay = moment(this.server_time).subtract(1, 'years');
        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;
    },
    closeTime () { // 重置查询时间
      // this.show_time_popup = false;
      this.filter_begin_time = '';
      this.filter_end_time = '';
      this.currentBeginDate = new Date().getTime();
      this.currentEndDate = new Date().getTime();
    },
    confirmTime () { // 确认时间区间
      if (this.filter_begin_time > this.filter_end_time) {
        Toast('开始时间不能大于结束时间')
      } else {
        this.show_time_popup = false;
        if (this.filter_begin_time && this.filter_end_time) {
          this.filter_status_time = `${this.filter_begin_time} ~ ${this.filter_end_time}`;
        } else {
          this.filter_status_time = '';
        }
        this.time_begin = this.filter_begin_time;
        this.time_end = this.filter_end_time;
        // 查询数据
        this.activity_list = [];
        this.flag = true;
        this.page = 0;
        this.getList();
      }
    },
    formatter (type, value) {
      if (type === 'year') {
        return `${value}年`;
      }
      if (type === 'month') {
        return `${value}月`;
      }
      return value;
    },
    // onBeginInput(event) {
    //   this.currentBeginDate = event.detail;
    //   this.filter_begin_time = moment(event.detail).format('YYYY-MM-DD')
    // },
    // onEndInput(event) {
    //   this.currentEndDate = event.detail;
    //   this.filter_end_time = moment(event.detail).format('YYYY-MM-DD')
    // },
    showBeginTime () {
      this.show_time_popup = false;
      this.show_begin_time = true;
    },
    showEndTime () {
      this.show_time_popup = false;
      this.show_end_time = true;
    },
    onBeginConfirm ({ detail }) {
      this.show_time_popup = true;
      this.show_begin_time = false;
      this.currentBeginDate = detail;
      this.filter_begin_time = moment(detail).format('YYYY-MM-DD')
    },
    onBeginCancel () {
      this.show_time_popup = true;
      this.show_begin_time = false;
    },
    onEndConfirm({ detail }) {
      this.show_time_popup = true;
      this.show_end_time = false;
      this.currentEndDate = detail;
      this.filter_end_time = moment(detail).format('YYYY-MM-DD')
    },
    onEndCancel () {
      this.show_time_popup = true;
      this.show_end_time = false;
    },
  },
};
</script>