<template>
    <div style="margin-left:10px">
      <el-form>
          <el-button @click="backTo">返回</el-button>
      </el-form>
      <el-form class="select-container"  v-show="showSearch">
        <div class="queryBox">
             <el-form-item label="客户号:" style="display:flex">
                <el-input v-model="queryParams.clientNum" clearable=""></el-input>
            </el-form-item>
            <el-form-item label="客户名:" style="display:flex">
                <el-input v-model="queryParams.clientName" clearable=""></el-input>
            </el-form-item>
            <el-form-item label="分配状态:" style="display:flex">
                <el-select v-model="queryParams.allocationState" clearable>
                  <el-option v-for="(item, index) in StateOptions" :key="index" :label="item.label"
                  :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
            </el-form-item>
        </div>
        <el-form-item>
                <el-button type="primary" @click="applyFilters">查询</el-button>
                <el-button @click="resetFilters">重置</el-button>
            </el-form-item>

        </el-form>
        <el-form style="margin-bottom:8px">
            <el-button @click="distributeBatch" class="batch-button">批量分配</el-button>
            <el-button @click="relieveBatch" class="batch-button">批量解除</el-button>
            <el-button @click="importOut" class="batch-button">导出</el-button>
            <el-button @click="distributed" class="distributed-button">未分配</el-button>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
        </el-form>
        <el-table v-loading="loading" :data="tableData" class="table">
            <el-table-column label="网格类目">自建名单网格</el-table-column>
            <el-table-column prop="firGrid" label="总行行政网格"></el-table-column>
            <el-table-column prop="scoGrid" label="支行行政网格"></el-table-column>
            <el-table-column prop="clientName" label="客户姓名"></el-table-column>
            <el-table-column prop="clientId" label="身份证号"></el-table-column>
            <el-table-column prop="homeOrganization" label="归属支行"></el-table-column>
            <el-table-column prop="relatedBranch" label="归属网点"></el-table-column>
            <el-table-column prop="relatedManager" label="归属客户经理"></el-table-column>
            <el-table-column label="操作">
                <template class="operate">
                    <a href="#" @click.prevent="distributed" style="color:blue">分配</a>
                    <a href="#" @click.prevent="deleteClient" style="color:blue">删除</a>
                </template>
            </el-table-column>
        </el-table>

         <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
    </div>
</template>

<script>
import {custManageSelected} from '@/api/grid/list/custManage.js'
export default{
    data(){
        return{
             // 遮罩层
            //loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
              pageNum: 1,
              pageSize: 10,
              clientNum:null,
              clientName:null,
              allocationState:null
            },
            StateOptions:[
                {value:'distributed',label:'已分配'},
                {value:'undistributed',label:'未分配'}
            ],
            tableData:[
                {firGrid:'总行行政网格A',scoGrid:'支行行政网格A1',clientName:'王小丽',clientId:'3301X',homeOrganization:'大洋支行',relatedBranch:'网点A',relatedManager:'张三'},
                {firGrid:'总行行政网格A',scoGrid:'支行行政网格A1',clientName:'李大帅',clientId:'3301X',homeOrganization:'大洋支行',relatedBranch:'网点A',relatedManager:'未分配'},
                {firGrid:'总行行政网格A',scoGrid:'支行行政网格A1',clientName:'谢大强',clientId:'3301X',homeOrganization:'大洋支行',relatedBranch:'网点A',relatedManager:'王五'},
            ]
        }
    },
    methods:{
        /** 查询用户列表 */
        getList1(){
            custManageSelected({gridPattern:1,gridLevel:1,gridId:99}).then(res=> {
                console.log(res);
            })
        },
            getList() {
                //this.loading = true;
                listUser(this.addDateRange(this.queryParams)).then(response => {
                  this.tableData = response.rows;
                  this.total = response.total;
                  this.loading = false;
                }
              );
            },
            backTo(){this.$router.go(-1)}
    },
    created(){
        custManageSelected({gridPattern:1,gridLevel:1,gridId:99}).then(res=> {
                console.log(res);
        })
    }
}
</script>

<style scoped>
.select-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:20px;
}
.queryBox {
    display: flex;
    justify-content: space-between;
    width:60%
}
.batch-button {
    background-color: #409EFF;
    color: white;
}
.distributed-button {
    border-radius: 0;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: #94c9ff;
    color: black;
}
.table {
    width:100%;
    margin:20px;
    text-align: center;
    vertical-align: middle;
}
a {
    margin: 5px;
}
</style>
