<script lang="ts" setup name="NonthTemplateTable">
import type { Ref } from 'vue'
import { ElTable } from 'element-plus'
import { defineExpose, ref } from 'vue'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { getDictByCode } from '@/api/system/dict'
import type { dictType } from '@/global'

// ------------------定义props、 emits-------------------
const props = defineProps({
  pageType: {
    type: String,
    default: 'detail',
  },
  // 数据
  data: {
    type: Array,
    default() {
      return []
    },
  },
  // 表格高度
  height: {
    type: Number,
    default() {
      return null
    },
  },
  // 数据列配置
  columns: {
    type: Array<TableColumn>,
    default() {
      return () => []
    },
  },
  // 表格大小
  size: {
    type: String,
    default: 'default',
  }, // 表格大小，默认，small,mini等，与el-table条件相同
  type: String, // 表格类型，表格title
})
const emits = defineEmits([
  'change',
  'selectionChange',
  'rowClick',
  'rowDbClick',
  'multiSelect',
  'filterChange',
  'changeItemType',
  'changeVerticalDeflectCoefficient',
  'changeInputNumber',
])
// ------------------------------------------字典----------------------------------------------
const standardTechnicalIndexSymbolList = ref<dictType[]>([]) // 技术指标规则
const standard13ThoroughfareList = ref<dictType[]>([]) // 通道
const standardTimeUnitList = ref<dictType[]>([]) // 时间单位
const standard13VerticalDeflectCoefficientList = ref<dictType[]>([]) // 垂直偏转系数(/div)
const standardVoltageList = ref<dictType[]>([]) // 垂直偏转系数(/div)单位\电压单位--公用
const standardResistanceList = ref<dictType[]>([]) // 电阻单位公用
const standard13TriggerTypeList = ref<dictType[]>([]) // 触发特性
const standard13NominalValueUnitList = ref<dictType[]>([]) // 标称值单位
const standardAmplitudeUnitList = ref<dictType[]>([]) // 幅度单位
const standard13ItemList = ref<dictType[]>([]) // 校准信号--项目
const standard13ScanTypeList = ref<dictType[]>([]) // 扫描方式
const standard13VerticalGearStepList = ref<dictType[]>([]) // 垂直档位步进
const standardFrequencyUnitList = ref<dictType[]>([]) // 频率单位-公用
const characteristicAmplitudeUnitList = ref<dictType[]>([]) // 触发特性-公用
const standard13SignalTypeList = ref<dictType[]>([]) // 信号类型
/**
 * 获取字典
 */
function getDict() {
  // 技术指标规则
  getDictByCode('standardTechnicalIndexSymbol').then((response) => {
    standardTechnicalIndexSymbolList.value = response.data
  })
  // 时间单位
  getDictByCode('standardTimeUnit').then((response) => {
    standardTimeUnitList.value = response.data
  })
  // 通道
  getDictByCode('standard13Thoroughfare').then((response) => {
    standard13ThoroughfareList.value = response.data
  })
  // 垂直偏转系数(/div)
  getDictByCode('standard13VerticalDeflectCoefficient').then((response) => {
    standard13VerticalDeflectCoefficientList.value = response.data
  })
  // 电压单位--公用/垂直偏转系数(/div)单位
  getDictByCode('standardVoltage').then((response) => {
    standardVoltageList.value = response.data
  })
  // 电阻单位公用
  getDictByCode('standardResistance').then((response) => {
    standardResistanceList.value = response.data
  })
  // 触发特性
  getDictByCode('standard13TriggerType').then((response) => {
    standard13TriggerTypeList.value = response.data
  })
  // 标称值单位
  getDictByCode('standard13NominalValueUnit').then((response) => {
    standard13NominalValueUnitList.value = response.data
  })
  // 幅度单位
  getDictByCode('standardAmplitudeUnit').then((response) => {
    standardAmplitudeUnitList.value = response.data
  })
  // 幅度单位
  getDictByCode('standardAmplitudeUnit').then((response) => {
    standardAmplitudeUnitList.value = response.data
  })
  // 校准信号--项目
  getDictByCode('standard13Item').then((response) => {
    standard13ItemList.value = response.data
  })
  // 扫描方式
  getDictByCode('standard13ScanType').then((response) => {
    standard13ScanTypeList.value = response.data
  })
  // 垂直档位步进
  getDictByCode('standard13VerticalGearStep').then((response) => {
    standard13VerticalGearStepList.value = response.data
  })
  // 频率单位公用
  getDictByCode('standardFrequencyUnit').then((response) => {
    standardFrequencyUnitList.value = response.data
  })
  // 触发特性幅度单位
  getDictByCode('characteristicAmplitudeUnit').then((response) => {
    characteristicAmplitudeUnitList.value = response.data
  })
  // 信号类型
  getDictByCode('standard13SignalType').then((response) => {
    standard13SignalTypeList.value = response.data
  })
}

