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

<template>
  <div class="app-container">
    <el-form ref="form" :model="queryParams" label-width="80px" inline>
      <el-form-item label="仪器" prop="yq">
        <YQSelectTable v-model:data="queryParams.yq" width="200px" clearable @get-data-value="getList" />
      </el-form-item>
      <el-form-item label="模板名称" prop="xmdh">
        <el-input placeholder="请输入模板名称" v-model="queryParams.mbmc" style="width: 200px;" clearable
          @keyup.enter="getList" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">查询</el-button>
      </el-form-item>
    </el-form>
    <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" @row-click="selectedRows = $event">
          <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" @get-data-value="getOldXminfoList()" />
              </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="addItem">新增</el-button>
              <el-button type="danger" @click="delItem">删除</el-button>
            </div>
            <div style="height: 400px">
              <CustomTable ref="tableRefRight" :data="rightTableData" :columns="rightColumns" :config="tableConfig"
                @row-click="xmrowHandle">
                <template #xmdh="{ row, $index }">
                  <SelectTable v-model:data="row.xmdh" :tableData="xmList" class="full-width-input" :keyValue="true"
                    @get-data-value="getXmInfo(row, $index)" />
                </template>
                <template #mrz="{ row }">
                  <el-input v-model="row.mrz" class="full-width-input" />
                </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, addXmInfo, deleteDetail, updateXmInfo, deleteXmInfo } from '@/api/liswork/xmmb';
import { formatInstr, getYqData } from '@/hooks'
import { queryOldxminfo } from '@/api/liswork/xtwh/xmReqItemVsApi'
import { ElMessage, ElMessageBox } from 'element-plus';


const queryParams = ref({
  yq: '',
  mbmc: '',
})
const disabled = ref(false)
const formData = ref({
  yq: '',
  mbmc: '',
  srbh: '',
  yblx: '',
  zdsr: '',
  qsybh: '',
  jsybh: '',
  oldMbmc: '',
})
const xmList = ref([])
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 selectedRows: any = ref(null)
const regdictList = ref<Array<{ value: string, label: string }>>([])
const rightTableData = ref<Array<{ xmdh: string, mrz: string }>>([])
const rightColumns = ref([
  { prop: 'xmdh', label: '检验项目', visible: true, align: 'center', slot: 'xmdh', showOverflowTooltip: false },
  { prop: 'mrz', label: '默认值', visible: true, align: 'center', slot: 'mrz', showOverflowTooltip: false },
])
const getOldXminfoList = async () => {
  const res = await queryOldxminfo({ yq: formData.value.yq })
  xmList.value = res.data.map((item: any) => {
    return {
      label: item.xmmc,
      value: item.xmdh,
    }
  })
}

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

const handleRowDblclick = (row: any) => {
  getDetailsList(row)
  row.yq = row.yq.trim()
  row.oldMbmc = row.mbmc
  formData.value = row
  getOldXminfoList()
  disabled.value = true
  title.value = '编辑模板'
  visible.value = true
}

const getDetailsList = (row: any) => {
  queryDetail({ yq: row.yq, mbmc: row.mbmc }).then((res: any) => {
    rightTableData.value = res.data
  })
}
const handleSave = () => {
  rightTableData.value = rightTableData.value.filter((item: any) => item.xmdh)
  const arr = rightTableData.value.map((item: any, index: number) => {
    return {
      ...item,
      mbmc: formData.value.mbmc,
      oldMbmc: formData.value.oldMbmc,
      yq: formData.value.yq,
      xh: item.xh ? item.xh : index + 1,
    }
  })
  if (disabled.value) {
    updateXmInfo({ labInputmdl: formData.value, labInputmdlDetailList: arr }).then(() => {
      ElMessage.success('修改成功')
      getList()
      visible.value = false
    })
  } else {
    addXmInfo({ labInputmdl: formData.value, labInputmdlDetailList: arr }).then(() => {
      ElMessage.success('新增成功')
      getList()
      visible.value = false
    })
  }
}
const xmInfo = ref<any>(null)
const xmrowHandle = (row: any) => {
  xmInfo.value = row
}

const getXmInfo = (row: any, currentIndex: any) => {
  const prevXmdhList = rightTableData.value
    .filter((_, index) => index < currentIndex)
    .map(row => row.xmdh)
    .filter(xmdh => !!xmdh);


  if (prevXmdhList.includes(row.xmdh)) {
    ElMessage.error(`当前项目编号【${row.xmdh}】与前面行重复，请重新选择！`);
    rightTableData.value[currentIndex].xmdh = '';
  }
}

const addItem = () => {
  rightTableData.value.push({ xmdh: '', mrz: '', })
}
const delItem = () => {
  if (!xmInfo.value) return ElMessage.warning('请选择要删除的行！')
  if (xmInfo.value.yq) {
    deleteDetail([xmInfo.value]).then((res: any) => {
      if (res.code == 0) {
        getDetailsList(formData.value)
      }
    })
  } else {
    rightTableData.value = rightTableData.value.filter(item => item.xmdh != xmInfo.value.xmdh)
  }
  xmInfo.value = null
}
const handleDel = () => {
  if (!selectedRows.value) return ElMessage.warning('请选择要删除的记录')
  ElMessageBox.confirm('确定要删除选中的数据吗？', '提示', {
    type: 'warning'
  }).then(() => {
    deleteXmInfo(selectedRows.value).then(() => {
      ElMessage.success('删除成功')
      getList()
      selectedRows.value = null
    })
  })
}
const getList = () => {
  queryMbList(queryParams.value).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% - 100px);

  .table-col {
    height: 100%;
  }

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

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