<template>
  <div class="page">
    <div>
      <tab-pane
        :thirdList="thirdList"
        :activeName="activeName"
        @handleClick="handleClick"
      ></tab-pane>
    </div>
    <!-- <div class="totalNum flex" v-if="tableData.staff">
      <div class="item">
        在职员工 <span class="num">{{ tableData.staff.inWorkStaff }}</span>
      </div>
      <div class="item flex">
        <div>
          全职 <span class="num">{{ tableData.staff.fullStaff }}</span>
        </div>
        <div>
          实习 <span class="num">{{ tableData.staff.pricateStaff }}</span>
        </div>
        <div>
          兼职 <span class="num">{{ tableData.staff.concurrentlyStaff }}</span>
        </div>
      </div>

      <div class="item flex">
        <div>
          试用 <span class="num">{{ tableData.staff.onTrialStaff }}</span>
        </div>
        <div>
          正式 <span class="num">{{ tableData.staff.formalStaff }}</span>
        </div>
        <div>
          待离职 <span class="num">{{ tableData.staff.resignationStaff }}</span>
        </div>
      </div>
    </div> -->
    <el-row :gutter="20" style="padding-top: 10px;">
      <el-col :span="6" :xs="12" class="mytree">
        <div class="titles">选择部门</div>
        <!--  default-expand-all -->
        <el-scrollbar style="height:630px;overflow-y: auto;">
          <el-tree
            size="mini"
            ref="siteTree"
            :data="areaData"
            id="el-tree"
            node-key="id"
            :props="treeProps"
            :load="loadNode"
            highlight-current
            :expand-on-click-node="false"
            :render-content="renderContent"
            @node-click="handleNodeClick"
            :default-expand-all="true"
          >
          </el-tree>
        </el-scrollbar>
      </el-col>
      <el-col :span="18" :xs="12">
        <el-row>
          <LayoutTable
            notDel
            notAdd
            :data="tableData"
            :config="tableConfig"
            ref="layoutTable"
          >
            <el-button
              type="primary"
              @click="doExport"
              :disabled="isExport"
              size="mini"
              slot="table-head-left2"
              >导出</el-button
            >
            <el-dropdown
              class="moreControll"
              slot="table-head-left2"
              style="margin-left:20px"
            >
              <el-button type="primary" size="mini">
                更多操作<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button type="text" @click="syncPerson"
                    >同步数据</el-button
                  >
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button type="text" @click="handleImport"
                    >导入花名册</el-button
                  >
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button type="text" @click="lookDetailHis"
                    >历史花名册</el-button
                  >
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button type="text" @click="SelectEXport"
                    >自定义列表字段</el-button
                  >
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <span class="freshTime" slot="table-head-left2">
              <i class="el-icon-refresh"></i>
              <span
                >上次同步时间：{{
                  tableData.staff ? tableData.staff.refreshDate : "--"
                }}</span
              >
            </span>
          </LayoutTable>
        </el-row>
      </el-col>
    </el-row>
    <!-- 导入对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的数据
          <el-link
            type="primary"
            style="font-size: 14px"
            @click="downloadTemplate"
            >下载模板</el-link
          >
        </div>
        <div class="el-upload__tip" style="color: red" slot="tip">
          提示：仅允许导入“xls”或“xlsx”格式文件！
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 花名册记录查看 -->
    <el-drawer title="历史花名册" :visible.sync="drawerhistory" direction="rtl">
      <div class="hisList">
        <div class="list mt10" v-for="item in 1" :key="item">
          <div class="flex flex-align-center flex-pack-justify">
            <div>花名册记录</div>
            <!-- <el-button type="text">查看</el-button> -->
          </div>
          <div class="times">
            导出时间：2023-07-19
          </div>
        </div>
      </div>
    </el-drawer>

    <!-- 表格设置 -->
    <el-dialog :visible.sync="isdialog" title="自定义列表字段设置">
      <div class="tipsword">
        请选择表格展示字段，导出的表格中的内容选中的字段将保持一致。
      </div>
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          v-for="(item, index) in setcolum"
          :key="index"
          :label="item.label"
        >
        </el-checkbox>
      </el-checkbox-group>
      <div class="mt20" style="text-align:right">
        <el-button @click="() => (isdialog = falsle)">取消</el-button>
        <el-button type="primary" @click="handleOk">确定</el-button>
      </div>
    </el-dialog>

    <drawer-show
      ref="drawerform"
      @ok="getData"
      :bumentree="areaData"
      :currentNode="currentNode"
    />
  </div>
