<!--suppress ALL -->
<template>
    <section class="appThreeMeetingUser init-list-table bg369">
        <ai-title title="统计详情" isShowBack @onBackClick="$parent.goBack()" isShowBottomBorder></ai-title>
        <div class="main-content">
            <el-row class="searchBar border-radius2" type="flex" justify="space-between" :style="search.style" :gutter="2" style="border-bottom: 1px solid #eee;">
                <el-col style="margin-bottom:6px">
                    <el-row :gutter="8" type="flex">
                      <section v-for="(item,i) in columns" :key="i">
                        <el-col v-if="item.type=='select'" :span="4">
                          <el-select size="small" v-model="search[item.prop]" :placeholder=" item.label" @change="$forceUpdate(),page.current=1,getAppThreeMeetingUser()" clearable>
                            <el-option v-for="(op,j) in dict.getDict(item.dict)" :key="j" :label="op.dictName"
                                       :value="op.dictValue"/>
                          </el-select>
                        </el-col>
                        <el-col v-else-if="item.type=='time'" :span="8" type="flex">
                          <span class="dateTitle">{{item.label}}</span>
                          <el-date-picker size="small" v-model="search[item.prop]" placeholder="请选择" type="daterange"
                                          :start-placeholder="item.prop+'开始时间'"
                                          :end-placeholder="item.prop+'结束日期'"></el-date-picker>
                        </el-col>
                        <el-col v-else-if="item.type=='num'" :span="8" style="display: flex;" type="flex">
                          <span class="dateTitle">{{item.label}}</span>
                          <ai-range v-model="search[item.prop]" />
                        </el-col>
                      </section>
                    </el-row>
                </el-col>
                <el-col style="width: auto;display: flex;margin-bottom:6px">
                    <el-col>
                      <el-input size="small" v-model="search.meetingUserName" placeholder="姓名"
                                prefix-icon="iconfont iconSearch" clearable @keyup.enter.native="page.current=1,getAppThreeMeetingUser()"></el-input>
                    </el-col>
                    <el-button size="mini" type="primary" icon="iconfont iconSearch" style="margin-left:5px;"
                               @click="page.current=1,getAppThreeMeetingUser()">查询
                    </el-button>
                    <el-button size="mini" icon="el-icon-refresh-right" style="margin-left:5px;" @click="resetSearch">
                        重置
                    </el-button>
                </el-col>
            </el-row>
            <el-table ref="multipleTable" :data="tableData" style="margin-top:16px;"
                      header-cell-class-name="table-header"
                      tooltip-effect="light" row-class-name="table-row" cell-class-name="table-cell" @selection-change="handleSelectionChange">
                <el-table-column prop="meetingUserName" label="姓名" align="center">
                    <div slot-scope="{row}">{{row.meetingUserName || "-"}}</div>
                </el-table-column>
                <el-table-column prop="joinStatus" label="参会情况" align="center">
                    <div slot-scope="{row}"> {{dict.getLabel('joinStatus',row.joinStatus)||'-'}}</div>
                </el-table-column>
                <el-table-column prop="absence" label="请假原因">
                    <div slot-scope="{row}">{{row.absence || "-"}}</div>
                </el-table-column>
                <el-table-column prop="signMethod" label="签到方式" align="center">
                    <div slot-scope="{row}"> {{dict.getLabel('signMethod',row.signMethod)||'-'}}</div>
                </el-table-column>
                <el-table-column prop="signStatus" label="签到状态" align="center">
                    <div slot-scope="{row}"> {{dict.getLabel('signStatus',row.signStatus)||'-'}}</div>
                </el-table-column>
                 <el-table-column prop="signTime" label="签到时间" align="center">
                    <div slot-scope="{row}">{{row.signTime || "-"}}</div>
                </el-table-column>
                <el-table-column prop="signUserName" label="代签人" align="center">
                    <div slot-scope="{row}">{{row.signUserName || "-"}}</div>
                </el-table-column>
                <el-table-column prop="operate" label="操作" width="240" align="center">
                    <div slot-scope="{row}">
                        <span class="iconfont iconqiandao icon-color89B" style="cursor: pointer;"
                        title="签到" @click="changeStatus(row, 0)" v-if="row.signMethod != 1"></span>
                        <span class="iconfont iconqingjia icon-color89B" style="cursor: pointer;"
                        title="请假"  @click="changeStatus(row, 1)"></span>
                        <span class="iconfont iconRepulse icon-color89B" style="cursor: pointer;"
                        title="重置" v-if="meetingStatus != 4" @click="changeStatus(row, 2)"></span>
                    </div>
                    <!-- <el-radio-group slot-scope="{row}" v-model="row.operation" @change="changeStatus(row)">
                        <el-radio :label="0">签到</el-radio>
                        <el-radio :label="1">请假</el-radio>
                        <el-radio :label="2" v-if="meetingStatus != 4">重置</el-radio>
                    </el-radio-group> -->
                </el-table-column>
                <div slot="empty" class="no-data" style="height:160px;"></div>
            </el-table>
            <div class="pagination">
                <el-pagination background
                                @current-change="handleCurrentChange"
                                @size-change="handleSizeChange"
                               layout="total,prev, pager, next,sizes, jumper"
                               :total="page.total">
                </el-pagination>
            </div>
        </div>
        <el-dialog :visible.sync="leaveMask" title="请假" width="520px" class="mask label-110"
            :close-on-click-modal="false"
            :before-close="maskInit" @close="maskInit">
            <div class="content input-240">
                <el-form ref="leaveMask" :rules="rules" :model="leaveInfo" label-width="100px">
                    <el-form-item label="请假原因："  class="user"  prop="leaveText">
                        <el-input  type="textarea" :rows="3" v-model="leaveInfo.leaveText" placeholder="请输入请假原因"/>
                    </el-form-item>
                </el-form>
            </div>
            <div class="operation">
                <el-button class="delete-btn" @click="maskInit" mini>取消</el-button>
                <el-button type="primary" @click="confirmMask('leaveMask')" mini>确认</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    import {mapState} from "vuex";

    export default {
        name: "appThreeMeetingUser",
        props: {
            instance: Function,
            dict: Object,
            permissions: Function,
            meetingId:String,
            detail: Object,
            meetingStatus: String
        },
        data() {
            return {
                activeName: 'first',
                tableData: [],
                columns: [
                      {
                          label: '编号',
                          prop: 'id',
                          type: '',
                          dict:  ''
                      },
                      {
                          label: '会议编号',
                          prop: 'meetingId',
                          type: '',
                          dict:  ''
                      },
                      {
                          label: '参会人员角色',
                          prop: 'meetingUserRole',
                          type: '',
                          dict:  'meetingUserRole'
                      },
                      {
                          label: '会议人员编号',
                          prop: 'meetingUserId',
                          type: '',
                          dict:  ''
                      },
                      {
                          label: '会议人员姓名',
                          prop: 'meetingUserName',
                          type: '',
                          dict:  ''
                      },
                      {
                          label: '参会情况',
                          prop: 'joinStatus',
                          type: 'select',
                          dict:  'joinStatus'
                      },
                      {
                          label: '签到状态',
                          prop: 'signStatus',
                          type: 'select',
                          dict:  'signStatus'
                      },
                      {
                          label: '签到方式',
                          prop: 'signMethod',
                          type: 'select',
                          dict:  'signMethod'
                      },
                      {
                          label: '请假原因',
                          prop: 'absence',
                          type: '',
                          dict:  ''
                      },
                      {
                          label: '创建时间',
                          prop: 'createDate',
                          type: '',
                          dict:  ''
                      },
                      {
                          label: '签到人',
                          prop: 'signUserId',
                          type: '',
                          dict:  ''
                      },
                      {
                          label: '签到时间',
                          prop: 'signTime',
                          type: '',
                          dict:  ''
                      },
                      {
                          label: '操作',
                          prop: 'operate',
                          type: '',
                          dict:  ''
                      },
                                  ],
                search: {
                    style: {},
                    meetingUserName: "",
                    meetingId:""
                },
                page: {
                    current: 1,
                    size: 10,
                    total: 0,
                },
                leaveMask: false,
                leaveInfo: {
                    leaveText: ''
                },
                rules: {
                    leaveText: [{ required: true, message: '请输入请假原因', trigger: 'blur' }]
                },
                meetingInfo: {}, //点击操作的item
            }
        },
        methods: {
            confirmMask(formName) {
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.signMeeting(0, 1, '', this.leaveInfo.leaveText, this.user.info.id, this.user.info.name, '', '请假成功')
                } else {
                    return false;
                }
                });
            },
            maskInit() {
                this.leaveMask = false
            },
            changeStatus(item, operation) {
                this.meetingInfo = item
                if(this.meetingStatus == 0) { //0未发布 1已发布 2已取消 3进行中 4已结束
                    this.$message({ message: '会议未发布，请发布后再操作', type: 'warning'});
                    return
                }
                if(item.meetingSignMethod == 1) { //签到方式为不签到
                    this.$message({ message: '签到方式选择为不签到，不可操作', type: 'warning'});
                    return
                }
                if(this.meetingStatus == 1) {
                    let d = new Date()
                    let time = item.meetingBefore
                    let beginTimestamp = new Date(time.replace(/\-/g, "\/"))
                    let newTimestamp = new Date(d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate()  + ' ' + d.getHours() + ':' + d.getMinutes())
                    if (newTimestamp < beginTimestamp) {
                        this.$message({ message: '未到签到时间，不可操作', type: 'warning'});
                        return
                    }
                }
                if(this.meetingStatus == 2) {
                    this.$message({ message: '会议已取消，不可操作', type: 'warning'});
                    return
                }

                // if(this.meetingStatus == 3) {
                //     let d = new Date()
                //     let time = item.meetingAfter
                //     let endTimestamp = new Date(time.replace(/\-/g, "\/"))
                //     let newTimestamp = new Date(d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate()  + ' ' + d.getHours() + ':' + d.getMinutes())
                //     if (endTimestamp > newTimestamp) { //代签
                //         this.operationStatus(operation)
                //     }
                // }

                if(!operation) { //0为签到
                    this.$confirm('确定签到吗?', '', {
                        type: 'info'
                    }).then(() => {
                        this.operationStatus(operation)
                    }).catch(() => {
                        return
                    });
                }else {
                    this.operationStatus(operation)
                }
            },
            operationStatus(status) {
                if(status == 0) { //签到
                    let signTime = new Date().getFullYear() + '-' + this.isDate(new Date().getMonth() + 1) + '-' + this.isDate(new Date().getDate())  + ' ' + this.isDate(new Date().getHours()) + ':' + this.isDate(new Date().getMinutes()) + ':' + this.isDate(new Date().getSeconds())
                    this.signMeeting(1, 0, 1, '', this.user.info.id, this.user.info.name, signTime, '签到成功')
                }
                if(status == 1) { //请假
                    this.leaveMask = true
                    this.leaveInfo.leaveText = ''
                }
                if(status == 2) { //重置
                    this.$confirm(`确认将该成员签到状态重置吗？`, {type: 'warning'}).then(() => {
                        this.signMeeting('', '', '', '', '', '', '', '重置成功')
                    })
                }
            },
            isDate(num) {
                if(num < 10) {
                    num = '0' + num
                }
                return num
            },
            signMeeting(signStatus, joinStatus, signMethod, absence, signUserId, signUserName, signTime, succText) {
                var params = {
                    signStatus,
                    joinStatus,
                    signMethod,
                    absence,
                    signUserId,
                    signUserName,
                    signTime,
                    id: this.meetingInfo.id,
                    meetingUserId: this.meetingInfo.meetingUserId,
                    meetingId: this.meetingInfo.meetingId
                }
                this.instance.post("/app/appthreemeetinguser/addOrUpdate", params).then(res => {
                    if(res.code==0){
                        this.maskInit()
                        this.$message.success(succText)
                        this.getAppThreeMeetingUser()
                    }
                })

            },
            isPermit(params) {
                return this.permissions ? this.permissions(params) : false
            },
            handleSelectionChange(){},
            //分页
            handleCurrentChange(val) {
                this.page.current = val;
                this.getAppThreeMeetingUser();
            },
            //分页
            handleSizeChange(val){
                this.page.size = val
                this.page.current = 1
                this.getAppThreeMeetingUser()
            },
            //重置
            resetSearch() {
                this.page.current = 1
                this.page.size = 10
                this.columns.map(c => {if(c.type) this.search[c.prop] = null})
                Object.keys(this.search).forEach((e)=>{
                  this.search[e]=null;
                })
                this.getAppThreeMeetingUser()
            },
            //列表
            getAppThreeMeetingUser() {
                var meetingId = this.meetingId
                this.instance.post("/app/appthreemeetinguser/list", null, {
                        params: {
                            ...this.search,
                            ...this.page,
                            meetingId
                        }
                    }).then(res => {
                    if(res.code==0){
                        this.tableData=res.data.records;
                        this.page.total=res.data.total;
                        this.tableData.map((item) => {
                            if(item.signStatus == 1) {  //签到
                                item.operation = 0
                            }
                            if(item.joinStatus == 1) { //请假
                                item.operation = 1
                            }
                            return item
                        })
                    }
                    }
                )
            },
            //请假,签到,取消代签
            updateStatus(row,text){
                var body = {};
                if(text == '请假'){
                    body = {
                        id:row.id,
                        joinStatus:'1'
                    }
                }
                 if(text == '签到'){
                    body = {
                        id:row.id,
                        signStatus:'1'
                    }
                }
                 if(text == '取消代签'){
                    body = {
                        id:row.id,
                        signStatus:'0'
                    }
                }
                console.log(body)
                this.$confirm(`是否${text}?`, {type: 'warning'}).then(() => {
                    this.instance.post("/app/appthreemeetinguser/addOrUpdate", body).then((res) => {
                        if(res.code ==0){
                            this.maskInit()
                            this.getAppThreeMeetingUser()
                            this.$message.success(`操作成功!`)
                        }
                    })
                })

            }

        },
        mounted() {
          if (this.dict) this.dict.load(this.columns.map(e => e.type == 'select' ? e.dict : ''))
        //   console.log(this.detail)
          this.resetSearch()
        },
        computed: {
            ...mapState(['user']),
        }
    }
</script>
<style scoped lang="scss">
.appThreeMeetingUser{
    :deep( .el-radio){
        margin-right: 16px!important;
    }
    :deep( .el-radio__label){
        padding-left: 4px!important;
    }
    .operation {
        overflow: hidden;
        //   position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 64px;
        line-height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f3f6f9;
        box-shadow: inset 0 1px 0 0 #eeeeee;
    }
    :deep( .el-textarea){
        width: 362px;
    }
}
</style>
