<template>
  <div :class="prefixCls" class="w-full h-full">
    <div class="container mx-auto w-full h-full">
      <div class="w-full py-4">
        <nav class="flex justify-between items-center">
          <span
            ><h2 class="text-3xl text-white m-0">{{ title }}</h2></span
          >
          <a-button @click="$router.push('/login')" ghost>登录</a-button>
        </nav>
      </div>
      <div class="section w-full py-4">
        <div class="flex flex-col h-full">
          <section class="content flex h-full">
            <div class="rounded-md bg-white h-full left-menu">
              <ul class="list-none p-0 m-0" v-if="treeData && treeData.length">
                <li
                  class="p-4 rounded-md main"
                  :class="{ active: treeData[0] && treeData[0].id === activeId }"
                >
                  <div class="flex justify-between items-center relative">
                    <span>{{ treeData[0] && treeData[0].name }}</span>
                    <span
                      class="flex items-center"
                      :class="treeData[0] && treeData[0].id === activeId ? 'fade-down' : 'fade-up'"
                    >
                      <Icon
                        icon="fluent:chevron-up-20-filled"
                        :size="18"
                        @click="changeActiveId(treeData[0].id)"
                      />
                    </span>
                  </div>
                </li>
                <div class="ml-2 active-content">
                  <Tree
                    v-if="treeData[0] && treeData[0].id === activeId"
                    :tree-data="treeData[0].children || []"
                    :replace-fields="replaceFields"
                    :default-expand-all="true"
                    @select="onSelect"
                  />
                </div>
                <li
                  class="p-4 rounded-md main"
                  :class="{ active: treeData[1] && treeData[1].id === activeId }"
                >
                  <div class="flex justify-between items-center relative">
                    <span>{{ treeData[1] && treeData[1].name }}</span>
                    <span
                      class="flex items-center"
                      :class="treeData[1] && treeData[1].id === activeId ? 'fade-down' : 'fade-up'"
                    >
                      <Icon
                        icon="fluent:chevron-up-20-filled"
                        :size="18"
                        @click="changeActiveId(treeData[1].id)"
                      />
                    </span>
                  </div>
                </li>
                <div class="ml-2 active-content">
                  <Tree
                    v-if="treeData[1] && treeData[1].id === activeId"
                    :tree-data="treeData[1].children || []"
                    :replace-fields="replaceFields"
                    :default-expand-all="true"
                    @select="onSelect"
                  />
                </div>
                <li
                  class="p-4 rounded-md main"
                  :class="{ active: treeData[2] && treeData[2].id === activeId }"
                >
                  <div class="flex justify-between items-center relative">
                    <span>{{ treeData[2] && treeData[2].name }}</span>
                    <span
                      class="flex items-center"
                      :class="treeData[2] && treeData[2].id === activeId ? 'fade-down' : 'fade-up'"
                    >
                      <Icon
                        icon="fluent:chevron-up-20-filled"
                        :size="18"
                        @click="changeActiveId(treeData[2].id)"
                      />
                    </span>
                  </div>
                </li>
                <div class="ml-2 active-content">
                  <Tree
                    v-if="treeData[2] && treeData[2].id === activeId"
                    :tree-data="treeData[2].children || []"
                    :replace-fields="replaceFields"
                    :default-expand-all="true"
                    @select="onSelect"
                  />
                </div>
              </ul>
            </div>
            <div class="rounded-md bg-white h-full right-menu">
              <header class="border-b">
                <div class="flex justify-between p-4">
                  <div>
                    <span class="text-xl">{{ detail.name }}</span>
                    <span class="text-xl ml-3 font-medium">{{ detail.code2 }}</span>
                  </div>
                  <a-button
                    v-show="showExcelDownload"
                    type="success"
                    pre-icon="ic:outline-file-download"
                    @click="uploadExecl"
                    >下载</a-button
                  >
                </div>
              </header>
              <section class="pdf-content">
                <iframe
                  v-if="showPdf"
                  :src="pdfUrl"
                  frameborder="0"
                  width="100%"
                  height="100%"
                  class="rounded-b-md"
                ></iframe>
                <div
                  v-if="detail.name && !detail.pdfData.fid"
                  class="h-full flex justify-center items-center text-2xl"
                  >暂未上传可供预览的pdf文件</div
                >
              </section>
            </div>
          </section>
          <footer class="relative">
            <p class="m-0 p-0 text-right text-light-blue-50 footer-content"
              >主办单位：广东省交通运输工程造价事务中心<span class="px-2">|</span
              >技术支持：珠海纵横创新软件有限公司</p
            >
          </footer>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { ref, watch, computed } from 'vue'
  import { TreeResultModel } from '/@/api/model/tree'
  import { sectionAllApi, treeDetailApi } from '/@/api/sys/tree'
  import { useDesign } from '/@/hooks/web/useDesign'
  import { TreeRow } from '/#/tree'
  import { Tree } from 'ant-design-vue'
  import { downloadByUrl } from '/@/utils/file/download'
  import { Icon } from '/@/components/Icon'
  import { useGlobSetting } from '/@/hooks/setting'
  interface ATreeRow extends TreeRow {
    showUpload: boolean
  }
  export default {
    name: 'Preview',
    components: {
      Tree,
      Icon
    },
    setup() {
      const globSetting = useGlobSetting()
      const treeData = ref<TreeResultModel[]>([])
      const activeId = ref('')
      const row = ref<ATreeRow>({
        id: '',
        parentId: '',
        name: '',
        depth: 0,
        serial: 0,
        attribution: '',
        code: '',
        code2: '',
        contractId: '',
        createTime: '',
        showUpload: false
      })
      const detail = ref({
        name: '',
        code2: '',
        pdfData: { content: '', filepath: '', filename: '', ext: '', fid: '' },
        excelData: { content: '', filepath: '', filename: '', ext: '', fid: '' }
      })
      async function initData() {
        const result = await sectionAllApi()
        treeData.value = (result && result[0].children) || []
      }

      initData()

      const onSelect = (selectedKeys: Event, { selectedNodes }) => {
        if (selectedKeys && selectedNodes && selectedKeys!.length) {
          const {
            id,
            parentId,
            name,
            depth,
            serial,
            attribution,
            code,
            code2,
            contractId,
            children,
            createTime
          } = selectedNodes[0]?.props
          row.value = {
            showUpload: children && children.length ? false : true,
            id,
            parentId,
            name,
            depth,
            serial,
            attribution,
            code,
            code2,
            contractId,
            createTime
          }
        }
      }

      async function initSectionDetail(id: string) {
        const result = await treeDetailApi(id)
        detail.value = result
      }

      watch(row, (row, prevRow) => {
        if (row.id !== prevRow.id) {
          initSectionDetail(row.id)
        }
      })
      const showExcelDownload = computed(() => detail.value.excelData.fid)
      const showPdf = computed(() => {
        if (!detail.value.pdfData.fid) {
          return false
        }
        return true
      })
      const uploadExecl = () => {
        downloadByUrl({
          url: 'http://sj.6jlzf.cn/api/upload/file?id=' + detail.value.excelData.fid
          // url: 'http://localhost:7070/api/upload/file?id=' + detail.value.excelData.fid
        })
      }

      const pdfUrl = computed(
        // () => 'http://sj.6jlzf.cn/api/upload/file?id=' + detail.value.pdfData.fid
        () => 'http://sj.6jlzf.cn/static' + detail.value.pdfData.filepath
      )

      const changeActiveId = (id: string) => {
        if (id === activeId.value) {
          activeId.value = ''
        } else {
          activeId.value = id
        }
      }
      const { prefixCls } = useDesign('preview')
      const replaceFields = { children: 'children', title: 'name', key: 'id' }
      return {
        treeData,
        replaceFields,
        prefixCls,
        onSelect,
        showPdf,
        pdfUrl,
        uploadExecl,
        title: computed(() => globSetting?.title ?? ''),
        showExcelDownload,
        detail,
        activeId,
        changeActiveId
      }
    }
  }
</script>

<style lang="less">
  @prefix-cls: ~'@{namespace}-preview';

  .@{prefix-cls} {
    background: url('../../../assets/images/bg.png');
    .section {
      height: calc(100% - 4.25rem);
      .content {
        height: calc(100% - 22px);
        .left-menu {
          flex: 0 0 25%;
          max-width: 25%;
          overflow: auto auto;
          .main.active {
            background-color: #e6eefe;
          }
          .main:hover {
            background-color: #e3ebfa;
          }
          .active-content {
            max-height: calc(100vh - 14rem - 36px - 24px);
            overflow: auto;
          }
          .fade-up {
            transform: rotate(0);
            transition: all 0.5s;
          }
          .fade-down {
            transform: rotate(180deg);
            transition: all 0.5s;
          }
        }
        .right-menu {
          flex: 0 0 75%;
          max-width: 75%;
          margin-left: 15px;
          .pdf-content {
            height: calc(100% - 2rem - 33px);
          }
        }
      }
      .footer-content {
        position: absolute;
        right: 0;
        bottom: -2rem;
      }
    }
  }
</style>
