<template>
  <div>
    <!-- 弹出框表单 -->
    <el-drawer
      :title="title"
      :visible.sync="open"
      :direction="direction"
      size="35%"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="120px"
        style="width: 100%"
      >
        <div class="cell2">
          <div class="history">
            <span>姓名：</span>
            <span class="times">{{ form.name }}</span>
          </div>
          <div class="history">
            <span>性别：</span>
            <span class="times">{{
              dict.gender ? dict.gender[form.gender] : "--"
            }}</span>
          </div>
          <div class="history">
            <span>所属组织：</span>
            <span class="times">{{
              dict.deptId ? dict.deptId[form.deptId] : form.deptName
            }}</span>
          </div>
          <div class="history">
            <span>工号：</span>
            <span class="times">{{ form.workNum }}</span>
          </div>

          <div class="history">
            <span>政治面貌：</span>
            <span class="times">{{
              dict.politicalstatus
                ? dict.politicalstatus[form.politicalstatus]
                : "--"
            }}</span>
          </div>
          <div class="history">
            <span>员工状态：</span>
            <span class="times">{{
              dict.status ? dict.status[form.status] : "--"
            }}</span>
          </div>

          <div class="history">
            <span>手机号：</span>
            <span class="times">{{ form.phoneNumber }}</span>
          </div>
          <div class="history">
            <span>绩效展示：</span>
            <el-switch
              :active-value="1"
              :inactive-value="0"
              v-model="form.otherCheck"
              @change="handleSwitch(1)"
            >
            </el-switch>
          </div>
          <div class="box" v-if="form.otherCheck == 1">
            <div class="history">
              <span>考勤授权：</span>
              <el-switch
                :active-value="1"
                :inactive-value="0"
                v-model="form.attendCheck"
                @change="handleSwitch(2)"
              >
              </el-switch>
            </div>
            <div class="history">
              <span>评价授权：</span>
              <el-switch
                :active-value="1"
                :inactive-value="0"
                v-model="form.reviewCheck"
                @change="handleSwitch(2)"
              >
              </el-switch>
            </div>
            <!-- <div class="history">
            <span>投诉授权：</span>
            <el-switch
              :active-value="1"
              :inactive-value="0"
              v-model="form.reviewCheck"
            >
            </el-switch>
          </div> -->
            <div class="history">
              <span>办件授权：</span>
              <el-switch
                :active-value="1"
                :inactive-value="0"
                v-model="form.goworkCheck"
                @change="handleSwitch(2)"
              >
              </el-switch>
            </div>
            <div class="history">
              <span>效能授权：</span>
              <el-switch
                :active-value="1"
                :inactive-value="0"
                v-model="form.effectCheck"
                @change="handleSwitch(2)"
              >
              </el-switch>
            </div>
            <div class="history">
              <span>自评授权：</span>
              <el-switch
                :active-value="1"
                :inactive-value="0"
                v-model="form.complainCheck"
                @change="handleSwitch(2)"
              >
              </el-switch>
            </div>
          </div>
        </div>

        <el-row> </el-row>

        <form-buttons
          @submit="submitForm"
          noCancelBtn
          v-if="title != '考核授权'"
          style="position: absolute; left: -100px"
        />
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import form from "@/assets/mixins/formdialog";
export default {
  name: "StaffDetail",
  mixins: [form],
  props: {
    bumentree: {
      type: Array,
      default: [],
    },
    currentNode: {
      type: Object,
      default: {},
    },
  },
  components: {},
  watch: {
    open(newval) {
      if (newval) {
        console.log(
          newval,
          this.currentNode,
          this.form.deptId,
          this.dict.deptId
        );
        if (this.currentNode && this.currentNode.id) {
          this.form.deptId = JSON.stringify(this.currentNode.id);
          this.form.deptName = this.currentNode.label;
        }
        console.log(newval, this.currentNode, this.form.deptId);
      }
    },
  },
  created() {
    this.changePath("staff");
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "个人主页",
      // 是否显示弹出层
      open: false,
      direction: "rtl",
      toString: ["gender", "politicalstatus", "staffType", "status"],
      toDate: ["birthday", "entryDate", "regularDate", "leaveDate"],
      // 表单校验
      rules: {
        name: [
          { required: true, message: "请输入员工姓名", trigger: "blur" },
          { max: 64, message: "最多只能录入64个字符", trigger: "blur" },
        ],
        phoneNumber: [
          { required: true, message: "请输入员工手机号码", trigger: "blur" },
          { max: 11, message: "最多只能录入11个字符", trigger: "blur" },
        ],
        deptName: [
          { required: true, message: "请选择所属部门", trigger: "change" },
        ],
        positionId: [
          { required: true, message: "请选择职位", trigger: "blur" },
        ],
        workNum: [{ required: true, message: "请输入工号" }],
      },
      treeProps: {
        id: "id",
        label: "label",
        areaCode: "areaCode",
        type: "type",
        isLeaf: "isLeaf",
        children: "children",
        icon: "icon",
      },
      ishowBumen: false,
      deptnode: {},
    };
  },

  methods: {
    handleSwitch(i) {
      let obj = {};
      if (i == 1) {
        if (this.form.otherCheck == 0) {
          this.form.attendCheck = 0;
          this.form.reviewCheck = 0;
          this.form.goworkCheck = 0;
          this.form.effectCheck = 0;
          this.form.complainCheck = 0;
        } else {
          this.form.attendCheck = 1;
          this.form.reviewCheck = 1;
          this.form.goworkCheck = 1;
          this.form.effectCheck = 1;
          this.form.complainCheck = 1;
        }
      }
      obj = {
        otherCheck: this.form.otherCheck,
        attendCheck: this.form.attendCheck,
        reviewCheck: this.form.reviewCheck,
        goworkCheck: this.form.goworkCheck,
        effectCheck: this.form.effectCheck,
        complainCheck: this.form.complainCheck,
      };
      obj.staffId = this.form.id;

      this.form.staffId = this.form.id;
      this.form.type = 1;
      this.$post("/staff/check/authorize", obj).then((res) => {
        if (res.code == 1) {
          this.$message.success("绩效展示修改成功！");
        } else {
          this.$message.error(res.message);
        }
      });
    },
    renderContent: function (h, { node, data, store }) {
      return (
        <span>
          <i style="font-size:16px;color:#409EFF" class={data.icon}></i>
          <span style="padding-left: 2px;font-size:14px">{node.label}</span>
        </span>
      );
    },
    async loadNode(node, resolve) {
      if (node.level === 0) {
        return;
      }
      resolve(data.result);
    },
    // 点击
    handleNodeClick(node) {
      this.deptnode = node;
    },
    comfirmbument() {
      this.form.deptId = this.deptnode.id;
      this.form.deptName = this.deptnode.label;
      this.ishowBumen = false;
    },
    /** 编辑 */
    edit(row) {
      this.reset();
      this.query = { id: row.id };
      this.urls.currUrl = "staff/edit";
      this.getData();
      this.pageInfo.type = "edit";
      this.title = "考核授权";
    },
    /** 新增 */
    add(row) {
      this.reset();
      this.urls.currUrl = "staff/add";
      this.getData();
      this.pageInfo.type = "add";
      this.title = "新增员工基本信息";
    },
    /** 查看*/
    view(row) {
      this.reset();
      this.query = { id: row.id };
      this.urls.currUrl = "staff/view";
      this.getData();
      this.pageInfo.type = "view";
      this.title = "员工基本信息详细";
    },
    /**取消按钮 */
    cancel() {
      this.open = false;
    },
    /**获取数据后弹框 */
    afterRender(data) {
      this.open = true;
    },

    afterSubmit(data) {
      this.open = false;
      this.$emit("ok");
    },

    // 表单重置
    reset() {
      this.form = {
        name: "",
        gender: 1,
        birthday: null,
        photoPath: "",
        phoneNumber: "",
        idCard: "",
        workNum: "",
        politicalstatus: 1,
        deptId: null,
        deptName: "",
        positionId: null,
        positionName: "",
        staffType: 1,
        status: 1,
        registerPath: "",
        entryDate: null,
        regularDate: null,
        leaveDate: null,
        remark: "",
      };
      this.resetForm("form");
    },
    resetForm(refName) {
      if (this.$refs[refName]) {
        this.$refs[refName].resetFields();
      }
    },
    cancledept() {
      this.deptnode = {};
    },
  },
};
</script>
<style lang="less" scoped>
.tips {
  margin-left: 120px;
  margin-bottom: 20px;
  color: #999;
  font-size: 15px;
}
.titles {
  color: #409eff;
  font-size: 16px;
  display: flex;
  align-items: center;
}
.titles::before {
  content: "";
  width: 6px;
  height: 16px;
  background-color: #409eff;
  display: inline-block;
  margin-right: 10px;
}
.cell2 {
  width: 100%;
  height: 100%;
  padding: 20px;
  .history {
    margin-bottom: 30px;
    span {
      color: #888;
    }
    .times {
      color: #000;
    }
    /deep/.el-switch__core {
      width: 60px !important;
      height: 30px;
      border-radius: 30px;
    }
    /deep/.el-switch__core:after {
      width: 30px;
      height: 30px;
      top: -1px;
      left: 0px;
    }
    /deep/.el-switch.is-checked .el-switch__core::after {
      margin-left: 29px;
    }
  }
}
</style>
