<template>
  <Dialog
    :title="dialogTitle"
    v-model="dialogVisible"
    :width="dialogWidth"
    :close-on-click-modal="false"
    :vLoading="formLoading"
  >
    <div style="max-height: 60vh; overflow-y: auto; padding: 0px 20px">
      <!-- <Form ref="formRefMain" :schema="formAllSchemasMain" :is-col="true" :rules="rules" /> -->
          <el-form :model="data" label-width="auto">
            <el-row>
      <el-col :span="12">
                <el-form-item label="编码">
                  <el-input v-model="data.code" placeholder="根据系统生成" :disabled="true"/>
                </el-form-item>
              </el-col>
          <el-col :span="12">
                <el-form-item label="描述">
                  <el-input v-model="data.description"  placeholder="请填写描述"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="版本">
                  <el-input v-model="data.version"  placeholder="请填写版本"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
      <el-tabs
        v-model="editableTabsValue"
        editable
        class="demo-tabs"
        @edit="handleTabsEdit"
        type="border-card"
        tab-position="left"
        :stretch="false"
      >
        <el-tab-pane
          v-for="item in data.process"
          :key="item.name"
          :label="item.description"
          :name="item.name"
        >
          <div class="small-title">检验工序</div>
          <!-- <Form
            :ref="`formRefProcess`+index"
            :schema="formAllSchemasProcess"
            :is-col="true"
            labelWidth="150px"
            :rules="rules"
          /> -->
          <el-form :model="item" label-width="auto">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="编码">
                  <el-input v-model="item.code"  placeholder="根据系统生成" :disabled="true"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="检验方案模板编码">
                  <el-input v-model="item.inspectionCode"  placeholder="根据系统生成" :disabled="true"/>
                </el-form-item>
               
              </el-col>
              <el-col :span="12">
                <el-form-item label="描述">
                  <el-input v-model="item.description" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="顺序号">
                  <el-input v-model="item.sequenceCode" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="检验特性编码">
                  <el-input v-model="item.inspectionCharCode"  placeholder="根据系统生成" :disabled="true"/>
                </el-form-item>
                 
              </el-col>
            </el-row>
          </el-form>
          <div class="small-title">检验特性</div>
          <el-form :model="item" label-width="auto">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="编码">
                  <el-input v-model="item.inspectionCharacteristicsBaseVO.code"  placeholder="根据系统生成" :disabled="true"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="描述">
                  <el-input v-model="item.inspectionCharacteristicsBaseVO.description" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="检验方法编码">
                  <el-select v-model="item.inspectionCharacteristicsBaseVO.inspectionMethodCode" placeholder="请选择检验方法编码">
                    <el-option
                      v-for="item in inspectionProcessList"
                      :key="item.id"
                      :label="item.description"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="采样过程编码">
                  <el-select v-model="item.inspectionCharacteristicsBaseVO.inspectionProcessPage" placeholder="请选择采样过程编码">
                    <el-option
                      v-for="item in inspectionProcessList"
                      :key="item.id"
                      :label="item.description"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="动态修改规则编码">
                  <el-select v-model="item.inspectionCharacteristicsBaseVO.inspectionMethod" placeholder="请选择动态修改规则编码">
                    <el-option
                      v-for="item in inspectionProcessList"
                      :key="item.id"
                      :label="item.description"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否允许修改特征值">
                  <el-select v-model="item.inspectionCharacteristicsBaseVO.isCanUpdate" placeholder="请选择是否允许修改特征值">
                    <el-option
                      v-for="item in isYesList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结果录入方式">
                  <el-select v-model="item.inspectionCharacteristicsBaseVO.resultEntryMethod" placeholder="请选择结果录入方式">
                    <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="特征类型">
                  <!-- <el-input v-model="item.featureType" /> -->
                  <el-select v-model="item.inspectionCharacteristicsBaseVO.featureType" placeholder="请选择特征类型">
                    <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="是否设定上限">
                  <el-select v-model="item.inspectionCharacteristicsBaseVO.quantifyIsCapping" placeholder="请选择是否设定上限">
                    <el-option
                      v-for="item in isYesList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否设定下限">
                  <el-select v-model="item.inspectionCharacteristicsBaseVO.quantifyIsLowlimit" placeholder="请选择是否设定下限">
                    <el-option
                      v-for="item in isYesList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="目标值">
                  <el-input v-model="item.inspectionCharacteristicsBaseVO.quantifyTarget" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="上限值">
                  <el-input v-model="item.inspectionCharacteristicsBaseVO.quantifyCapping" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="下限值">
                  <el-input v-model="item.inspectionCharacteristicsBaseVO.quantifyLowlimit" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="计量单位">
                  <el-input v-model="item.inspectionCharacteristicsBaseVO.quantifyUom" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="小数位">
                  <el-input v-model="item.inspectionCharacteristicsBaseVO.quantifyDecimal" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="选择集编码">
                  <el-select v-model="item.inspectionCharacteristicsBaseVO.quantifyQuantifyCode" placeholder="请选择集编码">
                    <el-option
                      v-for="item in inspectionProcessList"
                      :key="item.id"
                      :label="item.description"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
    <template #footer>
      <ButtonBase :Butttondata="Butttondata" @button-base-click="buttonBaseClick" />
    </template>
  </Dialog>
  <Dialog title="修改名称" v-model="dialogVisibleName" width="500px" :close-on-click-modal="false">
    <div style="padding: 0px 20px">
      <el-input v-model="name" style="width: 240px" placeholder="请输入名称" />
    </div>
    <template #footer>
      <ButtonBase :Butttondata="Butttondata" @button-base-click="buttonBaseClick1" />
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import * as defaultButtons from '@/utils/disposition/defaultButtons'
import { getCurrentInstance } from 'vue'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import * as InspectionProcessPageApi from '@/api/qms/inspectionTemplate'
const inspectionProcessList = ref([])
const isYesList = ref([])
onMounted(async()=>{
  let  inspectionProcessPage = await InspectionProcessPageApi.getInspectionProcessPage()
inspectionProcessList.value = inspectionProcessPage.list
console.log(inspectionProcessList)

isYesList.value =[{
        value:0,
        label:'是'
      },{
        value:1,
        label:'否'
      }]
})
const props = defineProps({
  // 显示窗口宽度设置
  basicFormWidth: {
    type: String,
    default: ''
  },
  // 检验特性表单，列表 相关信息
  formAllSchemasFeatures: {
    type: Object,
    required: true,
    default: null
  },
  // 检验工序表单，列表 相关信息
  formAllSchemasProcess: {
    type: Object,
    required: true,
    default: null
  },
  // 检验模板表单，列表 相关信息
  formAllSchemasMain: {
    type: Object,
    required: true,
    default: null
  },
  // 底部按钮集合
  footButttondata: {
    type: Array,
    required: false,
    default: null
  },
  // 校验rules
  rules: {
    type: Object,
    required: true,
    default: null
  }
})
const { t } = useI18n() // 国际化

