<template>
  <div class="container-signup">
    <!-- 头部根据条件查找 -->
    <el-card class="top-card-box">
      <div class="top-card">
        <div class="select-box">
          <div class="date-box">
            <date-picker
              type="date"
              range
              v-model="selectDate"
              placeholder="活动时间"
              value-type="format"
              @change="getSignUpList"
            />
          </div>
          <el-select
            placeholder="请选择活动状态"
            v-model="params.ActivityState"
            @change="getSignUpList"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </div>
        <div class="input-box">
          <el-input
            placeholder="请输入活动名称"
            prefix-icon="el-icon-search"
            v-model="params.Keyword"
            @input="getSignUpList"
            clearable
          />
        </div>
      </div>
    </el-card>
    <!-- 内容部分 -->
    <el-card>
      <el-table :data="list" border>
        <el-table-column align="center" label="活动标题" width="420">
          <template slot-scope="scope">
            <p class="text-button" @click="handleShowDetail(scope.row)">{{scope.row.ActivityName}}</p>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="ActivityTypeName" label="活动类别">
        </el-table-column>
        <el-table-column align="center" label="活动时间">
          <template slot-scope="{row}">
            {{row.StartTime|formatActivityTimeRange(row.EndTime)}}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="LimitPeopleNum" label="线下人数限制"></el-table-column>
        <el-table-column align="center" label="线下报名人数">
          <template slot-scope="scope">
            <el-button type="text" @click="detailOpen(scope.row)"
              >{{scope.row.RegisterPeopleNum}}</el-button>
          </template>
        </el-table-column>
        <el-table-column v-if="params.ActivityState===1" align="center" label="操作">
          <template slot-scope="{row}">
            <el-button type="text" @click="addDialogOpen(row)"
              >新增线下报名</el-button>
          </template>
        </el-table-column>
      </el-table>
      <m-page class="page" :total="total" :page_no="params.CurrentIndex" :pageSize="9" @handleCurrentChange="handleCurrentChange" />
    </el-card>
    <!-- 弹窗部分 -->
    <!-- 线下报名详情弹窗 -->
    <signUpDetail :ActivityId="CurrentActivityId" :state="params.ActivityState" :isShow.sync="isShowDetail" v-if="isShowDetail"/>
    <!-- 新增线下报名弹窗 -->
    <addSignUpDialog :ActivityId="CurrentActivityId" :isShow.sync="isShowAddDialog" v-if="isShowAddDialog"/>
    <!-- 详情弹窗 -->
      <el-dialog 
        v-dialogDrag 
        :append-to-body="true" 
        :visible.sync="showDetail" 
        width="600px" 
        center
      >
        <div slot="title">
            <img src="../../../assets/img/ficc_activity/flag.png" alt="" width="16" height="16" style="vertical-align: middle" />
            <span style="vertical-align: middle">活动详情</span>
        </div>
        <div class="ficc-activity-detail-wrap">
            <table class="table-wrap">
                <tr><td class="table-item dark-item">{{detailInfo.ActivityTypeName}}</td></tr>
                <tr><td class="table-item">活动名称：{{detailInfo.ActivityName}}</td></tr>
                <tr><td class="table-item">活动时间：{{detailInfo.StartTime|formatActivityTimeRange(detailInfo.EndTime)}}</td></tr>
                <tr><td class="table-item">活动地址：{{detailInfo.City}}{{detailInfo.Address}}</td></tr>
                <tr><td class="table-item">主讲人：{{detailInfo.Speaker}}</td></tr>
                <tr><td class="table-item">线下人数限制：{{detailInfo.LimitPeopleNum}}</td></tr>
                <tr><td class="table-item" v-if="detailInfo.MainlandTel">大陆拨入：{{detailInfo.MainlandTel}}</td></tr>
                <tr><td class="table-item" v-if="detailInfo.HongKongTel">香港拨入：{{detailInfo.HongKongTel}}</td></tr>
                <tr><td class="table-item" v-if="detailInfo.TaiwanTel">台湾拨入：{{detailInfo.TaiwanTel}}</td></tr>
                <tr><td class="table-item" v-if="detailInfo.SingaporeTel">新加坡拨入：{{detailInfo.SingaporeTel}}</td></tr>
                <tr><td class="table-item" v-if="detailInfo.AmericaTel">美国拨入：{{detailInfo.AmericaTel}}</td></tr>
                <tr><td class="table-item" v-if="detailInfo.ParticipationCode">拨入密码：{{detailInfo.ParticipationCode}}</td></tr>
                <tr><td class="table-item" v-if="detailInfo.LinkParticipants">网络参会：{{detailInfo.LinkParticipants}}</td></tr>
                <tr v-if="detailInfo.ReportLink"><td class="table-item">相关报告：{{detailInfo.ReportName}}</td></tr>
            </table>
            <div style="text-align:center;margin:30px 0">
                <el-button type="primary" style="width:150px" v-if="detailInfo.Poster" @click="handleDownLoadImg">下载活动海报</el-button>
                <el-button type="primary" @click="showDetail=false" style="width:150px">关闭</el-button>
            </div>
        </div>
      </el-dialog>
      <!-- 下载海报弹窗 -->
      <el-dialog 
        v-dialogDrag 
        :append-to-body="true" 
        :visible.sync="showDownLoadImg" 
        width="400px" 
        title="下载活动海报"
        center
      >
        <div v-if="detailInfo.Poster">
            <el-checkbox-group v-model="downPoster">
                <el-checkbox style="display:block;margin:5px 0" v-for="item in detailInfo.Poster" :key="item.Url" :label="item">{{item.Name}}</el-checkbox>
            </el-checkbox-group>
        </div>
        <div style="text-align:center;margin:30px 0">
            <el-button type="primary" plain @click="showDownLoadImg=false">取消</el-button>
            <el-button type="primary" @click="downloadImg">确定</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import moment from 'moment'
