<template>
  <div class="fullHeight">
    <div class="searchBox whiteBlock">
      <el-form
        :inline="true"
        size="medium"
        :model="searchForm"
        ref="searchForm"
      >
        <el-form-item
          :label="$t('message.personnelPosition.beaconManage.workerName')"
          prop="workerName"
        >
          <el-input
            v-model="searchForm.workerName"
            :placeholder="$t('message.personnelPosition.please_enter')"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button v-permission="{key: 'query', menuPath: '/project/labor/blackList'}" type="primary" plain @click="loadCardData">
            {{ $t("message.personnelPosition.beaconManage.query") }}
          </el-button>
          <el-button v-permission="{key: 'renovate', menuPath: '/project/labor/blackList'}" type="warning" plain @click="resetForm">
            {{ $t("message.personnelPosition.beaconManage.refresh") }}
          </el-button>
          <el-button v-permission="{key: 'add', menuPath: '/project/labor/blackList'}" type="primary" @click="addPoint">
            {{ $t("message.laborDev.add2") }}
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_wrap whiteBlock">
      <el-table class="tables" :data="pointList">
        <el-table-column
          type="index"
          width="50"
          align="center"
          :label="$t('message.personnelPosition.beaconManage.table.index')"
        ></el-table-column>
        <el-table-column
          prop="workerName"
          :label="$t('message.laborDev.blackListNames')"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="addTime"
          :label="$t('message.laborDev.addDate')"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="addReason"
          :label="$t('message.laborDev.blackReason')"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="addReason"
          label="是否将人员退场"
          align="center"
        >
          <template slot-scope="scope">
            {{scope.row.isExit == 1 ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('message.personnelPosition.beaconManage.table.operation')"
          align="center"
          width="250"
        >
          <template slot-scope="scope">
            <div class="tableBtns">
              <div v-permission="{key: 'edit', menuPath: '/project/labor/blackList'}" @click="editPoint(scope.row)" class="operationText">
                <img
                  src="@/assets/images/icon-edit.png"
                  width="15px"
                  height="15px"
                />
                <span>{{
                  $t("message.personnelPosition.beaconManage.table.edit")
                }}</span>
              </div>
              <div v-permission="{key: 'delete', menuPath: '/project/labor/blackList'}" @click="removePoint(scope.row)" class="operationText">
                <img
                  src="@/assets/images/icon-delete.png"
                  width="15px"
                  height="15px"
                />
                <span>{{
                  $t("message.personnelPosition.beaconManage.table.delete")
                }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <!-- <div slot="empty">{{$t('message.personnelPosition.empty')}}</div> -->
      </el-table>
      <el-pagination
        class="pagerBox"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="$store.state.PAGESIZRS"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="Number(total)"
        background
      ></el-pagination>
    </div>
    <!-- 添加卡片弹框 -->
    <el-dialog
      :modal-append-to-body="false"
      :title="cardDialogTitle"
      :visible.sync="cardDialog"
      width="667px"
      @close="close"
    >
      <div class="dialog_content">
        <el-form
          size="medium"
          :model="cardForm"
          ref="cardForm"
          :rules="cardFormRules"
          label-width="125px"
          class="dialogFormBox"
        >
          <el-form-item
            :label="$t('message.laborDev.addToBlackReason')"
            prop="addReason"
          >
            <el-input
              v-model="cardForm.addReason"
              :placeholder="$t('message.personnelPosition.please_enter')"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('message.laborDev.addToBlackTime')"
            prop="addTime"
          >
            <el-date-picker
              v-model="cardForm.addTime"
              type="date"
              :placeholder="$t('message.laborMange.pleaseSelectADate')"
              value-format="yyyy-MM-dd"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            :label="$t('message.laborDev.blackNames')"
            prop="workerId"
          >
            <!-- multiple clearable-->
            <el-select
              v-model="cardForm.workerId"
              :placeholder="$t('message.personnelPosition.please_select')"
              filterable
            >
              <el-option
                :label="item.workerName"
                :value="item.id"
                v-for="(item, index) in allPersonList"
                :key="index"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="是否将人员退场"
            prop="isExit"
          >
            <el-radio-group v-model="cardForm.isExit">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="dialog-footer">
            <el-button
              class="cancleBtn"
              @click="cardDialog = false"
              icon="el-icon-circle-close"
              size="medium"
              >{{ $t("message.personnelPosition.cancel") }}
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-circle-check"
              @click="saveCardFn"
              size="medium"
              >{{ $t("message.personnelPosition.determine") }}
            </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getWorkerInfoListApi } from "@/assets/js/api/personnelPosition.js";
import {
  workerBlacklistListApi,
  workerBlacklistAddApi,
  workerBlacklistEditApi,
  workerBlacklistDeleteApi,
} from "@/assets/js/api/laborPerson.js";
export default {
  data() {
    return {
      searchForm: {
        workerName: "",
      },
      pointList: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
      cardDialogTitle: "",
      cardDialog: false,
      cardForm: {
        addReason: "",
        addTime: "",
        idCard: "",
        reason: "",
        workerId: "",
        isExit: 1,
        workerName: "",
        projectSn: this.$store.state.projectSn,
      },
      cardFormRules: {
          addReason: [
          {
            required: true,
            message: this.$t("message.personnelPosition.required"),
            trigger: "blur",
          },
        ],
        addTime: [
          {
            required: true,
            message: this.$t("message.personnelPosition.mandatory"),
            trigger: "change",
          },
        ],workerId: [
          {
            required: true,
            message: this.$t("message.personnelPosition.mandatory"),
            trigger: "change",
          },
        ],
      },
      isAdd: false,
      allPersonList: [],
    };
  },
  mounted() {
    this.loadAllPerson();
    this.loadCardData();
  },
  methods: {
    //获取所有人员
    loadAllPerson() {
      getWorkerInfoListApi({
        projectSn: this.$store.state.projectSn,
        userEnterpriseId: this.$store.state.userInfo.userEnterpriseId,
        inServiceType: 1
      }).then((res) => {
        this.allPersonList = res.result;
      });
    },
    addPoint(event) {
      this.isAdd = true;
      this.cardDialog = true;
      this.cardForm = {
        addReason: "",
        addTime: "",
        idCard: "",
        reason: "",
        workerId: "",
        isExit: 1,
        workerName: "",
        projectSn: this.$store.state.projectSn,
      };
      this.cardDialogTitle = this.$t("message.laborDev.add2");
    },
    editPoint(item) {
      this.isAdd = false;
      this.cardDialogTitle = this.$t("message.laborDev.btn_edit"); //编辑卡片
      this.cardForm = JSON.parse(JSON.stringify(item));
      this.cardDialog = true;
    },
    removePoint(item) {
      this.$confirm(
        this.$t("message.personnelPosition.beaconManage.table.confirmText") +
          "【" +
          item.workerName +
          "】?",
        this.$t("message.personnelPosition.beaconManage.table.Tips"),
        {
          type: "warning",
        }
      ).then(() => {
        workerBlacklistDeleteApi({ id: item.id }).then((res) => {
          this.loadAllPerson();
          this.loadCardData();
          this.$message.success(
            this.$t("message.personnelPosition.delete_success")
          ); //删除成功!
        });
      });
    },
    //获取卡片列表
    loadCardData() {
      workerBlacklistListApi({
        projectSn: this.$store.state.projectSn,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        workerName: this.searchForm.workerName,
        userEnterpriseId: this.$store.state.userInfo.userEnterpriseId
      }).then((res) => {
        this.pointList = res.result.records;
        this.total = res.result.total;
      });
    },
    //添加或编辑卡片
    saveCardFn() {
      this.$refs["cardForm"].validate((valid) => {
        if (valid) {
          if (this.isAdd) {
            // this.cardForm.floorId = this.currentFloorDetail.floorId
            workerBlacklistAddApi(this.cardForm).then((res) => {
              this.cardDialog = false;
              this.loadAllPerson();
              this.loadCardData();
              this.$message.success(
                this.$t("message.personnelPosition.add_success")
              ); //添加成功！
            });
          } else {
            workerBlacklistEditApi(this.cardForm).then((res) => {
              this.cardDialog = false;
              this.loadAllPerson();
              this.loadCardData();
              this.$message.success(
                this.$t("message.personnelPosition.edit_success")
              ); //编辑成功！
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.$refs["searchForm"].resetFields();
      this.loadCardData();
    },

    //查看条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.loadCardData();
    },
    //查看页
    handleCurrentChange(val) {
      this.pageNo = val;
      this.loadCardData();
    },
    close() {
      this.$nextTick(() => {
        this.$refs.cardForm.clearValidate()
      })
    },
  },
};
</script>
