<template>
  <div class="quote">
    <div class="quote-tree">
      <div>
        <!-- <a-tree  :tree-data="treeData" /> -->
        <tree @getList="treeChoose"></tree>
      </div>
    </div>
    <div class="back-line-main">
      <div class="back-line-header">
        <div class="back-line-header-title">
          <div>
            <span>姓名</span>
            <a-input
              placeholder="姓名"
              v-model="formState.userName"
              style="width: 300px"
            ></a-input>
            <span style="margin-left: 10px">工号</span>
            <a-input
              placeholder="工号"
              v-model="formState.userId"
              style="width: 300px"
            ></a-input>
            <a-button type="primary" style="margin-left: 10px" @click="search"
              >查询</a-button
            >
            <a-button
              type="primary"
              style="margin-left: 10px"
              @click="openBatch"
              :disabled="checkTable.length < 1"
              >批量操作</a-button
            >
          </div>
        </div>
      </div>
      <standard-table
        bordered
        :columns="columns"
        :dataSource="tableList"
        :pagination="pagination"
        @change="onChange"
        :loading="loading"
        :selectedRows="checkTable"
        @selectedRowChange="selectedRowChange"
        ref="table"
      >
        <div slot="operation" slot-scope="text">
          <a-button @click="configRole(text)">配置角色</a-button>
        </div>
      </standard-table>
      <a-modal
        v-model="visible"
        title="配置角色"
        @ok="handleOk"
        layout="inline"
        width="50%"
      >
        <a-form layout="inline" :label-col="labelCol">
          <a-form-item label="部门编码" style="width: 50%">
            <a-input placeholder="" v-model="dataForm.deptId" disabled />
          </a-form-item>
          <a-form-item label="部门名称" style="width: 45%">
            <a-input placeholder="" v-model="dataForm.deptName" disabled />
          </a-form-item>
          <a-form-item label="员工工号" style="width: 50%">
            <a-input placeholder="" v-model="dataForm.id" disabled />
          </a-form-item>
          <a-form-item label="姓名" style="width: 45%">
            <a-input placeholder="" v-model="dataForm.name" disabled />
          </a-form-item>
          <a-form-item label="邮箱" style="width: 50%">
            <a-input placeholder="" disabled />
          </a-form-item>
          <a-form-item label="电话" style="width: 45%">
            <a-input placeholder="" v-model="dataForm.mobile" disabled />
          </a-form-item>
          <a-form-item label="角色权限" style="width: 50%">
            <a-select v-model="dataForm.roleId" style="width: 180px">
              <a-select-option v-for="item in treeSelect" :key="item.id">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-modal>

      <a-modal
        v-model="batchVisible"
        title="批量配置角色"
        @ok="batchOperation"
        layout="inline"
        width="50%"
      >
        <a-form layout="inline" :label-col="labelCol">
          <a-form-item label="角色权限" style="width: 50%">
            <a-select v-model="dataForm.roleId" style="width: 180px">
              <a-select-option v-for="item in treeSelect" :key="item.id">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </div>
</template>
          
  <script>
import StandardTable from "@/components/table/StandardTable";
// import mixin from "../../minins/mixin";
import tree from "@/components/tree/tree";
const columns = [
  {
    title: "部门编码",
    dataIndex: "deptId",
  },

  {
    title: "部门名称",
    dataIndex: "deptName",
  },
  {
    title: "工号",
    dataIndex: "id",
  },
  {
    title: "姓名",
    dataIndex: "name",
  },
  {
    title: "联系电话",
    dataIndex: "mobile",
  },

  {
    title: "角色",
    dataIndex: "roleName",
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" },
  },
];

