<!-- 标准装置台账信息详情 配置核查项 第4套：0.02级活塞式压力计 -->
<script name="StandardBookEquipmentConfig" lang="ts" setup>
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { IList } from './fourth-interface'
import type { dictType } from '@/global'
import { useCheckList } from '@/commonMethods/useCheckList'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { config, getCheckItemDetail } from '@/api/equipment/standard/book'
import { calc } from '@/utils/useCalc'
import { getDictByCode } from '@/api/system/dict'

const textMap: { [key: string]: string } = {
  edit: '编辑',
  detail: '详情',
}// 页面类型字典
const form = ref({ // 表单
  equipmentNo: '', // 统一编号
  equipmentName: '', // 设备名称
  model: '', // 规格型号
  manufactureNo: '', // 出厂编号
  measureRange: '', // 测量范围
  uncertainty: '', // 不确定度或允许误差极限或准确度等级
  itemCategoryName: '', // 核查项分类名称
  itemCategoryId: '', // 核查项分类id
  remark: '', // 核查项备注
  belongStandardEquipment: '', // 检校标准装置
  belongStandardEquipmentName: '', // 检校标准装置名称
  // itemCategoryName: '', // 类型：压力值、电信号
})
const pageType = ref('detail') // 页面类型: add, edit, detail
const infoId = ref('') // id
const $router = useRouter() // 路由实例
const loading = ref(false) // loading
const equipmentId = ref('') // 设备id
// -----------------------------------路由参数------------------------------------------------------
// 从路由中获取页面类型参数
const $route = useRoute()
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
  console.log('pageType.value', pageType.value)
}
// -----------------------------------------字典--------------------------------------------------------------
const pressureUnitList = ref<dictType[]>([])// 单位（压力值）
const checkPointPressureList = ref<dictType[]>([])//  核查点（压力值）
const maximumErrorAbsolutePressureList = ref<dictType[]>([])//  最大允许误差绝对值（压力值）
const checkItemElectricalSignalList = ref<dictType[]>([])//  核查项目(电信号)
const unitElectricalSignalList = ref<dictType[]>([])//  核查项目(电信号)
const checkPointElectricalSignalListList = ref<dictType[]>([])//  核查点(电信号)
const unitElectricalSignalVList = ref<dictType[]>([])//  核查点V(电信号)
const unitElectricalSignalAList = ref<dictType[]>([])//  核查点A(电信号)
const maximumErrorAbsoluteElectricalSignalList = ref<dictType[]>([])//  最大允许误差绝对值(电信号)

// 查询字典
const getDict = () => {
  // 单位（压力值）
  getDictByCode('rangeUnit').then((response) => {
    pressureUnitList.value = response.data
  })
  // 核查点（压力值）
  getDictByCode('checkPointPressure').then((response) => {
    checkPointPressureList.value = response.data
  })
  // 最大允许误差绝对值（压力值）
  getDictByCode('maximumErrorAbsolutePressure').then((response) => {
    maximumErrorAbsolutePressureList.value = response.data
  })
  // 核查项目(电信号)
  getDictByCode('checkItemElectricalSignal').then((response) => {
    checkItemElectricalSignalList.value = response.data
  })
  // 单位电压(电信号)
  getDictByCode('unitElectricalSignalV').then((response) => {
    unitElectricalSignalVList.value = response.data
  })
  // 单位电流(电信号)
  getDictByCode('unitElectricalSignalA').then((response) => {
    unitElectricalSignalAList.value = response.data
  })
  // 核查点(电信号)
  getDictByCode('checkPointElectricalSignal').then((response) => {
    checkPointElectricalSignalListList.value = response.data
  })
  // 最大允许误差绝对值(电信号)
  getDictByCode('maximumErrorAbsoluteElectricalSignal').then((response) => {
    maximumErrorAbsoluteElectricalSignalList.value = response.data
  })
}
getDict()
// -------------------------------------------核查项-----------------------------------------------
const list = ref<IList[]>([]) // 核查数据
const checkoutList = ref<IList[]>([]) // 核查数据
const columns = ref<TableColumn[]>([]) // 表头
const columns_pressure = ref<TableColumn[]>([ // 压力表头
  { text: '单位', value: 'unit', align: 'center', required: true },
  { text: '核查点', value: 'checkPoint', align: 'center', required: true },
  { text: '循环次数（正行程和反行程）', value: 'cycleNumber', align: 'center', required: true },
  { text: '最大允许误差绝对值', value: 'maximumErrorAbsolute', align: 'center', required: true },
  { text: '分辨力', value: 'resolution', align: 'center', required: true, reg: (resolution: string | number) => { return Number(resolution) <= 1 } },
])
const columns_electrical_signal = ref<TableColumn[]>([ // 电信号表头
  { text: '核查项目', value: 'checkItem', align: 'center', required: true },
  { text: '单位', value: 'unit', align: 'center', required: true },
  { text: '核查点', value: 'checkPoint', align: 'center', required: true },
  { text: '核查标准示值', value: 'standardIndication', align: 'center', required: true },
  { text: '最大允许误差绝对值', value: 'maximumErrorAbsolute', align: 'center', required: true },
  { text: '分辨力', value: 'resolution', align: 'center', required: true, reg: (resolution: string | number) => { return Number(resolution) <= 1 } },
])
// 校验表格（点击保存的时候、增加行用）
const checkList = (list: any, title: string) => {
  return useCheckList(list, columns.value, title)
}

