<template>
  <a-layout :style="showStyle" style="height: 600px">
    <a-layout-header
      style="height: 40px; background-color: white; padding: 5px"
    >
      <a-form layout="horizontal" :labelCol="{ span: 3 }" labelAlign="left">
        <a-form-item label="设备名称:">
          <a-input v-model:value="deviceName" size="small" allowClear>
          </a-input>
        </a-form-item>
      </a-form>
    </a-layout-header>
    <a-layout-content style="background-color: white">
      <a-layout style="height: 100%" id="device-content">
        <a-layout-sider
          style="
            padding: 5px;
            padding-left: 0px;
            padding-top: 0px;
            width: 260px;
            background-color: white;
            height: 100%;
          "
        >
          <mainList
            ref="refTable"
            :cloumn="DevCtlmainColumns"
            :filter="DevCtlmainFilter"
            :fullscreen="fullscreen"
            :data="DevMainCtrData"
            v-model:selectRowData="selectRowData"
            @row-dblclick="handleDbClick"
          />
        </a-layout-sider>
        <a-layout-content
          style="
            padding: 5px;
            padding-left: 0px;
            padding-right: 0px;
            padding-top: 0px;
            height: 100%;
            background-color: white;
          "
        >
          <DetailList
            :cloumn="DevCtldetailsColumns"
            :data="state.detailData"
            @row-dblclick="handleDbClick"
          />
        </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.return") }}
      </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 { watch, reactive, ref, computed, PropType } from "vue";
import { Modal } from "ant-design-vue";
import { useI18n } from "vue-i18n";
import { ColStruct } from "../../../../hooks/type";
const { t } = useI18n();

const state = reactive({
  ifLoading: false,
  detailData: [], //明细表显示数据
  title: t("LongtecProCessDraw.DeviceParama"),
});

const deviceName = ref(""); //用户输入的设备名称
const selectRowData = ref(null);

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