export default {
  components: {
    StandardTable,
    tree,
  },
  //   mixins: [mixin],
  data() {
    return {
      formState: {
        userName: "",
        userId: "",
      },
      labelCol: { span: 4 },
      dataForm: {},
      visible: false,
      backLinePersonnel: {},
      columns: columns,
      companyList: [],
      tableList: [],
      pagination: {
        current: 1,
        defaultPageSize: 10,
        total: 0,
        pagesize0ptions: ["10", "20", "30", "50", "100"],
        hideOnSinglePage: false,
        showQuickJumper: true, //
        showSizeChanger: true, //是否可以改变pagesize
      },
      loading: false,

      treeData: [],
      treeSelect: [],
      checkTable: [],
      batchVisible: false,
      deptId: "",
    };
  },
  mounted() {
    this.getDeptList();
    // setTimeout(() => {
    // }, 1000);
    this.getRole();
  },
  methods: {
    openBatch() {
      this.batchVisible = true;

      // this.$refs.table.selectedRows = [];
    },
    //批量功能操作
    batchOperation() {
      // this.treeDisabled = false;
      this.$API.sysManage
        .saveBatchRoleUsers({
          roleId: this.dataForm.roleId,
          userIds: this.checkTable,
          sysType: 2,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success(res.data.msg);
            this.getDeptList(this.deptId);
            this.checkTable = [];
            this.batchVisible = false;
            this.$refs.table.$data.selectedRowKeys = [];

            // this.$refs.menuTree.setCheckedNodes(allMenus);
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //表格选择
    selectedRowChange(val) {
      this.checkTable = val.map((v) => {
        return v.id;
      });
    },
    search() {
      this.pagination.current = 1;
      this.pagination.defaultPageSize = 10;
      this.getDeptList();
    },
    getRole() {
      this.$API.sysManage
        .getRoleAll({
          sysType: 2,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.treeSelect = [...res.data.data];
          }
        });
    },
    handleOk() {
      //   this.visible = false;
      // this.confirmLoading = true;

      this.$API.sysManage
        .roleSetUser({
          //   ...this.dataForm,
          userId: this.dataForm.id,
          roleId: this.dataForm.roleId,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success("操作成功");
            this.confirmLoading = false;
            this.visible = false;
            // this.getList();
            this.getDeptList();
          }
        });
    },
    configRole(item) {
      this.visible = true;
      this.dataForm = { ...item.record };
      this.dataForm.roleId = item.record.roleId
        ? Number(item.record.roleId)
        : null;
    },
    treeChoose(id) {
      this.deptId = id;
      this.pagination.current = 1;
      this.pagination.defaultPageSize = 10;
      this.getDeptList(id);
    },
    onLoadData(treeNode) {
      return new Promise((resolve) => {
        if (treeNode.dataRef.children) {
          resolve();
          return;
        }
        setTimeout(() => {
          treeNode.dataRef.children = [
            { title: "Child Node", key: `${treeNode.eventKey}-0` },
            { title: "Child Node", key: `${treeNode.eventKey}-1` },
          ];
          this.treeData = [...this.treeData];
          resolve();
        }, 1000);
      });
    },
    onChangeTime(val) {
      // console.log(val);
      this.formState.beginDate = val[0];
      this.formState.endDate = val[1];
      this.getDeptList();
    },
    handleFinish() {
      //
    },
    wholeHandleChange() {
      this.getProvinceList(this.formState.whole);
    },
    provinceHandleChange() {
      this.getCityList(this.formState.provinceId);
    },
    cityHandleChange() {
      this.getAreaList(this.formState.cityId);
    },
    countyHandleChange() {
      this.getStoreList(this.formState.countyId);
    },

    getDeptList(id) {
      this.loading = true;

      this.$API.sysManage
        .getDeptList({
          pageNum: this.pagination.current,
          pageSize: this.pagination.defaultPageSize,
          sysType: 2,
          deptId: id ? id : "",
          name: this.formState.userName,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.loading = false;
            this.tableList = res.data.data.content;
            this.pagination = {
              current: res.data.data.pageNum,
              defaultPageSize: res.data.data.pageSize,
              total: res.data.data.totalSize,
            };
          }
        });
    },
    onClear() {
      this.$message.info("您清空了勾选的所有行");
    },

    onChange(pagination, filters, sorter, { currentDataSource }) {
      // this.$message.info('表格状态改变了')
      console.log(pagination, filters, sorter, { currentDataSource });
      this.pagination = {
        current: pagination.current,
        defaultPageSize: pagination.pageSize,
        total: pagination.total,
      };
      this.getDeptList();
    },
  },
};
</script>
  <style lang='less' scoped>
.quote {
  display: flex;
  > div:first-child {
    width: 20%;
    background: #fff;
    margin-right: 15px;
  }
  .quote-tree {
    padding: 15px;
    box-sizing: border-box;
    //
    > div:first-child {
      border-bottom: 1px solid #f0f0f0;
    }
  }
}
.back-line-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  .back-line-header {
    padding: 15px;
    box-sizing: border-box;
    .back-line-header-title {
      display: flex;
      align-items: center;
      //   justify-content: space-between;
      padding-bottom: 15px;

      box-sizing: border-box;

      > div {
        flex: 1;
        display: flex;
        align-items: center;
      }
      span {
        display: block;
        margin-right: 15px;
      }
      /deep/.ant-calendar-picker {
        width: 300px;
      }
    }
  }
  > div {
    // height: 152px;
    background: #fff;
  }
  .ant-modal-body {
    /deep/.ant-form-inline {
      display: flex;
    }
    /deep/ .ant-form-inline .ant-form-item {
      flex: none;
      width: 50%;
    }
  }
}
</style>