<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'
import { isMerge, mergeTableRow, useMergeTableRow } from '@/commonMethods/useMergeTableRow'

// ------------------定义props、 emit-------------------
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,
  // 需要合并的列
  needMergeCells: {
    type: Array,
    default: () => ([]),
  },
})
const emit = defineEmits(['change', 'selectionChange', 'rowClick', 'rowDbClick', 'multiSelect', 'filterChange'])
// ------------------------------------------字典----------------------------------------------
// ------------------------------------------字典----------------------------------------------
const standardAmplitudeUnitList = ref<dictType[]>([]) // 幅度单位
const standardFrequencyUnitList = ref<dictType[]>([]) // 频率单位-公用
const standard17TypeValueList = ref<dictType[]>([]) // 类型
const standard17DisplayFormatList = ref<dictType[]>([]) // 显示格式
const standard17VSMRList = ref<dictType[]>([]) // vsmr
const standard17AmplitudeList = ref<dictType[]>([]) // 幅度
/**
 * 获取字典
 */
function getDict() {
  // 幅度单位
  getDictByCode('standardAmplitudeUnit').then((response) => {
    standardAmplitudeUnitList.value = response.data
  })
  // 频率单位公用
  getDictByCode('standardFrequencyUnit').then((response) => {
    standardFrequencyUnitList.value = response.data
  })
  // 类型
  getDictByCode('standard17TypeValue').then((response) => {
    standard17TypeValueList.value = response.data
  })
  // 显示格式
  getDictByCode('standard17DisplayFormat').then((response) => {
    standard17DisplayFormatList.value = response.data
  })
  // VSMR
  getDictByCode('standard17VSMR').then((response) => {
    standard17VSMRList.value = response.data
  })
  // 幅度
  getDictByCode('standard17Amplitude').then((response) => {
    standard17AmplitudeList.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 })
  }
}

watch(() => props.data, (newValue, old) => {
  console.log('监听到表格变化', newValue)

  if (!props.needMergeCells.length) {
    return
  }
  if (newValue) {
    if (Array.isArray(newValue) && newValue?.length) {
      const data = newValue[newValue.length - 1]

      if (isMerge(data)) {
        console.log('isMerge')
        return
      }
    }
    console.log('要合并了')
    useMergeTableRow(newValue, props.needMergeCells)
  }
}, {
  deep: true,
  immediate: true,
})

// 最终展示列
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() {
  emit('change')
}

// 多选选中结果
function handleSelectionChange(selection: []) {
  emit('selectionChange', selection)
}
// 点击行
function rowClick(row: object, column?: any, event?: any) {
  emit('rowClick', row)
}
// 双击行
function rowDbClick(row: object, column?: any, event?: any) {
  emit('rowDbClick', row)
}
// 监听columns
watch(props.columns, (val) => {
  initColumnsState()
  changeColumns()
})

