<template>
  <div>
    <el-card>
      <el-form
        :model="searchForm"
        label-width="100px"
        @submit.prevent="fnResetPaginationTransfer"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="编号" prop="KEYWORDS">
              <el-input
                v-model="searchForm.KEYWORDS"
                placeholder="请输入关键字"
              />
            </el-form-item>
          </el-col>
          <el-col v-if="entrance === 'job_data'" :span="6">
            <el-form-item label="状态" prop="STEP_ID">
              <el-select v-model="searchForm.STEP_ID">
                <el-option
                  v-for="item in stepList"
                  :key="item.STEP_ID"
                  :label="item.STEP_NAME"
                  :value="item.STEP_ID"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-if="entrance === 'archive'" :span="6">
            <el-form-item label="作业时间" prop="WORK_START_DATE">
              <el-date-picker
                v-model="searchForm.WORK_START_DATE"
                type="date"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="作业申请分厂" prop="APPLY_DEPARTMENT_ID">
              <el-select
                v-model="searchForm.APPLY_DEPARTMENT_ID"
                @change="fnGetApplyDept"
              >
                <el-option
                  v-for="item in applyDeptList"
                  :key="item.department_ID"
                  :label="item.name"
                  :value="item.department_ID"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="作业申请工段"
              prop="APPLY_WORKSHOP_DEPARTMENT_ID"
            >
              <el-select v-model="searchForm.APPLY_WORKSHOP_DEPARTMENT_ID">
                <el-option
                  v-for="item in applyWorkshopDeptList"
                  :key="item.department_ID"
                  :label="item.name"
                  :value="item.department_ID"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <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
        v-model:pagination="pagination"
        :data="list"
        @get-data="fnGetData"
      >
        <el-table-column label="序号" width="70">
          <template #default="{ $index }">
            {{ serialNumber(pagination, $index) }}
          </template>
        </el-table-column>
        <el-table-column prop="CHECK_NO" label="编号" show-overflow-tooltip />
        <el-table-column
          prop="WORKSHOP_USER_NAME"
          label="工段负责人"
          width="150"
        />
        <el-table-column
          prop="LEADER_USER_NAME"
          label="分厂贯标中心负责人"
          width="150"
        />
        <el-table-column
          prop="AUDIT_USER_NAME"
          label="分厂部门负责人"
          width="150"
        />
        <el-table-column
          prop="APPROVE_USER_NAME"
          label="安全处负责人"
          width="150"
        />
        <el-table-column
          prop="SAFETY_USER_NAME"
          label="安全部负责人"
          width="100"
        />
        <el-table-column prop="ACCEPT_USER_NAME" label="验收部门负责人" />
        <el-table-column label="审核状态" width="170">
          <template #default="{ row }">
            <span v-if="row.STEP_ID === 0">暂存</span>
            <span v-else-if="row.STATUS === -2">气体检测打回</span>
            <span v-else-if="row.STATUS === -3">监护人已停止作业</span>
            <span v-else-if="row.STEP_ID !== -1">{{ row.NEXT_STEP_NAME }}</span>
            <span v-else>{{ row.STEP_NAME }}打回</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="350">
          <template #default="{ row }">
            <el-button
              v-if="row.PLS_ID"
              type="primary"
              text
              link
              @click="fnShowPoints(row.PLS_ID)"
            >
              查看作业区域
            </el-button>
            <el-button
              v-if="
                entrance === 'job_data' &&
                row.STATUS > -1 &&
                row.NEXT_STEP_ID !== 99
              "
              type="primary"
              text
              link
              @click="
                router.push({
                  path: '/hoisting/job_data/add_video',
                  query: {
                    HOISTING_ID: row.HOISTING_ID,
                    CHECK_NO: row.CHECK_NO,
                  },
                })
              "
            >
              添加监控
            </el-button>
            <el-button
              v-if="entrance === 'job_data'"
              type="primary"
              text
              link
              @click="fnFlowChart(row.HOISTING_ID)"
            >
              流程图
            </el-button>
            <el-button
              v-if="
                entrance === 'archive' &&
                row.NEXT_STEP_ID === 99 &&
                row.VIDEO_PATH
              "
              type="primary"
              text
              link
              @click="fnPreviewVideo(row.VIDEO_PATH)"
            >
              查看验收视频
            </el-button>
            <el-button
              v-if="entrance === 'archive'"
              type="primary"
              text
              link
              @click="fnSafetyBriefingChecklist(row)"
            >
              安全交底清单
            </el-button>
            <el-button
              type="primary"
              text
              link
              @click="
                router.push({
                  path:
                    props.entrance === 'job_data'
                      ? '/hoisting/job_data/view'
                      : '/hoisting/archive/view',
                  query: { HOISTING_ID: row.HOISTING_ID, entrance },
                })
              "
            >
              审批表详情
            </el-button>
            <el-button
              v-if="
                userStore.getUserInfo.ISMAIN === '1' &&
                entrance === 'archive' &&
                row.STEP_ID !== -1
              "
              type="danger"
              text
              link
              @click="fnRemoveWork(row)"
            >
              作废
            </el-button>
          </template>
        </el-table-column>
      </layout-table>
    </layout-card>
    <flow-chart
      v-model:visible="data.flowChartDialog.visible"
      :flow-list="data.flowChartDialog.flowList"
      :flowing="data.flowChartDialog.flowing"
    />
    <check-list
      v-if="data.checkListDialog.visible"
      v-model:visible="data.checkListDialog.visible"
      v-model:foreignKey="data.checkListDialog.FOREIGN_KEY"
    />
    <layout-video
      v-model:visible="data.videoDialog.visible"
      :src="data.videoDialog.src"
      append-to-body
    />
    <show-points
      :id="data.showPointsDialog.id"
      v-model:visible="data.showPointsDialog.visible"
    />
  </div>