/**
 * 增加行公共方法
 * @param list 要操作的数组
 * @param title 操作的表格
 */
const addRow = (list: IList[], title: string) => {
  if (!checkArrayDataUnique()) { return false }
  if (checkList(list, `${title}表格`)) {
    if (list.length) { // 增加行时默认上一行数据
      list.push({
        id: `custom-${new Date().getTime()}`,
        checkItem: list[list.length - 1].checkItem, //	核查项目(直接存字典value)
        checkPoint: list[list.length - 1].checkPoint, //	核查点(直接存字典value)
        cycleNumber: list[list.length - 1].cycleNumber, //		循环次数（正行程和反行程） 		false
        equipmentId: list[list.length - 1].equipmentId, //	配套设备id
        itemCategoryId: list[list.length - 1].itemCategoryId, //	核查项分类id(能够确定是哪个标准装置)
        maximumErrorAbsolute: list[list.length - 1].maximumErrorAbsolute, //	最大允许误差绝对值(直接存字典value)
        remark: list[list.length - 1].remark, //	核查项备注(每个数据存储的核查项备注相同，前端取列表中一个即可)
        resolution: list[list.length - 1].resolution, //		分辨力
        standardIndication: list[list.length - 1].standardIndication, //	核查标准示值
        unit: list[list.length - 1].unit, //	单位(直接存字典value)
      })
    }
    else {
      list.push({
        checkItem: '2', //	核查项目(直接存字典value)
        checkPoint: '', //	核查点(直接存字典value)
        cycleNumber: form.value.itemCategoryName === '压力值' ? 3 : 0, //		循环次数（正行程和反行程）
        equipmentId: infoId.value, //	配套设备id
        id: `custom-${new Date().getTime()}`,
        itemCategoryId: form.value.itemCategoryId, // 核查项分类id(能够确定是哪个标准装置)
        maximumErrorAbsolute: '', //	最大允许误差绝对值(直接存字典value)
        remark: '', //	核查项备注(每个数据存储的核查项备注相同，前端取列表中一个即可)
        resolution: 0.0001, //		分辨力
        standardIndication: '', //	核查标准示值
        unit: '', //	单位(直接存字典value)
      })
    }
  }
}
/**
 * 删除行公共方法
 * @param checkoutList 选中的数组
 * @param list 操作的数组
 */
const delRow = () => {
  if (!checkoutList.value.length) {
    ElMessage.warning('请选中要删除的行')
  }
  else {
    list.value = list.value.filter((item: any) => {
      return !checkoutList.value.includes(item)
    })
  }
}

// 多选
const handleSelectionChange = (e: any) => {
  checkoutList.value = e
}

// ---------------------------------------按钮-----------------------------------------------------
// 点击关闭
const close = () => {
  $router.back()
}
// 清空配置
const clear = () => {
  ElMessageBox.confirm(
    '确认清空配置项吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      list.value = []
      form.value.remark = ''
    })
}

// 点击保存
const save = () => {
  if (!list.value.length) { ElMessage.warning('核查项不能为空'); return false }
  if (!checkList(list.value, '核查项表格')) { return false }
  if (!checkArrayDataUnique()) { return false }
  const params = {
    standardId: $route.query.standardId,
    equipmentId: equipmentId.value, // 配套设备id
    itemCategoryId: form.value.itemCategoryId, // 核查项分类id
    checkItemDataPistonGaugeList: list.value.map((item) => {
      return {
        ...item,
        remark: form.value.remark,
        id: item.id.includes('custom') ? '' : item.id,
      }
    }),
  }
  const loading = ElLoading.service({
    lock: true,
    text: '加载中',
    background: 'rgba(255, 255, 255, 0.6)',
  })
  config(params).then((res) => {
    ElMessage.success('已保存')
    pageType.value = 'detail'
    loading.close()
  })
}

