<template>
  <div class="page-container row-container">
    <!-- 左侧区域 -->
    <section class="list-part-container" style="flex: 3">
      <!-- 搜索区 -->
      <el-form
        class="list-search-container"
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        style="margin-right: 0px"
      >
        <el-form-item class="section-title" label="工段：">
          <el-select-v2
            v-model="queryParams.deptId"
            :options="deptList"
            placeholder="请选择工段"
            style="width: 110px"
            @change="handleDeptChange"
          />
        </el-form-item>
        <el-form-item class="section-title" label="检测类别：">
          <el-select-v2
            v-model="queryParams.type"
            :options="inventionTypeList"
            placeholder="请选择检测类别"
            clearable
            style="width: 170px"
            @change="handleTypeChange"
          />
        </el-form-item>
        <el-form-item label="批次号：">
          <el-input
            placeholder="请输入批次号"
            v-model.trim="queryParams.lotCode"
            @keydown.enter.prevent
            clearable
            style="width: 130px"
          />
        </el-form-item>
        <el-form-item label="产品描述：">
          <el-input
            placeholder="请输入产品描述"
            v-model.trim="queryParams.productDescription"
            @keydown.enter.prevent
            clearable
            style="width: 130px"
          />
        </el-form-item>
        <el-form-item label="工序：">
          <el-input
            placeholder="请输入工序"
            v-model.trim="queryParams.processAlias"
            @keydown.enter.prevent
            clearable
            style="width: 120px"
          />
        </el-form-item>
        <el-form-item label="状态：">
          <el-select
            v-model="queryParams.status"
            clearable
            placeholder="请选择状态"
            style="width: 120px"
          >
            <el-option
              v-for="dict in process_inspection_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检测日期：">
          <el-date-picker
            v-model="queryParams.startTime"
            type="date"
            value-format="YYYY-MM-DD"
            :editable="false"
            clearable
            placeholder="请选择"
            style="width: 136px"
            @change="handleTimeChange"
          />
          <span>~</span>
          <el-date-picker
            v-model="queryParams.endTime"
            type="date"
            value-format="YYYY-MM-DD"
            :editable="false"
            clearable
            placeholder="请选择"
            style="width: 136px"
            @change="handleTimeChange"
          />
        </el-form-item>
        <el-form-item style="margin-left: 0">
          <el-button type="info" icon="Search" @click="handleQuery"
            >搜索
          </el-button>
        </el-form-item>
      </el-form>
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table
            ref="processInspectionTable"
            :data="inspectionList"
            v-loading="inspectionLoading"
            highlight-current-row
            height="100%"
          >
            <el-table-column
              label="批次号"
              prop="lotCode"
              width="120"
              align="center"
            />
            <el-table-column
              label="产品描述"
              prop="productDescription"
              align="center"
            />
            <el-table-column
              label="图号"
              prop="drawingNumber"
              align="center"
              width="120"
            />
            <el-table-column
              label="工艺版本"
              prop="technologyVersion"
              align="center"
              width="80"
            />
            <el-table-column
              label="员工号"
              prop="userName"
              align="center"
              width="80"
            />
            <el-table-column
              label="操作者"
              prop="nickName"
              align="center"
              width="80"
            />
            <el-table-column
              label="检测设备"
              prop="equipmentDetailCode"
              align="center"
              width="120"
            />
            <el-table-column
              label="检测员工号"
              prop="technicianCode"
              align="center"
              width="80"
            />
            <el-table-column
              label="检测人员"
              prop="technicianName"
              align="center"
              width="100"
            />
            <el-table-column
              label="检测工段"
              prop="deptName"
              width="100"
              align="center"
            />
            <el-table-column
              label="检测工序"
              prop="processAlias"
              width="120"
              align="center"
            />
            <el-table-column
              label="检测类别"
              prop="type"
              width="120"
              align="center"
            >
              <template #default="scope">
                <span v-if="scope.row.type == 'deliveryInspection'">交检</span>
                <span v-if="scope.row.type == 'firstArticleInspection'"
                  >首件检</span
                >
                <span v-if="scope.row.type == 'outsourcedInspector'"
                  >外协检</span
                >
                <span v-if="scope.row.type == 'patrolInspection'">巡检</span>
                <span v-if="scope.row.type == 'factoryInspection'">出厂检</span>
                <span v-if="scope.row.type == 'instrumentRoomInspection'"
                  >仪器室</span
                >
              </template>
            </el-table-column>
            <el-table-column
              label="检测日期"
              prop="createTime"
              width="160"
              align="center"
            />
            <el-table-column
              label="检测状态"
              align="center"
              prop="status"
              width="80"
            >
              <template #default="scope">
                <dict-tag
                  :options="process_inspection_status"
                  :value="scope.row.status"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="160"
              fixed="right"
              align="center"
            >
              <template #default="scope">
                <el-button
                  link
                  type="primary"
                  icon="View"
                  @click="handleView(scope.row)"
                  >查看</el-button
                >
                <el-button
                  link
                  type="primary"
                  icon="View"
                  :disabled="scope.row.images.length == 0"
                  @click="handleViewImage(scope.row)"
                  >查看图片</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getProcessInspectionList"
      />
    </section>
    <process-inspection-form ref="processInspectionRef" />
    <el-image-viewer
      v-if="showViewer"
      :url-list="currentFileList"
      @close="closeImages"
      :initial-index="showIndex"
    />
  </div>
