<template>
  <div class="Resdetail">
    <div class="name">{{ detail.title }}</div>
    <div class="info">
      <div class="time">
        <img src="@/assets/notice/time_icon.png" alt="" />
        <div class="font">发布时间：</div>
        <div class="font">{{ detail.infodate }}</div>
      </div>
      <div class="time">
        <div class="font">阅读人数：</div>
        <div class="font">{{ detail.clicktimes }}</div>
      </div>
    </div>
    <div class="file" v-if="files.length > 0">
      <div class="th">
        <div class="label">文件名</div>
        <div class="label">下载</div>
      </div>
      <div class="cell" v-for="(item, index) in files" :key="index">
        <div class="fileName">
          {{
            item.AttFileName["#cdata-section"]
              ? item.AttFileName["#cdata-section"]
              : item.AttFileName
          }}
        </div>
        <img
          class="down_icon"
          src="@/assets/common/download_icon.png"
          alt=""
          @click="download(item.url)"
        />
      </div>
    </div>
    <div class="divider"></div>
    <div class="content" v-html="detail.content">{{ detail.infocontent }}</div>
  </div>
</template>

<script>
import { getinfoDetail } from "@/api/respurchase";
import { decryptBase, isArrayFn, isObj } from "@/utils/utils";

export default {
  data() {
    return {
      infoid: "",
      catenum: "",
      detail: {},
      files: [],
    };
  },
  methods: {
    init() {
      let parmas = {
        ValidateData: "Epoint_WebSerivce_**##ZJ",
        para: {
          infoid: this.infoid,
          catenum: this.catenum,
          // infoid: "d2f6cdca-72ef-4218-bd38-01e73a4872cd",
          // catenum: "011004003",
          isneedurl: "0",
        },
      };
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      getinfoDetail(parmas).then((res) => {
        this.$toast.clear();
        this.detail = res.EpointDataBody.DATA.UserArea;
        this.detail.content = decryptBase(this.detail.infocontent);
        let files = res.EpointDataBody.DATA.UserArea.attachfiles.SingleFile;
        if (!files) {
          this.files = [];
        } else if (isArrayFn(files)) {
          this.files = this.files.concat(files);
        } else if (isObj(files)) {
          this.files.push(files);
        }
        console.log(this.files);
      });
    },
    download(url) {
      console.log(url);
      if (window.android !== undefined) {
        window.android.downLoadFile(url);
      } else {
        window.webkit &&
          window.webkit.messageHandlers.downLoadFile.postMessage(`${url}|showNav`);
      }
    },
  },
  created() {
    this.infoid = this.$route.query.id;
    this.catenum = this.$route.query.catenum;
    this.init();
  },
};
</script>

<style lang="stylus">
.Resdetail {
  height calc(100vh - 60px)
  overflow-y auto;
  // overflow-x hidden
  padding 30px;
  background #fff;
  margin 0 !important

  .name {
    font-size: 36px;
    font-weight: 600;
    color: #333333;
    line-height: 50px;
  }

  .info {
    margin-top 40px;
    display flex;
    align-items center
    justify-content space-between

    .time {
      display flex;
      align-items center

      img {
        width 24px;
        height 24px;
        margin-right 10px;
      }

      .font {
        font-size: 24px;
        color: #666666;
      }
    }


  }

  .file {
    margin-top 30px;

    .th {
      height 50px;
      display flex;
      align-items center;
      justify-content space-between;
      .label {
        font-size: 24px;
        font-weight: 500;
        color: #333333;
      }
    }
    .cell {
      height 60px;
      display flex;
      align-items center;
      justify-content space-between;

      .fileName {
        width calc(100% - 50px)
        line-height 30px
        font-size: 24px;
        color: #666666;
      }
      .down_icon {
        width 32px;
        height 32px;
      }
    }
  }

  .divider {
    margin-top 30px;
    width 100%;
    height 1px;
    background #eee
  }

  .content {
    margin-top 30px;
    font-size: 28px;
    font-weight: 400;
    color: #333333;
    line-height: 40px;
    word-break: break-all !important;

    div
    h1
    table {
      width 100% !important
      padding 0 !important
    }
  }
}
</style>