import { ficcManageInterface } from "@/api/api.js";
import mPage from '@/components/mPage.vue'
import signUpDetail from './components/signUpDetail.vue'
import addSignUpDialog from './components/addSignUpDialog.vue'
export default {
  data() {
    return {
      list: [], // 报名列表
      params: {
        PageSize: 9, // 每页条数
        CurrentIndex: 1,  // 当前页
        Keyword:'',  // 关键词
        ActivityState: 1  // 活动状态
      },
      selectDate:[],  //选择活动日期
      total:0,  // 总条数
      isShowDetail:false, // 详情弹窗是否显示
      isShowAddDialog:false, // 新增弹窗是否显示
      CurrentActivityId:-1,  // 当前活动id
      detailInfo:{},  // 详情信息
      showDetail:false,  // 详情弹窗是否显示
      showDownLoadImg:false,  // 下载海报弹窗是否显示
      downPoster:[],  //需要下载的海报
      options:[
        {label:'未开始',value:1},
        {label:'进行中',value:2},
        {label:'已结束',value:3}
      ], // 活动状态选项
    };
  },
  components: {
    mPage,
    signUpDetail,
    addSignUpDialog
  },
  created() {
    this.getSignUpList();
  },
  filters: {
    formatActivityTimeRange(start,end){
            const week=moment(start).format('dddd');
            const day=moment(start).format('YYYY-MM-DD');
            const startTime=moment(start).format('HH:mm');
            const endTime=moment(end).format('HH:mm');
            return `${day} ${startTime}-${endTime} ${week}`
        }
  },
  methods: {
    // 获取活动报名列表
    async getSignUpList() {
      try {
        const { Data } = await ficcManageInterface.activitySignupList({
          ...this.params,
          StartDate:this.selectDate[0]||'1970-01-01',
          EndDate:this.selectDate[1]||'9999-12-31',
        });
        this.total=Data.Paging.Totals
        this.list = Data.List;
      } catch (err) {
        console.dir(err);
      }
    },
    // 分页
    handleCurrentChange(page) {
      this.params.CurrentIndex = page;
      this.getSignUpList()
    },
    // 详情弹窗打开
    async detailOpen({ActivityId}){
      this.CurrentActivityId=ActivityId
      this.isShowDetail=true
    },
    // 新增报名窗口打开
    addDialogOpen({ActivityId}){
      this.CurrentActivityId=ActivityId
      this.isShowAddDialog=true
    },
    // 详情弹窗打开
    async handleShowDetail({ActivityId}){
      try{
        const res= await ficcManageInterface.activityDetail({activityId:ActivityId})
        if(res.Ret==200){
          this.detailInfo=res.Data
          this.showDetail=true
        }
      }catch(err){
        console.log(err);
      }
    },
    // 下载活动海报
        handleDownLoadImg(){
            if(this.detailInfo.Poster.length==1){
                this.downPoster=this.detailInfo.Poster
                this.downloadImg()
            }else{
                this.showDownLoadImg=true
            }
        },
        
        // 下载海报
        downloadImg(){
            this.downPoster.forEach(item=>{
                let img=new Image()
                img.setAttribute('crossOrigin', 'anonymous');
                img.src=item.Url
                img.onload=()=>{
                    let canvas = document.createElement("canvas");
                    canvas.width = img.width;
                    canvas.height = img.height;
                    let context = canvas.getContext('2d');
                    context.drawImage(img, 0, 0, img.width, img.height);
                    let dataURL = canvas.toDataURL("image/png", 1);
                    const a=document.createElement('a')
                    a.setAttribute("download",item.Name)
                    a.style.display = "none"
                    a.href=dataURL
                    document.body.appendChild(a);
                    a.click()
                }
            })
        }
  }
};
</script>

<style lang="scss" scoped>
 .container-signup {
  .top-card-box {
    margin-bottom: 20px;
  }
  .top-card {
    display: flex;
    justify-content: space-between;
    .select-box{
      display: flex;
      .date-box{
        width: 393px;
        margin-right: 10px;
        .mx-datepicker{
          width: 100% !important;
        }
      }
    }
    .input-box{
      width: 520px;
    }
  }
  .page{
    margin: 20px 0;
  }
}
.text-button{
  color: #409EFF;
  cursor: pointer;
}
.ficc-activity-detail-wrap{
        .table-wrap {
            color: #666;
            width: 100%;
            // text-align: center;
            border-top: 1px solid #dcdfe6;
            border-left: 1px solid #dcdfe6;
            .table-item {
                padding: 14px 30px;
                border-right: 1px solid #dcdfe6;
                border-bottom: 1px solid #dcdfe6;
                position: relative;
            }
            .dark-item{
                background: #F0F2F5;
                text-align: center;
            }
        }
    }
</style>