<template>
  <div class="container">
    <fullscreen :fullscreen.sync="fullscreen" class="container-box">
      <div class="titbox">
        <h2>工号管理</h2>
        <div>
          <i class="el-icon-refresh" @click="iconCli(1)"></i>
          <i class="el-icon-full-screen" @click="iconCli(2)"></i>
          <!--                    <i class="el-icon-folder-opened"></i>-->
          <!--                    <i class="el-icon-view"></i>-->
          <!--                    <i class="el-icon-more"></i>-->
        </div>
      </div>
      <div class="search">
        <mySearch :searchList="searchList" @searchInfo="searchInfo"></mySearch>
        <el-button
          class="btn-check"
          size="medium"
          type="primary"
          @click="addRule()"
          >添加
        </el-button>
      </div>
      <div class="tabbox">
        <el-table
          class="com-table"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          size="small"
          border
          style="width: 100%"
        >
          <el-table-column prop="loginNoStr" label="工号"> </el-table-column>
          <el-table-column prop="loginNameStr" label="工号名称">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                plain
                @click="detailes(scope.row)"
                >详情</el-button
              >
              <el-button
                size="mini"
                type="primary"
                plain
                @click="updateUser(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                plain
                type="primary"
                @click="showRule(scope.row)"
                >角色赋权</el-button
              >
              <el-button
                size="mini"
                type="danger"
                plain
                @click="delLine(2, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pageBox"
          @current-change="currchange"
          layout="prev, pager, next"
          background
          :total="total"
        >
        </el-pagination>
      </div>
    </fullscreen>
    <el-dialog
      title="角色赋权"
      :close-on-press-escape="false"
      :show-close="false"
      :destroy-on-close="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :visible.sync="ruleStatus"
    >
      <el-transfer
        :titles="['左侧', '右侧']"
        :button-texts="['到左边', '到右边']"
        v-model="ruleData.checkRoleList"
        :props="{
          key: 'roleCode',
          label: 'roleName',
        }"
        :data="ruleData.ruleValue"
        @change="formatterData"
      >
      </el-transfer>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeRule()">取 消</el-button>
        <el-button @click="subRule()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="titname"
      :visible.sync="dialogStatus"
      width="50%"
      :close-on-press-escape="false"
      :show-close="false"
      :destroy-on-close="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <p-form
        ref="pForm"
        @closeDialog="closeDialog"
        :formData="formData"
        :form="form"
      ></p-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetUser('ruleForm')">取 消</el-button>
        <el-button v-show="subBtn" @click="subUser('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import pForm from "../../../components/p-form";
import myUpload from "../../../components/upload";
import uploadDown from "../../../components/uploadDown";
import mySearch from "../../../components/search";

