<template>
  <dlg
      :dlgTitle="state.dlgTitle"
      dlgWidth="1200px"
      dlgHeight="500px"
      @dlgConfirm="handleDlgConfirm"
      @dlgCancel="handleDlgCancel"
  >
    <template #dlg-content-slot>
      <custom-split-panel
          leftWidth="40%"
      >
        <template #left-content>
          <list
              v-if="state.ifShow"
              :table-params="props.tableParams"
              v-model:selectRow="state.selectRow"
              v-model:selectionRows="selection"
              @db-click="handleDbClick"
          >
          </list>
        </template>
        <template #right-content>
          <a-layout v-loading="state.detailLoading" style="height: 100%">
            <detail-list
                v-if="state.ifShow"
                :table-params="props.detailTableParams"
                v-model:selectRow="state.detailSelectRow"
                v-model:selectionRows="detailSelection"
                :table-data="detailTableData"
            >
            </detail-list>
          </a-layout>
        </template>
      </custom-split-panel>
    </template>
  </dlg>
</template>

<script lang="ts" setup>
import Dlg from "../common-component/lt-common-dlg/dlg.vue";
import List from "../common-component/lt-common-table/lt-table-remote.vue";
import DetailList from "../common-component/lt-common-table/lt-table-local.vue";
import {cloneDeep} from "lodash-es";
import {
  ref,
  reactive,
  onBeforeMount,
  watch,
} from "vue";
import {message} from "ant-design-vue";
import {useI18n} from "vue-i18n";
import CustomSplitPanel from "../common-component/custom-split-panel/custom-split-panel.vue";
import LIMSBaseInformationService from "../../api/LIMSBaseInformationService";

const emits = defineEmits(["dlgConfirm", "dlgCancel"]);
const {t, locale} = useI18n();

const props=defineProps({
  targetMatCode:{
    type:String,
    default:''
  },
  tableParams:{
    type:Object,
    default:()=>{
      return null
    }
  },
  detailTableParams:{
    type:Object,
    default:()=>{
      return null
    }
  },
})
const state = reactive({
  ifGetDetail: false,
  ifShow: false,
  mainFile: {
    "dlgHeight":"400px",
    "dlgWidth": "1200px",
  } as any,
  detailFile: {} as any,
  selectRow: null,
  detailSelectRow: null,
  dlgTitle: locale.value==='en'?'SelectQcBusinessCode':'选择检验码',
  detailLoading: false
});
const selection = ref([]);
const detailSelection = ref([]);
const detailTableData = ref([]);

const handleDlgConfirm = (ifDbClick: boolean) => {
  // if (state.ifGetDetail) {
  let selectResult = []
  if (ifDbClick === true && state.selectRow) {
    selectResult = [state.selectRow];
  } else {
    if (selection.value.length != 0) {
      selectResult = selection.value;
    } else if (state.selectRow) {
      selectResult = [state.selectRow];
    }
  }
  if (selectResult.length == 0) {
    return message.warning(t("Formula.Common.SelectDataWarning"));
  }
  emits("dlgConfirm", selectResult,detailTableData.value);
  // }
};
const handleDlgCancel = () => {
  emits("dlgCancel");
};
const handleDbClick = (row: any) => {
  state.selectRow = row;
  handleDlgConfirm(true);
};
const getDetailData = () => {
  state.ifGetDetail = false
  detailTableData.value = []
  if (state.selectRow) {
    state.detailLoading = true
    let Params = {
      Id: state.selectRow.TestProgramHeadld
    }
    LIMSBaseInformationService.LoadTestProgramDetailInfo(Params).then((res: any) => {
      detailTableData.value = res.Datas
      state.ifGetDetail = true
    }).finally(() => {
      state.detailLoading = false
    })
  }
}

watch(() => state.selectRow, (nVal) => {
  getDetailData()
})

onBeforeMount(async () => {
  state.ifShow = true
});
</script>

<style scoped></style>
