<!-- 明细表 -->
<template>
  <div class="app-container">
    <!-- 操作栏 -->
    <el-row :gutter="10" class="mb10">
      <el-col :span="16">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-check"
          :disabled="form.eBillStatus === '2'"
          :loading="saveLoading"
          @click="handelEnsure"
          >保存</el-button
        >
        <el-button
          type="info"
          size="small"
          :disabled="!form.eBillNo || form.eBillStatus === '2'"
          icon="el-icon-s-check"
          @click="handleApproval"
          >审核</el-button
        >
      </el-col>
    </el-row>
    <!-- 搜索工作栏 -->
    <svg-icon
      v-show="form.eBillStatus === '2'"
      icon-class="approvaled"
      class-name="card-icon-approvaled"
    />
    <el-form ref="queryForm" :model="form" size="small" label-width="98px">
      <SearchBar :show-more="false" :show-span="6" :collapse-span="6">
        <template #header>
          <el-col :span="8">
            <el-form-item label="任岗工作单号" prop="eBillNo">
              <el-input
                v-model="form.eBillNo"
                placeholder="请输入员工编码"
                clearable
                disabled
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单据状态" prop="eBillStatus">
              <DictSelect
                v-model="form.eBillStatus"
                disabled
                placeholder="请选择单据状态"
                dict-type="APPOINT_EBILL_STATUS"
              />
            </el-form-item>
          </el-col>
        </template>
      </SearchBar>
    </el-form>

    <!-- 列表 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>明细</span>
        <el-button
          type="text"
          style="float: right; padding: 3px 0"
          :disabled="form.eBillStatus === '2'"
          @click="handleAdd"
          >新增</el-button
        >
        <el-button
          type="text"
          class="text-danger mr10"
          :disabled="form.eBillStatus === '2'"
          style="float: right; padding: 3px 0"
          @click="handleDelete"
          >删除</el-button
        >
      </div>
      <el-table
        ref="table"
        v-loading="loading"
        :data="list"
        border
        row-key="id"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="任免状态" align="center" prop="isDisabled">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.isDisabled"
              placeholder="请选择任免状态"
              clearable
              :disabled="form.eBillStatus === '2'"
              size="small"
            >
              <el-option
                v-for="dict in getDictDatas(
                  DICT_TYPE.MES_POST_APPOINTMENT_REMOVAL
                )"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="员工工号" align="center" prop="employeeNo">
          <template slot-scope="scope">
            <EmployeeInformationSelect
              ref="employeeInformation"
              v-model="scope.row.employeeNo"
              :disabled="form.eBillStatus === '2'"
              filterable
              @change="employeeInformationChange"
            />
          </template>
        </el-table-column>
        <el-table-column label="姓名" align="center" prop="employeeName" />
        <el-table-column label="岗位编号" align="center" prop="postCode">
          <template slot-scope="scope">
            <PostSelect
              ref="postSelect"
              v-model="scope.row.postCode"
              filterable
              :disabled="form.eBillStatus === '2'"
              @postChange="postChange"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="岗位名称"
          align="center"
          prop="postName"
          show-overflow-tooltip
        />
        <el-table-column
          label="任岗开始时间"
          align="center"
          prop="appointmentPostsTime"
          width="260"
        >
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.appointmentPostsTime"
              type="datetime"
              :disabled="form.eBillStatus === '2'"
              placeholder="开始日期"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="是否主要任岗"
          align="center"
          prop="mainPostFlag"
        >
          <template slot-scope="scope">
            <DictSelect
              v-model="scope.row.mainPostFlag"
              :disabled="form.eBillStatus === '2'"
              placeholder="请选择是否主要任岗"
              dict-type="YES_NO"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import {
  updateEmployeePostMaster,
  approvalEmployeePostMaster,
  getEmployeeAppointRemovePostMaster,
} from "@/api/mes/employeeMaster/employeeAppointRemove";
import { getEmployeeAppointRemovePostDetailPage } from "@/api/mes/employeeMaster/employeeAppointDetail";
import PostSelect from "../components/PostSelect.vue";
import EmployeeInformationSelect from "../components/EmployeeInformationSelect.vue";