export default {
  components: {
    myUpload,
    uploadDown,
    mySearch,
    pForm,
  },
  data() {
    return {
      formData: {
        loginNoStr: "",
        loginNameStr: "",
        loginPasswd: "",
        secondPasswd: "",
      },
      form: {
        action: false,
        formName: "ruleForm",
        labelWidth: "80px",
        formStyle: "width: 80%; margin: 0 auto",
        initUrl: "/sysmgr/sys/login/addInit", // 初始化接口
        url: "/market/cfgDataDict/queryList", // 提交接口
        id: "", // 编辑时用的id 由初始化时获取
        type: "post", // 请求方式
        params: "", // get请求桉树
        events: function () {
          // 回调方法
          $vm.$router.push("/leader");
        },
        data: {
          // post请求参数
          groupId: "",
          groupName: "",
          loginNameStr: "",
          loginNoStr: "",
          loginPasswd: "",
          tenantId: null,
        },
        body: [
          // 渲染表单
          {
            el: "input", //  dom类型
            placeholder: "请输入工号", // 提示语
            label: "工号", // 表单title
            value: "loginNoStr", // 表单model绑定的值
            disabled: false,
            clearable: true,
            rules: [
              // 校验
              { required: true, message: "请输入工号", trigger: "blur" },
            ],
          },
          {
            el: "input", //  dom类型
            placeholder: "请输入姓名", // 提示语
            label: "姓名", // 表单title
            value: "loginNameStr", // 表单model绑定的值
            disabled: false,
            clearable: true,
            rules: [
              // 校验
              { required: true, message: "请输入工号", trigger: "blur" },
            ],
          },
          {
            el: "password", //  dom类型
            placeholder: "请输入密码", // 提示语
            label: "密码", // 表单title
            value: "loginPasswd", // 表单model绑定的值
            disabled: false,
            clearable: true,
            rules: [
              // 校验
              {
                required: true,
                validator: (rule, value, callback) => {
                  if (!value) {
                    callback(new Error("请输入密码"));
                  } else {
                    callback();
                  }
                },
                trigger: "blur",
              },
            ],
          },
          {
            el: "password", //  dom类型
            placeholder: "请输入密码", // 提示语
            label: "确认密码", // 表单title
            value: "secondPasswd", // 表单model绑定的值
            disabled: false,
            clearable: true,
            rules: [
              // 校验
              {
                required: true,
                validator: (rule, value, callback) => {
                  if (!value) {
                    return callback(new Error("请输入密码"));
                  } else {
                    if (this.formData.loginPasswd != value) {
                      return callback(new Error("两次密码不同"));
                    } else {
                      callback();
                    }
                  }
                },
                trigger: "blur",
              },
            ],
          },
        ],
      },
      inputType: "password",
      subBtn: true,
      ruleStatus: false,
      transferValue: [],
      transferData: [
        {
          id: "647733085966045184",
          roleCode: "647733085966045184",
          roleName: "模板上传角色",
          opNo: "admin",
          opName: "admin",
          opTime: "2020-11-22 17:40:02",
          idPks: null,
          opTimeFrom: null,
          opTimeTo: null,
        },
        {
          id: "648332946046386176",
          roleCode: "648332946046386176",
          roleName: "科室经理复核",
          opNo: "admin",
          opName: "admin",
          opTime: "2020-11-24 09:23:39",
          idPks: null,
          opTimeFrom: null,
          opTimeTo: null,
        },
        {
          id: "648333023007670272",
          roleCode: "648333023007670272",
          roleName: "业务填报员",
          opNo: "admin",
          opName: "admin",
          opTime: "2020-11-24 09:23:58",
          idPks: null,
          opTimeFrom: null,
          opTimeTo: null,
        },
      ],
      fullscreen: false,
      total: 0,
      pageSize: 1,
      tableData: [],
      dialogStatus: false,
      infolist: {},
      titname: "",
      disableStatus: false,
      searchList: [
        {
          type: "input",
          tit: "工号",
          value: "",
          width: "100%",
          options: [],
        },
      ],
      params: {},
      ruleData: {
        loginNo: "",
        checkRoleList: [],
        ruleValue: [],
        formatterData: [],
      },
    };
  },
  methods: {
    detailes(val) {
      this.disableStatus = true;
      this.titname = "工号详情";
      this.subBtn = false;
      this.dialogStatus = true;
      this.form.body.map((item) => {
        item.disabled = true;
      });
      this.$http({
        url: "/sysmgr/sys/login/updateInit",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          groupId: "",
          groupName: "",
          loginNameStr: "",
          loginNoStr: val.loginNoStr,
          loginPasswd: "",
          tenantId: null,
        },
      }).then((res) => {
        this.formData = res.data;
        this.formData.secondPasswd = res.data.loginPasswd;
      });
    },
    formatterData(val) {
      let list = [];
      if (val) {
        val.map((item) => {
          this.ruleData.ruleValue.map((row) => {
            if (item == row.roleCode) {
              list.push(row);
            }
          });
        });
        this.ruleData.formatterData = list;
      }
    },
    changeView() {
      if (this.inputType == "password") {
        this.inputType = "text";
      } else {
        this.inputType = "password";
      }
    },
    // 修改工号弹窗
    updateUser(val) {
      this.titname = "修改工号";
      this.subBtn = true;
      this.$http({
        url: "/sysmgr/sys/login/updateInit",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          groupId: "",
          groupName: "",
          loginNameStr: "",
          loginNoStr: val.loginNoStr,
          loginPasswd: "",
          tenantId: null,
        },
      }).then((res) => {
        this.formData = res.data;
        this.formData.secondPasswd = res.data.loginPasswd;
      });
      this.dialogStatus = true;
    },
    // 增加表单处理
    subUser(formName) {
      this.$refs.pForm.submitForm(this.form.formName);
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     this.dialogStatus = false;
      //   } else {
      //     console.log("error submit!!");
      //     return false;
      //   }
      // });
    },
    // 取消工号提交
    resetUser() {
      this.$refs.pForm.resetForm(this.form.formName);
      // this.subBtn = true;
      // this.dialogStatus = false;
      // this.disableStatus = false;
      // this.$refs[formName].resetFields();
    },
    closeDialog() {
      this.dialogStatus = false;
    },
    // 增加工号弹窗
    addRule() {
      this.titname = "增加工号";
      this.subBtn = true;
      this.dialogStatus = true;
    },
    // 关闭配置角色弹窗
    closeRule() {
      this.ruleStatus = false;
    },
    // 提交角色
    subRule() {
      this.$http({
        url: "/sysmgr/sys/settings/sysLoginFuncs/updateRole",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          loginNo: this.ruleData.loginNo,
          checkRoleList: this.ruleData.formatterData,
        },
      }).then((res) => {
        this.$notify({
          title: "成功",
          message: res.data.desc,
          type: "success",
        });
        this.ruleStatus = false;
      });
    },
    //  配置角色弹窗
    showRule(val) {
      this.ruleData.loginNo = val.loginNoStr;
      this.ruleStatus = true;
      this.$http({
        url: "/sysmgr/sys/settings/sysLoginFuncs/queryInit",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: { loginNo: val.loginNoStr },
      }).then((res) => {
        this.ruleData.checkRoleList = res.data.body.checkRoleList.map(
          (item) => {
            return item.roleCode;
          }
        );
        this.ruleData.ruleValue = res.data.body.roleList;
      });
    },
    //搜索数据
    searchInfo(v) {
      this.params = {};
      v[0] ? (this.params.loginNoStr = v[0]) : "";
      this.getList(this.params, this.pageSize);
    },
    //获取列表
    getList(v, n) {
      this.pageSize = n;
      let _this = this;
      this.$http({
        url: "/sysmgr/sys/login/queryCLoginMsgPage",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          page: '{"pageNo":"' + n + '","pageSize":"10"}',
        },
        data: v,
      }).then((res) => {
        this.tableData = res.data.data;
        this.total = res.data.totalRecord;
      });
    },
    //功能栏
    iconCli(v) {
      if (v === 1) {
        this.getList(this.params, this.pageSize);
      }
      if (v === 2) {
        this.fullscreen = !this.fullscreen;
      }
    },
    // 分页
    currchange(v) {
      this.pageSize = v;
      this.getList(this.params, this.pageSize);
    },
    //删除
    delLine(v) {
      let _this = this;
      this.$confirm("即将删除此条数据, 是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {})
        .catch(() => {});
    },
  },
  mounted() {
    this.getList(this.params, this.pageSize);
  },
  created() {},
};
</script>
<style>
.el-input__suffix {
  cursor: pointer;
}
</style>
<style scoped lang="scss">
.titbox {
  div {
    float: right;

    i {
      font-size: 22px;
      margin-left: 20px;
      cursor: pointer;
    }
  }
}

.tabbox {
  margin-top: 15px;
}

.pageBox {
  text-align: right;
  margin-top: 10px;
}
</style>
