/**
* @file index.vue
* @author: w
* @since: 2025-12-24
*/

<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <el-button type="primary" @click="handleAdd">新增</el-button>
        <el-button type="danger" @click="handleDel">删除</el-button>
      </el-col>
    </el-row>
    <el-row class="table-row" style="margin-top: 10px;">
      <el-col :span="24" class="table-col">
        <CustomTable ref="tableRef" v-model:data="tableData" :columns="columns" :config="tableConfig"
          @row-dblclick="handleRowDblclick">
          <template #yq="{ row }">
            {{ formatInstr(row.yq) }}
          </template>
          <template #yblx="{ row }">
            {{ formatYblx(row.yblx) }}
          </template>
          <template #zdsr="{ row }">
            <el-checkbox :model-value="row.zdsr == 'Y'" />
          </template>
        </CustomTable>
      </el-col>
      <el-dialog :title="title" v-model="visible" width="50vw" :close-on-click-modal="false" :draggable="true">
        <el-row :gutter="15">
          <el-col :span="10">
            <el-form ref="formRef" :model="formData" label-width="150px">
              <el-form-item label="仪器" prop="yq">
                <YQSelectTable v-model:data="formData.yq" :disabled="disabled" />
              </el-form-item>
              <el-form-item label="模板名称" prop="mbmc">
                <el-input v-model="formData.mbmc" />
              </el-form-item>
              <el-form-item label="输入编号" prop="srbh">
                <el-input v-model="formData.srbh" />
              </el-form-item>
              <el-form-item label="标本类型" prop="yblx">
                <SelectTable v-model:data="formData.yblx" :tableData="regdictList" />
              </el-form-item>
              <el-form-item label="" prop="zdsr">
                <el-checkbox v-model="formData.zdsr" label="自动输入" true-value="Y" false-value="N" />
              </el-form-item>
              <el-form-item label="自动输入起始标本号" prop="qsybh">
                <el-input v-model="formData.qsybh" />
              </el-form-item>
              <el-form-item label="自动输入结束标本号" prop="jsybh">
                <el-input v-model="formData.jsybh" />
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="14">
            <div class="mb10">
              <el-button type="primary" @click="handleSave">保存</el-button>
              <el-button type="primary" @click="handleAdd">新增</el-button>
              <el-button type="danger" @click="handleDel">删除</el-button>
            </div>
            <div style="height: 400px">
              <CustomTable ref="tableRefRight" :data="rightTableData" :columns="rightColumns" :config="tableConfig">
                <template #xmdh="{ row }">
                  {{ row.xmdh }} {{ row.xmmc }}
                </template>
              </CustomTable>
            </div>
          </el-col>
        </el-row>


      </el-dialog>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import YQSelectTable from '@/components/SelectTable/YQSelectTable/index.vue';
// @ts-ignore
import { listregdict } from "@/api/regional/dict/regdict.js";
import { queryMbList, queryDetail } from '@/api/liswork/xmmb';
import { formatInstr, getYqData } from '@/hooks'

const disabled = ref(false)
const formData = ref({
  yq: '',
  mbmc: '',
  srbh: '',
  yblx: '',
  zdsr: '',
  qsybh: '',
  jsybh: '',
})
const title = ref('')
const visible = ref(false)
const tableData = ref([])
const columns = ref([
  { prop: 'yq', label: '仪器', visible: true, align: 'center', slot: 'yq' },
  { prop: 'mbmc', label: '输入模板', visible: true, align: 'center', },
  { prop: 'srbh', label: '输入编号', visible: true, align: 'center', },
  { prop: 'yblx', label: '样本类型', visible: true, align: 'center', slot: 'yblx' },
  { prop: 'zdsr', label: '自动输入', visible: true, align: 'center', slot: 'zdsr' },
  { prop: 'qsybh', label: '起始号', visible: true, align: 'center', },
  { prop: 'jsybh', label: '结束号', visible: true, align: 'center', },
])

const tableConfig = ref({
  height: '100%', // 高度
  border: true, // 边框
  highlightCurrentRow: true, // 当前行高亮
})

const regdictList = ref<Array<{ value: string, label: string }>>([])
const rightTableData = ref([])
const rightColumns = ref([
  { prop: 'xmdh', label: '检验项目', visible: true, align: 'center', slot: 'xmdh' },
  { prop: 'mrz', label: '默认值', visible: true, align: 'center', },
])

const handleAdd = () => {
  formData.value = {
    yq: '',
    mbmc: '',
    srbh: '',
    yblx: '',
    zdsr: '',
    qsybh: '',
    jsybh: '',
  }
  disabled.value = false
  rightTableData.value = []
  title.value = '新增模板'
  visible.value = true
}

const handleRowDblclick = (row: any) => {
  queryDetail(row).then((res: any) => {
    rightTableData.value = res.data
  })
  row.yq = row.yq.trim()
  formData.value = row
  disabled.value = true
  title.value = '编辑模板'
  visible.value = true
}
const handleSave = () => { }
const handleDel = () => { }
const getList = () => {
  queryMbList().then((res: any) => {
    tableData.value = res.data
  })
}

getList()
onMounted(() => {
  getYqData()
  // 获取标本类型
  listregdict({ pageSize: 100, pageNum: 1, dictType: 'BT' }).then((res: any) => {
    regdictList.value = res.rows.map((item: any) => {
      return {
        label: item.dictName,
        value: item.dictCode
      }
    })
  })
})

const formatYblx = (v: string) => {
  return regdictList.value.find((item: any) => item.value == v)?.label || v
}
</script>

<style scoped lang="scss">
.table-row {
  height: calc(100% - 60px);

  .table-col {
    height: 100%;
  }

  .right-col {
    padding-top: 5px;
    border: 1px solid #ccc;
  }
}

.el-form-item {
  margin-bottom: 10px;
}
</style>