<template>
    <div>
         <br>
        <div class="top">
            <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
               
                <el-form-item label="登陆用户名：">
                    <el-input placeholder="请输入登陆名" v-model="searchInfo.loginName"></el-input>
                </el-form-item>
                <el-form-item label="坐席编号：">
                    <el-input placeholder="请输入坐席编号" v-model="searchInfo.loginNumber"></el-input>
                </el-form-item>

                <el-form-item label="坐席状态：">
                    <el-select v-model="searchInfo.fstatus" clearable placeholder="全部">
                        <el-option v-for="item in this.$enumUtils.toValue('bindMarket')" :key="item.name"
                         :label="item.value" :value="item.name"></el-option>
                    </el-select>
                </el-form-item >
              
                <div class="btn">
                    <el-button @click="reset" type="primary">重置</el-button>
                    <el-button @click="querySearchRemind" type="primary">查询</el-button>
                     <el-button @click="confirmNoSeatDailog" type="primary" >分配坐席</el-button>
                </div>
            </el-form>
        </div>
        <div class="system-list">
            <el-table :data="tablePlanRemindData" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
                <el-table-column prop="extensionNumber" label="坐席编号" sortable ></el-table-column>
                <el-table-column prop="userName" label="分配用户"  ></el-table-column>
               
                <el-table-column prop="gmtDistribution" label="分配时间"  :formatter="dateFormat"  sortable
                                 ></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text"  @click="untiedSeat(scope.row)" v-if = "scope.row.loginName">解绑</el-button>
                        <el-button type="text"  @click="confirmSeatDailog(scope.row)" v-else >分配</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page">
            <el-pagination
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :current-page.sync="page.current"
                    :page-sizes="[20, 50, 80, 100]"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total">
            </el-pagination>
        </div>


        <!--窗口组件-->
        <template>
            <!-- 确认分配坐席弹窗 -->
           <confirmSeatDailog
                    v-if="ui.confirmSeatDailog.visible"
                    :dialogVisible.sync="ui.confirmSeatDailog.visible"
                    :btnType="ui.confirmSeatDailog.btnType"
                    :extensionNumber="ui.confirmSeatDailog.extensionNumber"
                    :backedNo="ui.confirmSeatDailog.backedNo">
            </confirmSeatDailog>
        </template>
    </div>
</template>

<script>
    import * as moment from "moment";
     import confirmSeatDailog from "./ConfirmSeatDailog"; 

    export default {
        name: "ByhPlanRemindList",
        components: {
            confirmSeatDailog,
        },
        data() {
            return {
                flag: false,
                ui:
                    {
                        confirmSeatDailog: {
                            visible: false,
                            extensionNumber: '',
                        },
                    },
                page: {
                    current: 1,
                    size: 20,
                    total: 0
                },
                searchInfo: {
                    date: [new Date(),new Date()],
                    extensionNumber: '',
                    fstatus: '',
                },
                tablePlanRemindData: [],
                record: '',
            }

        },

        mounted: function () {
            this.tablePlanRemindData = this.remindData();
        },

        methods: {

            /** 加载数据 */
            remindData(params) {
                var listsData = [];
                this.$$post('/cell/getList', this.buildParam()).then(res => {
                    if (res.data.code != 1) {
                        this.$message.error(res.data.msg);
                        return
                    }
                    listsData = res.data.data.records;
                    this.tablePlanRemindData = listsData;
                    this.page.total = res.data.data.total;
                }).catch(error => {
                    this.$Message.error(error || '系统异常');
                });
            },
            // 解绑
            untiedSeat(row){
                this.$$post(`/cell/update`,{
                    extensionNumber: row.extensionNumber,
                     type: 'RELIEVE', 
                     loginName: row.loginName
                }).then(res => {
                    if (res.data.code < 1) {
                        this.$message.error(res.data.msg);
                        return
                    }
                    this.$message({message: '操作成功', type: 'success'});
                    window.location.reload();
                })
            },

            //搜索查询
            querySearchRemind() {
                this.remindData();
            },

            // 分配带坐席号
            confirmSeatDailog(record) {
                this.ui.confirmSeatDailog = {
                    visible: true,
                    extensionNumber: record.extensionNumber,
                    btnType: 'SEATMANAGE'
                }
            },
            // 分配无坐席号 搜索
            confirmNoSeatDailog(record) {
                this.ui.confirmSeatDailog = {
                    visible: true,
                    extensionNumber: record.extensionNumber,
                    btnType: 'NOSEATMANAGE'
                }
            },
             handleSizeChange(row){
                this.page.size=row
                this.page.current=1;
                this.remindData();
            },
            //参数
            buildParam() {
                var return_hash = {
                    size: this.page.size,
                    current: this.page.current,
                };
                           
                if (this.searchInfo.loginNumber != '') {
                    return_hash['extensionNumber'] = this.searchInfo.loginNumber
                }

                 if (this.searchInfo.loginName != '') {
                    return_hash['userName'] = this.searchInfo.loginName
                }
               
                if (this.searchInfo.fstatus != '') {
                    return_hash['bind'] = this.searchInfo.fstatus
                }

                return return_hash;
            },

            //显示日期
            dateFormat: function (row, column) {

                var date = row[column.property];
                if (date == undefined) {
                    return "";
                }
                return moment(date).format("YYYY-MM-DD");
            },
            //重置
            reset() {
                this.searchInfo.loginNumber = '';
                this.searchInfo.loginName = '';
                this.searchInfo.fstatus = '';
            },
            /** 处理分页操作*/
            handleCurrentChange() {
                this.tablePlanRemindData = this.remindData();
            },
        }

    }
</script>

<style scoped>
.btn{
    margin-right:100px
}
</style>