// 获取详情
const getInfo = () => {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中',
    background: 'rgba(255, 255, 255, 0.6)',
  })
  const params = {
    equipmentId: equipmentId.value, // 设备id
    belongStandardEquipment: form.value.belongStandardEquipment, // 检校标准装置code
    itemCategoryId: form.value.itemCategoryId, // 核查项分类id
    itemCategoryName: form.value.itemCategoryName, // 核查项分类名称
  }
  getCheckItemDetail(params).then((res) => {
    if (res.data && res.data.checkItemDataPistonGaugeList && res.data.checkItemDataPistonGaugeList.length) {
      list.value = res.data.checkItemDataPistonGaugeList.map((item: any) => {
        return {
          ...item,
          resolution: Number(item.resolution),
        }
      })
      // 核查项备注
      form.value.remark = list.value.length ? list.value[0].remark! : ''
    }
    loading.close()
  })
}

// 校验三个表格中不能同时出现核查项目和核查点两个属性同时相同的两条数据
function checkArrayDataUnique() {
  for (let i = 0; i < list.value.length; i++) {
    const j = i + 1
    for (let j = 0; j < list.value.length; j++) {
      if (i !== j && list.value[i].checkItem === list.value[j].checkItem && list.value[i].checkPoint + list.value[i].unit === list.value[j].checkPoint + list.value[j].unit) {
        ElMessage.warning(`第${i + 1}行和第${j + 1}行的 核查项目、核查点和单位不能完全一样`)
        return false
      }
    }
  }
  return true
}
// -----------------------------------分辨力多0少0--------------------------------------------
// 点击减号
const clickSub = (row: IList) => {
  row.resolution = Number(calc(row.resolution, 10, '*'))
}
// 点击加号
const clickAdd = (row: IList) => {
  row.resolution = Number(calc(row.resolution, 10, '/'))
}

// 监听到电信号核查项目改变,改变分辨率
const checkItemChange = (row: any) => {
  console.log(row, 'ppppp')

  if (row.checkItem === '1') {
    row.resolution = 0.00001
  }
  else {
    row.resolution = 0.0001
  }
}

// 监听到电信号核查点改变,改变核查标准示值
const checkPointChange = (row: any) => {
  row.standardIndication = row.checkPoint
}

// ------------------------------------------钩子--------------------------------------------------
watch(() => form.value.itemCategoryName, (newValue) => {
  if (newValue === '压力值') {
    columns.value = columns_pressure.value
  }
  else { // 电信号
    columns.value = columns_electrical_signal.value
  }
})

onMounted(() => {
  form.value.equipmentNo = $route.query.equipmentNo as string // 统一编号
  form.value.equipmentName = $route.query.equipmentName as string // 设备名称
  form.value.model = $route.query.model as string // 规格型号
  form.value.manufactureNo = $route.query.manufactureNo as string // 出厂编号
  form.value.measureRange = $route.query.measureRange as string // 测量范围
  form.value.uncertainty = $route.query.uncertainty as string // 不确定度或允许误差极限或准确度等级
  form.value.itemCategoryName = $route.query.itemCategoryName as string // 核查项分类名称
  form.value.itemCategoryId = $route.query.itemCategoryId as string // 核查项分类id
  form.value.belongStandardEquipment = $route.query.belongStandardEquipment as string // 核查项标准装置id
  form.value.belongStandardEquipmentName = $route.query.belongStandardEquipmentName as string // 核查项标准装置id
  equipmentId.value = $route.query.equipmentId as string // 设备id
  getInfo()
})

