<!-- 第6套：安全阀标准装置 -->
<script lang="ts" setup name="TemplateDetailSixth">
import type { IList } from './templateDetail-interface'
import type { dictType } from '@/global'
import { getDictByCode } from '@/api/system/dict'
import { calc } from '@/utils/useCalc'
import { useCheckList } from '@/commonMethods/useCheckList'
import { calculate, recalculate } from '@/api/business/measure/caculate'

const props = defineProps({
  pageType: {
    type: String,
    default: 'add',
  },
  itemCategoryName: {
    type: String,
    require: true,
  }, // 设备检定项分类名称
  belongStandardEquipment: { // 检校标准装置code
    type: String,
    require: true,
  },
  list: {
    type: Array as any,
  },
  form: { // 检定项表单
    type: Object as any,
  },
  itemId: { // 检定项id
    type: String,
    default: '',
  },
})
const list = ref<IList[]>([]) // 表格数据
const tableLoading = ref(false)
// ----------------------------------------表头------------------------------------------------
const columns = ref([ // 开路电压（电子式绝缘电阻表（数字式）、电子式绝缘电阻表（指针式）、兆欧式）上面表格
  { text: '检定项目', value: 'params', align: 'center', required: true, isSelect: false },
  { text: '标称值', value: 'nominalValue', align: 'center', required: true, isSelect: true },
  { text: '标称值单位', value: 'unit', align: 'center', required: true, isSelect: false },
  { text: '允许值', value: 'allowValue', align: 'center', required: false, isSelect: false },
])
// ---------------------------------------------校验---------------------------------------------------

// ------------------------------------------------------------------------------------------------
// 点击计算结果--上方表格计算
const calculateData = () => {
  if (checkList()) {
    setAllRowReadable()
    //  计算
    list.value.forEach((item) => {
    //       根据公式计算，公式规则：
    // (1)当标称值≤0.5MPa，允许值为标称值±0.015
    // (2)当标称值＞0.5MPa，允许值为标称值*0.97~1.03倍
      if (Number(item.nominalValue) <= 0.5) {
        item.lowerAllowValue = (Number(item.nominalValue) - 0.105).toFixed(4)
        item.upperAllowValue = (Number(item.nominalValue) + 0.105).toFixed(4)
      }
      else {
        item.lowerAllowValue = (Number(item.nominalValue) * 0.97).toFixed(4)
        item.upperAllowValue = (Number(item.nominalValue) * 1.03).toFixed(4)
      }
      item.allowValue = `${item.lowerAllowValue}~${item.upperAllowValue}`
    })
  }
}
// -----------------------------------------------------------------------------------------------------

watch(() => props.list, (newVal) => { // 检定项表格
  if (newVal) {
    list.value = [...newVal]
    list.value = list.value.map(item => ({
      ...item,
      params: '整定压力',
      allowValue: `${item.lowerAllowValue}~${item.upperAllowValue}`,
      editable: false,
    }))
  }
})

defineExpose({ list })
// ----------------------------------------表格操作--------------------------------------------------------
// 校验表格（点击保存的时候用、生成标准器示值）
function checkList() {
  return useCheckList(list.value, columns.value, '检定项表格')
}
// 添加行
const addRow = () => {
  if (checkList()) {
    setAllRowReadable()
    list.value.push({
      id: '',
      params: '整定压力',
      nominalValue: '',
      unit: 'MPa',
      allowValue: '',
      editable: true,
      upperAllowValue: '',
      lowerAllowValue: '',
    })
  }
}
const SelectionList = ref()
// 表格选中
const handleSelectionChange = (e: any[]) => {
  SelectionList.value = e
}
// 删除行
const removeRow = () => {
  list.value = list.value.filter((item) => {
    return !SelectionList.value.includes(item)
  })
}
// 将列表置为不可编辑状态
function setAllRowReadable() {
  for (const item of list.value) {
    item.editable = false
  }
}
// 双击行显示输入框
const dblclickRow = (row: any) => {
  if (props.pageType === 'detail') {
    return
  }
  setAllRowReadable()
  row.editable = true
}
// ----------------------------------------字典--------------------------------------------------------
const nominalList = ref<{ id: string; value: string; name: string }[]>([])
// 获取标称值字典
const fetchDict = () => {
  getDictByCode('standardNominalValue').then((res) => {
    nominalList.value = res.data
  })
}
fetchDict()
</script>

<template>
  <div style="padding: 0 10px;">
    <el-checkbox v-model="form.appearanceFunctionCheck" :true-label="1" :false-label="0" :checked="true" :disabled="pageType === 'detail'">
      外观检查
    </el-checkbox>
    <el-checkbox v-model="form.sealingTest" :true-label="1" :false-label="0" :checked="true" :disabled="pageType === 'detail'">
      密封试验
    </el-checkbox>
  </div>
  <div style="padding: 0 10px;">
    <el-checkbox v-model="form.zdyl" :true-label="1" :false-label="0" :checked="true" disabled>
      整定压力
    </el-checkbox>
  </div>
  <!-- 上面表格 -->
  <detail-block title=" " style="margin-top: 0;">
    <template v-if="props.pageType !== 'detail'" #btns>
      <el-button type="primary" @click="addRow">
        增加行
      </el-button>
      <el-button type="info" @click="removeRow">
        删除行
      </el-button>
      <el-button type="primary" @click="calculateData">
        计算结果
      </el-button>
    </template>
    <el-table
      ref="tableRef"
      v-loading="tableLoading"
      :data="list"
      border
      style="width: 100%;"
      @selection-change="handleSelectionChange"
      @row-dblclick="dblclickRow"
    >
      <el-table-column v-if="pageType !== 'detail'" type="selection" width="38" />
      <el-table-column align="center" label="序号" width="80" type="index" />
      <el-table-column
        v-for="item in columns"
        :key="item.value"
        :prop="item.value"
        :label="item.text"
        align="center"
      >
        <template #header>
          <span v-show="item.required && pageType !== 'detail'" style="color: red;">*</span><span>{{ item.text }}</span>
        </template>
        <template #default="scope">
          <span v-if="!scope.row.editable && !item.isSelect">{{ scope.row[item.value] }}</span>
          <el-select
            v-if="scope.row.editable && item.isSelect" v-model="scope.row[item.value]"
            :placeholder="`${item.text}`" style="width: 100%;"
          >
            <el-option
              v-for="citem in nominalList"
              :key="citem.id"
              :label="citem.name"
              :value="citem.name"
            />
          </el-select>
        </template>
      </el-table-column>
    </el-table>
  </detail-block>
</template>