</template>

<script>
import { timestampToTime } from "@/assets/utils/dateFormat.js";
/** 表单弹出框模式需引入 */
import drawerShow from "./drawershow";
import table from "@/assets/mixins/table";
import tree from "@/assets/mixins/tree";
import TabPane from "@/components/tabPane.vue";
export default {
  name: "StaffList",
  components: {
    drawerShow,
    TabPane,
  },
  mixins: [table, tree],
  created() {
    this.$post("/dept/treeselect", {}).then(({ data }) => {
      this.areaData = data.result;
    });
  },
  methods: {
    handleOk() {
      this.config.columns.forEach((v) => {
        v.prop ? (v.show = false) : (v.show = true);
        this.checkList.forEach((val) => {
          if (val == v.label) {
            v.show = true;
          }
        });
      });
      console.log(this.config.columns);
      this.$forceUpdate(this.config.columns);
      this.isdialog = false;
    },
    // 自定义字段
    SelectEXport() {
      this.setcolum = this.config.columns.filter(
        (item) => item.label && item.prop
      );
      console.log(this.config.columns);
      this.checkList = this.setcolum.map((v) => {
        if (v.show) {
          return v.label;
        }
      });
      this.isdialog = true;
    },
    /** 同步 */
    syncPerson() {
      this.$post("/staff/syncPersons", {}).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
        }
      });
    },
    /** 导入 */
    handleImport() {
      this.upload.title = "员工导入";
      this.upload.open = true;
    },
    handleClick(key) {
      console.log(key);
      this.$store.commit("setThirdPath", key);
      this.$router.push({
        path: key,
      });
    },
    /** 重写新增方法 */
    toAdd(row) {
      this.$refs.drawerform.add(row);
    },
    /** 重写编辑方法 */
    toEdit(row) {
      this.$refs.drawerform.edit(row);
    },
    /** 重写查看方法 */
    toView(row) {
      // this.$refs.drawerform.view(row);
      // console.log(row)
      // this.personData = row
      // this.isshowHome = true
      this.$router.push({
        path: "/staff/view",
        query: {
          id: row.id,
        },
      });
    },

    handleNodeClick(node) {
      this.currentNode = node;
      this.query = Object.assign({}, this.query, { deptId: node.id });
      this.query.page = 1;
      this.$router.push({
        path: this.$route.path,
        query: {
          page: 1,
        },
      });
      this.getData();
    },
    doExport() {
      this.isExport = true;
      let params = {};
      for (let value of this.config.search) {
        if (this.query[value.name]) {
          params[value.name] = this.query[value.name];
        }
      }
      if (this.selection.length > 0) {
        params["idList"] = this.selection;
      }
      this.$download(
        "/staff/exportExcel",
        {
          ...params,
        },
        { type: "excel" }
      )
        .then(() => (this.isExport = false))
        .catch((error) => {
          this.isExport = false;
          this.$message.error(error.message);
        });
    },
    /** 下载模板操作 */
    downloadTemplate() {
      this.isExport = true;
      this.$download("/staff/downloadTemplate", {}, { type: "excel" })
        .then(() => (this.isExport = false))
        .catch((error) => {
          this.isExport = false;
          this.$message.error(error.message);
        });
    },
    // 导出花名册
    lookDetailHis() {
      this.drawerhistory = true;
    },
    /** 提交上传文件 */
    submitFileForm() {
      this.$refs.upload.submit();
    },
    afterRender(data) {
      this.tableData.staff.refreshDate = timestampToTime(
        this.tableData.staff.refreshDate,
        6
      );
      this.$refs.layoutTable.showType = "tableSelect";
    },
  },
  data() {
    return {
      // 用户导入参数
      upload: {
        headers: {
          Authorization: window.sessionStorage.getItem("token") || "",
        },
        // 是否显示弹出层（员工关怀信息导入）
        open: false,
        // 弹出层标题（员工关怀信息导入）
        title: "导入花名册数据",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的数据
        updateSupport: 0,
        // 上传的地址
        url: process.env.VUE_APP_API_BASE_URL + "/staff/importData",
      },
      config: {
        showType: "tableSelect",
        search: [
          {
            name: "name",
            type: "text",
            label: "员工姓名",
            fuzzy: true,
          },
          {
            name: "phoneNumber",
            type: "text",
            label: "手机号",
            fuzzy: true,
          },
        ],
        columns: [
          { type: "selection", width: 60, show: true },
          { type: "index", label: "序号", width: 50, show: true },
          { label: "员工姓名", prop: "name", show: true },
          { label: "工号", prop: "workNum", show: true },
          { label: "部门", prop: "deptName", show: true },
          {
            label: "职位",
            prop: "positionName",
            formatter: this.formatters,
            show: true,
          },
          {
            label: "员工类型",
            prop: "staffType",
            formatter: this.formatterType,
            show: true,
          },
          {
            label: "员工状态",
            prop: "status",
            formatter: this.formatter,
            show: true,
          },
          {
            label: "是否在政务中心",
            prop: "source",
            formatter: this.formatterSource,
            show: true,
          }, //未对
          {
            label: "手机号",
            prop: "phoneNumber",
            formatter: this.formatters,
            show: true,
          },
          {
            label: "操作",
            width: 240,
            show: true,
            formatter: (row) => {
              return (
                // <table-buttons
                //   noAdd
                //   noDel
                //   noEdit
                //   row={row}
                //   onView={this.toView}
                //   onEdit={this.toEdit}
                // />
                <table-buttons
                  noAdd
                  noAuth
                  noDel
                  noEdit
                  row={row}
                  onView={this.toView}
                  onEdit={this.toEdit}
                />
              );
            },
          },
        ],
        isshowTabPane: false,
      },
      isshowHome: false,
      personData: [],
      isExport: false,
      staffInfo: {},
      drawerhistory: false,
      checkList: [],
      setcolum: [],
      isdialog: false,
    };
  },
  computed: {
    thirdList() {
      if (!this.$store.state.CurrentThirdArr) return [];
      return this.$store.state.CurrentThirdArr;
    },
    activeName() {
      return this.$store.state.ThirdPath;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-tree-node__expand-icon {
  font-size: 18px !important;
  color: #606266;
}
/deep/.el-tree-node__content {
  padding-left: 2px !important;
}
.el-card__body {
  padding: 10px;
}
.el-calendar-table .el-calendar-day {
  height: 70px;
}
.is-selected {
  color: #fa3b19;
}
</style>

<style lang="scss" scoped>
.page {
  min-width: 1400px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.hisList {
  padding: 15px;
  .list {
    background-color: rgba(64, 158, 255, 0.1);
    font-size: 14px;
    border-radius: 10px;
    padding: 10px;
    .times {
      font-size: 12px;
      color: #999;
    }
  }
}
.totalNum {
  background: rgba(64, 158, 255, 0.2);
  padding: 15px;
  border-left: 4px solid rgb(20, 134, 248);
  color: rgb(100, 100, 100);
  .item {
    padding: 0 10px;
    border-right: 1px solid gray;
  }
  .item:last-child {
    border: none;
  }
  .num {
    color: #409eff;
    margin-left: 10px;
    margin-right: 20px;
  }
}
.controllList {
  margin-top: 20px;
  .moreControll {
    margin-left: 20px;
  }
}
.freshTime {
  color: #999;
  margin-left: 20px;
}
.cardTitle {
  font-size: 16px;
  color: rgb(20, 134, 248);
  list-style-type: none;
  border-bottom: 3px solid rgb(20, 134, 248);
  padding-bottom: 2px;
}

.mytree ::v-deep {
  .el-tree--highlight-current
    ::v-deep
    .el-tree-node.is-checked
    > .el-tree-node__content {
    background-color: rgb(255, 255, 255);
    color: rgb(64, 158, 255);
  }

  .el-tree--highlight-current
    ::v-deep
    .el-tree-node.is-current
    > .el-tree-node__content {
    background-color: rgb(255, 255, 255);
    color: rgb(64, 158, 255);
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node {
    position: relative;
    padding-left: 16px;
  }

  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
  .el-tree-node__expand-icon.is-leaf {
    display: none;
  }

  .el-tree-node__children {
    padding-left: 16px;
  }

  .el-tree-node :last-child:before {
    height: 38px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:before {
    border-left: 1px dashed #4386c6;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }

  .el-tree-node:after {
    border-top: 1px dashed #4386c6;
    height: 20px;
    top: 12px;
    width: 20px;
  }
}
.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;
}
</style>