// ---------------------------------表格操作---------------------------------
const table = ref()
const randomNum = `${new Date().getTime}${Math.random()}`
// 右击当前行操作
const clickIndex = ref(-1)
const contextmenu = (row: any, column: any, event: any, index: number) => {
  if (pageType.value === '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 (pageType.value === 'detail') { return }
  if (document.getElementById(randomNum)) {
    (document.getElementById(randomNum) as HTMLElement).style.display = 'none'
  }
})
const mouseoutTable = () => {
  console.log('鼠标移出')
  if (pageType.value === '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 (!checkoutList.value.length) {
      ElMessage.warning('未选择数据')
      return
    }
    checkoutList.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()}` })))
    })
    table.value!.clearSelection()
  }
  else if (type === 'select-next') {
    // 选中行后方插入
    if (!checkoutList.value.length) {
      ElMessage.warning('未选择数据')
      return
    }
    checkoutList.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()}` })))
    })
    table.value!.clearSelection()
  }
  else if (type === 'del-current') {
    list.value.splice(clickIndex.value, 1)
  }
  else if (type === 'del-select') {
    if (!checkoutList.value.length) {
      ElMessage.warning('未选择数据')
      return
    }
    checkoutList.value.forEach((item, index) => {
      const dataIndex = list.value.findIndex(citem => item === citem)
      list.value.splice(dataIndex, 1)
    })
    table.value!.clearSelection()
  }
  clickIndex.value = -1
}
</script>