</template>

<script setup>
import { serialNumber } from "@/assets/js/utils.js";
import { useRouter } from "vue-router";
import useListData from "@/assets/js/useListData.js";
import { reactive, ref } from "vue";
import FlowChart from "./components/flow_chart.vue";
import LayoutVideo from "@/components/video/index.vue";
import {
  getHoistingList,
  getTaskSetps,
  getHoistingFlow,
  setEightWorkInvalid, getApplyDept
} from "@/request/eight_work.js";
import CheckList from "@/components/safety_briefing_checklist/index.vue";
import ShowPoints from "@/views/map_settings/assignment_ticket_area_settings/components/show_points.vue";

import { useUserStore } from "@/pinia/user.js";
import { ElMessage, ElMessageBox } from "element-plus";
const props = defineProps({
  entrance: {
    type: String,
    default: "job_data",
  },
});

const stepList = ref([]);
const applyDeptList = ref([]);
const applyWorkshopDeptList = ref([]);

const getStepList = async () => {
  const { list } = await getTaskSetps({ TASK_ID: 10 });
  stepList.value = [{ STEP_NAME: "请选择", STEP_ID: "" }, ...list];
};
getStepList();
const fnShowPoints = (id) => {
  data.showPointsDialog.id = id;
  data.showPointsDialog.visible = true;
};
const fnPreviewVideo = (VIDEO_PATH) => {
  data.videoDialog.visible = true;
  data.videoDialog.src = VIDEO_PATH;
};

const userStore = useUserStore();

const fnRemoveWork = async (row) => {
  await ElMessageBox.prompt("请确认是否作废作业票", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    inputPlaceholder: "请输入作废原因",
    inputPattern: /^.{1,254}$/,
    inputErrorMessage: "作废原因不可为空",
  }).then(async ({ value }) => {
    await setEightWorkInvalid({
      WORK_ID: row.HOISTING_ID,
      WORK_TYPE: "hoisting",
      STEP_REASON: value,
    });
    ElMessage.success("作废成功");
    await fnResetPaginationTransfer();
  });
};
const router = useRouter();
const { list, pagination, searchForm, fnGetData, fnResetPagination } =
  useListData(getHoistingList, {
    otherParams:
      props.entrance === "archive" ? { STEP_ID: "99" } : { WORK_STATE: "0" },
  });
const data = reactive({
  flowChartDialog: {
    visible: false,
    flowList: {},
    flowing: {},
  },
  videoDialog: {
    visible: false,
    src: "",
  },
  checkListDialog: {
    visible: false,
    FOREIGN_KEY: "",
  },
  showPointsDialog: {
    id: "",
    visible: false,
  },
});
const fnSafetyBriefingChecklist = (row) => {
  data.checkListDialog.visible = true;
  data.checkListDialog.FOREIGN_KEY = row.HOISTING_ID;
};
const fnResetPaginationTransfer = () => {
  fnResetPagination({
    APPLY_DEPARTMENT_ID: searchForm.value.APPLY_DEPARTMENT_ID,
    CONFIRM_DEPARTMENT_ID: searchForm.value.CONFIRM_DEPARTMENT_ID,
    WORK_START_DATE: searchForm.value.WORK_START_DATE,
  });
};

const getApplyDeptName = async () => {
  const resData = await getApplyDept({
    PARENT_ID: "551edf3de6bc447c8a03ec38dfb4cf75",
  });
  applyDeptList.value = resData.varList;
};
getApplyDeptName();

const fnGetApplyDept = () => {
  data.APPLY_WORKSHOP_DEPARTMENT_ID = "";
  data.applyWorkshopDeptList = [];
  fnGetApplyWorkshopDept();
};
const fnGetApplyWorkshopDept = async () => {
  const resData = await getApplyDept({
    PARENT_ID: searchForm.value.APPLY_DEPARTMENT_ID,
  });
  applyWorkshopDeptList.value = resData.varList;
};
const fnFlowChart = async (HOISTING_ID) => {
  const { flowList, flowingWork } = await getHoistingFlow({ HOISTING_ID });
  data.flowChartDialog.visible = true;
  data.flowChartDialog.flowList = flowList;
  data.flowChartDialog.flowing = flowingWork;
};
</script>

<style scoped></style>
