<template>
  <div class="common-table-div">
    <el-table
      ref="table1"
      border
      :data="list"
      style="width: 100%"
      :height="theight1"
      :header-cell-style="tableHeaderCellStyle"
      highlight-current-row
    >
      <el-table-column prop="name" label="审批流程" width="200" align="center">
      </el-table-column>
      <el-table-column prop="notifierId" label="通知人账户" align="center">
      </el-table-column>
      <el-table-column prop="notifierName" label="通知人姓名" align="center">
      </el-table-column>
      <el-table-column label="操作" width="150px" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="onShowDistribution(scope.row)"
            icon="el-icon-tickets"
            >分配</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="分配通知人" :visible.sync="showDistribution">
      <el-table
        ref="table2"
        :data="userList"
        highlight-current-row
        style="width: 100%"
        border
        :height="theight2"
        :header-cell-style="tableHeaderCellStyle"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="60" align="center">
        </el-table-column>
        <el-table-column
          property="userCode"
          label="账户"
          align="center"
        ></el-table-column>
        <el-table-column
          property="userName"
          label="姓名"
          align="center"
        ></el-table-column>
      </el-table>
      <div style="overflow: hidden">
        <el-button
          style="margin-top: 12px; float: right"
          type="primary"
          @click="save"
          size="mini"
        >
          保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      theight1: 0,
      theight2: 0,
      list: [],
      showDistribution: false,
      userList: [],
      multipleSelection: [],
      currentRow: {},
    };
  },
  created() {
    this.theight1 =
      window.innerHeight - 185 < 249 ? 249 : window.innerHeight - 230;
    this.theight2 =
      window.innerHeight - 185 < 249 ? 249 : window.innerHeight - 400;
    this.getList();
  },
  methods: {
    tableHeaderCellStyle() {
      return "background-color: rgb(249,249,249) !important;color: rgb(73, 72, 72);border-bottom: 1px solid #DCDFE7;border-top:3px solid #3ac1ea;";
    },
    async onShowDistribution(row) {
      console.log(row);
      this.showDistribution = true;
      await this.getUserList();

      this.$nextTick(() => {
        this.currentRow = row;
        const notifierId = row.notifierId.split(",");

        this.userList.forEach((item) => {
          if (notifierId.includes(item.userCode)) {
            console.log(item.userCode);
            this.$refs.table2.toggleRowSelection(item, true);
          }
        });
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    async getUserList() {
      this.userList = [];
      const res = await this.axios.get(
        "pass/v1/sysusers/getUsersByOrgCode/?pageNum=1&pageSize=200&companyId=713710108567277568",
        { individualType: "json" }
      );
      console.log(res);
      this.userList = res.data.list.filter((item) => {
        // 未停用的
        return item.status === "1";
      });
    },
    getList() {
      this.axios
        .get("pass/testManagement/v1/limsdatamsgusers/", {
          individualType: "json",
        })
        .then((res) => {
          console.log(res);
          this.list = res.data.list;
        });
    },
    save() {
      console.log(this.multipleSelection);
      this.axios
        .put(
          "pass/testManagement/v1/limsdatamsgusers/" + this.currentRow.id,
          {
            ...this.currentRow,
            notifierId: this.multipleSelection
              .map((item) => item.userCode)
              .join(","),
            notifierName: this.multipleSelection
              .map((item) => item.userName)
              .join(","),
          },
          {
            individualType: "json",
          }
        )
        .then((res) => {
          this.showDistribution = false;
          this.$message.success("分配成功");
          this.getList();
        });
    },
  },
};
</script>
