<template>
  <Modal v-bind="$attrs" title="新增大屏" width="800px" @ok="handleOk">
    <Form ref="formRef" :model="formData" :label-col="{ span: 4 }">
      <FormItem label="大屏名称" name="name">
        <Input v-model:value="formData.name" placeholder="请输入大屏名称" />
      </FormItem>
      <FormItem label="画布大小" name="sizeType">
        <RadioGroup button-style="solid" v-model:value="formData.sizeType">
          <RadioButton value="0">常用尺寸</RadioButton>
          <RadioButton value="1">自定义尺寸</RadioButton>
        </RadioGroup>
      </FormItem>
      <FormItem v-if="formData.sizeType === '0'" :colon="false">
        <template #label>
          <span></span>
        </template>
        <div class="common-size-wrapper">
          <div
            class="common-size-item"
            v-for="item in commonSize"
            :key="item.value"
            :class="{ 'common-size-item-active': activeSize === item.value }"
            @click="handleClickCommonSize(item.value)"
          >
            <p>{{ item.label }}</p>
            <p>{{ item.value }}</p>
          </div>
        </div>
      </FormItem>
      <FormItem v-if="formData.sizeType === '1'" label="宽" name="width">
        <InputNumber
          :min="1"
          :max="50000"
          :step="1"
          addonAfter="px"
          v-model:value="formData.width"
        />
      </FormItem>
      <FormItem v-if="formData.sizeType === '1'" label="高" name="height">
        <InputNumber
          :min="1"
          :max="50000"
          :step="1"
          addonAfter="px"
          v-model:value="formData.height"
        />
      </FormItem>
      <!-- <FormItem label="大屏描述" name="description">
        <Input />
      </FormItem> -->
    </Form>
  </Modal>
</template>

<script setup lang="ts">
import { ref, reactive, watch, defineEmits } from "vue";
import type { Ref } from "vue";
import {
  Modal,
  Form,
  FormItem,
  Input,
  RadioGroup,
  RadioButton,
  InputNumber,
  message,
  FormInstance,
} from "ant-design-vue";
import { useProjectStore } from "@/store/modules/project";

const activeSize: Ref<string> = ref("1280*720px");
const formRef: Ref<FormInstance | null> = ref(null);
// 表单数据
const formData = reactive({
  name: "新建大屏",
  sizeType: "0",
  width: 1280,
  height: 720,
  description: "",
});
const projectStore = useProjectStore();

const emit = defineEmits(["change", "update:open"]);

watch(
  () => formData.sizeType,
  () => {
    if (formData.sizeType === "0") {
      handleClickCommonSize(activeSize.value);
    }
  }
);

// 常用尺寸
const commonSize = [
  { label: "高清屏", value: "1280*720px" },
  { label: "超清屏", value: "1920*1080px" },
  { label: "2K屏", value: "2560*1440px" },
  { label: "超宽屏", value: "4864*1294px" },
];

const handleClickCommonSize = (size: string) => {
  activeSize.value = size;
  const [width, height] = size.split("*");
  formData.width = parseInt(width);
  formData.height = parseInt(height.replace("px", "")); // 去掉px
};

const handleOk = async () => {
  await formRef.value?.validate();

  projectStore.setProjectInfo(formData);
  
  window.open(`/#/designer`);
  emit("change");
  message.success("新增成功");
  emit("update:open", false);
};
</script>

<style lang="less" scoped>
.common-size {
  &-wrapper {
    display: flex;
  }
  &-item {
    width: 120px;
    height: 80px;
    border: 1px solid #f0f0f0;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    p {
      margin: 0;
    }
  }
  &-item-active {
    border-color: #1890ff;
    color: #1890ff;
  }
}
</style>
