<template>
    <div class="ficc-activity-list-wrap">
        <div class="content-wrap">
            <div class="select-wrap">
                <el-input placeholder="请输入活动名称" v-model="searchVal" style="max-width: 400px; float: left"
                    @input="handleTypeChange" clearable>
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
                <el-date-picker v-model="timeRange" type="daterange" range-separator="至" start-placeholder="活动开始日期"
                    end-placeholder="活动结束日期" value-format="yyyy-MM-dd" @change="handleTypeChange"
                    style="margin-left: 30px">
                </el-date-picker>

            </div>
            <div class="list-wrap">
                <el-table :data="list" border>
                    <el-table-column key="活动名称" align="center" prop="Title" label="活动名称" min-width="40%">
                    </el-table-column>
                    <el-table-column key="活动时间" align="center" prop="StartTime" label="活动时间" min-width="25%">
                        <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="People" label="参会人数" min-width="15%">
                    </el-table-column>
                    <el-table-column key="操作" align="center" label="操作" min-width="20%">
                        <template slot-scope="{row}">
                            <!-- <span @click="jmEventDetail(scope.row)" style="color: #4099ef; cursor: pointer">到会详情</span> -->
                            <!-- 管理员：到会详情 分享/被分享人（ -->
                            <template v-if="Role.includes('admin')">
                              <el-button type="text" size="small"  @click="jmEventDetail(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="jmEventDetail(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="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 {
    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");
        },
    },
    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' }
                ],
            },
            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.getJmAttendList();
    },

    methods: {
        init() {
            this.page = 1;
        },

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

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

        // 获取进门到会列表
        async getJmAttendList() {
            const res = await ficcManageInterface.jmAttendList({
                Keyword: this.searchVal,
                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;
            }
        },
        
        //进门到会详情
        jmEventDetail(e) {
            const { href } = this.$router.resolve({
                path: '/jmAttendDetail',
                query: {
                    eventId: e.ComeinEventId,
                }
            });
            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 {ComeinEventId} = this.detailInfo
          if(!this.ShareSellerId){
            this.$message.warning('请选择销售')
            return
          }
          ficcManageInterface.jm_shareSeller({
            ComeinEventId,SellerId:Number(this.ShareSellerId)
          }).then(res=>{
            if(res.Ret!==200) return 
            this.$message.success('分享销售成功')
            this.getJmAttendList()
            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: 20px;

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