<template>
  <app-container>
    <detail-page v-loading="loading" :title="`配置核查项（${textMap[pageType]}）`">
      <template #btns>
        <el-button v-if="pageType === 'edit'" type="warning" @click="clear">
          清空配置
        </el-button>
        <el-button v-if="pageType === 'edit'" type="primary" @click="save">
          保存
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <el-form
        ref="ruleFormRef"
        :model="form"
        :label-width="130"
        label-position="right"
      >
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="统一编号:" prop="equipmentNo">
              <el-input
                v-model="form.equipmentNo"
                disabled
                :placeholder="pageType === 'detail' ? '' : '统一编号'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备名称:" prop="equipmentName">
              <el-input
                v-model="form.equipmentName"
                disabled
                :placeholder="pageType === 'detail' ? '' : '设备名称'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="规格型号:" prop="model">
              <el-input
                v-model="form.model"
                disabled
                :placeholder="pageType === 'detail' ? '' : '规格型号'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出厂编号:" prop="manufactureNo">
              <el-input
                v-model="form.manufactureNo"
                disabled
                :placeholder="pageType === 'detail' ? '' : '出厂编号'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="测量范围:" prop="measureRange">
              <el-input
                v-model="form.measureRange"
                disabled
                type="textarea"
                autosize
                :placeholder="pageType === 'detail' ? '' : '测量范围'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="260" label="不确定度或允许误差极限或准确度等级:" prop="uncertainty">
              <el-input
                v-model="form.uncertainty"
                type="textarea"
                autosize
                disabled
                :placeholder="pageType === 'detail' ? '' : '不确定度或允许误差极限或准确度等级'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="核查项分类名称:" prop="itemCategoryName">
              <el-input
                v-model="form.itemCategoryName"
                disabled
                :placeholder="pageType === 'detail' ? '' : '核查项分类名称'"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-page>

    <detail-block title="核查项" @mouseleave="mouseoutTable">
      <template v-if="pageType !== 'detail'" #btns>
        <el-button type="primary" @click="addRow(list, '核查项')">
          增加行
        </el-button>
        <el-button type="info" @click="delRow">
          删除行
        </el-button>
      </template>
      <el-table
        ref="table"
        :data="list"
        :height="list.length > 10 ? 500 : null"
        border
        style="width: 100%;"
        @selection-change="handleSelectionChange"
        @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"
          :width="item.width"
          align="center"
        >
          <template #header>
            <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
          </template>
          <template #default="scope">
            <!-- 电信号核查项目 -->
            <el-select
              v-if="item.value === 'checkItem' && pageType !== 'detail' && form.itemCategoryName === '电信号'"
              v-model="scope.row[item.value]"
              filterable
              :placeholder="pageType === 'detail' ? ' ' : `${item.text}`"
              @change="checkItemChange(scope.row)"
            >
              <el-option v-for="i of checkItemElectricalSignalList" :key="i.id" :label="i.name" :value="i.value" />
            </el-select>
            <!-- 电信号电压单位 -->
            <el-select
              v-if="scope.row.checkItem === '1' && item.value === 'unit' && pageType !== 'detail' && form.itemCategoryName === '电信号'"
              v-model="scope.row[item.value]"
              filterable
              :placeholder="pageType === 'detail' ? ' ' : `${item.text}`"
            >
              <el-option v-for="i of unitElectricalSignalVList" :key="i.id" :label="i.name" :value="i.value" />
            </el-select>
            <!-- 电信号电流单位 -->
            <el-select
              v-if="scope.row.checkItem === '2' && item.value === 'unit' && pageType !== 'detail' && form.itemCategoryName === '电信号'"
              v-model="scope.row[item.value]"
              filterable
              :placeholder="pageType === 'detail' ? ' ' : `${item.text}`"
            >
              <el-option v-for="i of unitElectricalSignalAList" :key="i.id" :label="i.name" :value="i.value" />
            </el-select>
            <!-- 压力值单位 -->
            <el-select
              v-if="item.value === 'unit' && pageType !== 'detail' && form.itemCategoryName === '压力值'"
              v-model="scope.row[item.value]"
              filterable
              :placeholder="pageType === 'detail' ? ' ' : `${item.text}`"
            >
              <el-option v-for="i of pressureUnitList" :key="i.id" :label="i.name" :value="i.value" />
            </el-select>
            <!-- 电信号核查点  -->
            <el-select
              v-if="item.value === 'checkPoint' && pageType !== 'detail' && form.itemCategoryName === '电信号'"
              v-model="scope.row[item.value]"
              filterable
              :placeholder="pageType === 'detail' ? ' ' : `${item.text}`"
              @change="checkPointChange(scope.row)"
            >
              <el-option v-for="i of checkPointElectricalSignalListList" :key="i.id" :label="i.name" :value="i.value" />
            </el-select>
            <!-- 压力值核查点  -->
            <el-select
              v-if="item.value === 'checkPoint' && pageType !== 'detail' && form.itemCategoryName === '压力值'"
              v-model="scope.row[item.value]"
              filterable
              :placeholder="pageType === 'detail' ? ' ' : `${item.text}`"
            >
              <el-option v-for="i of checkPointPressureList" :key="i.id" :label="i.name" :value="i.value" />
            </el-select>
            <!-- 循环次数 -->
            <el-input-number
              v-if="item.value === 'cycleNumber' && pageType !== 'detail'"
              v-model="scope.row[item.value]"
              :placeholder="`${item.text}`"
              class="input"
              :step="1"
              :precision="0"
            />
            <!-- 核查标准值 -->
            <precision-input-number
              v-if="item.value === 'standardIndication' && pageType !== 'detail'"
              v-model="scope.row[item.value]"
              :placeholder="`${item.text}`"
              class="input"
            />
            <!-- 电信号最大允许误差绝对值 -->
            <el-select
              v-if="item.value === 'maximumErrorAbsolute' && pageType !== 'detail' && form.itemCategoryName === '电信号'"
              v-model="scope.row[item.value]"
              filterable
              :placeholder="pageType === 'detail' ? ' ' : `${item.text}`"
            >
              <el-option v-for="i of maximumErrorAbsoluteElectricalSignalList" :key="i.id" :label="i.name" :value="i.value" />
            </el-select>
            <!-- 压力值最大允许误差绝对值 -->
            <el-select
              v-if="item.value === 'maximumErrorAbsolute' && pageType !== 'detail' && form.itemCategoryName === '压力值'"
              v-model="scope.row[item.value]"
              filterable
              :placeholder="pageType === 'detail' ? ' ' : `${item.text}`"
            >
              <el-option v-for="i of maximumErrorAbsolutePressureList" :key="i.id" :label="i.name" :value="i.value" />
            </el-select>

            <!-- 分辨力  -->
            <div v-if="item.value === 'resolution' && pageType !== 'detail'" style="display: flex;">
              <icon-button v-if="pageType !== 'detail'" style="margin-right: 10px;" size="20" icon="icon-reduce-circle" title="扩大10倍" type="primary" @click="clickSub(scope.row)" />
              <el-input
                v-if="pageType !== 'detail' " v-model="scope.row[item.value]" :autofocus="true" :placeholder="`${item.text}`" class="input"
              />
              <icon-button v-if="pageType !== 'detail'" style="margin-left: 10px;" size="20" icon="icon-add-circle" title="缩小10倍" type="primary" @click="clickAdd(scope.row)" />
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 自定义菜单 -->
      <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>
    </detail-block>
    <!-- 核查项备注 -->
    <el-form
      :model="form"
      label-width="120"
      label-position="right"
      style="margin-top: 20px;"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="核查项备注:" prop="remark">
            <el-input
              v-model="form.remark"
              class="full-width-input"
              autosize
              type="textarea"
              :disabled="pageType === 'detail'"
              :placeholder="pageType === 'detail' ? ' ' : '请输入核查项备注'"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </app-container>
</template>

<style lang="scss" scoped>
.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>