const dialogVisible = ref(true) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const dialogWidth = ref()
const data = ref({
  code: '',
  description:'',
  version:'',
  process:[]
})


const dialogVisibleName = ref(false)
const name = ref('')
const onSubmit = () => {
  console.log('submit!')
}
if (props.basicFormWidth) {
  dialogWidth.value = props.basicFormWidth + '%'
} else {
  dialogWidth.value = props.isBusiness ? '60%' : '40%'
}
/** 打开弹窗 */
const open = async (type: string, row?: any, masterParmas?: any, titleName?: any) => {
  dialogVisible.value = true
  if (titleName) {
    dialogTitle.value = t('action.' + titleName)
  } else {
    dialogTitle.value = t('action.' + type)
  }
}
defineExpose({ open, dialogVisible, formLoading }) // 提供 open 方法，用于打开弹窗
import type { TabPaneName } from 'element-plus'

let tabIndex = 1
const editableTabsValue = ref('1')
// const editableTabs = ref([])

const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' | 'add') => {
  if (action === 'add') {
    name.value = ''
    dialogVisibleName.value = true
  } else if (action === 'remove') {
    const tabs = data.value.process
    let activeName = editableTabsValue.value
    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1]
          if (nextTab) {
            activeName = nextTab.name
          }
        }
      })
    }
    editableTabsValue.value = activeName
    data.value.process = tabs.filter((tab) => tab.name !== targetName)
  }
}
/** 修改名称时间 */
const buttonBaseClick1 = (val) => {
  // 保存
  console.log(val)
  if (val == 'save') {
    const newTabName = `${++tabIndex}`
    data.value.process.push({
      description: name.value,
      name: newTabName,
      inspectionCode: '',
      sequenceCode: '',
      inspectionCharCode: '',
      inspectionCharacteristicsBaseVO:{
        describe: '',
      inspectionMethodCode: '',
      dynamicUpdateCode: '',
      inspectionMethod: '',
      isCanUpdate: '',
      isDestructionInspection: '',
      resultEntryMethod: '',
      featureType: '',
      quantifyIsCapping: '',
      quantifyIsLowlimit: '',
      quantifyTarget: '',
      quantifyCapping: '',
      quantifyLowlimit: '',
      quantifyUom: '',
      quantifyDecimal: '',
      quantifyQuantifyCode: ''
      }
     
    })
    console.log(  data.value.process)

    editableTabsValue.value = newTabName
    dialogVisibleName.value = false
  }
  // 关闭
  else if (val == 'close') {
    dialogVisibleName.value = false
  }
}
const buttonBaseClick = (val) => {
  // 保存
  if (val == 'save') {
    submitForm()
  }
  // 关闭
  else if (val == 'close') {
    dialogVisible.value = false
  }
}
const submitForm = async () => {
  // const data1= unref(formRefMain)?.formModel
  // const data2= unref(formRefProcess)?.formModel
  // const data3= unref(formRefFeatures)?.formModel
  // console.log(data1)
  // console.log(data2)
  console.log(data.list)
        emit('submitForm', formType.value, data)
}
/** 弹窗按钮 */
let Butttondata: any = []
if (props.footButttondata) {
  Butttondata = props.footButttondata
} else {
  Butttondata = [
    defaultButtons.formSaveBtn(null), // 保存
    defaultButtons.formCloseBtn(null) // 关闭
  ]
}
</script>
<style scoped>
.small-title {
  font-weight: bold;
  padding: 0px 10px 10px;
  color: #1a8bfc;
  font-size: 16px;
}
</style>
<style>
.el-tabs--left .el-tabs__header.is-left {
  min-height: 700px !important;
  min-width: 150px !important;
}
.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left {
  min-width: 120px !important;
}
</style>
