<!-- 第6套：安全阀标准库 -->
<script lang="ts" setup name="TemplateDetailSixth">
import { ElMessage } from 'element-plus'
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 tableRef = ref()
// ----------------------------------------表头------------------------------------------------
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 form = ref({
  appearanceFunctionCheck: 1,
  sealingTest: 1,
  rippleVoltage: 1,
})
watch(() => props.form, (newVal) => {
  if (newVal) {
    form.value = newVal
  }
})
// watch(() => props.list, (newVal) => {
//   if (newVal && newVal.length) {
//     form.value.rippleVoltage = 1
//   }
//   else {
//     form.value.rippleVoltage = 0
//   }
// })
// ---------------------------------------------校验---------------------------------------------------

// ------------------------------------------------------------------------------------------------
// 点击计算结果--上方表格计算
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) => { // 检定项表格
  // console.log(newVal, 'console.log(newVal)')
  if (newVal) {
    console.log(newVal)
    list.value = []
    list.value = [...newVal]
    list.value = list.value.map(item => ({
      ...item,
      params: '整定压力',
      allowValue: `${item.lowerAllowValue}~${item.upperAllowValue}`,
      editable: false,
    }))
  }
  else {
    list.value = []
  }
})
const getList = () => {
  if (Number(form.value.rippleVoltage)) {
    return list.value
  }
  else {
    return []
  }
}
defineExpose({ list, checkList, form, getList })
// ----------------------------------------表格操作--------------------------------------------------------
// 校验表格（点击保存的时候用、生成标准器示值）
function checkList() {
  return useCheckList(list.value, columns.value, '检定项表格')
}
// 添加行
const addRow = () => {
  if (checkList()) {
    setAllRowReadable()
    if (list.value.length) {
      list.value.push({ ...list.value[list.value.length - 1], editable: true, id: `custom-${new Date().getTime()}` })
    }
    else {
      list.value.push({
        // id: '',
        params: '整定压力',
        nominalValue: '',
        unit: 'MPa',
        allowValue: '',
        editable: true,
        upperAllowValue: '',
        lowerAllowValue: '',
        id: `custom-${new Date().getTime()}`,
      })
    }
  }
}
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()

// 右击当前行操作
const randomNum = `${new Date().getTime()}`
const clickIndex = ref(-1)
const contextmenu = (row: any, column: any, event: any, index: number) => {
  if (props.pageType === 'detail') { return }
  // 阻止默认的右键菜单
  event.preventDefault()
  clickIndex.value = list.value.findIndex(item => item === row)
  // console.log('右击', clickIndex.value)
  // 获取自定义菜单元素
  var menu = document.getElementById(randomNum) as HTMLElement
  // 设置自定义菜单的位置并显示
  let positionX = event.clientX
  let positionY = event.clientY
  if (window.innerHeight - event.clientY < 268) {
    positionY = window.innerHeight - 268
  }
  else {
    positionY = event.clientY
  }
  if (window.innerWidth - event.clientX < 146) {
    positionX = window.innerWidth - 146
  }
  else if (event.clientX - 180 < 146) {
    positionX = 180
  }
  else {
    positionX = event.clientX - 146 / 2
  }
  menu.style.top = `${positionY}px`
  menu.style.left = `${positionX}px`
  menu.style.display = 'block'
}
// 点击其他位置隐藏自定义菜单
document.addEventListener('click', () => {
  if (props.pageType === 'detail') { return }
  if (document.getElementById(randomNum)) {
    (document.getElementById(randomNum) as HTMLElement).style.display = 'none'
  }
})
const mouseoutTable = () => {
  console.log('鼠标移出')
  if (props.pageType === 'detail') { return }
  if (document.getElementById(randomNum)) {
    (document.getElementById(randomNum) as HTMLElement).style.display = 'none'
  }
}
// 添加行
const costomAddRow = (type: string) => {
  if (type === 'current-pre') {
    // 当前行前方插入
    list.value.splice(clickIndex.value, 0, JSON.parse(JSON.stringify({ ...list.value[clickIndex.value], id: `custom-${new Date().getTime()}` })))
  }
  else if (type === 'current-next') {
    // 当前行后方方插入
    list.value.splice(clickIndex.value + 1, 0, JSON.parse(JSON.stringify({ ...list.value[clickIndex.value], id: `custom-${new Date().getTime()}` })))
  }
  else if (type === 'list-head') {
    // 列表头行插入
    list.value.splice(0, 0, JSON.parse(JSON.stringify({ ...list.value[clickIndex.value], id: `custom-${new Date().getTime()}` })))
  }
  else if (type === 'list-tail') {
    // 列表尾行插入
    list.value.splice(list.value.length, 0, JSON.parse(JSON.stringify({ ...list.value[clickIndex.value], id: `custom-${new Date().getTime()}` })))
  }
  else if (type === 'select-pre') {
    // 选中行前方插入
    if (!SelectionList.value.length) {
      ElMessage.warning('未选择数据')
      return
    }
    SelectionList.value.forEach((item, index) => {
      const dataIndex = list.value.findIndex(citem => item === citem)
      list.value.splice(dataIndex, 0, JSON.parse(JSON.stringify({ ...item, id: `custom-${new Date().getTime()}` })))
    })
    tableRef.value!.clearSelection()
  }
  else if (type === 'select-next') {
    // 选中行后方插入
    if (!SelectionList.value.length) {
      ElMessage.warning('未选择数据')
      return
    }
    SelectionList.value.forEach((item, index) => {
      const dataIndex = list.value.findIndex(citem => item === citem)
      list.value.splice(dataIndex + 1, 0, JSON.parse(JSON.stringify({ ...item, id: `custom-${new Date().getTime()}` })))
    })
    tableRef.value!.clearSelection()
  }
  else if (type === 'del-current') {
    list.value.splice(clickIndex.value, 1)
  }
  else if (type === 'del-select') {
    if (!SelectionList.value.length) {
      ElMessage.warning('未选择数据')
      return
    }
    SelectionList.value.forEach((item, index) => {
      const dataIndex = list.value.findIndex(citem => item === citem)
      list.value.splice(dataIndex, 1)
    })
    tableRef.value!.clearSelection()
  }
  clickIndex.value = -1
}
</script>

