<template>
  <el-dialog
    class="modal-wrap"
    append-to-body
    title="解绑列表"
    :visible.sync="visible"
    width="700px"
    :before-close="onClose"
  >
    <el-table
      v-loading="loading"
      ref="table1"
      :data="tableData"
      class="common-table-cnt"
    >
      <template v-for="item in columns">
        <el-table-column
          v-if="item.visible"
          :prop="item.name"
          :label="item.label"
          :key="item.name"
        >
        </el-table-column>
      </template>
      <el-table-column label="操作">
        <template #default="scope">
          <el-switch
            :prop="scope.row.bindFlag"
            v-model="scope.row.bindFlag"
            active-color="#2094ff"
            inactive-color="#666"
            @change="(e) => switchChange(e, scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import { regionGridUserList, custRegionUnbind } from "@/api/grid/list/gridlist";

export default {
  components: {},
  props: ["perInfo"],
  watch: {
    visible(val) {
      if (val) {
        this.getList();
      }
    },
  },
  computed: {},
  data() {
    return {
      visible: false,
      loading: false,
      tableData: [],
      columns: [{ label: `客户经理`, visible: true, name: "nickName" }],
    };
  },
  methods: {
    /** 查询客户列表 */
    getList() {
      this.loading = true;
      const params = {
        secGridId: this.perInfo.secGridId,
        custId: this.perInfo.custId,
      };
      regionGridUserList(params)
        .then((res) => {
          console.log(res);
          this.tableData = res?.data?.map((ot) => ({
            ...ot,
            bindFlag: !ot.unbindFlag,
          }));
          this.total = res.total;
        })
        .catch((err) => console.error(err))
        .finally(() => {
          setTimeout(() => {
            this.loading = false;
          }, 100);
        });
    },
    async switchChange(e, row) {
      const res = await custRegionUnbind({
        custId: row.custId,
        gridId: row.gridId,
        custType: row.custType,
        userName: row.userName
      });
      if (res.code === 200) {
        this.getList()
        this.$message.success(res.data)
      }
    },
    onClose() {
      this.visible = false;
      this.$emit('update-list');
      this.$emit('close-modal');
    },
    onOpen() {
      console.log(1212);
      this.visible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
}
.modal-cnt {
  max-height: 600px;
  overflow-y: scroll;
  overflow-x: hidden;
}
::v-deep .operate-btn {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.modal-wrap {
  v-deep .el-tree-node__expand-icon.is-leaf {
    color: transparent !important;
  }
}
.search-box {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  span {
    width: 140px;
  }
}
.suiji {
  margin-bottom: 0;
  .checkbox {
    color: #222;
    font-weight: bold;
  }
}
</style>