<template>
  <a-layout :style="showStyle">
    <div style="height: 100%;min-height: 600px">
      <a-layout style="height: 100%;min-height: 600px">
        <a-layout-content style="height: 100%;min-height: 600px">
          <a-layout style="height: 100%;min-height: 600px">
            <a-layout-sider style="background: white; border: 1px solid #d1dbe5;border-right: 0px;"
              id="groupInfo" class="sideList">
              <list ref="refList" :receipModelFilter="receipModelFilter" :receipModelCols="receipModelCols"
                v-model:selectRowData="modelSelectedData" @row-dblclick="handleDbClick" />
            </a-layout-sider>
            <a-layout-content style="overflow-y: hidden;background: white;">
              <parent-show :ifCanBeEdite="false" :data="detailData" />
            </a-layout-content>
          </a-layout>
        </a-layout-content>
      </a-layout>
    </div>
  </a-layout>
</template>

<script setup lang="ts">
import list from "./main/list.vue";
import parentShow from "../../index.vue";
import Api from "./api/api";
import { watch, ref, computed } from "vue"

const props = defineProps({
  receipModelFilter: {
    type: Array,
    default() {
      return ["Description", "Creator"];
    },
  },
  receipModelCols: {
    type: Array,
    default() {
      return [
        {
          Field: "Name",
          Name: "原始文件名称",
          Width: 120,
          Fix: false,
          Visible: false,
          Style: "TextBox",
          ReadOnly: true,
          IsShowInForm: false,
        },
        {
          Field: "ID",
          Name: "ID",
          Width: 80,
          Fix: false,
          Visible: false,
          Style: "TextBox",
          ReadOnly: true,
          IsShowInForm: false,
        },
        {
          Field: "Description",
          Name: "描述信息",
          Width: 80,
          Fix: false,
          Visible: true,
          Style: "TextBox",
          ReadOnly: false,
          IsShowInForm: true,
        },
        {
          Field: "ReferenceID",
          Name: "绑定配方",
          Width: 80,
          Fix: false,
          Visible: false,
          Style: "TextBox",
          ReadOnly: false,
          IsShowInForm: true,
        },
        {
          Field: "Tag",
          Name: "标签",
          Width: 130,
          Fix: false,
          Visible: true,
          Style: "TextArea",
          ReadOnly: false,
          IsShowInForm: true,
        },
        {
          Field: "CreateTime",
          Name: "创建时间",
          Width: 140,
          Fix: false,
          Visible: false,
          Style: "TextBox",
          ReadOnly: true,
          IsShowInForm: false,
        },
        {
          Field: "Creator",
          Name: "创建人",
          Width: 60,
          Fix: false,
          Visible: true,
          Style: "TextBox",
          ReadOnly: true,
          IsShowInForm: false,
        },
      ];
    },
  },
  fullscreen: {
    type: Boolean, default: false
  },
})

const emits = defineEmits(["ok", "update:detailData"])

let modelCheckData = ref([])
let modelSelectedData = ref(null)
let ifLoading = ref(false)
let detailData = ref("") //图形显示数据
let title = ref("选择模板")
let isLoading = ref(false)
let ifCloseByCancel = ref(false)

watch(modelSelectedData, (val) => {
  if (typeof val != "undefined") {
    getXMLByID(val);
  }
})

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


const handleDbClick = function (row: any) {
  handleOk();
}

const handleOk = function () {
  if (modelSelectedData.value && detailData.value != "") {
    emits("ok", detailData.value);
  }
}

const getXMLByID = function (value: any) {
  //根据ID获取显示信息
  let id = value.ID;
  ifLoading.value = true;
  detailData.value = "";
  Api.LoadModeXml(id)
    .then((data: any) => {
      /* eslint-disable */
      //@ts-ignore
      detailData.value = data.Datas[0].FileBytes;
      emits("update:detailData", detailData.value)
      ifLoading.value = false;
    })
    .catch((data: any) => {
      ifLoading.value = false;
    });
}



</script>

<style>
#groupInfo {
  width: 300px !important;
  min-width: 200px;
  max-width: 500px !important;
  flex: 0 0 300px !important;
  background: white;
}
</style>