<template>
  <div>
    <a-modal v-model:open="visible" :title="title" :show-icon="false" :closable="false" style="width: 1000px">
      <a-config-provider>
        <div class="create-project-dialog" @click="createSelect.show = false">
          <div class="tabs">
            <a-tabs v-model:activeKey="activeKey" centered>
              <a-tab-pane key="preset" tab="预设" />
              <a-tab-pane key="recommend" tab="推荐" />
            </a-tabs>
          </div>
          <div>
            <div>
              <p class="title" style="margin: 10px 0">
                <span style="color: red">*</span>大屏名称：<a-input
                  style="width: 212px"
                  v-model:value="formData.name"
                  placeholder="输入大屏名称"
                />
                <span style="margin-left: 24px">大屏类型：</span>
                <JDictSelectTag placeholder="请选择大屏类型" v-model:value="formData.type" dictCode="visualType" />
              </p>
            </div>
            <div>
              <p class="title">预设</p>
              <div class="preset-list">
                <div
                  class="preset-list-1"
                  v-for="(item, index) in createOption"
                  :key="index"
                  @click="
                    createTabActive = item.key;
                    createSelect.value[0] = item.value[0];
                    createSelect.value[1] = item.value[1];
                  "
                  :class="{ active: createTabActive == item.key }"
                >
                  <img v-if="index == 0" :src="getImage('/vis-project/create-project-1.png')" alt="" />
                  <img v-if="index == 1" :src="getImage('/vis-project/create-project-2.png')" alt="" />
                  <div class="d1">
                    <p>{{ item.label }}</p>
                    <p>{{ item.value[0] }}x{{ item.value[1] }}</p>
                  </div>
                  <div
                    class="d2"
                    @click.stop="
                      createTabActive = item.key;
                      createSelect.show = true;
                    "
                  >
                    <Icon icon="ion:chevron-down" />
                  </div>
                  <div class="select-down" v-show="createSelect.show && createTabActive == item.key">
                    <ul>
                      <li
                        v-for="i in item.options"
                        :key="i.key"
                        :class="{ active: item.value[0] == i.value[0] && item.value[1] == i.value[1] }"
                        @click.stop="
                          createSelect.value[0] = i.value[0];
                          createSelect.value[1] = i.value[1];
                          createSelect.show = false;
                          item.value = i.value;
                          item.label = i.label;
                        "
                      >
                        <p>{{ i.label }}</p>
                        <p>{{ i.value[0] }}x{{ i.value[1] }}</p>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="preset-list-3" @click="createTabActive = 3" :class="{ active: createTabActive == 3 }">
                  <img :src="getImage('/vis-project/create-project-3.png')" alt="" />
                  <div class="d1" style="flex: 0 0 200px">
                    <p style="margin-bottom: 3px">自定义大小</p>
                    <div>
                      <p>
                        W
                        <a-input class="n-i" v-model:value="createSelect.value[0]" size="small" placeholder="" />
                        H
                        <a-input class="n-i" v-model:value="createSelect.value[1]" size="small" placeholder="" />
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <p class="title">推荐</p>
              <div class="recommend-list">
                <a-empty size="large" description="暂无推荐内容，后续推出" />
              </div>
            </div>
          </div>
        </div>
      </a-config-provider>
      <template #footer>
        <c-button @click="visible = false">取消</c-button>
        <c-button key="submit" type="primary" @click="handleOk">确认</c-button>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import './index.less';
  import { JDictSelectTag, Icon } from '@jdlinker/ui';
  import { getImage, onlyMessage } from '@jdlinker/utils';
  import { reactive, ref } from 'vue';
  import { createDataVisual, editVisProject } from '../service';
  import canvasConfig from './config';
  import { getToken } from '@jdlinker/func';

  const visible = ref<boolean>(false);
  const title = ref<string>('');
  const activeKey = ref<string>('preset');
  const emit = defineEmits(['success']);
  const createTabActive = ref(1);
  const formData = ref<any>({
    id: '',
    name: '',
    groupId: null,
    config: '',
    type: '1'
  });
  const createSelect = reactive({
    show: false,
    label: 'Web 1920',
    value: [1920, 1080]
  });
  const createOption = ref([
    {
      label: 'Web 1920',
      value: [1920, 1080],
      key: 1,
      options: [
        {
          label: 'Web 1366',
          value: [1366, 768],
          key: 1
        },
        {
          label: 'Web 1920',
          value: [1920, 1080],
          key: 2
        },
        {
          label: 'Web 2560',
          value: [2560, 1080],
          key: 3
        },
        {
          label: 'Web 3840',
          value: [3840, 1080],
          key: 4
        }
      ]
    },
    {
      label: 'iPhone 5/7/8 plus',
      value: [414, 736],
      key: 2,
      options: [
        {
          label: 'iPhone 5/7/8 plus',
          value: [414, 736],
          key: 1
        },
        {
          label: 'iPhone 6/7/8',
          value: [375, 667],
          key: 2
        },
        {
          label: 'iPhone Pro/X',
          value: [375, 812],
          key: 3
        }
      ]
    }
  ]);
  const handleOk = () => {
    if (!formData.value.name) {
      onlyMessage('请输入大屏名称', 'error');
      return;
    }
    canvasConfig.position.width = createSelect.value[0];
    canvasConfig.position.height = createSelect.value[1];
    canvasConfig.projectName = formData.value.name;
    if (!formData.value.id) {
      addProject(canvasConfig);
    } else {
      editProject(canvasConfig);
    }
  };
  const editProject = (canvasConfig) => {
    const tempConfig: any = JSON.parse(formData.value.config);
    tempConfig.components.canvas.value = canvasConfig;
    formData.value.config = JSON.stringify(tempConfig);
    editVisProject(formData.value).then((res) => {
      if (res) {
        emit('success');
        visible.value = false;
      }
    });
  };
  const addProject = (canvasConfig) => {
    formData.value.config = JSON.stringify({
      components: {
        canvas: {
          id: 'canvas',
          main: false,
          name: 'canvas',
          message: 'canvas画布',
          value: canvasConfig
        },
        home: { id: 'home', main: false, name: '主页', message: '默认主屏显示', public: false, value: [] }
      },
      lines: [],
      filter: {
        hueRotate: 0,
        saturate: 100,
        brightness: 100,
        contrast: 100,
        opacity: 100
      },
      globalVar: [
        {
          key: 'token',
          label: 'token',
          value: 'token',
          data: '',
          codeValue: '',
          type: 'String',
          message: '全局通用token',
          preventUpdate: false,
          source: '自定义'
        },
        {
          key: 'api',
          label: 'api',
          value: 'api',
          data: '',
          type: 'String',
          codeValue: '',
          message: '全局通用api地址',
          preventUpdate: false,
          source: '自定义'
        }
      ]
    });
    createDataVisual(formData.value).then((res) => {
      onlyMessage('创建成功，2秒后跳转到编辑器...', 'success');
      emit('success');
      visible.value = false;
      setTimeout(() => {
        window.open(`${(import.meta as any).env.VITE_VISUAL_HOST}/tokenLogin?path=/editor/${res}&token=${getToken()}`, '_blank');
      }, 2000);
    });
  };

  const show = (data) => {
    visible.value = true;
    if (data) {
      title.value = '编辑可视化';
      formData.value = { ...data };
    } else {
      title.value = '创建可视化';
      formData.value.name = '';
    }
  };
  defineExpose({
    show: show
  });
</script>
<style lang="less" scoped>
  :deep(.ant-select) {
    width: 222px;
  }
</style>
