<template>
  <a-layout :style="showStyle" id="device-ctrl-content">
    <a-layout-content
      style="
        flex: 1;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
      "
    >
      <a-layout
        :has-sider="true"
        style="flex: 1; min-height: 0; overflow: hidden"
      >
        <div
          class="ctl-device-model-sider"
          style="
            box-sizing: border-box;
            flex: 0 0 200px;
            width: 200px;
            max-width: 200px;
            min-width: 200px;
            padding: 5px;
            padding-left: 0px;
            padding-top: 0px;
            background-color: white;
            display: flex;
            flex-direction: column;
            align-self: stretch;
            min-height: 0;
            overflow: hidden;
          "
        >
          <div
            style="
              flex: 1;
              min-height: 0;
              width: 100%;
              display: flex;
              flex-direction: column;
              overflow: hidden;
            "
          >
            <mainList
              ref="refTable"
              :cloumn="mainColumns"
              :filter="mainFilter"
              :data="mainData"
              :fullscreen="fullscreen"
              v-model:selectRowData="selectRowData"
              @row-dblclick="handleOk"
              @del-all="handleDelAll"
              @del="handleDel"
            />
          </div>
        </div>
        <a-layout-content
          style="
            flex: 1;
            min-height: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            padding: 5px;
            padding-left: 0px;
            padding-right: 0px;
            padding-top: 0px;
            background-color: white;
          "
        >
          <div
            style="
              flex: 1;
              min-height: 0;
              width: 100%;
              display: flex;
              flex-direction: column;
              overflow: hidden;
            "
          >
            <DetailList :cloumn="DeviceModelCols" :data="detailData" />
          </div>
        </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,
  onMounted,
  createVNode,
} from "vue";
import { Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { ColStruct } from "../../../../hooks/type";
import { useI18n } from "vue-i18n";
const emits = defineEmits(["ok", "cancel"]);
const { t } = useI18n();
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(() => {
  const flexCol = {
    display: "flex",
    flexDirection: "column" as const,
    minHeight: 0,
    height: "100%",
    backgroundColor: "white",
  };
  if (!props.fullscreen) {
    return {
      ...flexCol,
      minHeight: "600px",
      maxHeight: "600px",
    };
  }
  return {
    ...flexCol,
    minHeight: "600px",
  };
});

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 handleDelAll = function () {
  Modal.confirm({
    title: "警告",
    icon: createVNode(ExclamationCircleOutlined),
    content: "确定要删除所有数据吗？",
    okText: t("LongtecProCessDraw.confirm"),
    cancelText: t("LongtecProCessDraw.cancel"),
    okType: "primary",
    okButtonProps: {
      type: "primary",
    },
    cancelButtonProps: {
      type: "default",
    },
    onOk: () => {
      const sendData = {
        Items: mainData.value,
      };
      return Api.DeleteDeviceModelParma(sendData).then(() => {
        getShowData();
      });
    },
  });
};

const handleDel = function (row: any) {
  Modal.confirm({
    title: "警告",
    icon: createVNode(ExclamationCircleOutlined),
    content: "确定要删除该模板吗？",
    okText: t("LongtecProCessDraw.confirm"),
    cancelText: t("LongtecProCessDraw.cancel"),
    okType: "primary",
    okButtonProps: {
      type: "primary",
    },
    cancelButtonProps: {
      type: "default",
    },
    onOk: () => {
      const sendData = {
        Items: [row],
      };
      return Api.DeleteDeviceModelParma(sendData).then(() => {
        getShowData();
      });
    },
  });
};
const getShowData = function () {
  //从后台获取显示数据
  Api.LoadDeviceModelParma().then((data: any) => {
    mainData.value = data.Items;
    detailData.value = data.Items[0].Items;
  });
};

onBeforeMount(() => {
  getShowData();
});

onMounted(() => {
  // const message = getLocaleMessage(locale.value);
  // debugger;
});
</script>
