/**
* @file index.vue 质控结果手工录入
* @author: w
* @since: 2026-01-05
*/

<template>
  <div class="app-container">
    <div class="handle-box mb5">
      <el-button type="primary" plain icon="Check" @click="handleSave">保存</el-button>
    </div>
    <div class="handle-box mb5">
      <el-date-picker v-model="jyrq" type="date" value-format="YYYY-MM-DD" />
      <span class="tips ml10">颜色说明：</span> <span class="color-red">大于3SD</span> <span class="color-pink">大于2SD</span>
    </div>
    <el-tabs v-model="activeName" type="card" class="tabs_box">
      <el-tab-pane v-for="tab in tabList" :key="tab.key" :label="tab.label" :name="tab.key" />
    </el-tabs>

    <div class="table-box">
      <CustomVxeTable class="mytable-style" ref="tableRef" :table-data="tableData" :columns="columns"
        :scrollYConfig="{ enabled: true, rSize: 30, height: '100%', }" :cell-style="cellStyleHd">
        <template #xmdh="{ row }">
          {{ row.xmdh }} {{ row.xmmc }}
        </template>
        <template #cs1="{ row }">
          <el-input v-model="row.cs1" class="full-width-input" />
        </template>
        <template #cs2="{ row }">
          <el-input v-model="row.cs2" class="full-width-input" />
        </template>
        <template #cs3="{ row }">
          <el-input v-model="row.cs3" class="full-width-input" />
        </template>
        <template #cs4="{ row }">
          <el-input v-model="row.cs4" class="full-width-input" />
        </template>
        <template #cs5="{ row }">
          <el-input v-model="row.cs5" class="full-width-input" />
        </template>
        <template #cs6="{ row }">
          <el-input v-model="row.cs6" class="full-width-input" />
        </template>
        <template #cs7="{ row }">
          <el-input v-model="row.cs7" class="full-width-input" />
        </template>
      </CustomVxeTable>
    </div>
  </div>
</template>

<script setup lang="ts">
import { queryOldxminfo } from '@/api/liswork/xtwh/xmReqItemVsApi'
import dayjs from 'dayjs'
const yq = defineModel<string>()
const activeName = ref('1')
const jyrq = ref(dayjs().format('YYYY-MM-DD'))
const tabList = [
  { key: '1', label: '质控1' },
  { key: '2', label: '质控2' }
]

const tableData = ref([])
const columns = ref([
  { field: 'xmdh', title: '质控项目', resizable: true, slotName: 'xmdh', width: 200 },
  { field: 'cs1', title: '次数1', resizable: true, slotName: 'cs1' },
  { field: 'cs2', title: '次数2', resizable: true, slotName: 'cs2' },
  { field: 'cs3', title: '次数3', resizable: true, slotName: 'cs3' },
  { field: 'cs4', title: '次数4', resizable: true, slotName: 'cs4' },
  { field: 'cs5', title: '次数5', resizable: true, slotName: 'cs5' },
  { field: 'cs6', title: '次数6', resizable: true, slotName: 'cs6' },
  { field: 'cs7', title: '次数7', resizable: true, slotName: 'cs7' },
  { field: 'zkbz', title: '靶数', resizable: true, align: 'center' },
  { field: 'qcusepos', title: 'SD', resizable: true, align: 'center' },
])
const cellStyleHd = ({ row, column }: {
  row: any;
  column: any;
}) => {
  const styleRules: any = {
    columnMap: { cs1: 'cs1', cs2: 'cs2', cs3: 'cs3', cs4: 'cs4', cs5: 'cs5', cs6: 'cs6', cs7: 'cs7' },
    colorRules: [
      { min: 3, color: '#f00 !important' }, // 大于3：红色
      { min: 2, max: 3, color: '#ffc0c0 !important' } // 2~3：粉色
    ]
  }
  const targetField = styleRules.columnMap[column.title];

  if (!targetField || row.qcusepos === 0) return {};

  const deviation = Math.abs(row.zkbz - row[targetField]) / row.qcusepos;

  for (const rule of styleRules.colorRules) {
    if (deviation > rule.min && (!rule.max || deviation < rule.max)) {
      return { background: rule.color };
    }
  }

  return {};
}


const getXmList = () => {
  queryOldxminfo({ yq: yq.value, }).then((res: any) => {
    tableData.value = res.data
  })
}

const handleSave = () => { }

watch(yq, (val) => {
  if (val) {
    getXmList()
  }
}, { immediate: true })
</script>

<style scoped lang="scss">
.table-box {
  margin-top: 5px;
  height: calc(100% - 175px);
}

.tips {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-size: 16px;
  color: #409eff;
  font-weight: 600;
}

.color-red {
  background-color: #f00;
  color: #fff;
  padding: 2px;
}

.color-pink {
  background-color: #ffc0c0;
  color: #fff;
  padding: 2px;
}
</style>