<template>
  <div class="page">
    <LayoutTable :data="tableData" notDel :config="tableConfig"> </LayoutTable>

    <drawer-show ref="drawerform" @ok="getData" />
  </div>
</template>

<script>
/** 表单弹出框模式需引入 */
import drawerShow from "./drawershow";
import table from "@/assets/mixins/table";
export default {
  name: "StaffList",
  components: {
    drawerShow,
  },
  mixins: [table],
  created() {},
  methods: {
    /** 重写新增方法 */
    toAdd(row) {
      this.$refs.drawerform.add(row);
    },
    /** 重写编辑方法 */
    toEdit(row) {
      this.$refs.drawerform.edit(row);
    },
    /** 重写查看方法 */
    toView(row) {
      this.$refs.drawerform.view(row);
    },
    // 复职操作
    handleReback(row) {
      this.$post("/staff/save", { id: row.id, staffStatus: 1 })
        .then((res) => {
          if (res.code == 1) {
            this.$message.success("复职成功！");
            this.getData();
          }
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    // 离职操作
    toDimission(row) {
      console.log(row);
      // 先弹窗提问
      this.$confirm(
        "此操作将" +
          row.name +
          "作离职处理，离职后，该员工在之前发送的名片将不做展示，客户点击名片消息后跳转至之前绑定的企业详情（若该员工有多张企业名片，以第一个为准），是否继续？",
        "系统提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }
      )
        .then(() => {
          // 先修改状态在修改
          let query = JSON.parse(JSON.stringify(row));
          query.staffStatus = 3;
          console.log(this.$refs.drawerform.urls.saveUrl);

          this.$post("staff/leave", { id: query.id }).then((res) => {
            this.$message.success(res.msg);
            this.getData();
          });
        })
        .catch(() => {});
    },
    // 重写getData
    async getData() {
      this.query = Object.assign(this.query, this.$route.query);
      try {
        await this.beforeFecth();
      } catch (error) {
        return;
      }
      this.query.staffStatus
        ? ""
        : "staffStatus" in this.query
        ? ""
        : (this.query.staffStatus = 1);
      this.tableData.loading = true;
      this.$post(this.pageInfo.list, this.query, {
        cancelToken: this.source.token,
      })
        .then(({ data }) => {
          this.tableData = this.beforeRender(
            Object.assign({}, this.tableData, data)
          );
          this.afterRender(this.tableData);
        })
        .catch((error) => {
          if (error.message == "自动取消ajax操作") return;
          this.$message.error(error.message);
        })
        .then((data) => {
          clearTimeout(this.loadingTimer);
          this.loadingTimer = setTimeout(() => {
            this.tableData.loading = false;
          }, 300);
        });
    },
  },
  data() {
    return {
      config: {
        search: [
          {
            name: "staffStatus",
            type: "select",
            placeholder: "请选择员工状态",
            label: "员工状态",
          },
          {
            name: "companyId",
            type: "select",
            placeholder: "请选择所属企业",
            label: "所属企业",
          },

          {
            name: "name",
            type: "text",
            placeholder: "请输入员工姓名",
            label: "员工姓名",
          },
        ],
        columns: [
          { type: "index", label: "序号", width: 50 },

          { label: "员工姓名", prop: "name", width: 110 },

          {
            label: "头像",
            prop: "photoPath",
            formatter: (row) => {
              return row.photoPath != "" ? (
                <el-image
                  style="width: 70px; height: 70px"
                  src={row.photoPath}
                  preview-src-list={[row.photoPath]}
                >
                  <div
                    slot="error"
                    class="image-slot"
                    style="width: 70px; height: 70px;display:flex;justify-content: center;align-items: center;"
                  >
                    <i
                      class="el-icon-picture-outline"
                      style="font-size:26px"
                    ></i>
                  </div>
                </el-image>
              ) : (
                "--"
              );
            },
            width: 110,
          },
          {
            label: "员工状态",
            prop: "staffStatus",
            formatter: this.formatter,
            width: 80,
          },
          { label: "联系电话", prop: "phoneNumber", width: 110 },

          {
            label: "邮件地址",
            prop: "email",
            formatter: this.formatters,
            width: 160,
          },

          { label: "所属公司", prop: "companyIds", formatter: this.formatters },

          {
            label: "职位",
            prop: "positionId",
            formatter: this.formatter,
            width: 120,
          },
          { label: "发送名片次数", prop: "sendBusinessCardTimes", width: 100 },
          { label: "累计查看次数", prop: "sumViews", width: 100 },

          {
            label: "最近更新时间",
            prop: "updateTime",
            formatter: this.formatterDate,
            width: 140,
          },
          {
            label: "更新人员",
            prop: "updateUserId",
            formatter: this.formatter,
            width: 100,
          },
          // {label: "员工状态", prop: "staffStatus",formatter: this.formatter},
          {
            label: "操作",
            width: 180,
            formatter: (row) => {
              return row.staffStatus == 3 ? (
                <div>
                  <table-buttons
                    noAdd
                    noView
                    row={row}
                    onEdit={this.toEdit}
                    onView={this.toView}
                    onDel={this.toDel}
                  />
                  {/* <span
                    onClick={() => {
                      this.toDimission(row);
                    }}
                    style="color:#409EFF;margin-left:10px;cursor:pointer"
                  >
                    <i class="el-icon-document-delete"></i>
                    离职
                  </span> */}
                  <el-button
                    type="text"
                    icon="el-icon-refresh-left"
                    size="mini"
                    onClick={() => {
                      this.handleReback(row);
                    }}
                    title="复职"
                  >
                    复职
                  </el-button>
                </div>
              ) : (
                <div>
                  <table-buttons
                    noAdd
                    noView
                    row={row}
                    onEdit={this.toEdit}
                    onView={this.toView}
                    onDel={this.toDel}
                  />
                  <span
                    onClick={() => {
                      this.toDimission(row);
                    }}
                    style="color:#409EFF;margin-left:10px;cursor:pointer"
                  >
                    <i class="el-icon-document-delete"></i>
                    离职
                  </span>
                </div>
              );
            },
          },
        ],
      },
    };
  },
};
</script>
