<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
import { ElDialog,ElTabPane, ElTable ,ElTableColumn,ElInput,ElButton} from 'element-plus';
import { DbHst } from '#/components/db-hst'

const props = defineProps<{
  height?: number
}>()

const hstRef = ref<any>(null)
  // 弹窗相关
const dialogVisible = ref(false)
const activeTab = ref('tab1')
const currentCell = reactive({ row: 0, col: 0 })
// Tab 标签映射
const tabLabels: Record<string, string> = {
  'tab1': '调整工料机系数',
  'tab2': '动态合并定额',
  'tab3': '增减耗量',
  'tab4': '动态调整人材机消耗量'
}

// Tab1: 调整工料机系数
const coefficientData = ref([
  { category: '人工', coefficient: 2, selected: false },
  { category: '材料', coefficient: 1.5, selected: false },
  { category: '机具', coefficient: 1.5, selected: false },
  { category: '其他', coefficient: 2, selected: false }
])

// Tab2: 动态合并定额
const quotaMergeData = ref([
  { code: '', minValue: '', maxValue: '', denominatorValue: '', baseValue: '', rule: '' }
])

// Tab3: 增减耗量
const consumptionData = ref([
  { code: '', name: '', value: '' }
])

// Tab4: 动态调整人材机消耗量
const dynamicAdjustData = ref([
  { name: '', category: '', coefficient: '', minValue: '', maxValue: '', denominatorValue: '', baseValue: '', rule: '' }
])

const tabDialog = ( hot: any,
  TD: HTMLTableCellElement,
  row: number,
  col: number,
  prop: any,
  value: any,
  cellProperties: any)=>{
    TD.innerHTML = ''
    
    const container = document.createElement('div')
    container.style.display = 'flex'
    container.style.alignItems = 'center'
    container.style.justifyContent = 'space-between'
    container.style.padding = '0 5px'
    
    const textSpan = document.createElement('span')
    textSpan.textContent = value || ''
    
    const iconSpan = document.createElement('span')
    iconSpan.innerHTML = '▼'
    iconSpan.style.cursor = 'pointer'
    iconSpan.style.marginLeft = '5px'
    iconSpan.style.fontSize = '12px'
    iconSpan.style.color = '#909399'
    
    iconSpan.addEventListener('click', (e) => {
      e.stopPropagation()
      currentCell.row = row
      currentCell.col = col
      dialogVisible.value = true
    })
    
    container.appendChild(textSpan)
    container.appendChild(iconSpan)
    TD.appendChild(container)
    
    return TD;
}
const handleClose = () => {
  dialogVisible.value = false
}

const handleConfirm = () => {
  if (hstRef?.value.hotInstance) {
    const tabLabel = tabLabels[activeTab.value]
    hstRef?.value.hotInstance.setDataAtCell(currentCell.row, currentCell.col, tabLabel)
  }
  dialogVisible.value = false
}

const addRow = (tabName: string) => {
  switch(tabName) {
    case 'tab2':
      quotaMergeData.value.push({ code: '', minValue: '', maxValue: '', denominatorValue: '', baseValue: '', rule: '' })
      break
    case 'tab3':
      consumptionData.value.push({ code: '', name: '', value: '' })
      break
    case 'tab4':
      dynamicAdjustData.value.push({ name: '', category: '', coefficient: '', minValue: '', maxValue: '', denominatorValue: '', baseValue: '', rule: '' })
      break
  }
}

const columns = ref<any[]>([
  { type: 'text', data: 'name', title: '名称' },
  { type: 'text', data: 'quotaValue', title: '定额值' },
  { type: 'text', data: 'adjustContent', title: '调整内容' },
  { type: 'text', data: 'adjustType', title: '调整类型', renderer: tabDialog, width: 200},
  { type: 'text', data: 'adjustRule', title: '调整规则' }
])

const mockData = () => {
  const types = ['人工调整', '材料调整', '机械调整', '综合调整']
  const rules = ['系数调整', '价格调整', '数量调整', '比例调整']
  return Array.from({ length: 10 }, (_, index) => ({
    name: `调整项${index + 1}`,
    quotaValue: (Math.random() * 100 + 10).toFixed(2),
    adjustContent: `调整内容说明${index + 1}`,
    adjustType: '',
    adjustRule: rules[index % rules.length]
  }))
}

const settings = {
  data: mockData(),
  columns: columns.value,
  colWidths: 120,
  height: 270
}
watch(
  () => props.height,
  (newHeight) => {
    console.log('QuotaAdjustmentQuery newHeight', newHeight)
    if (newHeight && hstRef.value?.hotInstance) {
      hstRef.value.hotInstance.updateSettings({
        height: newHeight - 50 - 15// 减去 tabs 头部和 padding 的高度,滚动条
      })
      hstRef.value.hotInstance.render()
    }
  },
  { immediate: true }
)
onMounted(() => {
  console.log('QuotaAdjustmentQuery mounted')
})

defineExpose({ hstRef })
</script>

