<template>
  <el-dialog title="选择解除归属关系" :visible.sync="visible" width="1000px" append-to-body>
    <div class="select-cnt">
      <el-input
        v-model="searchText"
        size="small"
        placeholder="请输入支行/网点/客户经理"
        clearable
        @clear="onSearch"
        @keyup.enter.native="onSearch"
      ></el-input>
      <section class="operate-btn">
        <el-button type="primary" size="small" @click="onSearch">查询</el-button>
        <el-button size="small" @click="onReset">重置</el-button>
      </section>
    </div>
    <common-table
      v-loading="pageLoading"
      :table-data="tableData"
      :table-coloumns="tableColoumns"
      :page-size="pageInfo.pageSize"
      :pagination="true"
      :total-rows="pageInfo.total"
      :current-page="pageInfo.pageNum"
      :isShowFilter="true"
      @onPageChange="onPageChange"
    >
      <template #operate="scope">
        <el-button type="text" size="small" @click="onDel(scope.row)"> 解除 </el-button>
      </template>
    </common-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose">取 消</el-button>
      <el-button type="primary" @click="onOk">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import CommonTable from '@/components/Common/common-table'

export default {
  components: {
    CommonTable
  },
  props: {
    modalTitle: {
      type: String,
      default: ''
    },
    detailInfo: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    visible(val) {
      val && this.getInitData()
    }
  },
  data() {
    return {
      visible: false,
      statusType: '',
      pageLoading: false,
      tableData: [],
      tableColoumns: [
        {
          prop: 'custName',
          label: '客户名称',
          align: 'left'
        },
        {
          prop: 'custId',
          label: '证件号',
          align: 'left'
        },
        {
          prop: 'belongDeptList',
          label: '归属支行',
          align: 'left'
        },
        {
          prop: 'belongOutletList',
          label: '归属网点',
          align: 'left'
        },
        {
          prop: 'belongManagerList',
          label: '归属客户经理',
          align: 'left'
        },
        {
          prop: 'operate',
          label: '操作',
          slotType: 'operate',
          width: '100px',
          type: 'slot'
        }
      ],
      pageInfo: {
        pageSize: 5,
        pageNum: 1,
        total: 0
      },
      searchText: ''
    }
  },
  methods: {
    getInitData() {},
    onDel(row) {
      this.$confirm('提示: 解除后，客户仍属于该网格，但与所选的网点、客户经理不再具有归属关系。', '是否确认解除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delRecord(row)
        this.$emit('deleteCompete', row)
      })
    },
    onSearch() {
      this.onPageChange(1)
    },
    onReset() {
      this.searchText = ''
      this.onPageChange(1)
    },
    onPageChange(page) {
      this.pageInfo.pageNum = page
      this.getTableData()
    },
    getTableData() {},
    onClose() {
      this.visible = false
    },

    onOk() {
      this.onClose()
    },
    onOpen() {
      this.visible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.select-cnt {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  justify-content: space-between;
  .el-input {
    width: 50%;
  }
}
.operate-btn {
  margin-left: 30px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
</style>