<!-- 明细表 -->
<template>
  <el-dialog
    v-dialogDrag
    :title="title"
    :visible.sync="viewOpen"
    width="1200px"
    append-to-body
    @open="dialogOpen"
    @close="dialogClose"
  >
    <!-- 搜索工作栏 -->
    <el-form
      v-show="showSearch"
      ref="queryForm"
      :model="queryParams"
      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="mesEmployeeMasterId">
              <el-input
                v-model="queryParams.mesEmployeeMasterId"
                placeholder="请输入员工编码"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-button type="primary">保存</el-button>
            <el-button type="info">审核</el-button>
          </el-col>
        </template>
      </SearchBar>
    </el-form>

    <!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="handleDelete"
          >删除</el-button
        >
      </el-col>
    </el-row>

    <!-- 列表 -->
    <el-table
      ref="table"
      v-loading="loading"
      :data="list"
      border
      :row-key="getOnlyRowKey"
      @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
            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"
            filterable
            @change="employeeInformationChange"
          />
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center" prop="employeeName" />
      <el-table-column label="岗位" align="center" prop="systemPostId">
        <template slot-scope="scope">
          <PostSelect
            ref="postSelect"
            v-model="scope.row.systemPostId"
            filterable
          />
        </template>
      </el-table-column>
      <el-table-column
        label="任岗开始时间"
        align="center"
        prop="appointmentPostsTime"
        width="260"
      >
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.appointmentPostsTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="开始日期"
          />
        </template>
      </el-table-column>
      <el-table-column label="是否主要任岗" align="center" prop="mainPostFlag">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.mainPostFlag"
            placeholder="是否主要任岗"
          >
            <el-option
              v-for="item in isMainAppoint"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <span slot="footer" class="dialog-footer">
      <el-button @click="viewOpen = false">取 消</el-button>
      <el-button type="primary" @click="handelEnsure">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getEmployeeAppointRemovePostDetailPage } from "@/api/mes/employeeMaster/employeeAppointDetail";
import { createEmployeeAppointRemovePostDetail } from "@/api/mes/employeeMaster/employeeAppointRemove";
import PostSelect from "./PostSelect.vue";
import EmployeeInformationSelect from "./EmployeeInformationSelect.vue";

export default {
  name: "EmployeeAppointRemovePostDetail",
  components: {
    PostSelect,
    EmployeeInformationSelect,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // MES 岗位任免单明细列表
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      viewOpen: false,
      // 选中的列表
      currentRows: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        mesEmployeeMasterId: null,
        systemPostId: null,
        appointmentPostsTime: [],
        mainPostFlag: null,
        isDisabled: null,
        createTime: [],
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        appointmentPostsTime: [
          { required: true, message: "任岗开始时间不能为空", trigger: "blur" },
        ],
        isDisabled: [
          { required: true, message: "任免状态不能为空", trigger: "blur" },
        ],
      },
      // 是否主要任岗
      isMainAppoint: [
        {
          label: "是",
          value: 0,
        },
        {
          label: "否",
          value: 1,
        },
      ],
    };
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 执行查询
      getEmployeeAppointRemovePostDetailPage(this.queryParams).then(
        (response) => {
          this.list = response.data.list;
          this.total = response.data.total;
          this.loading = false;
        }
      );
    },
    /** 取消按钮 */
    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(row) {
      if (this.currentRows.length <= 0) {
        this.$modal.msgWarning("请选择您要删除的任免单");
        return;
      }
      this.$confirm("此操作会将选中的数据批量删除，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const employeeNos = this.currentRows.map((item) => item.employeeNo);
        this.list = this.list.filter(
          (item) => !employeeNos.includes(item.employeeNo)
        );
        this.$refs.table.clearSelection(); // 清空选中状态
      });
    },
    // 选中的
    handleSelectionChange(val) {
      this.currentRows = val;
    },
    // 获取唯一值
    getOnlyRowKey(row) {
      return row.id;
    },
    // 员工的change
    employeeInformationChange(v) {
      const { employeeNo, employeeName } = v;
      const filterEmployee = this.list.find(
        (item) => item.employeeNo === employeeNo
      );
      filterEmployee.employeeName = employeeName;
    },
    dialogOpen() {
      this.getList();
    },
    dialogClose() {
      this.queryParams.mesEmployeeMasterId = undefined;
    },
    // 新增/修改提交
    handelEnsure() {
      const commitList = this.list.map((item) => {
        item.mesEmployeeMasterId = this.queryParams.mesEmployeeMasterId;
        const {
          employeeNo,
          employeeName,
          isDisabled,
          mainPostFlag,
          systemPostId,
          appointmentPostsTime,
          mesEmployeeMasterId,
        } = item;
        return {
          employeeNo,
          employeeName,
          isDisabled: parseInt(isDisabled),
          mainPostFlag,
          systemPostId,
          appointmentPostsTime,
          mesEmployeeMasterId,
        };
      });

      const params = {
        doList: commitList,
      };
      createEmployeeAppointRemovePostDetail(params).then((res) => {
        this.getList();
      });
    },
  },
};
</script>