<template>
  <div class="w-full h-full">
    <DbHst ref="hstRef" :settings="settings" />

    <ElDialog
      v-model="dialogVisible"
      title="调数类型"
      width="50%"
      :before-close="handleClose"
    >
      <ElTabs v-model="activeTab">
        <!-- Tab1: 调整工料机系数 -->
        <ElTabPane label="调整工料机系数" name="tab1">
          <ElTable :data="coefficientData" border style="width: 50%">
            <ElTableColumn type="selection" width="55" />
            <ElTableColumn prop="category" label="类别" width="200" />
            <ElTableColumn prop="coefficient" label="系数">
              <template #default="scope">
                <ElInput v-model="scope.row.coefficient" type="number" />
              </template>
            </ElTableColumn>
          </ElTable>
        </ElTabPane>

        <!-- Tab2: 动态合并定额 -->
        <ElTabPane label="动态合并定额" name="tab2">
          <ElTable :data="quotaMergeData" border style="width: 100%">
            <ElTableColumn prop="code" label="编码" width="120">
              <template #default="scope">
                <ElInput v-model="scope.row.code" />
              </template>
            </ElTableColumn>
            <ElTableColumn prop="minValue" label="最小值" width="120">
              <template #default="scope">
                <ElInput v-model="scope.row.minValue" type="number" />
              </template>
            </ElTableColumn>
            <ElTableColumn prop="maxValue" label="最大值" width="120">
              <template #default="scope">
                <ElInput v-model="scope.row.maxValue" type="number" />
              </template>
            </ElTableColumn>
            <ElTableColumn prop="denominatorValue" label="分母值" width="120">
              <template #default="scope">
                <ElInput v-model="scope.row.denominatorValue" type="number" />
              </template>
            </ElTableColumn>
            <ElTableColumn prop="baseValue" label="基础值" width="120">
              <template #default="scope">
                <ElInput v-model="scope.row.baseValue" type="number" />
              </template>
            </ElTableColumn>
            <ElTableColumn prop="rule" label="取值规则">
              <template #default="scope">
                <ElInput v-model="scope.row.rule" />
              </template>
            </ElTableColumn>
          </ElTable>
          <ElButton @click="addRow('tab2')" style="margin-top: 10px">添加行</ElButton>
        </ElTabPane>

        <!-- Tab3: 增减耗量 -->
        <ElTabPane label="增减耗量" name="tab3">
          <ElTable :data="consumptionData" border style="width: 100%">
            <ElTableColumn prop="code" label="编码" width="200">
              <template #default="scope">
                <ElInput v-model="scope.row.code" />
              </template>
            </ElTableColumn>
            <ElTableColumn prop="name" label="名称" width="200">
              <template #default="scope">
                <ElInput v-model="scope.row.name" />
              </template>
            </ElTableColumn>
            <ElTableColumn prop="value" label="增减定额消耗量数值">
              <template #default="scope">
                <ElInput v-model="scope.row.value" type="number" />
              </template>
            </ElTableColumn>
          </ElTable>
          <ElButton @click="addRow('tab3')" style="margin-top: 10px">添加行</ElButton>
        </ElTabPane>

        <!-- Tab4: 动态调整人材机消耗量 -->
        <ElTabPane label="动态调整人材机消耗量" name="tab4">
          <ElTable :data="dynamicAdjustData" border style="width: 100%">
            <ElTableColumn prop="name" label="名称" width="120">
              <template #default="scope">
                <ElInput v-model="scope.row.name" />
              </template>
            </ElTableColumn>
            <ElTableColumn prop="category" label="类别" width="120">
              <template #default="scope">
                <el-select v-model="scope.row.category" placeholder="请选择">
                  <el-option label="人工" value="人工" />
                  <el-option label="材料" value="材料" />
                  <el-option label="机具" value="机具" />
                </el-select>
              </template>
            </ElTableColumn>
            <ElTableColumn prop="coefficient" label="系数设置" width="100">
              <template #default="scope">
                <ElInput v-model="scope.row.coefficient" type="number" />
              </template>
            </ElTableColumn>
            <ElTableColumn prop="minValue" label="最小值" width="100">
              <template #default="scope">
                <ElInput v-model="scope.row.minValue" type="number" />
              </template>
            </ElTableColumn>
            <ElTableColumn prop="maxValue" label="最大值" width="100">
              <template #default="scope">
                <ElInput v-model="scope.row.maxValue" type="number" />
              </template>
            </ElTableColumn>
            <ElTableColumn prop="denominatorValue" label="分母值" width="100">
              <template #default="scope">
                <ElInput v-model="scope.row.denominatorValue" type="number" />
              </template>
            </ElTableColumn>
            <ElTableColumn prop="baseValue" label="基础值" width="100">
              <template #default="scope">
                <ElInput v-model="scope.row.baseValue" type="number" />
              </template>
            </ElTableColumn>
            <ElTableColumn prop="rule" label="取值规则">
              <template #default="scope">
                <ElInput v-model="scope.row.rule" />
              </template>
            </ElTableColumn>
          </ElTable>
          <ElButton @click="addRow('tab4')" style="margin-top: 10px">添加行</ElButton>
        </ElTabPane>
      </ElTabs>

      <template #footer>
        <span class="dialog-footer">
          <ElButton @click="handleClose">取消</ElButton>
          <ElButton type="primary" @click="handleConfirm">确定</ElButton>
        </span>
      </template>
  </ElDialog>
  </div>
  
</template>

<style scoped>

</style>
