<script lang="ts" setup>
  import { PageHeader, RadioButton, RadioGroup, InputNumber, Button } from 'ant-design-vue';
  import { computed, ref, unref, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { decode } from '../..';
  import { RollbackOutlined } from '@ant-design/icons-vue';
  import { Platform } from './config';
  import { useApp } from '../../hooks/useApp';
  import { getDataComponent } from '/@/api/dataBoard';
  import { updateDataBoard } from '/@/api/dataBoard';
  import { useMessage } from '/@/hooks/web/useMessage';

  defineProps<{ widgetNumber: number }>();
  const emits = defineEmits(['getPhoneSize']);

  const ROUTE = useRoute();
  const ROUTER = useRouter();

  const { isPhone } = useApp();
  const getIsSharePage = computed(() => {
    return ROUTE.matched.find((item) => item.path === '/share/:viewType/:id/:publicId');
  });

  const getDataBoardName = computed(() => {
    return decode((ROUTE.params as { boardName: string }).boardName || '');
  });

  const handleBack = () => {
    if (unref(getIsSharePage)) return;
    ROUTER.go(-1);
  };

  const getSize = () => {
    return {
      width: '',
      height: '',
    };
  };

  const phoneRadio = ref<string>('iPhone 8');
  const phoneSize = ref<{ width?: number | string; height?: number | string }>(getSize());
  const ifShowWidth = ref<boolean>(false);

  const phoneModel = ref<{
    key: string;
    width: string | number;
    height: number | string;
    title: string;
  }>();
  const getDataList = async () => {
    const values = await getDataComponent(decode((ROUTE.params as { boardId: string }).boardId));
    phoneModel.value = values?.data.phoneModel && JSON.parse(values?.data.phoneModel as string);
    phoneRadio.value = unref(phoneModel)?.key as any;
    ifShowWidth.value = unref(phoneRadio) === 'custom' ? true : false;
    phoneSize.value = {
      width: unref(phoneModel)?.width,
      height: unref(phoneModel)?.height,
    };

    emits('getPhoneSize', unref(phoneSize));
  };

  const updateComponent = () => {
    const { boardId, boardName, organizationId, platform } = ROUTE.params;

    const values = {
      id: boardId,
      boardName,
      organizationId,
      platform,
      phoneModel: JSON.stringify({
        key: unref(phoneRadio),
        ...phoneSize.value,
      }),
    };
    updateDataBoard(values as any);
  };

  const handleChange = (e) => {
    const { target } = e || {};
    phoneSize.value = getSize();
    if (target.value === 'custom') {
      ifShowWidth.value = true;
      return;
    } else {
      ifShowWidth.value = false;
      const values = Platform.find((item) => item.key == target.value);
      phoneSize.value = {
        width: values?.width || '',
        height: values?.height || '',
      };
    }
    updateComponent();
    emits('getPhoneSize', unref(phoneSize));
  };

  const { createMessage } = useMessage();

  const handleCustom = () => {
    const { width, height } = unref(phoneSize);
    if (!width || !height) {
      createMessage.warning('请填写尺寸大小');
      return;
    }
    emits('getPhoneSize', unref(phoneSize));
    updateComponent();
  };

  onMounted(() => {
    getDataList();
  });
</script>

<template>
  <PageHeader v-if="!getIsSharePage" class="pagerheader !px-5 !pt-5 !pb-0 !dark:bg-dark-700">
    <template #title>
      <div class="flex items-center h-18 px-4">
        <RollbackOutlined
          v-if="!getIsSharePage"
          class="mr-3 cursor-pointer text-2xl"
          @click="handleBack"
        />
        <span class="text-lg text-gray-700 dark:text-light-50">{{ getDataBoardName }}</span>
      </div>
    </template>
    <template #extra>
      <div class="w-full h-full flex justify-center items-center px-4">
        <slot></slot>
      </div>
    </template>
    <div>
      <span class="mr-3 text-sm text-gray-500">已创建组件:</span>
      <span class="text-blue-500"> {{ widgetNumber }}个</span>
    </div>
    <div v-if="isPhone()" class="flex items-center my-1">
      <RadioGroup v-model:value="phoneRadio" button-style="solid" @change="handleChange">
        <RadioButton v-for="item in Platform" :value="item.key" :key="item.key">{{
          item.title
        }}</RadioButton>
      </RadioGroup>
      <div class="ml-1" v-if="ifShowWidth">
        <InputNumber v-model:value="phoneSize.width" :min="300" placeholder="请输入宽度" />
        <InputNumber v-model:value="phoneSize.height" :min="300" placeholder="请输入高度" />
        <Button type="primary" @click="handleCustom" class="ml-1">确定</Button>
      </div>
    </div>
  </PageHeader>
</template>

<style lang="less" scoped>
  .pagerheader {
    :deep(.ant-page-header-heading) {
      @apply bg-light-50 dark:bg-dark-900;
    }
  }
</style>