<template>
  <a-layout :style="showStyle" id="device-ctrl-content" style="height: 100%">
    <a-layout-content>
      <a-layout style="height: 100%">
        <a-layout-sider
          style="
            padding: 5px;
            padding-left: 0px;
            padding-top: 0px;
            width: 200px;
            background-color: white;
          "
        >
          <mainList
            ref="refTable"
            :cloumn="mainColumns"
            :filter="mainFilter"
            :data="mainData"
            :fullscreen="fullscreen"
            v-model:selectRowData="selectRowData"
            @row-dblclick="handleOk"
          />
        </a-layout-sider>
        <a-layout-content
          style="
            padding: 5px;
            padding-left: 0px;
            padding-right: 0px;
            padding-top: 0px;
            background-color: white;
          "
        >
          <DetailList :cloumn="DeviceModelCols" :data="detailData" />
        </a-layout-content>
      </a-layout>
    </a-layout-content>
    <a-layout-footer style="text-align: right; background-color: white">
      <a-button @click="handleOk">
        <template #icon> <check-outlined /> </template
        >{{ $t("LongtecProCessDraw.confirm") }}
      </a-button>
      <a-button @click="handleCancel" style="margin-left: 10px">
        <template #icon>
          <close-outlined />
        </template>
        {{ $t("LongtecProCessDraw.cancel") }}
      </a-button>
    </a-layout-footer>
  </a-layout>
</template>

<script setup lang="ts">
import mainList from "./main/list.vue";
import DetailList from "./detail/list.vue";
import Api from "../api/api";
import { ref, watch, onBeforeMount, computed, PropType } from "vue";
import { Modal } from "ant-design-vue";
import { ColStruct } from "../../../../hooks/type";

const emits = defineEmits(["ok", "cancel"]);

const props = defineProps({
  mainColumns: {
    type: Array as PropType<ColStruct[]>,
    default() {
      return [
        {
          Field: "DeviceId",
          NameZH: "ID",
          NameEN: "ID",
          Width: 60,
          Fix: false,
          Visible: false,
          Style: "TextBox",
          isNumber: true,
        },
        {
          Field: "ModelName",
          NameZH: "模板名称",
          NameEN: "ModelName",
          Width: 110,
          Fix: false,
          Visible: true,
          Style: "TextBox",
          Required: true,
          isNumber: false,
        },
      ];
    },
  },
  mainFilter: {
    type: Array,
    default() {
      return ["ModelName"];
    },
  },
  prodLines: {
    type: Array,
    default() {
      return [];
    },
  },
  Devices: {
    type: Array,
    default() {
      return [];
    },
  },
  DeviceModelCols: {
    type: Array as PropType<ColStruct[]>,
    default() {
      return [];
    },
  },
  fullscreen: {
    type: Boolean,
    default: false,
  },
});

let selectRowData = ref(null);
let detailData = ref([]); //明细表显示数据
let mainData = ref([]); //主表显示数据

const showStyle = computed(() => {
  if (!props.fullscreen) {
    return {
      height: "100%",
      "min-height": "600px",
      "max-height": "600px",
      "background-color": "white",
    };
  } else {
    return {
      height: "100%",
      "min-height": "600px",
      "background-color": "white",
    };
  }
});

watch(
  () => selectRowData.value,
  (_Val) => {
    if (!_Val || typeof _Val == "undefined") {
      detailData.value = [];
      return;
    }
    //@ts-ignore
    detailData.value = _Val.Items;
  },
);

const refM = function () {
  //刷新
  getShowData();
};
const handleOk = function () {
  if (selectRowData.value) {
    emits("ok", selectRowData.value, "model");
  } else {
    Modal.warning({
      title: "警告",
      content: "请选择",
    });
  }
};
const handleCancel = function () {
  emits("cancel", 1);
};
const getShowData = function () {
  //从后台获取显示数据
  Api.LoadDeviceModelParma().then((data: any) => {
    mainData.value = data.Items;
    detailData.value = data.Items[0].Items;
  });
};

onBeforeMount(() => {
  getShowData();
});
</script>
