<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="550" :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="singleTable" size='small' max-height="550" :data="tableData" tooltip-effect="dark"
          :row-key="getRowKeys" @row-click="rowClick" border>
          <el-table-column label="选择" align="center" width="55">
            <template slot-scope="scope">
                <el-radio :label="scope.row.id" v-model="selectedId">{{''}}</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="deptname" 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 {selectDeptDetails,saveUserDept} from "@/api/jurisdiction/dept";
  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;
        },
        currentUserObject: {}, // 用户行对象
        paramsOne: {},
        multipleSelection: [],
        selectedId:''
      }
    },
    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,
        tableData: (state) => state.dept.tableData,
        EchoList: (state) => state.userRole.EchoList,
      }),
    },
    methods: {
        // 用户列表点击
      oneClick(val) {
        this.currentUserObject = val;
        this.showUserToDept();
      },
      // 点击用户获取用户对应的部门
      showUserToDept(){
        selectDeptDetails({userId:this.currentUserObject.id}).then(res=>{
          if(res.code == 100){
            let reslutObj = res.body.userDetails;
            if(reslutObj == null){
              this.selectedId = '';
            }else{
              // 赋值回显
              this.selectedId = reslutObj.id;
            }
          }else{
            message('warning',res.msg,3000);
          }
        }).catch(error=>{
          message('error',error,3000);
        })
      },
      // 机构单选按钮
      rowClick(row){
        // 获取右侧radio选中的值
        this.selectedId = row.id;
      },
      searchClick(val) {
        switch (val) {
          case 1:
            this.getDataOne()
            break;
          case 2:
            clearObjValue(this.search)
            break;
          case 3:
            if (JSON.stringify(this.currentUserObject) === "{}") {
              message('warning', '请先选择用户', 3000)
              return
            }
            this.getSave();
            break;
        }
      },
      // 用户列表
      getDataOne() {
        let params = {
          userChnName: this.search.userChnName,
          limit: 5000
        };
        this.$store.dispatch("userRole/getUsers", params);
      },
      // 部门列表
      getDeptData() {
        let params = {
          deptname: "",
          limit: 5000
        };
        this.$store.dispatch("dept/GetDepts", params);
      },
      // 点击保存按钮
      getSave(){
        this.btnloading = true;
        let params = {
          deptId:this.selectedId,
          userId:this.currentUserObject.id
        }
        saveUserDept(params).then(res=>{
          if(res.code == 100){
            this.btnloading = false;
            // 回显选中的值
            this.showUserToDept();
            message('success','保存成功',3000);
          }else{
            this.btnloading = false;
            message('warning',res.msg,3000);
          }
        }).catch(error=>{
          this.btnloading = false;
          message('error',error,3000);
        })
      }
    },
    created() {
      let btnData = {
        menuid: this.$getMenuId(sessionStorage.getItem("funcTypeCodeList"), this.$route.path),
        roleid: sessionStorage.getItem("roleId"),
        code: sessionStorage.getItem("code")
      }
      this.getDataOne()
      this.getDeptData()
    }
  }

</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>
