<template>
  <div>
    <el-card>
      <el-form
        :model="searchForm"
        label-width="90px"
        @submit.prevent="fnResetPaginationTransfer"
      >
        <el-row>
          <el-col :span="4">
            <el-form-item label="申请人" prop="KEYWORDS">
              <el-input v-model="searchForm.KEYWORDS" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="离岗时间" prop="dates">
              <el-date-picker
                v-model="searchForm.dates"
                type="daterange"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
                range-separator="至"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="离岗状态" prop="REVIEW_STATUS">
              <el-select v-model="searchForm.REVIEW_STATUS">
                <el-option
                  v-for="item in stateList"
                  :key="item.ID"
                  :label="item.NAME"
                  :value="item.ID"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="审批人" prop="REVIEW_USER_NAME">
              <el-input v-model="searchForm.REVIEW_USER_NAME" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label-width="10px">
              <el-button type="primary" native-type="submit">搜索</el-button>
              <el-button native-type="reset" @click="fnResetPaginationTransfer">
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <layout-card>
      <layout-table
        :data="list"
        @get-data="fnGetDataTransfer"
        v-model:pagination="pagination"
      >
        <el-table-column label="序号" width="60">
          <template #default="{ $index }">
            {{ serialNumber(pagination, $index) }}
          </template>
        </el-table-column>
        <el-table-column prop="DEPARTMENTNAME_ALL" label="部门" />
        <el-table-column prop="POSTNAME" label="岗位" />
        <el-table-column prop="USER_NAME" label="姓名" />
        <el-table-column label="申请状态">
          <template v-slot="{ row }">
            <div v-if="row.REVIEW_STATUS === '0'">待审批</div>
            <div v-else-if="row.REVIEW_STATUS === '1'">审批通过</div>
            <div v-else-if="row.ISDELETE === '1' && row.REVIEW_STATUS === '-1'">
              <div v-if="row.CREATOR === row.OPERATOR">申请人取消</div>
              <div v-else>审批人取消</div>
            </div>
            <div v-else-if="row.REVIEW_STATUS === '-1'">审批打回</div>
            <div v-else-if="row.REVIEW_STATUS === '2'">无需审批</div>
          </template>
        </el-table-column>
        <el-table-column label="离岗时间">
          <template v-slot="{ row }">
            <div>{{ row.STARTTIME }} 至 {{ row.ENDTIME }}</div>
          </template>
        </el-table-column>
        <el-table-column label="指定审批人">
          <template v-slot="{ row }">
            <div v-if="row.REVIEW_USER_ID">
              {{
                row.REVIEW_USER_NAME +
                " [" +
                row.REVIEW_USER_DEPARTMENTNAME +
                "]"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="260">
          <template #default="{ row }">
            <el-button type="primary" text link @click="fnView(row)">
              查看
            </el-button>
            <el-button
              v-if="
                buttonJurisdiction.edit &&
                row.REVIEW_STATUS === '0' &&
                row.STARTTIME >= currentDate &&
                row.USER_ID === USER_ID
              "
              type="primary"
              text
              link
              @click="fnEdit(row.OFFDUTY_ID)"
            >
              编辑
            </el-button>
            <el-button
              v-if="
                buttonJurisdiction.edit &&
                ISMAIN === '1' &&
                row.ENDTIME >= currentDate
              "
              type="primary"
              text
              link
              @click="fnTimeAdjustment(row.OFFDUTY_ID)"
            >
              时间调整
            </el-button>
            <el-button
              v-if="
                row.REVIEW_STATUS === '0' &&
                row.ENDTIME >= currentDate &&
                (row.REVIEW_USER_ID === USER_ID ||
                  (!row.REVIEW_USER_ID && ISLEADER === '1'))
              "
              type="primary"
              text
              link
              @click="fnApproval(row.OFFDUTY_ID)"
            >
              审批
            </el-button>
            <el-button
              v-if="
                row.REVIEW_STATUS === '0' &&
                row.STARTTIME >= currentDate &&
                (row.REVIEW_USER_ID === USER_ID || row.USER_ID === USER_ID)
              "
              type="primary"
              text
              link
              @click="fnCancel(row.OFFDUTY_ID)"
            >
              取消
            </el-button>
          </template>
        </el-table-column>
      </layout-table>
    </layout-card>
    <view-info
      v-model:visible="data.viewDialog.visible"
      :info="data.viewDialog.info"
    />
    <time-adjustment
      v-model:visible="data.timeAdjustmentDialog.visible"
      v-model:form="data.timeAdjustmentDialog.form"
      @get-data="fnResetPaginationTransfer"
    />
    <edit
      v-model:visible="data.editDialog.visible"
      v-model:form="data.editDialog.form"
      @get-data="fnResetPaginationTransfer"
    />
    <approval
      v-model:visible="data.approvalDialog.visible"
      v-model:form="data.approvalDialog.form"
      @get-data="fnResetPaginationTransfer"
    />
    <cancel
      v-model:visible="data.cancelDialog.visible"
      v-model:form="data.cancelDialog.form"
      @get-data="fnResetPaginationTransfer"
    />
  </div>
</template>

<script setup>
import { serialNumber } from "@/assets/js/utils";
import useListData from "@/assets/js/useListData.js";
import { getLeaveList, getLeaveView } from "@/request/off_duty_management.js";
import useButtonJurisdiction from "@/assets/js/useButtonJurisdiction.js";
import dayjs from "dayjs";
import { useUserStore } from "@/pinia/user.js";
import { nextTick, reactive } from "vue";
import ViewInfo from "./components/view.vue";
import TimeAdjustment from "./components/time_adjustment.vue";
import Edit from "./components/edit.vue";
import Approval from "./components/approval.vue";
import Cancel from "./components/cancel.vue";

const stateList = [
  { ID: "0", NAME: "待审批" },
  { ID: "1", NAME: "审批通过" },
  { ID: "-1", NAME: "审批打回" },
  { ID: "2", NAME: "无需审批" },
  { ID: "3", NAME: "申请人取消" },
  { ID: "4", NAME: "审批人取消" },
];
const userStore = useUserStore();
const currentDate = dayjs().format("YYYY-MM-DD");
const USER_ID = userStore.getUserInfo.USER_ID;
const ISLEADER = userStore.getUserInfo.ISLEADER;
const ISMAIN = userStore.getUserInfo.ISMAIN;
const { list, pagination, searchForm, fnGetData, fnResetPagination } =
  useListData(getLeaveList, {
    otherParams: { TYPE: "edit" },
  });
const data = reactive({
  viewDialog: {
    visible: false,
    info: {},
  },
  timeAdjustmentDialog: {
    visible: false,
    form: {
      offdutyDates: [],
      OFFDUTY_ID: "",
    },
  },
  editDialog: {
    visible: false,
    form: {
      OFFDUTY_ID: "",
      offdutyDates: [],
      DESCR: "",
      REVIEW_USER_ID: "",
    },
  },
  approvalDialog: {
    visible: false,
    form: {
      OFFDUTY_ID: "",
      REVIEW_DESC: "",
      REVIEW_STATUS: "",
    },
  },
  cancelDialog: {
    visible: false,
    form: {
      OFFDUTY_ID: "",
      REVIEW_DESC: "",
      REVIEW_STATUS: "",
    },
  },
});
const buttonJurisdiction = await useButtonJurisdiction("offduty");
const fnGetDataTransfer = () => {
  fnGetData({
    STARTTIME: searchForm.value.dates?.[0],
    ENDTIME: searchForm.value.dates?.[1],
  });
};
const fnResetPaginationTransfer = () => {
  fnResetPagination({
    STARTTIME: searchForm.value.dates?.[0],
    ENDTIME: searchForm.value.dates?.[1],
  });
};
const fnView = (row) => {
  data.viewDialog.visible = true;
  data.viewDialog.info = row;
};
const fnTimeAdjustment = async (OFFDUTY_ID) => {
  data.timeAdjustmentDialog.visible = true;
  await nextTick();
  const resData = await getLeaveView({ OFFDUTY_ID });
  data.timeAdjustmentDialog.form.offdutyDates = [
    resData.pd.STARTTIME,
    resData.pd.ENDTIME,
  ];
  data.timeAdjustmentDialog.form.OFFDUTY_ID = OFFDUTY_ID;
};
const fnEdit = async (OFFDUTY_ID) => {
  data.editDialog.visible = true;
  await nextTick();
  const resData = await getLeaveView({ OFFDUTY_ID });
  data.editDialog.form = resData.pd;
  data.timeAdjustmentDialog.form.offdutyDates = [
    resData.pd.STARTTIME,
    resData.pd.ENDTIME,
  ];
};
const fnApproval = async (OFFDUTY_ID) => {
  data.approvalDialog.visible = true;
  await nextTick();
  data.approvalDialog.form.OFFDUTY_ID = OFFDUTY_ID;
};
const fnCancel = async (OFFDUTY_ID) => {
  data.cancelDialog.visible = true;
  await nextTick();
  data.cancelDialog.form.OFFDUTY_ID = OFFDUTY_ID;
  data.cancelDialog.form.REVIEW_STATUS = "-1";
};
</script>

<style scoped></style>
