<template>
  <el-drawer title="审核详情" :with-header="false" v-model="visible" direction="rtl" size="100%">
    <div class="form-container column-container">
      <div class="form-btns-container">
        <span class="title-label">
          <el-icon>
            <Document />
          </el-icon>
          <span>检查详情</span>
        </span>
        <el-button type="success" v-hasPermi="['business:examine:pass']" @click="handleUpdateStatus(2)"> 通过 </el-button>
        <el-button v-if="!detail.isNextProcess" v-hasPermi="['business:examine:fail']" type="danger"
          style="margin-left: 40px" @click="handleUpdateStatus(1)">
          不通过
        </el-button>

        <div class="close-btn" @click="cancel">
          <i class="fa fa-times" aria-hidden="true" />
          <!-- <span>关闭</span> -->
        </div>
      </div>
      <div class="form-container">
        <div style="padding: 16px 16px 0 16px">
          <el-row :gutter="20" style="margin-top: 15px; padding-bottom: 10px">
            <el-col :span="5">
              <span class="leftInfo">批次号</span>
              <span class="rightInfo">{{ examineDetail.lotCode }}</span>
            </el-col>
            <el-col :span="9">
              <span class="middleInfo">产品描述</span>
              <span class="rightInfo">{{
                examineDetail.productDescription
              }}</span>
            </el-col>
            <el-col :span="6">
              <span class="middleInfo">图号</span>
              <span class="rightInfo">{{ examineDetail.drawingNumber }}</span>
            </el-col>
            <el-col :span="4">
              <span class="middleInfo">工艺版本</span>
              <span class="rightInfo">{{
                examineDetail.technologyVersion
              }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 15px; padding-bottom: 10px">
            <el-col :span="5">
              <span class="leftInfo">当前工序</span>
              <span class="rightInfo">{{ examineDetail.processAlias }}</span>
            </el-col>
            <el-col :span="9">
              <span class="middleInfo">提交时间</span>
              <span class="rightInfo">{{ examineDetail.createTime }}</span>
            </el-col>
            <el-col :span="6">
              <span class="middleInfo">审核人员</span>
              <span class="rightInfo">{{ examineDetail.reviewerName }}</span>
            </el-col>
            <el-col :span="4">
              <span class="middleInfo">审核时间</span>
              <span class="rightInfo">{{ examineDetail.updateTime }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="
              margin-top: 15px;
              padding-bottom: 10px;
              border-bottom: 1px solid #999;
            ">
            <el-col :span="14">
              <span class="leftInfo">审核意见</span>
              <el-input placeholder="请输入审核意见" v-model.trim="examineDetail.reviewComments" style="width: 800px"
                class="rightInfo" />
            </el-col>
            <el-col :span="10">
              <span class="middleInfo">备注</span>
              <el-input placeholder="请输入备注" v-model.trim="examineDetail.remark" style="width: 600px"
                class="rightInfo" />
            </el-col>
          </el-row>

          <el-row :gutter="20" style="margin-top: 15px; margin-bottom: 15px">
            <el-col :span="5">
              <span style="font-size: 17px; width: 120px; font-weight: bold">分选</span>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table v-loading="loading" :data="examineDetail.dayworkItemList" size="small" border height="95%">
            <el-table-column label="工序" align="center" prop="processAlias" width="150px" />
            <el-table-column label="合格量" align="center" prop="qualifiedNum" width="150px" />
            <el-table-column label="废品数量" align="center" prop="rejectNum" width="150" />
            <el-table-column label="备注" align="center" prop="remark" />
            <el-table-column label="操作" width="150px" align="center">
              <template #default="scope">
                <el-button link type="primary" @click="handleGetDetail(scope.row)">详细信息</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="form-container">
        <el-row :gutter="20" style="margin: 15px 0 0 6px; margin-bottom: 15px">
          <el-col :span="5">
            <span style="font-size: 17px; width: 120px; font-weight: bold">检查</span>
          </el-col>
        </el-row>
      </div>
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table v-loading="loading" :data="examineDetail.processInspectionList" size="small" border height="95%">
            <el-table-column label="工序" align="center" prop="processAlias" width="150" />
            <el-table-column label="类型" align="center" prop="type" width="150">
              <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 == 'patrolInspection'">巡检</span>
                <span v-if="scope.row.type == 'outsourcedInspector'">外协检</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="序检状态" align="center" prop="stauts" width="150">
              <template #default="scope">
                <template v-if="scope.row.status == 0">待确认</template>
                <template v-if="scope.row.status == 1">合格</template>
                <template v-if="scope.row.status == 2">不合格</template>
              </template>
            </el-table-column>
            <el-table-column label="检测量" align="center" prop="examiningNum" width="150" />
            <el-table-column label="不良品量" align="center" prop="disqualificationNum" width="150" />
            <el-table-column label="图片" align="center" prop="unexaminedNum" width="600">
              <template #default="scope">
                <span>
                  <el-image v-for="item, index in scope.row.images" :key="index" :initial-index="index"
                    style="width: 60px; height: 60px;margin-right:8px" :src="webHost + item.url"
                    :preview-src-list="scope.row.currentPictures" :preview-teleported="true" />
                </span>
              </template>
            </el-table-column>
            <el-table-column label="备注" align="center" prop="remark" />
            <el-table-column label="操作" width="100px" align="center">
              <template #default="scope">
                <el-button link type="primary" @click="handleGetInspectionDetail(scope.row)">详细信息</el-button>
                <!-- <el-button link type="primary" icon="View" :disabled="!scope.row.images || scope.row.images.length == 0"
                  @click="handleViewImage(scope.row)">查看图片</el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 分选详情信息 -->
    <sort-detail-dialog ref="sortDetailDialogRef" />
    <!--分选序检详情信息 -->
    <inspection-detail-dialog ref="inspectionDetailDialogRef" />
    <el-image-viewer v-if="showViewer" :url-list="currentFileList" @close="closeImages" :initial-index="showIndex" />
  </el-drawer>
</template>

<script setup>
import { getExamine, updateExamine } from "@/api/business/dayworkItemExamine.js";
import sortDetailDialog from "./DialogSortDetail.vue";
import inspectionDetailDialog from "./DialogInspectionDetail.vue";
const webHost = import.meta.env.VITE_APP_BASE_API
const emit = defineEmits(["handleSaveSuccess"]);
import { ref } from "vue";
const { proxy } = getCurrentInstance();
/** 表单抽屉 页变量 */
const loading = ref(false);
const examineDetail = ref({});
const detail = ref({});
const currentFileList = ref([]);
const showIndex = ref(0);
const visible = ref(false);
const showViewer = ref(false)

/****************************  方法区  ****************************/
/** 打开抽屉 */
const open = (row) => {
  visible.value = true;
  console.log(row);
  detail.value = row;
  getExamineDetail(row);
};

/** 取消按钮 */
const cancel = () => {
  visible.value = false;
};
//打开分选详情弹窗
function handleGetDetail(row) {
  proxy.$refs.sortDetailDialogRef.open(row);
}
//打开分选序检详情弹窗
function handleGetInspectionDetail(row) {
  proxy.$refs.inspectionDetailDialogRef.open(row);
}
//设置申请审核状态
function handleUpdateStatus(data) {
  examineDetail.value.status = data;
  if (data == 1) {
    proxy.$modal
      .confirm("是否确定该申请审核不通过")
      .then(function () {
        if (examineDetail.value.reviewComments == null || examineDetail.value.reviewComments == "") {
          proxy.$modal.msgError("审核不通过时，审核意见不能为空");
          return
        } else {
          updateExamine(examineDetail.value).then(res =>{
            emit("handleSaveSuccess");
          cancel()
})
          
        }
      })
  } else {
    proxy.$modal
      .confirm("是否确定该申请审核通过")
      .then(function () {
        updateExamine(examineDetail.value).then(res =>{
          emit("handleSaveSuccess");
        cancel()
})
        
      })
  }

}

function getExamineDetail(row) {
  loading.value = true;
  getExamine(row.id).then((res) => {
    if (res.code == 200) {
      examineDetail.value = res.data;
      examineDetail.value.processInspectionList.forEach(l => {
        l.currentPictures = l.images.map(e => `${webHost}${e.url}`)
      })
      console.log(examineDetail.value)
      loading.value = false;
    }
  });
}

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

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

/** 暴露给父组件的方法 */
defineExpose({
  open,
});
</script>
<style scoped>
.leftInfo {
  font-size: 16px;
  width: 120px;
  display: inline-block;
}

.middleInfo {
  font-size: 16px;
  width: 120px;
  display: inline-block;
}

.rightInfo {
  font-size: 16px;
  padding-left: 20px;
}
</style>
