<template>
    <div class="ficc-activity-list-wrap">
        <div class="content-wrap">
            <div class="select-wrap">
                <el-cascader placeholder="请选择活动类别" v-model="activeType" :options="typeList" clearable
                    :collapse-tags="true" :props="{
                        value: 'ActivityTypeId',
                        label: 'ActivityTypeName',
                        children: 'ChildList',
                        multiple: true,
                    }" style="margin-right: 30px; min-width: 310px" @change="handleTypeChange">
                </el-cascader>
                <el-date-picker v-model="timeRange" type="daterange" range-separator="至" start-placeholder="活动开始日期"
                    end-placeholder="活动结束日期" value-format="yyyy-MM-dd" @change="handleTypeChange"
                    style="margin-right: 30px">
                </el-date-picker>
                <el-input placeholder="请输入活动标题" v-model="searchVal" style="max-width: 400px; float: right"
                    @input="handleTypeChange" clearable>
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
            </div>
            <div class="list-wrap">
                <el-table :data="list" border>
                    <el-table-column key="活动标题" align="center" prop="ActivityName" label="活动标题">
                        <template slot-scope="scope">
                            <span class="title" @click="handleShowDetail(scope.row)">{{
                                    scope.row.ActivityName
                            }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column key="活动类别" align="center" prop="ActivityTypeName" label="活动类别" width="200px">
                    </el-table-column>
                    <el-table-column key="活动时间" align="center" prop="StartTime" label="活动时间" width="250px">
                        <template slot-scope="scope">
                            <span class="time">{{
                                    scope.row.StartTime | formatActivityTimeRange(scope.row.EndTime)
                            }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column key="开始时间" align="center" prop="EventStartTime" label="开始时间" width="180px">
                        <template slot-scope="scope">
                            <span class="time" v-if="scope.row.QsStatus == 2">{{
                                    formatTimeRange(scope.row.EventStartTime)
                            }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column key="持续时长" align="center" prop="RealTime" label="持续时长" width="180px">
                        <template slot-scope="scope">
                              <span class="time" v-if="scope.row.QsStatus == 2">{{
                                    scope.row.RealTime
                            }}分钟</span>
                        </template>
                    </el-table-column>
                    <el-table-column key="出现方数" align="center" prop="People" label="出现方数" width="180px">
                         <template slot-scope="scope">
                              <span class="time" v-if="scope.row.QsStatus == 2">{{
                                   scope.row.People
                            }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column key="操作" align="center" label="操作" width="250px">
                        <template slot-scope="{row}">
                            <!-- <span v-if="scope.row.QsStatus==2" @click="quanShiEventDetail(scope.row)"
                                style="color: #4099ef; cursor: pointer">到会详情</span> -->
                            <!-- 管理员：到会详情 分享/被分享人（ -->
                            <template v-if="Role.includes('admin')">
                              <el-button type="text" size="small"  @click="quanShiEventDetail(row)">到会详情</el-button>
                              <el-button type="text" size="small"  @click="handleChooseSeller(row)" v-if="!row.ShareSellerId">分享</el-button>
                              <span v-else style="font-size: 12px;margin-left: 6px;">
                                被分享人（{{ row.ShareSellerName }}）
                              </span>
                            </template>
                            <!-- 非管理员：到会详情 -->
                            <template v-else>
                              <el-button type="text" size="small"  v-if="AdminId==row.ShareSellerId" 
                                @click="quanShiEventDetail(row)">到会详情</el-button>
                            </template>
                        </template>
                    </el-table-column>
                    <div slot="empty" style="padding: 150px 0">暂无数据</div>
                </el-table>
            </div>
            <!-- 分页 -->
            <el-pagination layout="total,prev,pager,next,jumper" background :current-page="page"
                @current-change="handlePageChange" :page-size="pageSize" :total="total" class="pagination-wrap">
            </el-pagination>
        </div>

        <!-- 详情弹窗 -->
        <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 v-if="detailInfo.City">
                        <td class="table-item">
                            活动地址：{{ detailInfo.City }}{{ detailInfo.Address }}
                        </td>
                    </tr>
                    <tr>
                        <td class="table-item">主讲人：{{ detailInfo.Speaker }}</td>
                    </tr>
                    <tr v-if="detailInfo.LimitPeopleNum">
                        <td class="table-item">
                            线下人数限制：{{ detailInfo.LimitPeopleNum }}
                        </td>
                    </tr>
                    <tr v-if="detailInfo.MainlandTel">
                        <td class="table-item">大陆拨入：{{ detailInfo.MainlandTel }}</td>
                    </tr>
                    <tr v-if="detailInfo.HongKongTel">
                        <td class="table-item">香港拨入：{{ detailInfo.HongKongTel }}</td>
                    </tr>
                    <tr v-if="detailInfo.TaiwanTel">
                        <td class="table-item">台湾拨入：{{ detailInfo.TaiwanTel }}</td>
                    </tr>
                    <tr v-if="detailInfo.SingaporeTel">
                        <td class="table-item">
                            新加坡拨入：{{ detailInfo.SingaporeTel }}
                        </td>
                    </tr>
                    <tr v-if="detailInfo.AmericaTel">
                        <td class="table-item">美国拨入：{{ detailInfo.AmericaTel }}</td>
                    </tr>
                    <tr v-if="detailInfo.ParticipationCode">
                        <td class="table-item">
                            拨入密码：{{ detailInfo.ParticipationCode }}
                        </td>
                    </tr>
                    <tr v-if="detailInfo.LinkParticipants">
                        <td class="table-item">
                            网络参会：{{ detailInfo.LinkParticipants }}
                        </td>
                    </tr>
                    <tr v-if="detailInfo.ReportLink">
                        <td class="table-item">相关报告：{{ detailInfo.ReportName }}</td>
                    </tr>
                    <tr>
                        <td class="table-item">主持人入会密码：{{ detailInfo.HostCode }}</td>
                    </tr>
                </table>
                <div style="text-align: center; margin: 30px 0">
                    <el-button type="primary" style="width: 150px" v-if="detailInfo.PosterList"
                        @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="showChooseSellerDialog" 
          :title="detailInfo.ShareSellerId?'分享记录':'分享活动'" width="600px" center>
            <div class="ficc-activity-detail-wrap">
              <div class="select-seller" style="display:flex;align-items:center;justify-content: center;">
                <p style="margin-right:10px;">选择销售</p>
                <el-select style="width:80%;" v-model="ShareSellerId" 
                  :disabled="detailInfo.ShareSellerId"
                  placeholder="请选择销售">
                  <el-option v-for="item in sellerList" :key="item.AdminId" 
                    :label="item.RealName"
                    :value="item.AdminId"
                  />
                </el-select>
              </div>
              <div style="text-align: center; margin: 30px 0" v-if="!detailInfo.ShareSellerId">
                <el-button @click="showChooseSellerDialog = false" style="width: 150px">取消</el-button>
                <el-button  type="primary" @click="chooseSeller" style="width: 150px">确定</el-button>
              </div>
              <div style="text-align: center; margin: 30px 0" v-else>
                <el-button  type="primary" @click="showChooseSellerDialog = false" style="width: 150px">知道了</el-button>
              </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { ficcManageInterface,customInterence } from "@/api/api";
import moment from "moment";
export default {
    name: "ficcActivityList",
    filters: {
        /**
         * 活动时间格式化
         * @param {2021-11-12T09:25:01+08:00} start 开始时间
         * @param 2021-11-12T09:25:01+08:00 end 结束时间
         * @returns 2020-06-04 15:30-16:30 星期一
         */
        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}`;
        },

        formatActivityTime(time) {
            return moment(time).format("YYYY.MM.DD HH:mm:ss");
        },
    },
    //进入前是否清除参数
    beforeRouteEnter(to, from, next) {
        if (from.path != "/ficcActivityAdd" && from.path != "/ficcActivityEdit") {
            sessionStorage.removeItem("ficcActivityList");
        }
        next();
    },
    //离开前缓存页面状态
    beforeRouteLeave(to, from, next) {
        let obj = {
            searchVal: this.searchVal,
            activityStatus: this.activityStatus,
            publishStatus: this.publishStatus,
            timeRange: this.timeRange,
            page: this.page,
            activeType: this.activeType,
        };
        sessionStorage.setItem("ficcActivityList", JSON.stringify(obj));
        next();
    },
    data() {
        return {
            quanshiForm: {
                name: 60,
                region: 200,
            },
            quanshiRules: {
                name: [
                    { required: true, message: '请输入会议时长', trigger: 'blur' },
                    { min: 30, max: 1200, message: '请输入会议时长', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '填写最大方数', trigger: 'change' }
                ],
            },
            searchVal: "",
            activityStatus: 1,
            typeList: [],
            activeType: [],
            publishStatus: "",
            timeRange: [],
            list: [],
            page: 1,
            pageSize: 10,
            total: 0,

            detailInfo: {},
            showDetail: false,
            showChooseSellerDialog:false,
            sellerList:[],
            ShareSellerId:''
        };
    },
    computed:{
      Role(){
        return localStorage.getItem('Role')
      },
      AdminId(){
        return localStorage.getItem('AdminId')
      }
    },
    created() {
        this.init();
        this.getActivityTypeList();
        this.getAttendList();
    },
    methods: {
        init() {
            let obj = JSON.parse(sessionStorage.getItem("ficcActivityList")) || {};
            this.searchVal = obj.searchVal || "";
            this.activityStatus = obj.activityStatus || 1;
            this.activeType = obj.activeType || [];
            this.publishStatus = obj.publishStatus || "";
            this.timeRange = obj.timeRange || [];
            this.page = obj.page || 1;
        },

        handleShowDetail(e) {
            this.detailInfo = e;
            this.showDetail = true;
        },

        // 活动状态切换
        handleActivityStatusChange(e) {
            this.page = 1;
            this.searchVal = "";
            this.activityStatus = e;
            this.activeType = [];
            this.publishStatus = "";
            this.timeRange = [];
            this.getAttendList();
        },

        //筛选
        handleTypeChange() {
            this.page = 1;
            this.getAttendList();
        },

        handlePageChange(e) {
            this.page = e;
            this.getAttendList();
        },

        // 获取活动分类
        async getActivityTypeList() {
            const res = await ficcManageInterface.activityTypeList();
            if (res.Ret === 200) {
                this.typeList = res.Data || [];
            }
        },

        // 获取到会列表
        async getAttendList() {
            let ids = []; //选择的分类
            this.activeType.forEach((item) => {
                ids.push(item[item.length - 1]);
            });
            const res = await ficcManageInterface.quanshiAttendList({
                Keyword: this.searchVal,
                ActivityTypeIds: ids.join(","),
                StartDate: (this.timeRange && this.timeRange[0]) || "",
                EndDate: (this.timeRange && this.timeRange[1]) || "",
                CurrentIndex: this.page,
                PageSize: this.pageSize,
            });
            if (res.Ret === 200) {
                this.list = res.Data.List || [];
                this.total = res.Data.Paging.Totals;
            }
        },
        quanShiEventDetail(e) {
            const { href } = this.$router.resolve({
                path: '/attendDetail',
                query: {
                    id: e.QsId,
                }
            });
            window.open(href, '_blank');
        },
        formatTimeRange(time) {
            return moment(time).format("YYYY.MM.DD HH:mm:ss");
        },
        handleChooseSeller(data){
          this.detailInfo = data
          this.ShareSellerId = data.ShareSellerId?data.ShareSellerId:''
          this.showChooseSellerDialog = true
          customInterence.saleslist({SellerType:1}).then(res=>{
            if(res.Ret!==200) return
            this.sellerList = res.Data.List||[]
          })
        },
        chooseSeller(){
          const {QsId} = this.detailInfo
          if(!this.ShareSellerId){
            this.$message.warning('请选择销售')
            return
          }
          ficcManageInterface.qs_shareSeller({
            QsId,SellerId:Number(this.ShareSellerId)
          }).then(res=>{
            if(res.Ret!==200) return 
            this.$message.success('分享销售成功')
            this.getAttendList()
            this.showChooseSellerDialog = false
          })
        }
    },
};
</script>

<style lang="scss" scoped>
.ficc-activity-list-wrap {
    div {
        box-sizing: border-box;
    }

    .top-wrap {
        background: #ffffff;
        border: 1px solid #ececec;
        border-radius: 4px;
        padding: 20px 30px;

        .el-button {
            background-color: #ecf5ff;
            border: 1px solid #b3d8ff;
            color: #409eff;
        }

        .el-button--primary {
            background-color: #409eff;
            border: none;
            color: #ffffff;
        }
    }

    .content-wrap {
        margin-top: 20px;
        min-height: 70vh;
        background: #ffffff;
        border: 1px solid #ececec;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
        border-radius: 4px;
        padding: 30px;
        padding-bottom: 65px;
        position: relative;

        .pagination-wrap {
            position: absolute;
            bottom: 24px;
            right: 30px;
        }
    }

    .list-wrap {
        margin-top: 40px;

        .title {
            color: #409eff;
            cursor: pointer;
        }

        .opt-btn {
            cursor: pointer;
            color: #409eff;
            margin: 0 5px;
        }
    }
}

.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>