<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-select
          v-model="query.has_blt"
          placeholder="有无定位卡"
          @change="handleQuery"
          clearable
          style="margin-left: 2px; width: 120px"
        >
          <el-option
            v-for="item in bltOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select
          v-model="query.type"
          placeholder="人员类型"
          @change="handleQuery"
          clearable
          style="margin-left: 2px; width: 120px"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select
          v-model="query.job_state"
          placeholder="人员状态"
          @change="handleQuery"
          clearable
          style="margin-left: 2px; width: 120px"
        >
          <el-option
            v-for="item in jobOptions2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-cascader
          v-model="query.belong_dept"
          :options="deptData"
          clearable
          placeholder="部门/单位"
          @change="handleQuery"
          :show-all-levels="false"
          :props="{ emitPath: false, checkStrictly: true }"
          style="margin-left: 4px; width: 150px"
        />
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-input
            v-model="query.search"
            placeholder="姓名/手机号"
            clearable
            @keyup.enter="handleQuery"
          ></el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleQuery"
          ></el-button>
          <el-button
            type="primary"
            :loading = 'cLoading'
            icon="el-icon-download"
            @click="exportExcel"
          >导出</el-button>
        </div>
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable
        ref="table"
        :apiObj="apiObj"
        row-key="id"
        @selection-change="selectionChange"
        stripe
        @resetQuery="resetQuery"
      >
        <!-- <el-table-column type="selection" width="50"></el-table-column> -->
        <el-table-column label="#" type="index" width="50"></el-table-column>
        <el-table-column label="人员类型" prop="type" width="160">
          <template #default="scope">
            <span
              v-if="
                scope.row.type == 'employee' || scope.row.type == 'remployee'
              "
              >[{{ jobOptions[scope.row.job_state] }}]
            </span>
            <span>{{ userTypeOptions[scope.row.type] }}</span>
            <span
              v-if="
                (scope.row.type == 'employee' ||
                  scope.row.type == 'remployee') &&
                scope.row.is_atwork
              "
              style="color: green; font-weight: bold"
            >
              在岗
            </span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="name" width="120">
        </el-table-column>
        <el-table-column label="性别" prop="gender" width="60">
        </el-table-column>
        <el-table-column label="证件照" prop="photo" width="120">
          <template #default="scope">
            <el-avatar :size="50" :src="scope.row.photo" shape="square" />
          </template>
        </el-table-column>
        <el-table-column
          label="手机号"
          prop="phone"
          width="120"
        ></el-table-column>
        <el-table-column
          label="部门/单位"
          prop="belong_dept"
          width="180"
          :show-overflow-tooltip="true"
        >
          <template #default="scope">
            <span v-if="scope.row.belong_dept_">{{
              scope.row.belong_dept_.name
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="身份证号"
          prop="id_number"
          width="180"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="系统账号" prop="user" width="180"
          ><template #default="scope">
            <span v-if="scope.row.user">{{ scope.row.user_.username }}</span>
          </template></el-table-column
        >
        <el-table-column label="定位卡号" prop="blt_" width="180" :show-overflow-tooltip="true">
          <template #default="scope">
            <div v-if="scope.row.blt_">
              <div>{{ scope.row.blt_.code }}</div>
              <div v-if="scope.row.location">
                {{ scope.row.location.area_fix_name }}-
                <span v-if="scope.row.location.xx_detail"
                  >({{ scope.row.location.xx_detail.longitude }},
                  {{ scope.row.location.xx_detail.latitude }})</span
                >
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="create_time"
          width="180"
        ></el-table-column>
        <el-table-column label="操作" fixed="right" align="left" width="170">
          <template #default="scope">
            <!-- <el-button
							link
							type="primary"
							size="small"
							@click="Addcertificate(scope.row)"
							v-auth="'employee.update'"
						>证书
						</el-button> -->
            <el-button
              link
              type="success"
              size="small"
              @click="handleForm('show', scope.row)"
              >查看
            </el-button>
            <el-button
              link
              type="warning"
              size="small"
              v-auth="'employee.update'"
              @click="handleForm('edit', scope.row)"
              >编辑
            </el-button>
            <el-button
              v-if="scope.row.blt_"
              link
              type="danger"
              size="small"
              @click="handleBindBlt(20, scope.row)"
              >解绑
            </el-button>
            <el-button
              v-else
              link
              type="primary"
              size="small"
              @click="handleBindBlt(10, scope.row)"
              >绑卡
            </el-button>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>
  <save-dialog
    v-if="dialog.save"
    ref="saveDialog"
    @success="handleSaveSuccess"
    @closed="dialog.save = false"
  >
  </save-dialog>

  <ScBind
    v-if="showBindBlt"
    :bindBtl="bindBtl"
    :bindType="bindType"
    :bindName="bindName"
    :bindEmployee="bindEmployee"
    @closed="closed"
  ></ScBind>
  <!-- <el-Dialog
    title="绑定定位卡"
    v-model="showBindBlt"
    destroy-on-close
    @closed="closeDrawer"
  >
    <el-form ref="dialogForm" :model="form" label-width="120px">
      <el-form-item label="姓名">
        {{ bindBltName }}
      </el-form-item>
      <el-form-item label="绑定卡号">
        <el-select v-model="form.blt" style="width: 100%" :disabled="dis">
          <el-option
            v-for="item in bltList"
            :key="item.code"
            :label="item.code"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button v-if="form.type === 10" type="primary" @click="submitBindBlt"
        >绑定</el-button
      >
      <el-button v-if="form.type === 20" type="primary" @click="submitBindBlt"
        >解绑</el-button
      >
      <el-button @click="showBindBlt = false">取消</el-button>
    </template>
  </el-Dialog> -->
</template>
<script>
import saveDialog from "./ep_form.vue";
import ScBind from "@/components/scBind/index.vue";
import { genTree } from "@/utils/verificate";

export default {
  name: "employee",
  components: {
    saveDialog,
    ScBind,
  },
  data() {
    return {
      dialog: {
        save: false,
        permission: false,
      },
      deptData: [],
      apiObj: this.$API.hrm.employee.list,
      query: {},
      tdevice: [],
      selection: [],
      search: {
        keyword: null,
      },
      dis: false,
      showBindBlt: false,
      bltList: [],
      bindName: "",
      bindType: 10,
      bindBtl: null,
      bindEmployee: "",
      form: {
        type: 10,
        blt: "",
        employee: "",
      },
      userTypeOptions: {
        employee: "正式员工",
        remployee: "相关方",
        visitor: "访客",
        driver: "货车司机",
      },
      jobOptions: {
        10: "在职",
        20: "离职",
        30: "退休",
      },
      typeOptions: [
        { label: "正式员工", value: "employee" },
        { label: "相关方", value: "remployee" },
        { label: "访客", value: "visitor" },
        { label: "货车司机", value: "driver" },
      ],
      jobOptions2: [
        { label: "在职", value: 10 },
        { label: "离职", value: 20 },
        { label: "退休", value: 30 },
      ],
      bltOptions :[
        { label: "有", value: 1 },
        { label: "无", value: 0 },
      ]
    };
  },
  mounted() {
    // this.getBltList();
    this.getDept();
  },
  methods: {
    async getDept() {
      let res = await this.$API.system.dept.list.req({
        page: 0,
        type__in: "dept,rparty",
      });
      this.deptData = genTree(res);
    },
    //人员证书添加
    // Addcertificate(row) {
    // 	this.$router.push({
    // 		name: "certificate",
    // 		query: {
    // 			id: row.id,
    // 		},
    // 	});
    // },
    //添加
    handleForm(type, row) {
      this.dialog.save = true;
      this.$nextTick(() => {
        if (type === "add") {
          this.$refs.saveDialog.open(type);
        } else {
          this.$refs.saveDialog.open(type).setData(row);
        }
      });
    },

    /*//添加
                    add(){
                        this.dialog.save = true
                        this.$nextTick(() => {
                            this.$refs.saveDialog.open('add')
                        })
                    },
                    //编辑
                    table_edit(row){
                        this.dialog.save = true
                        this.$nextTick(() => {
                            this.$refs.saveDialog.open('edit').setData(row)
                        })
                    },
                    //查看
                    table_show(row){
                        this.dialog.save = true
                        this.$nextTick(() => {
                            this.$refs.saveDialog.open('show').setData(row)
                        })
                    },*/
    //权限设置
    permission() {
      this.dialog.permission = true;
      this.$nextTick(() => {
        this.$refs.permissionDialog.open();
      });
    },
    //删除
    async table_del(row) {
      await this.$API.hrm.employee.create.req(row.id).then((res) => {
        if (res.err_msg) {
          this.$message.error(res.err_msg);
        } else {
          this.$refs.table.refresh();
          this.$message.success("删除成功");
        }
      });
    },
    //批量删除
    async batch_del() {
      this.$confirm(
        `确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`,
        "提示",
        {
          type: "warning",
        }
      )
        .then(() => {
          const loading = this.$loading();
          this.$refs.table.refresh();
          loading.close();
          this.$message.success("操作成功");
        })
        .catch(() => {});
    },
    //表格选择后回调事件
    selectionChange(selection) {
      this.selection = selection;
    },
    //表格内开关
    changeSwitch(val, row) {
      row.status = row.status == "1" ? "0" : "1";
      row.$switch_status = true;
      setTimeout(() => {
        delete row.$switch_status;
        row.status = val;
        this.$message.success("操作成功");
      }, 500);
    },
    //搜索
    handleQuery() {
      this.$refs.table.queryData(this.query);
    },
    //根据ID获取树结构
    filterTree(id) {
      var target = null;

      function filter(tree) {
        tree.forEach((item) => {
          if (item.id == id) {
            target = item;
          }
          if (item.children) {
            filter(item.children);
          }
        });
      }

      filter(this.$refs.table.tableData);
      return target;
    },
    //本地更新数据
    handleSaveSuccess(data, mode) {
      if (mode == "add") {
        this.$refs.table.refresh();
      } else if (mode == "edit") {
        this.$refs.table.refresh();
      }
    },
    resetQuery() {
      this.query = {};
    },
    closed(data) {
      this.showBindBlt = false;
      this.$refs.table.refresh();
    },

    getBltList() {
      let that = this;
      that.$API.third.tdevice.list
        .req({ type: 30, page: 0, state: "unused" })
        .then((res) => {
          that.tdevice = res;
          that.bltList = res.filter((item) => {
            return item.employee_ === null;
          });
          console.log(res);
          console.log(that.bltList);
        });
    },
    handleBindBlt(type, row) {
      // this.dis = false;
      debugger;
      this.bindName = row.name;
      this.bindType = type;
      this.bindEmployee = row.id;
      if (type === 20) {
        this.bindBtl = row.blt_.code;
      }
      this.showBindBlt = true;
    },
    submitBindBlt() {
      let that = this;
      that.$API.third.tdevice.bltBind.req(this.form).then((res) => {
        that.showBindBlt = false;
        that.$refs.table.refresh();
      });
    },
    exportExcel(){
        let that = this;
        that.cLoading = true;
        that.ElLoading = this.$loading({
          lock: true,
          text: '数据请求中，请稍后...',
          background: 'rgba(0, 0, 0, 0)',
        })
        that.$API.hrm.employee.export_excel.req(that.query)
        .then(res=>{
          that.cLoading = false;
          that.ElLoading.close();
          let urls = config.API_URL.slice(0,-4)+res.path;
          window.open(urls, "_blank");
        }).catch(e=>{
          that.cLoading = false;
          that.ElLoading.close();
        })
      },
  },
};
</script>