export default {
  name: "EmployeeAppointRemovePostDetail",
  components: {
    PostSelect,
    EmployeeInformationSelect,
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 导出遮罩层
      exportLoading: false,
      // 保存遮罩层
      saveLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // MES 岗位任免单明细列表
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      viewOpen: false,
      // 选中的列表
      currentRows: [],
      // 表单参数
      form: {
        pageNo: 1,
        pageSize: 10,
        mesEmployeeMasterId: null,
        eBillStatus: "0",
      },
      // 表单校验
      rules: {
        appointmentPostsTime: [
          { required: true, message: "任岗开始时间不能为空", trigger: "blur" },
        ],
        isDisabled: [
          { required: true, message: "任免状态不能为空", trigger: "blur" },
        ],
      },
      // 是否主要任岗
      isMainAppoint: [
        {
          label: "是",
          value: 0,
        },
        {
          label: "否",
          value: 1,
        },
      ],
    };
  },
  created() {
    if (this.$route.query.eBillNo) {
      this.form.eBillNo = this.$route.query.eBillNo;
      this.getHeaderForm();
      this.getEmployeeAppointDetailPage();
    }
  },
  methods: {
    getHeaderForm() {
      getEmployeeAppointRemovePostMaster(this.$route.query.eBillNo).then(
        (res) => {
          this.form = res.data;
          this.form.eBillStatus = this.form.eBillStatus + "";
        }
      );
    },
    getEmployeeAppointDetailPage() {
      const params = {
        eBillNo: this.$route.query.eBillNo,
        pageNo: 1,
        pageSize: 600,
      };
      getEmployeeAppointRemovePostDetailPage(params).then((res) => {
        this.list = res.data?.list.map((item) => {
          if (item.isDisabled === false) {
            item.isDisabled = "0";
          } else if (item.isDisabled === true) {
            item.isDisabled = "1";
          }
          return item;
        });
      });
    },
    /** 取消按钮 */
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        mesEmployeeMasterId: undefined,
        systemPostId: undefined,
        appointmentPostsTime: undefined,
        mainPostFlag: undefined,
        isDisabled: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 新增操作
    handleAdd() {
      this.list.push({
        appointmentPostsTime: null,
        employeeNo: null,
        employeeName: null,
        mainPostFlag: null,
        isDisabled: null,
      });
    },
    /** 删除按钮操作 */
    handleDelete() {
      if (this.currentRows.length <= 0) {
        this.$modal.msgWarning("请选择您要删除的任免单");
        return;
      }
      this.$confirm("此操作会将选中的数据批量删除，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const employeeNos = this.currentRows.map(
          (item) => item.employId || item.id
        );
        this.list = this.list.filter(
          (item) => !employeeNos.includes(item.employId || item.id)
        );
        this.$refs.table.clearSelection(); // 清空选中状态
      });
    },
    // 选中的
    handleSelectionChange(val) {
      this.currentRows = val;
    },
    // 员工的change
    employeeInformationChange(v) {
      const { employeeNo, employeeName, id } = v;
      const filterEmployee = this.list.filter(
        (item) => item.employeeNo === employeeNo
      );
      filterEmployee.map((item) => {
        item.employeeName = employeeName;
        item.employId = id;
      });
      // const filterEmployee = this.list.find(item => item.employeeNo === employeeNo)
      // filterEmployee.employeeName = employeeName
      // filterEmployee.employId = id
    },
    // 岗位的change
    postChange(v) {
      const { id, code, name } = v;
      const filterPost = this.list.filter((item) => item.postCode === code);
      filterPost.map((item) => {
        item.postName = name;
        item.systemPostId = id;
      });
    },
    // 新增/修改提交
    handelEnsure() {
      const commitList = this.list.map((item) => {
        item.appointmentPostsTime = new Date(item.appointmentPostsTime)
          .toISOString()
          .slice(0, 19)
          .replace("T", " ");
        const {
          isDisabled,
          id,
          mainPostFlag,
          systemPostId,
          employId,
          appointmentPostsTime,
          mesEmployeeMasterId,
        } = item;
        return {
          // employeeNo,
          // employeeName,
          isDisabled: parseInt(isDisabled),
          mainPostFlag,
          systemPostId: systemPostId + "",
          id: id || null,
          appointmentPostsTime,
          mesEmployeeMasterId: mesEmployeeMasterId || employId,
        };
      });

      const params = {
        eBillNo: this.form.eBillNo || null,
        eBillStatus: this.form.eBillStatus || "0",
        doList: commitList,
      };
      this.saveLoading = true;
      updateEmployeePostMaster(params)
        .then((res) => {
          this.$modal.msgSuccess("保存成功!");
          this.$router.replace({
            path: "/personal-manage/employeeAppoint-detail",
            query: { eBillNo: res.data },
          });
          this.getHeaderForm();
          this.getEmployeeAppointDetailPage();
        })
        .finally(() => {
          this.saveLoading = false;
        });
    },
    // 审批
    async handleApproval() {
      const approvalList = this.list.map((item) => {
        item.appointmentPostsTime = new Date(item.appointmentPostsTime)
          .toISOString()
          .slice(0, 19)
          .replace("T", " ");
        const {
          isDisabled,
          mainPostFlag,
          systemPostId,
          employId,
          appointmentPostsTime,
          mesEmployeeMasterId,
        } = item;
        return {
          // employeeNo,
          // employeeName,
          isDisabled: parseInt(isDisabled),
          mainPostFlag,
          systemPostId,
          appointmentPostsTime,
          mesEmployeeMasterId: mesEmployeeMasterId || employId,
        };
      });

      const params = {
        eBillNo: this.form.eBillNo || null,
        eBillStatus: this.form.eBillStatus,
        doList: approvalList,
        // id: this.$route.query.id
      };
      const data = await approvalEmployeePostMaster(params);
      this.$modal.msgSuccess("审批成功");
      this.$router.replace({
        path: "/personal-manage/employeeAppoint-detail",
        query: { eBillNo: data.data },
      });
      this.getHeaderForm();
      this.getEmployeeAppointDetailPage();
    },
  },
};
</script>
<style scoped>
.card-icon-approvaled {
  font-size: 65px !important;
  display: inline-block;
  position: absolute;
  left: 45%;
  top: 45px;
  z-index: 1000;
}
</style>