getDict()
// -------定义数据--------------
interface columnsCheckInfo {
  text: string
  show: boolean
}
const columnsChecked: Ref<columnsCheckInfo[]> = ref([])
const table = ref<InstanceType<typeof ElTable>>()
const singleChecked = ref('') // 单选选中id
// 初始化列显示状态
function initColumnsState() {
  columnsChecked.value = []
  for (const column of props.columns) {
    columnsChecked.value.push({ text: column.text, show: !!column.show })
  }
}

// 最终展示列
const columnsFiltered: Ref<TableColumn[]> = ref([])
// 切换列
function changeColumns() {
  columnsFiltered.value = []
  for (const i in props.columns) {
    if (columnsChecked.value[i].show === true) {
      columnsFiltered.value.push(props.columns[i])
    }
  }
}
// 刷新
function refresh() {
  emits('change')
}

// 点击行
function rowClick(row: object, column?: any, event?: any) {
  emits('rowClick', row)
}
// 双击行
function rowDbClick(row: object, column?: any, event?: any) {
  emits('rowDbClick', row)
}
// 监听columns
watch(props.columns, (val) => {
  initColumnsState()
  changeColumns()
})
// 多选
const handleSelectionChange = (val: any) => {
  emits('selectionChange', val)
}
// 清除多选选中
const clearMulti = () => {
  console.log('清理选中')
  table.value!.clearSelection()
  singleChecked.value = ''
}

// 项目选择变化
const changeItemType = (value: string, index: number) => {
  emits('changeItemType', value, index)
}
// 垂直偏转系数变化
const changeVerticalDeflectCoefficient = (value: string) => {
  emits('changeVerticalDeflectCoefficient', value)
}

const changeInputNumber = (value: number) => {
  emits('changeInputNumber', value)
}

defineExpose({
  clearMulti, initColumnsState,
})
onBeforeMount(() => {
  initColumnsState()
  changeColumns()
})
</script>

