<template>
    <d2-container>
        <div class="d2-table-view-full">
            <div class="d2-table-view-header">
                <el-form size="small" :inline="true" :model="filter" @keyup.enter.native="handleList"
                         class="demo-form-inline">
                    <el-form-item label="工号">
                        <el-input v-model="filter.jobNumber" clearable/>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model="filter.intervieweeName" clearable/>
                    </el-form-item>
                    <el-form-item label="有效日期">
                        <el-date-picker
                                v-model="time"
                                type="datetimerange"
                                @change="dateChange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd HH:mm:ss" clearable></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleList('1')">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="d2-table-view-content">
                <div class="d2-table-view-handle">
                    <el-button @click="operVisible = !operVisible" size="small" icon="el-icon-plus">新增</el-button>
                    <el-button size="small" @click="onMutilDelClick">批量删除</el-button>
                </div>
                <d2-crud
                        title="被访人权限"
                        :columns="columns"
                        :data="data"
                        :options="tableOptions"
                        :loading="loading"
                        :rowHandle="rowHandle"
                        @edit="handleRowEdit"
                        @delete="handleRowDelete"
                        selection-row
                        @selection-change="handleSelectionChange"
                ></d2-crud>
            </div>
            <div class="d2-table-view-footer">
                <el-pagination
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        :page-size="tableOptions.pageList[0]"
                        :page-sizes="tableOptions.pageList"
                        :current-page.sync="currentPage"
                        layout="total,sizes, prev, pager, next,jumper"
                        :total="pagination.total"
                ></el-pagination>
            </div>
        </div>
        <el-dialog
                :title="diaLogName"
                :visible.sync="operVisible"
                @close="clearForm"
                width="55%"
                :close-on-click-modal="false">
            <el-form ref="form" :model="form" label-width="100px" labelPosition="right" :rules="rules">
                <el-row :gutter="16">
                    <el-col :span="11">
                        <el-form-item label="被访人姓名" prop="intervieweeName">
                            <el-input v-model="form.intervieweeName" disabled >
                            <el-button slot="append" icon="el-icon-search" @click="visibleClick"></el-button>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="工号">
                            <el-input  v-model="form.jobNumber" disabled/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="所属部门">
                            <el-input v-model="form.orgName" disabled/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="有效日期" prop="date">
                            <el-date-picker
                                    v-model="date"
                                    type="datetimerange"
                                    @change="dateChange2"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="冻结日期"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    style="width: 100%"
                                    clearable></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="所属区域" prop="resId">
                            <el-select v-model="form.resId" placeholder="请选择" style="width: 100%;">
                                <el-option
                                        v-for="item in areaoptions"
                                        :key="item.resId"
                                        :label="item.resName"
                                        :value="item.resId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-table
                    ref="multipleTable"
                    :data="equdata"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionEquChange">
                <el-table-column
                        type="selection"
                        width="60">
                </el-table-column>
                <el-table-column
                        prop="equ"
                        label="区域/设备"
                        show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>{{scope.row.resName }}/{{scope.row.doorNm}}/{{scope.row.eqpNm}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
     		    <zl-button :loading="staLoading" @click="operInstanceEqu('form')"/>
            </span>
        </el-dialog>
        <el-dialog
                title="人员选择"
                :modal="false"
                :visible.sync="dialogVisible"
                width="35%"
                center>
            <el-tree show-checkbox style="height: 400px;overflow: auto"
                     ref="tree" highlight-current :data="treeData"
                     node-key="id" :props="defaultProps" >
				 <span class="icon-tree" slot-scope="{ node, data }">
                     <div v-if="data.alias == 'top'">
                         <i class="fa fa-university"></i>
                         <span>&nbsp;{{node.label}}</span>
                     </div>
                     <div v-if="data.alias == 'JG001'">
                         <i class="fa fa-building"></i>
                         <span>&nbsp;{{node.label}}</span>
                     </div>
                     <div v-if="data.alias == 'JG002'">
                         <i class="fa fa-building"></i>
                         <span>&nbsp;{{node.label}}</span>
                     </div>
                     <div v-if="data.alias == 'JG003'">
                         <i class="fa fa-users"></i>
                         <span>&nbsp;{{node.label}}</span>
                     </div>
                     <div v-if="data.alias == 'user'">
                         <i class="fa fa-users"></i>
                         <span>&nbsp;{{node.label}}</span>
                     </div>
                 </span>
            </el-tree>
            <span slot="footer" class="dialog-footer">
                <zl-button @click="operInstance()"/>
            </span>
        </el-dialog>
    </d2-container>
</template>

<script>
    import {getPageList, areaPullDown, equipmentList, deleteList,getList,saveOrUpdataList,Tree} from "../../../../api/visitor/set/respondents";
    import {tableOptions} from "../../../../assets/options";

    export default {
        name: "index",
        data() {
            return {
                dialogVisible:false,
                treeData:[],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                currentPage: 1,
                pagination: {
                    total: 0
                },
                type: 'teacher',
                tableOptions,
                diaLogName: '新增',
                operVisible: false,
                areaoptions: [],
                selection: [],
                multipleSelection: [],
                loading: false,
                isEdit: false,
                staLoading: false,
                time: '',
                equdata: [],
                id: [],
                filter: {
                    jobNumber: '',
                    intervieweeName: '',
                    expirationDate: '',
                    frozenDate: '',
                    pageSize: 10,
                    pageNum: 1,
                },
                columns: [
                    {
                        title: '工号',
                        key: 'jobNumber',
                        minWidth: '80',
                        showOverflowTooltip: true
                    },
                    {
                        title: '被访人姓名',
                        key: 'intervieweeName',
                        minWidth: '110',
                        showOverflowTooltip: true
                    },
                    {
                        title: '部门',
                        key: 'orgName',
                        minWidth: '80',
                        showOverflowTooltip: true
                    },
                    {
                        title: '开始日期',
                        key: 'expirationDate',
                        minWidth: '100',
                        showOverflowTooltip: true
                    },
                    {
                        title: '失效日期',
                        key: 'frozenDate',
                        minWidth: '100',
                        showOverflowTooltip: true
                    },
                    {
                        title: '权限信息',
                        key: 'areaId',
                        minWidth: '180',
                        showOverflowTooltip: true
                    },
                ],
                rowHandle: {
                    columnHeader: '操作',
                    minWidth: '180',
                    align: 'center',
                    custom: [
                        {
                            text: '编辑',
                            type: 'primary',
                            size: 'small',
                            emit: 'edit',
                        },
                        {
                            text: '删除',
                            type: 'danger',
                            size: 'small',
                            emit: 'delete',
                        },
                    ]
                },
                data: [],
                serialNo:[],
                form: {
                    id:'',
                    userId: '',
                    expirationDate: '',
                    frozenDate: '',
                    areaId: '',
                    intervieweeName: '',
                    jobNumber:'',
                    orgName:'',
                    resId:'',
                    resName:'',
                },
                date: [],
                rules: {
                    intervieweeName:[{required: true, message: '请选择被访人', trigger: 'blur'}],
                    //date:[{required: true, message: '请选择有效日期', trigger: 'blur,change'}],
                    resId:[{ required: true, message: '请选择所属区域', trigger: 'change' }]
                },
            }
        },
        methods: {
            dateChange(val) {
                if (val == null) {
                    this.filter.bgTm = ''
                    this.filter.endTm = ''
                } else {
                    this.filter.bgTm = val[0]
                    this.filter.endTm = val[1]
                }
            },
            dateChange2(val){
                if (val == null) {
                    this.form.expirationDate = ''
                    this.form.frozenDate = ''
                } else {
                    this.form.expirationDate = val[0]
                    this.form.frozenDate = val[1]
                }
            },
            handleList(val) {
                if (val) {
                    this.filter.pageNum = 1
                    this.currentPage = 1
                }
                this.loading = true
                getPageList(this.filter).then(res => {
                    this.loading = false
                    this.data = res.page.list
                    this.pagination.total = res.page.total
                }).catch(err => {
                    this.loading = false
                })
            },
            handleCurrentChange(val) {
                this.filter.pageNum = val
                this.handleList()
            },
            handleSizeChange(val) {
                this.filter.pageNum = 1
                this.filter.pageSize = val
                this.handleList()
            },
            onMutilDelClick() {
                if (!this.selection.length) {
                    this.$message({
                        message: '请选择记录',
                        type: 'success'
                    })
                }
                this.selection.forEach((item, index) => {
                    this.id.push(item.id)
                })
                this.id = this.id.join(",")
                this.delete(this.id)
            },
            handleRowEdit({index, row}) {
                this.isEdit = true
                this.diaLogName = '编辑'
                let id = row.id
                getList({id}).then(res => {
                    this.form = res.visitorIntervieweeVO
                    this.$set(this.date, 0, res.visitorIntervieweeVO.expirationDate)
                    this.$set(this.date, 1, res.visitorIntervieweeVO.frozenDate)
                    this.equdata = res.visitorIntervieweeVO.list
                    this.form.resId = res.visitorIntervieweeVO.list[0].resId
                    this.$nextTick(() => {
                        let rows = res.visitorIntervieweeVO.list
                        rows.forEach(row => {
                            this.$refs.multipleTable.toggleRowSelection(row);
                        });
                    })
                    this.operVisible = true
                })
            },
            handleRowDelete({index, row}) {
                this.delete(row.id)
            },
            delete(id) {
                this.$confirm(`确定要删除当前被访人权限?`, '确认操作', {
                    confirmButtonText: '确定',
                    cancelButtonText: '放弃',
                    type: 'warning'
                }).then(() => {
                    deleteList({id}).then(res => {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.handleList()
                    })
                })
            },
            operInstanceEqu(form) {
                if (!this.multipleSelection.length) {
                    this.$message({
                        message: '请选择记录',
                        type: 'success'
                    })
                    return false
                }
                this.multipleSelection.forEach((item, index) => {
                    this.serialNo.push(item.serialNo)
                })
                if (!this.date.length) {
                    this.$message({
                        message: '请选择有效日期',
                        type: 'success'
                    })
                    return false
                }
                this.serialNo = this.serialNo.join(",")
                this.form.areaId = this.serialNo
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        this.staLoading = true
                        saveOrUpdataList(this.form).then(res => {
                            this.staLoading = false
                            this.operVisible = false
                            this.$message({
                                message: this.form.id ? '编辑成功' : '新增成功',
                                type: 'success'
                            })
                            this.handleList()
                        }).catch(err => {
                            this.staLoading = false
                        })
                    }
                })
            },
            clearForm() {
                this.form = {
                    id: '',
                    userId: '',
                    expirationDate: '',
                    frozenDate: '',
                    areaId: '',
                    intervieweeName: '',
                    jobNumber: '',
                    orgName: '',
                    resId: '',
                    resName:'',
                }
                this.date=[]
                this.equdata=[]
                this.serialNo=[]
                this.diaLogName = '新增'
                this.isEdit = false
            },
            handleSelectionEquChange(selection) {
                this.multipleSelection = selection
            },
            handleSelectionChange(selection) {
                this.selection = selection
            },
            area() {
                areaPullDown().then(res => {
                    this.areaoptions = res.listPullDown
                })
            },
            operInstance() {
                let value=this.$refs.tree.getCheckedNodes()
                let arr = []
                let name = []
                value.forEach((item, index) => {
                    if(item.alias == 'user'){
                        name.push(item.name)
                        arr.push(item.id)
                    }
                })
                this.form.intervieweeName = name.map(item => item).join(',')
                this.form.userId = arr.map(item => item).join(',')
                if (this.form.userId === '') {
                    this.$message({
                        message: '请选择被访人',
                        type: 'warning'
                    })
                    return false
                }
                this.dialogVisible=false
            },
            visibleClick(){
                Tree({depType:'JG001'}).then(res=>{
                    this.treeData = JSON.parse(res.msgDat)
                })
                this.dialogVisible=true
            }
        },
        watch: {
            'form.resId': function (val) {
                // if (this.form.resId === '') {
                //     this.equdata = []
                // }
                if (this.form.resId != '' && this.form.resId != undefined) {
                    equipmentList({resId: this.form.resId}).then(res => {
                        this.equdata = res.list
                    })
                }
            }
        },
        mounted() {
            this.filter.pageSize = this.tableOptions.pageList[0]
            this.tableOptions = this.$calcTableHeight(tableOptions, 35)
            this.handleList()
            this.area()

        }
    }
</script>

<style scoped>

</style>
