<template>
  <span style="color: #8a8e93; font-weight: bold">{{ title }}</span>
  <div class="container-box" v-if="content && content.length > 0">
    <div v-for="(item, index) in content" :key="index" class="content-box">
      <img :src="vipImg" class="tag-img" />
      <a-image
        width="100%"
        :height="150"
        :src="item.img"
        fallback="data:image/png;base64,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"
      />
      <div class="content-bottom">
        <div class="text">{{ item.text }}</div>
        <div class="description">{{ item.description }}</div>
        <div class="btn-box">
          <a-button
            class="btnview"
            v-if="item.type == '1' || item.type == '0' || item.type == '2'"
            @click="handlePreview(item)"
            >预览</a-button
          >

          <a-button class="btnview" v-else-if="item.type == '3'" @click="handleImgPreview(item)"
            >预览</a-button
          >

          <a-button type="primary" @click="download(item)">下载</a-button>
        </div>
      </div>
    </div>

    <DesktopPreview
      v-if="data.type == '1' && data.previewVisible"
      ref="previewRef"
      :list="data.list"
      @close="
        () => {
          data.previewVisible = false;
        }
      "
    />

    <a-image
      v-if="data.type == '3'"
      :width="200"
      :style="{ display: 'none' }"
      :preview="{
        visible: data.previewVisible,
        onVisibleChange: setVisible,
      }"
      :src="data.previewFile"
    />
    <a-modal
      v-if="data.type == '0' && data.previewVisible"
      v-model:visible="data.previewVisible"
      :title="t('预览')"
      :width="1100"
      :footer="null"
    >
      <SimpleForm ref="formRef" class="form" :formProps="data" :formModel="{}" :isWorkFlow="true" />
    </a-modal>
  </div>
   <EmptyBox v-else style="height: calc(100% - 50px)" />
</template>
<script lang="ts" setup>
  import vipImg from '/@/assets/application/vip.png';

  import DesktopPreview from '/@/views/generator/desktop/components/DesktopPreview.vue';
  import { reactive } from 'vue';
  import { DesktopInfoItem } from '/@/model/desktop/designer';
  import { useI18n } from '/@/hooks/web/useI18n';
  import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
  import { FormSchema } from '/@/components/Form';
  import { postAppDowload } from '/@/api/version/storemanage';
  import { getAppPreviewInfo } from '/@/api/version/myapp';
  import { EmptyBox } from '/@/components/ModalPanel/index';
  import { buildOption } from '/@/utils/helper/designHelper';
  import { FormTemplateModel } from '/@/api/form/design/model';
  import { FormJson } from '/@/model/generator/codeGenerator';
  import { notification } from 'ant-design-vue';
  const { t } = useI18n();
  interface ContentInfo {
    img: string;
    text: string;
    description: string;
    id?: string;
    type: string;
  }

  defineProps({
    title: String,
    content: Array<ContentInfo>,
  });
  let data: {
    type: string;
    list: Array<DesktopInfoItem>;
    previewVisible: boolean;
    previewFile: string;
    schemas: FormSchema[];
  } = reactive({
    type: '0',
    list: [],
    previewVisible: false,
    previewFile: '',
    schemas: [],
  });

  async function handlePreview(it) {
    data.type = it.type;
    if (!it.storeId) return;
    let res = await getAppPreviewInfo({ storeId: it.storeId, appId: it.appId });

    if (it.type == '0') {
      if (!res.data) return;
      const model = JSON.parse(res.data.formJson) as FormTemplateModel;
      const formJson = model.formJson as unknown as FormJson;
      const customJson: any = formJson ? buildOption(formJson, false) : null;
      if (customJson && customJson.schemas) {
        data.schemas = customJson.schemas;
      }

      data.previewVisible = true;
    } else if (it.type == '1') {
      if (!res.data) return;
      data.list = JSON.parse(res.data.jsonContent);
      data.previewVisible = true;
    } else if (it.type == '2') {
      if (res.url) window.open(res.url, '_blank');
    }
  }

  function handleImgPreview(it) {
    setVisible(true);
    data.previewFile = it.img;
    data.type = it.type;
  }
  const setVisible = (value): void => {
    data.previewVisible = value;
    if (!value) {
      data.type = '';
    }
  };
  async function download(it) {
    let res = false;
    if (it.type == 3) {
      let a = document.createElement('a');
      a.href = it.img;
      a.target = '_blank';
      a.download = it.text + '.jpg';
      a.click();
      res = true;
    } else {
      const data = await postAppDowload({ appId: it.appId, storeId: it.storeId });

      if (data) res = true;
    }
    if (res) {
      notification.open({
        type: 'success',
        message: t('下载'),
        description: t('成功'),
      });
    }
  }
</script>
<style lang="less" scoped>
  .form {
    min-height: 400px;
    padding: 20px;
  }

  .container-box {
    display: flex;
    flex-wrap: wrap;
    height: calc(100% - 75px);
    align-content: baseline;

    .content-box {
      position: relative;
      margin: 10px 20px 10px 0;
      flex-basis: calc((100% - 80px) / 4);
      background: #fff;
      height: 340px;
      border-radius: 16px;

      .tag-img {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 9;
        border-radius: 0 16px 0 0;
      }

      :deep(.ant-image) {
        display: block;

        img {
          height: 100%;
          border-radius: 16px 16px 0 0;
        }
      }

      .content-bottom {
        padding: 15px 20px;

        .text {
          color: #000;
        }

        .description {
          margin: 8px 0 15px;
          font-size: 13px;
          overflow: hidden;
          height: 80px;
          display: -webkit-box;
          -webkit-line-clamp: 4;
          -webkit-box-orient: vertical;
        }

        .btn-box {
          display: flex;
          justify-content: space-between;

          :deep(.ant-btn) {
            width: 42%;

            &.btnview {
              border-color: #5e95ff;
              color: #5e95ff;
            }
          }
        }
      }
    }
  }
</style>