// 清除多选选中
const clearMulti = () => {
  console.log('清理选中')
  table.value!.clearSelection()
  singleChecked.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%;"
    :span-method="mergeTableRow"
    @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"
      :show-overflow-tooltip="true"
    >
      <template #header>
        <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
      </template>
      <template #default="scope">
        <!-- number -->
        <el-input-number
          v-if="props.pageType !== 'detail' && (item.value === 'ifBandwidth' || item.value === 'frequency' || item.value === 'upperFrequency' || item.value === 'lowerFrequency'
            || item.value === 'outputPower' || item.value === 'inputPower' || item.value === 'fundamentalFrequency' || item.value === 'spectrumLevel' || item.value === 'intermediateFrequency'
            || item.value === 'span' || item.value === 'resolutionBandwidth' || item.value === 'fundamentalAmplitude' || item.value === 'sidebandFrequency' || item.value === 'rbwValue' || item.value === 'vbwValue'
            || item.value === 'randomNoiseCorrectValue' || (item.value === 'urel' && (props.type === '电压驻波比(矢量网络分析仪)' || props.type === '传输幅度' || props.type === '传输相移')) || item.value === 'standardValue')"
          v-model="scope.row[item.value]"
          :placeholder="`${item.text}`"
          class="full-width-input"
          :disabled="props.pageType === 'detail'"
        />

        <!-- urel -->
        <el-input
          v-if="props.pageType !== 'detail' && (item.value === 'urel' || (item.value === 'flatnessUrel' && props.type !== '增益、增益平坦度') || item.value === 'maxLossUrel' || item.value === 'minLossUrel') && (props.type !== '电压驻波比(矢量网络分析仪)' && props.type !== '传输幅度' && props.type !== '传输相移')"
          v-model="scope.row[item.value]"
          :placeholder="`${item.text}`"
          class="full-width-input"
          :disabled="props.pageType === 'detail'"
        />

        <!-- 增益、增益平坦度de增益平坦度U(k=2) -->
        <el-input
          v-if="props.pageType !== 'detail' && (item.value === 'flatnessUrel' && props.type === '增益、增益平坦度') && scope.$index === 0"
          v-model="scope.row[item.value]"
          :placeholder="`${item.text}`"
          class="full-width-input"
          :disabled="props.pageType === 'detail'"
        />

        <!-- 频率 单位--公用  -->
        <el-select
          v-if="props.pageType !== 'detail' && (item.value === 'ifBandwidthUnit' || item.value === 'frequencyUnit' || item.value === 'lowerFrequencyUnit' || item.value === 'upperFrequencyUnit'
            || item.value === 'fundamentalFrequencyUnit' || item.value === 'intermediateFrequencyUnit' || item.value === 'resolutionBandwidthUnit' || item.value === 'rbwValueUnit' || item.value === 'vbwValueUnit'
            || item.value === 'sidebandFrequencyUnit')"
          v-model="scope.row[item.value]"
          :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="props.pageType !== 'detail' && (item.value === 'outputPowerUnit' || item.value === 'inputPowerUnit' || item.value === 'spectrumLevelUnit' || item.value === 'fundamentalAmplitudeUnit' || item.value === 'randomNoiseCorrectValueUnit')"
          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="props.pageType !== 'detail' && item.value === 'typeValue'"
          v-model="scope.row[item.value]"
          :placeholder="`${item.text}`"
          :disabled="props.pageType === 'detail'"
          class="full-width-input"
        >
          <el-option v-for="item of standard17TypeValueList" :key="item.value" :label="item.name" :value="item.name" />
        </el-select>

        <!-- 显示格式 -->
        <el-select
          v-if="props.pageType !== 'detail' && item.value === 'displayFormat'"
          v-model="scope.row[item.value]"
          :placeholder="`${item.text}`"
          :disabled="props.pageType === 'detail'"
          class="full-width-input"
        >
          <el-option v-for="item of standard17DisplayFormatList" :key="item.value" :label="item.name" :value="item.name" />
        </el-select>

        <!-- 谐波次数 -->
        <select-by-dict
          v-if="item.value === 'harmonicNumber'"
          v-model:model-value="scope.row[item.value]"
          placeholder="谐波次数"
          dict-code="standard17HarmonicNumber"
          :disabled="props.pageType === 'detail'"
        />

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

        <!-- 技术指标  -->
        <div v-if="item.value === 'technicalIndex'" style="display: flex;align-items: center;justify-content: center;">
          <span style="margin-right: 10px;">±</span>
          <el-input-number
            v-if="props.pageType !== 'detail'"
            v-model="scope.row[item.value]"
            :placeholder="`${item.text}`"
            class="full-width-input"
            controls-position="right"
            :disabled="props.pageType === 'detail'"
          />
          <span v-if="props.pageType === 'detail'">{{ scope.row[item.value] }}</span>
        </div>

        <!-- 幅度 -->
        <el-select
          v-if="props.pageType !== 'detail' && item.value === 'amplitude'"
          v-model="scope.row[item.value]"
          :placeholder="`${item.text}`"
          :disabled="props.pageType === 'detail'"
          class="full-width-input"
        >
          <el-option v-for="item of standard17AmplitudeList" :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;
  }
}

.unit-class {
  margin-left: 0;
  white-space: nowrap;
}

.unit-class-margin-left {
  margin-left: 10px;
  white-space: nowrap;
}
</style>

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