<template>
  <div class="page">
    <el-card :body-style="{ padding: '5px' }" style="margin-bottom:5px">
      <div class="search-box">
        <el-form :model="search" label-width="100px" size="small">
          <el-form-item label="用户名称：">
            <el-input style="width:80%" v-model="search.userChnName" placeholder="请输入用户名称" clearable></el-input>
          </el-form-item>
          <div class="btn">
            <el-button size="mini" type="primary" icon="el-icon-search" @click="searchClick(1)">搜索</el-button>
            <el-button size="mini" type="info" icon="el-icon-refresh" @click="searchClick(2)">重置</el-button>
          </div>
        </el-form>
      </div>
    </el-card>
    <div class="content">
      <div class="left">
        <el-table size='small' :max-height="tableHeight" :data="tableDataOne" tooltip-effect="dark"
          highlight-current-row @cell-click='oneClick' border>
          <el-table-column prop="username" width="200" align="center" label="登录账号"></el-table-column>
          <el-table-column prop="userChnName" align="center" label="用户名称"></el-table-column>
          <el-table-column prop="markEnable" align="center" label="用户状态">
            <template slot-scope="scope">
              <el-tag size="small" :type="scope.row.markEnable | statusFilter" effect="dark">
                {{ scope.row.markEnable | statusName }}
              </el-tag>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <div class="right">
        <el-table ref="multipleTable" size='small' :max-height="tableHeights" :data="tableDataThree"
          tooltip-effect="dark" :row-key="getRowKeys" @selection-change="handleSelectionChange" border>
          <el-table-column type="selection" align="center" width="55"></el-table-column>
          <el-table-column prop="fondsname" align="center" label="全宗名称"></el-table-column>
          <el-table-column prop="fondscode" align="center" label="全宗代码"></el-table-column>
        </el-table>
        <div style="margin-top:5px;text-align:right;padding:0 45px">
          <el-button :loading="btnloading" size="mini" type="success" icon="el-icon-check" @click="searchClick(3)"
            v-if="true">保存
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions } from "vuex";
import { clearObjValue, message } from "@/utils/common";
export default {
  data() {
    return {
      btnloading: false,
      search: {
        name: "",
      },
      getRowKeys(row) {
        return row.id;
      },
      rowOne: {},
      paramsOne: {},
      paramsTwo: {},
      multipleSelection: [],
      tableHeight: window.innerHeight - 200,
      tableHeights: window.innerHeight - 300,
    };
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        2: "danger",
        1: "success",
      };
      return statusMap[status];
    },
    statusName(status) {
      const statusMap = {
        2: "禁用",
        1: "启用",
      };
      return statusMap[status];
    },
  },
  computed: {
    ...mapState({
      tableDataOne: (state) => state.userRole.tableDataOne,
      tableDataThree: (state) => state.userRole.tableDataThree,
      //  用户全宗
      EchoList: (state) => state.userRole.EchoList,
      showButtons: (state) => state.userRole.showButtons,
    }),
  },
  methods: {
    oneClick(val) {
      this.$refs.multipleTable.clearSelection();
      this.rowOne = val;
      this.$store
        .dispatch("userRole/fondByUser", {
          userId: val.id,
        })
        .then((res) => {
          this.Ecoh();
        });
    },
    Ecoh() {
      let plantFormList = [...this.EchoList];
      let idArr = plantFormList.map((val) => val.id);
      this.$nextTick((res) => {
        this.tableDataThree.forEach((val) => {
          if (idArr.includes(val.id)) {
            this.$refs.multipleTable.toggleRowSelection(val, true);
          }
        });
      });
    },
    searchClick(val) {
      switch (val) {
        case 1:
          this.getDataOne();
          break;
        case 2:
          clearObjValue(this.search);
          break;
        case 3:
          if (JSON.stringify(this.rowOne) === "{}") {
            message("warning", "请先选择用户", 3000);
            return;
          }
          let ids = [];
          this.multipleSelection.forEach((item) => {
            if (item.id) {
              ids.push(item.id);
            }
          });
          let sumData = {
            fondIds: ids.join(","),
            userId: this.rowOne.id,
          };
          this.btnloading = true;
          this.$store
            .dispatch("userRole/saveUserFond", sumData)
            .then(() => {
              this.btnloading = false;
            })
            .catch(() => {
              this.btnloading = false;
            });
          break;
      }
    },
    getDataOne() {
      this.paramsOne = {
        userChnName: this.search.userChnName,
        limit: 5000,
      };
      this.$store.dispatch("userRole/getUsers", this.paramsOne);
    },
    getDataTwo() {
      this.paramsTwo = {
        //   roleName: "",
        limit: 5000,
      };
      this.$store.dispatch("userRole/getFondWithPage", this.paramsTwo);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
  created() {
    clearObjValue(this.showButtons);
    let btnData = {
      menuid: this.$getMenuId(
        sessionStorage.getItem("funcTypeCodeList"),
        this.$route.path
      ),
      roleid: sessionStorage.getItem("roleId"),
      code: sessionStorage.getItem("code"),
    };
    this.$store.dispatch("userRole/getButtonList", btnData);
    this.getDataOne();
    this.getDataTwo();
  },
};
</script>
<style lang='scss' scoped>
.page {
  padding: 5px;

  .search-box {
    width: 100%;
    background-color: #fff;
    padding: 10px 10px 0 10px;
    box-sizing: border-box;

    .el-form {
      display: flex;
      flex-wrap: wrap;

      .el-form-item {
        margin-bottom: 10px;
      }

      .btn {
        text-align: right;
      }
    }
  }

  .content {
    display: flex;
    justify-content: space-between;

    .left {
      width: 60%;
    }

    .right {
      width: 37%;
    }
  }
}

::v-deep {
  .el-table__body tr.current-row > td {
    background-color: #95aaee;
    color: #ffffff;
    font-weight: 600;
  }
}
</style>
