<!-- 用户编辑弹窗 -->
<template>
  <ele-modal
    :width="900"
    :visible="visible"
    v-if="data"
    :confirm-loading="loading"
    :title="`购买插件(${data.appName})`"
    :maxable="true"
    @update:visible="updateVisible"
    @ok="save"
  >
    <a-tabs type="card" v-model:activeKey="activeKey" tabPosition="top">
      <a-tab-pane key="1" tab="专业版">
        <div class="pay-box">
          <div class="qrcode">
            <ele-qr-code
              :value="text"
              :size="200"
              :margin="2"
              :image-settings="image"
            />
          </div>
          <div class="pay-info">
            <a-alert
              message="提示：支付后请耐心等待支付结果，请勿刷新浏览器，否则将会导致购买异常。"
              banner
              closable
              style="margin-bottom: 12px"
            />
            <a-descriptions title="" :column="{ xs: 1, sm: 1, md: 1 }">
              <a-descriptions-item label="模块名称">{{
                data.appName
              }}</a-descriptions-item>
              <a-descriptions-item label="当前账号">{{
                loginUser.nickname
              }}</a-descriptions-item>
              <a-descriptions-item label="订单金额"
                ><span class="ele-text-warning"
                  >¥{{ data.price }} /1年</span
                ></a-descriptions-item
              >
            </a-descriptions>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="企业版">
        <div class="pay-box">
          <div class="qrcode">
            <ele-qr-code
              :value="text"
              :size="200"
              :margin="2"
              :image-settings="image"
            />
          </div>
          <div class="pay-info">
            <a-alert
              message="提示：支付后请耐心等待支付结果，请勿刷新浏览器，否则将会导致购买异常。"
              banner
              closable
              style="margin-bottom: 12px"
            />
            <a-descriptions title="" :column="{ xs: 1, sm: 1, md: 1 }">
              <a-descriptions-item label="模块名称">{{
                data.appName
              }}</a-descriptions-item>
              <a-descriptions-item label="当前账号">{{
                loginUser.nickname
              }}</a-descriptions-item>
              <a-descriptions-item label="订单金额"
                ><span class="ele-text-warning"
                  >¥{{ data.price }} /1年</span
                ></a-descriptions-item
              >
            </a-descriptions>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="3" tab="应用介绍">
        <div class="app-info">
          <!-- 编辑器 -->
          <tinymce-editor
            v-model:value="content"
            :disabled="true"
            :init="config"
          />
        </div>
      </a-tab-pane>
    </a-tabs>
  </ele-modal>
</template>

<script lang="ts" setup>
  import { ref, reactive, watch, computed } from 'vue';
  import { Form, message } from 'ant-design-vue';
  import type { App } from '@/api/dashboard/appstore/model';
  import type { ImageSettings } from 'ele-admin-pro/es/ele-qr-code/types';
  import { useUserStore } from '@/store/modules/user';
  import { installApp } from '@/api/system/menu';
  import type { Menu } from '@/api/system/menu/model';

  const useForm = Form.useForm;

  const props = defineProps<{
    // 弹窗是否打开
    visible: boolean;
    // 修改回显的数据
    data?: App | null;
    showView?: boolean;
  }>();

  const emit = defineEmits<{
    (e: 'done'): void;
    (e: 'update:visible', visible: boolean): void;
  }>();

  // 表单数据
  const form = reactive<Menu>({
    menuId: undefined,
    parentId: undefined,
    title: '',
    menuType: 0,
    openType: 0,
    icon: '',
    path: '',
    component: '',
    authority: '',
    sortNumber: undefined,
    hide: 0,
    meta: '',
    appId: undefined
  });

  const userStore = useUserStore();
  // 当前用户信息
  const loginUser = computed(() => userStore.info ?? {});
  const content = ref('');
  const activeKey = ref('1');
  const loading = ref(false);
  const text = ref('weixin://wxpay/bizpayurl?pr=r7C2C7Ozz');
  const image = reactive<ImageSettings>({
    src: 'https://cdn.eleadmin.com/20200610/logo-radius.png',
    width: 28,
    height: 28
  });

  /* 更新visible */
  const updateVisible = (value: boolean) => {
    emit('update:visible', value);
  };

  const config = ref({
    toolbar: false,
    menubar: false,
    height: 700
  });

  const { resetFields, validate } = useForm(form);

  /* 保存编辑 */
  const save = () => {
    validate()
      .then(() => {
        loading.value = true;
        const data = {
          title: props.data?.appName,
          parentId: props.data?.parentId,
          menuType: Number(props.data?.menuType),
          icon: props.data?.appIcon,
          path: props.data?.path,
          sortNumber: props.data?.sortNumber,
          component: props.data?.component,
          authority: props.data?.authority,
          meta: props.data?.meta,
          appId: props.data?.appId
        };
        installApp(data)
          .then((msg) => {
            loading.value = false;
            message.success(msg);
            updateVisible(false);
            emit('done');
          })
          .catch((e) => {
            loading.value = false;
            message.error(e.message);
          });
      })
      .catch(() => {});
  };

  watch(
    () => props.visible,
    (visible) => {
      if (visible) {
        content.value = String(props.data?.content);
      } else {
        resetFields();
      }
    }
  );
</script>
<style lang="less">
  .tab-pane {
    min-height: 100px;
  }
  .card-head {
    display: flex;
    height: 40px;
    align-items: center;
    margin-bottom: 30px;
  }
  .pay-box {
    display: flex;
    .qrcode {
      border: 1px solid #f3f3f3;
      width: 204px;
      height: auto;
    }
    .pay-info {
      margin-left: 20px;
    }
  }
</style>
