<template>
  <el-drawer title="序检详情" :with-header="false" v-model="visible" direction="rtl" size="100%">
    <div class="form-container">
      <div class="form-btns-container">
        <span class="title-label">
          <el-icon>
            <Document />
          </el-icon>
          <span>检查详情</span>
        </span>
        <el-button-group>
          <el-button type="success" icon="Refresh" @click="refreshForm">
            刷新
          </el-button>
        </el-button-group>

        <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">{{ processInspectionDetail.lotCode }}</span>
            </el-col>
            <el-col :span="9">
              <span class="middleInfo">产品描述</span>
              <span class="rightInfo">{{ processInspectionDetail.productDescription }}</span>
            </el-col>
            <el-col :span="6">
              <span class="middleInfo">图号</span>
              <span class="rightInfo">{{ processInspectionDetail.drawingNumber }}</span>
            </el-col>
            <el-col :span="4">
              <span class="middleInfo">工艺版本</span>
              <span class="rightInfo">{{ processInspectionDetail.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">{{ detail.technicianName }}</span>

            </el-col>
            <el-col :span="9">
              <span class="middleInfo">检测日期</span>
              <span class="rightInfo">{{ processInspectionDetail.createTime }}</span>
            </el-col>
            <el-col :span="6">
              <span class="middleInfo">检测工序</span>
              <span class="rightInfo">{{ processInspectionDetail.processAlias }}</span>
            </el-col>
            <el-col :span="4">
              <span class="middleInfo">检测状态</span>
              <span class="rightInfo">{{ processInspectionDetail.status == 0 ? '待确认' : processInspectionDetail.status ==
                1 ? '合格' : '不合格' }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 15px; padding-bottom: 10px;">
            <el-col :span="5" v-if="detail.type !== 'outsourcedInspector' && detail.type !== 'factoryInspection'">
              <span class="leftInfo">操作者</span>
              <span class="rightInfo">{{ processInspectionDetail.nickName }}</span>

            </el-col>
            <el-col :span="9" v-if="detail.type !== 'outsourcedInspector' && detail.type !== 'factoryInspection'">
              <span class="middleInfo">检测设备</span>
              <span class="rightInfo">{{ processInspectionDetail.equipmentDetailCode }}</span>
            </el-col>
            <el-col :span="6">
              <span class="middleInfo">检查类别</span>
              <span class="rightInfo" v-if="detail.type == 'deliveryInspection'">交检</span>
              <span class="rightInfo" v-if="detail.type == 'firstArticleInspection'">首件检</span>
              <span class="rightInfo" v-if="detail.type == 'outsourcedInspector'">外协检</span>
              <span class="rightInfo" v-if="detail.type == 'patrolInspection'">巡检</span>
              <span class="rightInfo" v-if="detail.type == 'factoryInspection'">出厂检</span>
              <span class="rightInfo" v-if="detail.type == 'instrumentRoomInspection'">仪器室</span>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 15px;margin-bottom: 15px;">
            <el-col :span="24" style="display: flex; flex-direction: row">
              <span class="middleInfo">备注</span>
              <el-input class="rightInfo"  :rows="4" type="textarea"  v-model="processInspectionDetail.remark" readonly></el-input>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 15px;margin-bottom: 15px; border-top: 1px solid #999;">
            <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="processInspectionDetail.processInspectionDetails" size="small" border
        height="200px">
        <el-table-column label="行号" type="index" align="center" width="48" />
        <el-table-column label="检查标准" align="center" prop="checkStandard" />
        <el-table-column label="检查量" align="center" prop="examiningNum" />
        <el-table-column label="不良品量" align="center" prop="disqualificationNum" />
        <el-table-column label="废品量" align="center" prop="rejectNum" />
        <el-table-column label="检查结果" align="center" prop="checkResult" />
        <!-- <el-table-column
              label="废品数量"
              align="center"
              prop="rejectNum"
              width="96"
            /> -->
      </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-image v-for="item, index in processInspectionDetail.images" :key="index" :initial-index="index"
        style="width: 60px; height: 60px;margin-right:8px" :src="webHost + item.url" :preview-src-list="previewList"
        :preview-teleported="true" />
      <!-- </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="processInspectionDetail.consultList" size="small" border height="200px">
        <el-table-column label="行号" type="index" align="center" width="48" />
        <el-table-column label="咨询内容" align="center" prop="content" />
        <el-table-column label="回复状态" align="center" prop="checkResult" width="70">
          <template #default="scope">
            <span>{{ scope.row.status == 0 ? '未回复' : detail.status == 1 ? '合格' : '不合格' }} </span>
          </template>
        </el-table-column>
      </el-table>
      <!-- </div>
      </div> -->
    </div>
  </el-drawer>
</template>

<script setup>
import { getInspecion } from "@/api/business/processInspecion";
import { ref } from "vue";
const webHost = import.meta.env.VITE_APP_BASE_API
const { proxy } = getCurrentInstance();
/** 表单抽屉 页变量 */
const loading = ref(false);
const processInspectionDetail = ref({});
const detail = ref({});
const visible = ref(false);
const previewList = ref([]);

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

/** 取消按钮 */
const cancel = () => {
  visible.value = false;
};

function getProcessInspection(row) {
  loading.value = true;
  getInspecion(row.id).then((res) => {
    if (res.code == 200) {
      processInspectionDetail.value = res.data;
      previewList.value = res.data.images.map((item) => {
        return webHost + item.url;
      });
      loading.value = false;
    }
  });
}
function refreshForm() {
  getProcessInspection(detail.value);
}
/** 暴露给父组件的方法 */
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>