<template>
  <div @mouseleave="mouseoutTable">
    <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.rippleVoltage" :true-label="1" :false-label="0" :checked="true" :disabled="pageType === 'detail'">
        整定压力
      </el-checkbox>
    </div>
    <!-- 上面表格 -->
    <detail-block v-if="form.rippleVoltage" 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"
        :height="list.length > 10 ? 500 : null"
        border
        style="width: 100%;"
        @selection-change="handleSelectionChange"
        @row-dblclick="dblclickRow"
        @row-contextmenu="contextmenu"
      >
        <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>
    <!-- 自定义菜单 -->
    <div :id="randomNum" class="custom-menu">
      <p class="menu-item" @click="costomAddRow('current-pre')">
        当前行前方插入
      </p>
      <p class="menu-item" @click="costomAddRow('current-next')">
        当前行后方插入
      </p>
      <p class="menu-item" @click="costomAddRow('list-head')">
        列表头行插入
      </p>
      <p class="menu-item" @click="costomAddRow('list-tail')">
        列表尾行插入
      </p>
      <p v-if="pageType !== 'detail'" class="menu-item" @click="costomAddRow('select-pre')">
        选中行前方插入
      </p>
      <!--  -->
      <p v-if="pageType !== 'detail'" class="menu-item" @click="costomAddRow('select-next')">
        选中行后方插入
      </p>
      <p class="menu-item" @click="costomAddRow('del-current')">
        删除当前行
      </p>
      <p v-if="pageType !== 'detail'" class="menu-item" @click="costomAddRow('del-select')">
        删除选中行
      </p>
    </div>
  </div>
</template>

<style scoped lang="scss">
.custom-menu {
  display: none;
  position: fixed;
  background-color: #fff;
  border-radius: 5px;
  padding: 5px 0;
  z-index: 1000;
  border: 1px solid #c8c9cc;
  box-shadow: 0 0 12px rgb(0 0 0 / 12%);

  .menu-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
    list-style: none;
    line-height: 22px;
    padding: 5px 16px;
    margin: 0;
    // font-size: var(--el-font-size-base);
    color: #606266;
    cursor: pointer;
    outline: none;

    &:hover {
      background-color: #ecf5ff;
      color: #409eff;
    }
  }
}
</style>