<template>
  <el-table
    id="print"
    ref="table"
    :data="data"
    :height="height"
    border
    stripe
    :size="size"
    style="width: 100%;"
    @selection-change="handleSelectionChange"
    @row-click="rowClick"
    @row-dblclick="rowDbClick"
  >
    <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">
        <!-- 技术指标  -->
        <div v-if="item.value === 'technicalIndex'" style="display: flex;align-items: center;">
          <el-select
            v-model="scope.row.technicalIndexSymbol"
            :disabled="props.pageType === 'detail'"
            style="margin-right: 10px;width: 100px;"
          >
            <el-option v-for="item of standardTechnicalIndexSymbolList" :key="item.value" :label="item.name" :value="item.name" />
          </el-select>
          <el-input-number
            v-model="scope.row[item.value]"
            :placeholder="`${item.text}`"
            class="full-width-input"
            controls-position="right"
            :disabled="props.pageType === 'detail'"
          />
          <div
            v-if="props.type === '时基' || props.type === '直流增益' || props.type === '频带宽度(数字示波器)'
              || props.type === '输入电阻(数字示波器)' || props.type === '扫描时间系数及扩展' || props.type === '垂直幅度'
              || props.type === '输入电阻(模拟示波器)' || props.type === '校准信号(模拟示波器)'"
            style="margin-left: 10px; white-space: nowrap;"
          >
            {{ scope.row.technicalIndexUnit }}
          </div>

          <!-- 电压单位  -->
          <el-select
            v-if="props.type === '直流偏置'"
            v-model="scope.row.technicalIndexUnit"
            :disabled="props.pageType === 'detail'"
            style="margin-left: 10px;width: 130px;"
          >
            <el-option v-for="item of standardVoltageList" :key="item.value" :label="item.name" :value="item.name" />
          </el-select>

          <!-- 触发特性幅度单位  -->
          <el-select
            v-if="props.type === '触发特性'"
            v-model="scope.row.technicalIndexUnit"
            :disabled="props.pageType === 'detail'"
            style="margin-left: 10px;width: 130px;"
          >
            <el-option v-for="item of characteristicAmplitudeUnitList" :key="item.value" :label="item.name" :value="item.name" />
          </el-select>

          <!-- 时间 单位  -->
          <el-select
            v-if="props.type === '上升时间(数字示波器)' || props.type === '上升时间(模拟示波器)'"
            v-model="scope.row.technicalIndexUnit"
            :disabled="props.pageType === 'detail'"
            style="margin-left: 10px;width: 130px;"
          >
            <el-option v-for="item of standardTimeUnitList" :key="item.value" :label="item.name" :value="item.name" />
          </el-select>

          <!-- 频率 单位  -->
          <el-select
            v-if="props.type === '频带宽度(模拟示波器)'"
            v-model="scope.row.technicalIndexUnit"
            :disabled="props.pageType === 'detail'"
            style="margin-left: 10px;width: 140px;"
          >
            <el-option v-for="item of standardFrequencyUnitList" :key="item.value" :label="item.name" :value="item.name" />
          </el-select>
        </div>

        <!-- number -->
        <el-input-number
          v-if="item.value === 'cycleSignal' || item.value === 'standardValue' || item.value === 'referencePointFrequency'
            || item.value === 'bandWidth' || item.value === 'horizontalDeflectCoefficient'
            || item.value === 'referencePointFrequency' || item.value === 'bandWidth'
            || item.value === 'nominalValue' || item.value === 'signalFrequency' || item.value === 'amplitude'
            || (item.value === 'verticalDeflectionGear' && scope.row.itemType === '幅度') || item.value === 'horizontalScaleGear'
            || item.value === 'verticalScaleGear' || item.value === 'frequency' || item.value === 'referenceFrequency'
            || item.value === 'stepFrequency' || item.value === 'frequencyUpper' || item.value === 'referenceAmplitude'
            || item.value === 'nominalAmplitudeValue' || item.value === 'nominalFrequencyValue'"
          v-model="scope.row[item.value]"
          :placeholder="`${item.text}`"
          class="full-width-input"
          :disabled="props.pageType === 'detail'"
          @change="changeInputNumber"
        />

        <!-- 时间单位--公用 / 周期时标信号单位、水平偏转系数单位 -->
        <el-select
          v-if="item.value === 'cycleSignalUnit' || item.value === 'horizontalDeflectCoefficientUnit' || item.value === 'horizontalScaleGearUnit'
            || (item.value === 'nominalValueUnit' && props.type === '扫描时间系数及扩展')"
          v-model="scope.row[item.value]"
          :placeholder="`${item.text}`"
          :disabled="props.pageType === 'detail'"
          class="full-width-input"
        >
          <el-option v-for="item of standardTimeUnitList" :key="item.value" :label="item.name" :value="item.name" />
        </el-select>

        <!-- 通道 -->
        <el-select
          v-if="item.value === 'thoroughfare'"
          v-model="scope.row[item.value]"
          :placeholder="`${item.text}`"
          :disabled="props.pageType === 'detail'"
          class="full-width-input"
        >
          <el-option v-for="item of standard13ThoroughfareList" :key="item.value" :label="item.name" :value="item.name" />
        </el-select>

        <!-- 阻抗 -->
        <select-by-dict
          v-if="item.value === 'impedance'"
          v-model:model-value="scope.row[item.value]"
          placeholder="阻抗"
          dict-code="standard13Impedance"
          :disabled="props.pageType === 'detail'"
        />

        <!-- 垂直偏转系数(/div) -->
        <select-by-dict
          v-if="item.value === 'verticalDeflectCoefficient'"
          v-model:model-value="scope.row[item.value]"
          placeholder="垂直偏转系数(/div)"
          dict-code="standard13VerticalDeflectCoefficient"
          :disabled="props.pageType === 'detail'"
          @changeValue="changeVerticalDeflectCoefficient"
        />

        <!-- 电压公用单位--- 垂直偏转系数(/div)单位、标准值单位 -->
        <el-select
          v-if="item.value === 'verticalDeflectCoefficientUnit' || item.value === 'standardValueUnit'
            || item.value === 'verticalScaleGearUnit' || (item.value === 'nominalValueUnit' && props.type === '垂直幅度')
            || item.value === 'referenceAmplitudeUnit' || item.value === 'nominalAmplitudeValueUnit'"
          v-model="scope.row[item.value]"
          :placeholder="`${item.text}`"
          :disabled="props.pageType === 'detail'"
          class="full-width-input"
        >
          <el-option v-for="item of standardVoltageList" :key="item.value" :label="item.name" :value="item.name" />
        </el-select>

        <!-- 电阻单位公用 -->
        <el-select
          v-if="item.value === 'impedanceUnit'"
          v-model="scope.row[item.value]"
          :placeholder="`${item.text}`"
          :disabled="props.pageType === 'detail'"
          class="full-width-input"
        >
          <el-option v-for="item of standardResistanceList" :key="item.value" :label="item.name" :value="item.name" />
        </el-select>

        <!-- 触发特性 -->
        <el-select
          v-if="item.value === 'triggerType'"
          v-model="scope.row[item.value]"
          :placeholder="`${item.text}`"
          :disabled="props.pageType === 'detail'"
          class="full-width-input"
        >
          <el-option v-for="item of standard13TriggerTypeList" :key="item.value" :label="item.name" :value="item.name" />
        </el-select>

        <!-- 标称值单位 -->
        <el-select
          v-if="item.value === 'nominalValueUnit' && props.type !== '扫描时间系数及扩展' && props.type !== '垂直幅度'"
          v-model="scope.row[item.value]"
          :placeholder="`${item.text}`"
          :disabled="props.pageType === 'detail'"
          class="full-width-input"
        >
          <el-option v-for="item of standard13NominalValueUnitList" :key="item.value" :label="item.name" :value="item.name" />
        </el-select>

        <!-- 幅度单位 -->
        <el-select
          v-if="item.value === 'amplitudeUnit'"
          v-model="scope.row[item.value]"
          :placeholder="`${item.text}`"
          :disabled="props.pageType === 'detail'"
          class="full-width-input"
        >
          <el-option v-for="item of standardAmplitudeUnitList" :key="item.value" :label="item.name" :value="item.name" />
        </el-select>

        <!-- 校准信号--项目 -->
        <el-select
          v-if="item.value === 'itemType'"
          v-model="scope.row[item.value]"
          :placeholder="`${item.text}`"
          :disabled="props.pageType === 'detail'"
          class="full-width-input"
          @change="(value) => changeItemType(value, scope.$index)"
        >
          <el-option v-for="item of standard13ItemList" :key="item.value" :label="item.name" :value="item.name" />
        </el-select>
        <!-- 校准信号--低电平测量时垂直偏转档位单位 -->
        <el-select
          v-if="item.value === 'verticalDeflectionGearUnit' && scope.row.itemType === '幅度'"
          v-model="scope.row[item.value]"
          :placeholder="`${item.text}`"
          :disabled="props.pageType === 'detail'"
          class="full-width-input"
        >
          <el-option v-for="item of standardVoltageList" :key="item.value" :label="item.name" :value="item.name" />
        </el-select>

        <!-- 校准信号--低电平测量时垂直偏转档位、单位 -->
        <el-input
          v-if="(item.value === 'verticalDeflectionGear' || item.value === 'verticalDeflectionGearUnit') && scope.row.itemType === '频率'"
          v-model="scope.row[item.value]"
          :placeholder="`${item.text}`"
          disabled
          class="full-width-input"
        />

        <!-- 扫描方式 -->
        <el-select
          v-if="item.value === 'scanType'"
          v-model="scope.row[item.value]"
          :placeholder="`${item.text}`"
          :disabled="props.pageType === 'detail'"
          class="full-width-input"
        >
          <el-option v-for="item of standard13ScanTypeList" :key="item.value" :label="item.name" :value="item.name" />
        </el-select>

        <!-- 垂直档位步进 -->
        <el-select
          v-if="item.value === 'verticalGearStep'"
          v-model="scope.row[item.value]"
          :placeholder="`${item.text}`"
          :disabled="props.pageType === 'detail'"
          class="full-width-input"
        >
          <el-option v-for="item of standard13VerticalGearStepList" :key="item.value" :label="item.name" :value="item.name" />
        </el-select>

        <!-- 频率单位公用 -->
        <el-select
          v-if="item.value === 'frequencyUnit' || item.value === 'referenceFrequencyUnit' || item.value === 'stepFrequencyUnit'
            || item.value === 'frequencyUpperUnit' || item.value === 'nominalFrequencyValueUnit' || item.value === 'referencePointFrequencyUnit'
            || (item.value === 'bandWidth' && props.type !== '频带宽度(数字示波器)') || item.value === 'bandWidthUnit' || item.vaue === 'signalFrequencyUnit'"
          v-model="scope.row[item.value]"
          :placeholder="`${item.text}`"
          :disabled="props.pageType === 'detail'"
          class="full-width-input"
        >
          <el-option v-for="item of standardFrequencyUnitList" :key="item.value" :label="item.name" :value="item.name" />
        </el-select>

        <!-- 信号类型 -->
        <el-select
          v-if="item.value === 'signalType'"
          v-model="scope.row[item.value]"
          :placeholder="`${item.text}`"
          :disabled="props.pageType === 'detail'"
          class="full-width-input"
        >
          <el-option v-for="item of standard13SignalTypeList" :key="item.value" :label="item.name" :value="item.name" />
        </el-select>
      </template>
    </el-table-column>
  </el-table>
</template>

<style lang="scss" scoped>
.single-table {
  width: 100%;

  :deep(.el-table th.el-table__cell:nth-child(1) .cell) {
    visibility: hidden;
  }
}
</style>

<style lang="scss">
.normal-table {
  .el-radio__label {
    display: none !important;
  }
}
</style>