<template>
  <div class="page">
    <div>
      <div v-if="!showCommentList" class="detail">
        <!-- 文章标题 -->
        <div class="created-unit">
          <div class="artical-title break-word">{{ affairs.title }}</div>
          <div class="artical-unit">
            <span> 发布党组织 ：{{ affairs.organizationName || "-" }}</span>
          </div>
          <div class="artical-unit">
            <text>发布时间：{{ affairs.createDate }}</text>
            <text/>
          </div>
        </div>
        <!-- 文章内容 -->
        <div class="artical-content break-word">
          <u-parse :html="affairs.content" class="content" v-if="affairs.content"></u-parse>
        </div>
        <!-- 语音播报-->
        <AiTransSpeech :src="affairs.speech" v-if="affairs.speech"/>
      </div>
      <commentList v-else :detail="affairs"></commentList>
      <AiComment
          :comment-count="commentCount"
          @submitComment="submitComment"
          @showCommentList="showCommentList = true"
      />
    </div>
  </div>
</template>
<script>
import {mapState} from "vuex";
import commentList from './commentList'

export default {
  name: "policyDetail",
  components: {commentList},
  computed: {
    ...mapState(["user"]),
  },
  data() {
    return {
      affairs: {},
      showCommentList: false,
      commentCount: 0,
    };
  },
  onLoad(options) {
    this.$dict.load("policyPromotionType");
    this.id = options.id;
    this.getPartyAffairsDetail(this.id);
    this.getCount();
  },
  methods: {
    getCount() {
      this.$instance.post(`/app/apppartyhistorycomment/list?partyHistoryId=${this.id}`).then((res) => {
        if (res && res.data) {
          this.commentCount = res.data.total;
        }
      });
    },
    getPartyAffairsDetail(id) {
      this.$instance.post(`/app/apppartyhistory/queryDetailByIdWeChat?id=${id}`).then((res) => {
        if (res && res.data) {
          res.data.createDate = res.data.createDate.substring(0, 10);
          const regex = new RegExp("<img", "gi");
          res.data.content = res.data.content
          .replace(
              regex,
              `<img style="max-width:100%!important;" calss="img"`
          )
          .replace(/<p([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/gi, "<p")
          .replace(/<p>/gi, '<p class="p_class">')
          .replace(/style=""/g, 'style="max-width:100%!important;"');
          res.data.content = res.data.content.replace(
              /<img[^>]*>/gi,
              function (match) {
                return match.replace(
                    /style\s*?=\s*?([‘"])[\s\S]*?\1/gi,
                    'style="max-width:100%;"'
                ); // 替换style
              }
          );

          if (res.data.files && res.data.files.length) {
            res.data.files.map(item => {
              var size = item.size / 1024;
              item.fileSize = size.toFixed(0);
              return item
            })
          }

          this.affairs = {...res.data};
        }
      });
    },
    back() {
      if (getCurrentPages().length === 1) {
        uni.switchTab({
          url: "/pages/AppHome/AppHome",
        });
        return false;
      }
      this.showCommentList
          ? (this.showCommentList = false)
          : uni.navigateBack();
    },
    submitComment(content) {
      this.$instance
      .post("/app/apppartyhistorycomment/addOrUpdate", {
        partyHistoryId: this.affairs.id,
        content: content,
        name: this.user.nickName,
        avatar: this.user.avatarUrl,
        organizationId: this.affairs.organizationId
      })
      .then((res) => {
        if (res && res.code == 0) {
          uni.showToast({icon: "success", title: "评论成功"});
          this.showCommentList = true
          this.getCount()
        } else {
          uni.showToast({icon: "none", title: res.msg});
        }
      })
      .catch((err) => {
        uni.showToast({icon: "none", title: err});
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~dvcp-wui/common";

.page {
  .navHeadBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #135ab8;
    color: #fff;
    font-size: 13px;
    height: 40px;
  }

  .detail {
    width: 100%;
    overflow-y: auto;

    .created-unit {
      width: 100%;
      padding: 32px;
      box-sizing: border-box;
      background-color: #D40A05;
      color: #fff;

      .artical-title {
        font-size: 40px;
      }

      .artical-unit {
        font-size: 28px;
        margin-top: 16px;
        opacity: 0.8;
      }
    }

    .artical-content {
      color: #666666;
      font-size: 32px;
      padding: 32px 32px 128px 32px;
      box-sizing: border-box;
      background-color: #fff;

      .p_class {
        margin-top: 40px;
        font-size: 32px;
        color: #333;
        text-indent: 0;
        width: 100%;
      }

      .img {
        width: 100% !important;
      }
    }

    .attachment {
      width: 100%;
      padding: 32px 32px 96px 32px;
      box-sizing: border-box;
      background-color: #ffffff;
      margin-top: 16px;

      .attachment-title {
        font-size: 32px;
        color: #333333;
        font-weight: 500;

        image {
          width: 48px;
          height: 48px;
          vertical-align: middle;
        }
      }
    }
  }
}

.p_class {
  margin-top: 40px;
  font-size: 32px;
  color: #333;
  text-indent: 0;
  width: 100%;
}

.img {
  max-width: 100% !important;
}

.attachment {
  width: 100%;
  padding: 32px;
  box-sizing: border-box;
  background-color: #FFFFFF;
  margin-top: 16px;

  .attachment-title {
    font-size: 32px;
    color: #333333;
    font-weight: 500;

    image {
      width: 48px;
      height: 48px;
      vertical-align: middle;
    }
  }

  .attachment-item {
    border: 1px solid rgba(204, 204, 204, 1);
    padding: 16px;
    box-sizing: border-box;
    margin-top: 34px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-radius: 8px;

    .file-name {
      justify-content: flex-start;
      align-items: center;

      image {
        width: 96px;
        height: 96px;
        vertical-align: middle;
      }

      .title {
        color: #333333;
        font-size: 32px;
        word-break: break-all;
        flex: 1;
      }
    }

    .size {
      color: #999;
      font-size: 28px;
      display: flex;
      justify-content: cemter;
      align-items: center;
    }
  }
}
</style>