</template>

<script setup name="processInspection">
import {
  listInspecion,
  getInspectionType,
} from "@/api/business/processInspecion.js";
import { getDeptList } from "@/api/business/planDetailSubDetail.js";
import processInspectionForm from "./form.vue";
const webHost = import.meta.env.VITE_APP_BASE_API;
import { ref } from "vue";
const { proxy } = getCurrentInstance();
/** 字典数组区 */
const { process_inspection_status } = proxy.useDict(
  "process_inspection_status"
);

/** 序检 */
const processInspectionTable = ref(null);
const inspectionList = ref([]);
const inventionTypeList = ref([]);
const currentFileList = ref([]);
const inspectionLoading = ref(false);
const loading = ref(false);
const isDispatch = ref(false);
const total = ref(0);
const showIndex = ref(0);
/**工段 */
const deptList = ref([]);
const showViewer = ref(false);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  lotCode: null,
  productDescription: null,
  deptId: null,
  processAlias: null,
});

/***********************  工段相关事件  ****************************/
function getList() {
  getNowDate();
  loading.value = true;
  getTypeList();
  getDeptList().then((response) => {
    deptList.value = response.data.rows;
    isDispatch.value = response.data.others.isDispatch;
    loading.value = false;
    if (isDispatch.value) {
      deptList.value.unshift({ label: "全部", value: "0" });
    }
    console.log(deptList.value)
    let index = deptList.value.findIndex((item) => {
      return item.deptCode == "170000";
    });
    if (index > -1) {
      deptList.value.splice(index, 1);
    }
    queryParams.value.deptId = deptList.value[0].value;
    getProcessInspectionList();
  });
}
function getTypeList() {
  getInspectionType().then((res) => {
    res.data = res.data.map((item) => {
      return { value: item.code, label: item.name };
    });
    inventionTypeList.value = res.data;
  });
}
function getNowDate() {
  queryParams.value.startTime = proxy.moment().format("YYYY-MM-DD");
  queryParams.value.endTime = proxy.moment().format("YYYY-MM-DD");
}
function handleTimeChange() {
  getProcessInspectionList();
}
//查看序检明细
function handleView(row) {
  proxy.$refs.processInspectionRef.open(row);
}

//切换工段
function handleDeptChange() {
  getProcessInspectionList();
}
//切换检测类别
function handleTypeChange() {
  getProcessInspectionList();
}

/***********************  废品报表信息相关事件  ****************************/

/** 废品详情列表 */
function getProcessInspectionList() {
  if (queryParams.value.startTime != null) {
    queryParams.value.startTime = proxy
      .moment(queryParams.value.startTime)
      .format("YYYY-MM-DD 00:00:00");
  }
  if (queryParams.value.endTime != null) {
    queryParams.value.endTime = proxy
      .moment(queryParams.value.endTime)
      .format("YYYY-MM-DD 23:59:59");
  }
  inspectionLoading.value = true;
  listInspecion(queryParams.value).then((res) => {
    inspectionList.value = res.rows;
    total.value = res.total;
    inspectionLoading.value = false;
  });
}
/** 搜索按钮操作 */
function handleQuery() {
  getProcessInspectionList();
}

function closeImages() {
  showViewer.value = false;
}

function handleViewImage(row) {
  currentFileList.value = row.images.map((l) => `${webHost}${l.url}`);
  showViewer.value = true;
}

onMounted(() => {
  getList();
});
</script>
<style scoped>
.el-form--inline .el-form-item {
  margin-right: 20px;
}
</style>