<script lang="ts" setup name="NormalTable">
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 { clickAdd, clickSub } from '@/views/business/measure/item/useCalculateResolution'

// ------------------定义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条件相同
})
const emit = defineEmits(['change', 'selectionChange', 'rowClick', 'rowDbClick', 'multiSelect', 'filterChange', 'changeSelectParams'])
// ------------------------------------------字典----------------------------------------------
const paramsList = ref<dictType[]>([]) // 参数
const unitUList = ref<dictType[]>([]) // U单位
const unitIList = ref<dictType[]>([]) // I单位
const unitRList = ref<dictType[]>([]) // R单位
const frequencyUnitList = ref<dictType[]>([]) // 频率
const checkTypeList = ref<dictType[]>([]) // 核查类型
const TFERList = ref<dictType[]>([]) // TFER
const thoroughfareList = ref<dictType[]>([]) // 通道

/**
 * 获取字典
 */
function getDict() {
  // 参数
  getDictByCode('bizFirstStandardParams').then((response) => {
    paramsList.value = response.data
  })
  // U单位
  getDictByCode('bizFirstStandardUnitU').then((response) => {
    unitUList.value = response.data
  })
  // I单位
  getDictByCode('bizFirstStandardUnitI').then((response) => {
    unitIList.value = response.data
  })
  // R单位
  getDictByCode('bizFirstStandardUnitR').then((response) => {
    unitRList.value = response.data
  })
  // 频率单位
  getDictByCode('bizFirstStandardFrequencyUnit').then((response) => {
    frequencyUnitList.value = response.data
  })
  // 核查类型
  getDictByCode('bizFirstStandardCheckType').then((response) => {
    checkTypeList.value = response.data
  })
  // TFER、DCCP、FLIT
  getDictByCode('bizFirstStandardTFER').then((response) => {
    TFERList.value = response.data
  })
  // 通道
  getDictByCode('bizFirstStandardThoroughfare').then((response) => {
    thoroughfareList.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() {
  emit('change')
}

// 多选选中结果
function selectionChange(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 handleSelectionChange = (val: any) => {
  emit('selectionChange', val)
}
// 清除多选选中
const clearMulti = () => {
  console.log('清理选中')
  table.value!.clearSelection()
  singleChecked.value = ''
}
// 核查项目选择变化
const changeSelectParams = (val: any, row: any) => {
  emit('changeSelectParams', val, row)
}

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">
        <!-- 参数(核查项目) -->
        <el-select
          v-if="props.pageType !== 'detail' && item.value === 'params'"
          v-model="scope.row[item.value]"
          placeholder="请选择"
          :disabled="props.pageType === 'detail'"
          filterable
          @change="(val) => changeSelectParams(val, scope.row)"
        >
          <el-option v-for="item in paramsList" :key="item.id" :label="item.name" :value="item.value" />
        </el-select>

        <!-- U单位 -->
        <el-select
          v-if="props.pageType !== 'detail' && item.value === 'unit' && (scope.row.params === 'DCV' || scope.row.params === 'ACV')"
          v-model="scope.row[item.value]"
          placeholder="请选择"
          :disabled="props.pageType === 'detail'"
          filterable
        >
          <el-option v-for="item in unitUList" :key="item.id" :label="item.name" :value="item.value" />
        </el-select>
        <!-- I单位 -->
        <el-select
          v-if="props.pageType !== 'detail' && item.value === 'unit' && (scope.row.params === 'DCI' || scope.row.params === 'ACI')"
          v-model="scope.row[item.value]"
          placeholder="请选择"
          :disabled="props.pageType === 'detail'"
          filterable
        >
          <el-option v-for="item in unitIList" :key="item.id" :label="item.name" :value="item.value" />
        </el-select>
        <!-- R单位 -->
        <el-select
          v-if="props.pageType !== 'detail' && item.value === 'unit' && scope.row.params === 'R'"
          v-model="scope.row[item.value]"
          placeholder="请选择"
          :disabled="props.pageType === 'detail'"
          filterable
        >
          <el-option v-for="item in unitRList" :key="item.id" :label="item.name" :value="item.value" />
        </el-select>
        <!-- 频率 -->
        <el-input v-if="props.pageType !== 'detail' && item.value === 'frequency' && (scope.row.params === 'ACV' || scope.row.params === 'ACI')" v-model="scope.row[item.value]" style="display: flex;" :autofocus="true" :placeholder="`${item.text}`" class="input" />
        <!-- 频率单位 -->
        <el-select
          v-if="props.pageType !== 'detail' && item.value === 'frequencyUnit' && (scope.row.params === 'ACV' || scope.row.params === 'ACI')"
          v-model="scope.row[item.value]"
          placeholder="单位"
          :disabled="props.pageType === 'detail'"
          filterable
          clearable
        >
          <el-option v-for="item in frequencyUnitList" :key="item.id" :label="item.name" :value="item.value" />
        </el-select>
        <!-- 核查点  -->
        <el-input-number
          v-if="props.pageType !== 'detail' && item.value === 'checkPoint'"
          v-model="scope.row[item.value]"
          :placeholder="pageType === 'detail' ? '' : `请输入${item.text}`"
          :disabled="pageType === 'detail'"
        />
        <!-- 循环次数 -->
        <el-input-number
          v-if="props.pageType !== 'detail' && item.value === 'cycleNumber'"
          v-model="scope.row[item.value]"
          :placeholder="pageType === 'detail' ? '' : `请输入${item.text}`"
          disabled
          :step="1"
          :precision="0"
          :min="1"
          :max="6"
        />
        <!-- 测量标准相对扩展不确定度Urel -->
        <el-input-number v-if="props.pageType !== 'detail' && item.value === 'urel'" v-model="scope.row[item.value]" placeholder="Urel" class="full-width-input" />
        <!-- 核查类型 -->
        <el-select v-if="props.pageType !== 'detail' && item.value === 'checkType'" v-model="scope.row[item.value]" clearable multiple placeholder="请选择">
          <el-option
            v-for="item in checkTypeList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
        <!-- 通道 -->
        <el-select v-if="props.pageType !== 'detail' && item.value === 'thoroughfare'" v-model="scope.row[item.value]" clearable multiple placeholder="请选择">
          <el-option
            v-for="item in thoroughfareList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
        <!-- TFER、DCCP、FLIT -->
        <el-select v-if="props.pageType !== 'detail' && (item.value === 'tfer' || item.value === 'dccp' || item.value === 'flit')" v-model="scope.row[item.value]" clearable placeholder="请选择">
          <el-option
            v-for="item in TFERList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>

        <!-- 分辨力  -->
        <div v-if="item.value === 'resolution'" 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]"
            :placeholder="pageType === 'detail' ? '' : '请输入分辨力'"
            :disabled="pageType === 'detail'"
            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)" />
          <span v-if="pageType === 'detail'">{{ scope.row[item.value] }}</span>
        </div>
      </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>