<template>
  <div>
    <el-drawer
      v-model="isShowDrawer"
      title="详情"
      direction="rtl"
      size="80%"
      v-loading="detailLoading"
    >
      <template #header>
        <div class="font-size-18px">
          {{ titleValueRef }} <span class="ml-20px font-size-16px">{{ titleNameRef }}</span>
        </div>
      </template>
      <ContentWrap v-if="!isBasic">
        <Descriptions
          :data="data"
          labelClassName="label-class-name"
          label-align="left"
          direction="vertical"
          :column="8"
          :schema="allSchemas.detailSchema"
          :columns="2"
          width="200px"
        />
      </ContentWrap>
      <ContentWrap>
        <el-tabs
          v-model="editableTabsValue"
          class="demo-tabs"
          type="border-card"
          tab-position="left"
          :stretch="false"
        >
          <el-tab-pane
            v-for="item in data.subList"
            :key="item.name"
            :label="item.processCode"
            :name="item.name"
          >
            <div class="small-title">检验工序</div>
            <el-form :model="item" label-width="auto" ref="formProcessRef">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="编码" prop="processCode">
                    <el-input v-model="item.processCode" placeholder="根据系统生成" :disabled="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="描述" prop="processDescribe">
                    <el-input v-model="item.processDescribe" :disabled="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="顺序号" prop="sequenceCode">
                    <el-input v-model="item.sequenceCode" :disabled="true" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div class="small-title">检验特性</div>
            <el-form :model="item" label-width="auto"  ref="formFeaturesRef">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="编码">
                    <el-input
                      v-model="item.inspectionRecordCharacteristicsRespVO.number"
                      placeholder="根据系统生成"
                      :disabled="true"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="描述" prop="inspectionRecordCharacteristicsRespVO.description">
                    <el-input v-model="item.inspectionRecordCharacteristicsRespVO.description"  :disabled="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item
                  label="检验方法"
                  prop="inspectionRecordCharacteristicsRespVO.inspectionMethodCode"
                >
                  <div style="display: flex; width: 100%">
                    <el-input
                      v-model="item.inspectionRecordCharacteristicsRespVO.inspectionMethodName"
                      disabled
                      placeholder="请输入检验方法"
                    />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="采样过程"
                  prop="inspectionRecordCharacteristicsRespVO.inspectionMethod"
                >
                  <div style="display: flex; width: 100%">
                    <el-input
                      v-model="item.inspectionRecordCharacteristicsRespVO.samplingProcessName"
                      disabled
                      placeholder="请输入采样过程"
                    />
                  </div>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="12">
                <el-form-item
                  label="动态修改规则编码"
                  prop="inspectionRecordCharacteristicsRespVO.dynamicUpdateCode"
                >
                  <div style="display: flex; width: 100%">
                    <el-input
                      v-model="item.inspectionRecordCharacteristicsRespVO.dynamicUpdateName"
                      disabled
                      placeholder="请输入动态修改规则编码"
                    />
                  </div>
                </el-form-item>
              </el-col> -->
                <el-col :span="12">
                  <el-form-item
                    label="是否允许修改特征值"
                    prop="inspectionRecordCharacteristicsRespVO.isCanUpdate"
                  >
                    <el-switch
                      v-model="item.inspectionRecordCharacteristicsRespVO.isCanUpdate"
                      disabled
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="结果录入方式"
                    prop="inspectionRecordCharacteristicsRespVO.resultEntryMethod"
                  >
                    <el-select
                      v-model="item.inspectionRecordCharacteristicsRespVO.resultEntryMethod"
                      placeholder="请选择结果录入方式"
                      @change="resultEntryMethodChange($event,item)"
                      disabled
                    >
                      <el-option
                        v-for="dict in getStrDictOptions(
                          DICT_TYPE.INSPECTION_CHARACTERISTICS_RESULT_ENTRY
                        )"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="特征类型" prop="inspectionRecordCharacteristicsRespVO.featureType">
                    <el-select
                      v-model="item.inspectionRecordCharacteristicsRespVO.featureType"
                      placeholder="请选择特征类型"
                      @change="changeFeatureType"
                      disabled
                    >
                      <el-option v-for="dict in getStrDictOptions( DICT_TYPE.INSPECTION_CHARACTERISTICS_FEATURE_TYPE )"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col> 
                <el-col :span="12">
                  <el-form-item label="开始时间" prop="inspectionRecordCharacteristicsRespVO.inspectionStartTime">
                    <el-date-picker
                      v-model="item.inspectionRecordCharacteristicsRespVO.inspectionStartTime"
                      type="datetime"
                      placeholder="请选择开始时间"
                      style="width: 100%"
                      value-format="x"
                      disabled
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="结束时间" prop="inspectionRecordCharacteristicsRespVO.inspectionEndTime">
                    <el-date-picker
                      v-model="item.inspectionRecordCharacteristicsRespVO.inspectionEndTime"
                      type="datetime"
                      placeholder="请选择结束时间"
                      style="width: 100%"
                      value-format="x"
                      disabled
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </ContentWrap>
    </el-drawer>
   
  </div>
</template>

<script lang="ts" setup>
import * as InspectionRecordDetailPageApi from '@/api/qms/inspectionRecord/inspectionRecordDetail'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'

defineOptions({ name: 'InspectionRecordDetail' })

const editableTabsValue = ref('1')
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const updateKey = ref(0)

const props = defineProps({
  // 表单，列表 相关信息
  allSchemas: {
    type: Object,
    required: true,
    default: null
  },
  // 明细列表相关信息
  detailAllSchemas: {
    type: Object,
    required: true,
    default: null
  },
  // 详情列表扩展操作按钮
  buttondataTable: {
    type: Array,
    required: false,
    default: ()=>{
      return []
    }
  },
})
const isShowDrawer = ref(false)
const detailLoading = ref(false)
const data = ref({
  code: '',
  itemCode: '',
  version: '',
  testTypeCode: '',
  programmeTemplateCode: '',
  splitRule: '',
  aql: '',
  inspectionLevel: '',
  effectiveDate: '',
  expirationDate: '',
  available: 'TRUE',
  subList: []
})

/** 打开弹窗 */
const formRef = ref()
const titleNameRef = ref()
const titleValueRef = ref()
const openDetail = async (row: any, titleName: any, titleValue: any, tableName: any) => {
  titleNameRef.value = titleName
  titleValueRef.value = titleValue
 
  isShowDrawer.value = true
  if (row) {
    detailLoading.value = true
    try {
      data.value = row
      let list = []
      list = await InspectionRecordDetailPageApi.getInspectionRecordDetailList(row.id)
      list.forEach((item, index) => {
      editableTabsValue.value = index + 1
      item.name = index + 1
      })
      data.value.subList = list
    } finally {
      detailLoading.value = false
    }
  }
}
defineExpose({ openDetail }) // 提供 open 方法，用于打开弹窗


</script>
<style lang="scss">
.el-drawer__body {
  background: #f5f5f5 !important;
}

::v-deep(.label-class-name) {
  color: #dedede;
}
</style>
<style scoped lang="scss"></style>
