<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-10-26 10:29:22
 * @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>
        <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;">{{ member_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-copy="onCopy" v-for="(item, index) in activity_list" :key="index" :data="item" status="copy" 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"
      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" />

</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 { addListAPI } from '@/api/Activity/index';
import { $ } from '@tarojs/extend'
import mixin from '@/utils/mixin';
import { getCurrentPageParam } from "@/utils/weapp";
import { hostListAPI } from '@/api/Host/index'
import * as dayjs from 'dayjs'

export default {
  name: "myCreateActivityPage",
  mixins: [mixin.init],
  async onShow () {
    // 获取主办方列表信息
    const host = await hostListAPI();
    if (host.code) {
      host.data.my_hosts.forEach(item => {
        if (item.id == getCurrentPageParam().host_id) {
          this.host_id = item.id;
          this.host_name = item.name;
        }
        item.text = item.name;
        item.key = item.id;
      });
      this.host_columns = host.data.my_hosts;
    }
    const params = {
      host_id: getCurrentPageParam().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;
      this.volunteer_count = data.volunteer_count;
      this.member_count = data.member_count;
      this.server_time = this.formatDate(data.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: '',
      member_count: '',
      volunteer_count: '',
      show_status_popup: false,
      status_type: '',
      status_type_columns: ['全部', '一个月之内', '三个月之内', '一年之内'],
      show_host_popup: false,
      host_columns: [],
      time_begin: '',
      time_end: '',
      only_start: 0,
      host_id: '',
      host_name: '',
      check_status: false,
      filter_time: '',
      server_time: '',
      defaultIndex: 0
    };
  },
  methods: {
    formatDate (date) {
      return dayjs(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;
          this.volunteer_count = data.volunteer_count;
          this.member_count = data.member_count;
          this.page = this.page + 1;
          this.flag = true;
        } 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 = dayjs(this.server_time).subtract(1, 'month');
        this.defaultIndex = 1;
        this.status_type = '一个月之内';
      }
      if (this.filter_time === '三个月之内') {
        yearMonthDay = dayjs(this.server_time).subtract(3, 'month');
        this.defaultIndex = 2;
        this.status_type = '三个月之内';
      }
      if (this.filter_time === '一年之内') {
        yearMonthDay = dayjs(this.server_time).subtract(1, 'year');
        this.defaultIndex = 3;
        this.status_type = '一年之内';
      }
      this.time_begin = `${dayjs(yearMonthDay).format('YYYY-MM-DD')} ${dayjs(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;
      // 查询数据
      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();
    },
    onCopy () { // 活动复制时间回调
      // 查询数据
      this.activity_list = [];
      this.flag = true;
      this.page = 0;
      this.getList();
    }
  },
};
</script>