const props = defineProps({
  DevCtlmainColumns: {
    type: Array as PropType<ColStruct[]>,
    default() {
      return [
        {
          Field: "DeviceParamId",
          Name: "ID",
          Width: 60,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
        {
          Field: "Description",
          Name: "描述信息",
          Width: 180,
          Fix: false,
          Visible: true,
          Style: "TextBox",
        },
        {
          Field: "DeviceId",
          Name: "设备ID",
          Width: 80,
          Fix: false,
          Visible: true,
          Style: "ComBox",
          Option: [
            {
              Label: "{" + 201 + "} " + "==" + "D1211",
              Key: 2,
            },
            {
              Label: "{" + 202 + "} " + "==" + "WT1211",
              Key: 19,
            },
            {
              Label: "{" + 203 + "} " + "==" + "WT1212",
              Key: 1,
            },
            {
              Label: "{" + 204 + "} " + "==" + "WT1215",
              Key: 204,
            },
            {
              Label: "{" + 205 + "} " + "==" + "R1211",
              Key: 205,
            },
            {
              Label: "{" + 206 + "} " + "==" + "D1221",
              Key: 206,
            },
            {
              Label: "{" + 207 + "} " + "==" + "WT1221",
              Key: 207,
            },
            {
              Label: "{" + 208 + "} " + "==" + "WT1222",
              Key: 208,
            },
            {
              Label: "{" + 209 + "} " + "==" + "R1221",
              Key: 209,
            },
            {
              Label: "{" + 210 + "} " + "==" + "MX1211",
              Key: 210,
            },
          ],
        },
        {
          Field: "LineId",
          Name: "产线",
          Width: 80,
          Fix: false,
          Visible: false,
          Style: "ComBox",
          Option: [
            {
              Label: "{" + 1 + "} " + "==" + "线1#R1211",
              Key: 1,
            },
            {
              Label: "{" + 2 + "} " + "==" + "线2#R1221",
              Key: 2,
            },
            {
              Label: "{" + 3 + "} " + "==" + "线3#MX1211",
              Key: 3,
            },
            {
              Label: "{" + 4 + "} " + "==" + "线4#MX1212",
              Key: 4,
            },
            {
              Label: "{" + 5 + "} " + "==" + "线5#MX1221",
              Key: 5,
            },
            {
              Label: "{" + 6 + "} " + "==" + "线6#MX1222",
              Key: 6,
            },
            {
              Label: "{" + 7 + "} " + "==" + "线7#BT1231",
              Key: 7,
            },
            {
              Label: "{" + 8 + "} " + "==" + "线8#BT1232",
              Key: 8,
            },
            {
              Label: "{" + 9 + "} " + "==" + "线9#BT1233",
              Key: 9,
            },
            {
              Label: "{" + 10 + "} " + "==" + "线10#BT1241",
              Key: 10,
            },
            {
              Label: "{" + 11 + "} " + "==" + "线11#BT1242",
              Key: 11,
            },
          ],
        },
        {
          Field: "BindFuncs",
          Name: "工艺",
          Width: 80,
          Fix: false,
          Visible: false,
          Style: "Array",
          Option: [
            {
              Label: "{" + 410 + "} " + "==" + "启动控温（油）",
              Key: 410,
            },
            {
              Label: "{" + 412 + "} " + "==" + "启动控温（IN）",
              Key: 412,
            },
          ],
        },
        {
          Field: "ParamStyle",
          Name: "ParamStyle",
          Width: 80,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
      ];
    },
  },
  DevCtlmainFilter: {
    type: Array,
    default() {
      return [];
    },
  },
  DevCtldetailsColumns: {
    type: Array as PropType<ColStruct[]>,
    default() {
      return [
        {
          Field: "MapId",
          Name: "id",
          Width: 60,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
        {
          Field: "Description",
          Name: "描述信息",
          Width: 180,
          Fix: false,
          Visible: true,
          Style: "TextBox",
        },
        {
          Field: "VDeviceIndexs",
          Name: "序设备",
          Width: 80,
          Fix: false,
          Visible: false,
          Style: "Array",
        },
        {
          Field: "StartAddr",
          Name: "StartAddr",
          Width: 80,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
        {
          Field: "StartBit",
          Name: "StartBit",
          Width: 80,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
        {
          Field: "DataLength",
          Name: "DataLength",
          Width: 80,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
        {
          Field: "Steps",
          Name: "Steps",
          Width: 80,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
        {
          Field: "DataType",
          Name: "DataType",
          Width: 80,
          Fix: false,
          Visible: false,
          Style: "ComBox",
          Option: [
            {
              Label: "unknow",
              Key: 0,
            },
            {
              Label: "float",
              Key: 3,
            },
            {
              Label: "int",
              Key: 4,
            },
            {
              Label: "long int",
              Key: 5,
            },
            {
              Label: "bool",
              Key: 6,
            },
          ],
        },
        {
          Field: "DataFunc",
          Name: "操作类型",
          Width: 80,
          Fix: false,
          Visible: false,
          Style: "ComBox",
          Option: [
            {
              Label: "read and write",
              Key: 0,
            },
            {
              Label: "read only",
              Key: 1,
            },
            {
              Label: "write only",
              Key: 2,
            },
            {
              Label: "write on time",
              Key: 3,
            },
          ],
        },
        {
          Field: "SwapMode",
          Name: "SwapMode",
          Width: 80,
          Fix: false,
          Visible: false,
          Style: "ComBox",
          Option: [
            {
              Label: "default",
              Key: 0,
            },
            {
              Label: "high in fount",
              Key: 1,
            },
            {
              Label: "low in fount",
              Key: 2,
            },
          ],
        },
        {
          Field: "DataDot",
          Name: "DataDot",
          Width: 60,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
        {
          Field: "IsSendGroup",
          Name: "IsSendGroup",
          Width: 60,
          Fix: false,
          Visible: false,
          Style: "CheckBox",
        },
      ];
    },
  },
  DevMainCtrData: {
    type: Array,
    default() {
      return [];
    },
  },
  fullscreen: {
    type: Boolean,
    default: false,
  },
});

watch(
  () => selectRowData.value,
  (_val) => {
    if (!_val || typeof _val == "undefined") {
      state.detailData = [];
      return;
    }

    //@ts-ignore
    state.detailData = _val.Options;
  },
);

watch(deviceName, (_val) => {
  emits("deviceNameChange", _val);
});

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

const handleOk = function () {
  if (!selectRowData.value) {
    Modal.warning({
      title: "警告",
      content: "请选择",
    });
    return;
  }
  emits("ok", selectRowData.value, "parama");
};
const handleCancel = function () {
  emits("cancel", 1);
};
const handleDbClick = function () {
  handleOk();
};
</script>
