<template>
  <div class="body">
    <div class="header">常见问题</div>
    <div class="bgColor">
      <div class="title">
        <!-- <div>主题:</div> -->
        {{data.title}}
      </div>
      <div class="timeBox">
        <div>{{data.createUser.dept?data.createUser.dept.dept:"暂无"}}</div>
        <div>{{data.createtime.substring(0,data.createtime.length-3)}}</div>
      </div>
      <div class="conents" v-html="data.content">{{data.content}}</div>
      <!-- <div class="release">{{data.createUser.dept?data.createUser.dept.dept:"暂无"}}</div>
      <div class="time">{{data.createtime.substring(0,data.createtime.length-3)||"暂无"}}</div> -->
      <div class="files" v-if="files.length">
        <!-- <div @click="downFile(v.token,v.name)" v-for="(v,index) in files">{{v.name}}</div> -->
        <a
          :href="getFileUrl(v.previewUrl)"
          v-for="(v,index) in files"
          target="_blank"
          :download="getDownload(v.name)"
        >{{v.name}}</a>
      </div>
      <div class="keyword" v-if="data.label">
        <span v-for="v in data.label" @click="toKnowList(v)">{{v}}</span>
      </div>
      <div class="good" @click="starClick()" v-show="starIf">
        <i class="iconfont icon-dianzan"></i>
        <span>{{data.star||0}}</span>
      </div>
      <div class="goodClick" v-show="!starIf">
        <i class="iconfont icon-dianzan"></i>
        <span>{{data.star||0}}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loginUser: JSON.parse(localStorage.getItem("loginUser")),
      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
      data: "",
      starIf: "",
      files: []
    };
  },
  methods: {
    getFileUrl(res) {
      return res;
    },
    getDownload(res) {
      return res;
    },
    downFile(token, fileName) {
      this.$http
        .get("service/common/common/downloadAttachment/" + token, {
          headers: {
            Accept: "*/*"
          },
          responseType: "arraybuffer"
        })
        .then(function(res) {
          var file = new Blob([res.data], {
            type: "application/octet-stream"
          });
          var fileURL = URL.createObjectURL(file);
          var a = document.createElement("a");
          a.href = fileURL;
          a.target = "_blank";
          a.download = fileName;
          document.body.appendChild(a);
          a.click();
        });
    },
    getFiles() {
      var that = this;
      this.$http
        .get(
          "service/common/common/listAttachment/solution/" + this.data.id,
          {}
        )
        .then(function(res) {
          that.files = res.data.data;
        });
    },
    toKnowList(res) {
      this.$router.push({
        name: "KnowList",
        params: {
          keword: res
        }
      });
    },
    getParamsData() {
      this.data = JSON.parse(this.$route.params.data);
    },
    // 关键字查询
    getKeyWords() {
      if (this.data.label) {
        this.data.label = this.data.label.split("/");
      }
    },
    // 获取是否点过赞
    getStarIf() {
      var that = this;
      this.$http
        .get(
          "service/solution/canStar/requester/" +
            this.data.id +
            "/" +
            this.loginUser.id,
          {}
        )
        .then(function(res) {
          that.starIf = res.data.result;
        });
    },
    // 点赞
    starClick() {
      var that = this;
      that.starIf = false;
      that.data.star = Number(that.data.star) + 1;
      this.$http
        .get(
          "service/solution/star/requester/" +
            this.data.id +
            "/" +
            this.loginUser.id,
          {}
        )
        .then(function(res) {});
    }
  },
  created() {
    this.getParamsData();
    this.getStarIf();
    this.getKeyWords();
    this.getFiles();
  },
  mounted() {}
};
</script>
<style scoped lang='less'>
.header {
  height: 0.88rem;
  line-height: 0.88rem;
  text-align: center;
  color: #fff;
  font-size: 0.37rem;
  background: linear-gradient(#2e2f32, #414246);
  padding: 0;
}
.bgColor {
  background-color: white;
  padding: 0 0.24rem;
}
.title {
  font-size: 0.32rem;
  line-height: 0.45rem;
  padding: 0.24rem 0.24rem 0 0.24rem;
  color: #333333;
  font-weight: bold;
}
.timeBox {
  display: flex;
  justify-content: space-between;
  font-size: 0.24rem;
  color: #999999;
  padding: 0.16rem 0;
  line-height: 0.33rem;
}
.conents {
  font-size: 0.28rem;
  padding-top: 0.24rem;
  border-top: 0.01rem rgb(223, 222, 222) solid;
  border-bottom: 0.01rem rgb(223, 222, 222) solid;
  text-indent: 2em;
  line-height: 0.39rem;
  padding-bottom: 0.48rem;
  color: #666666;
  overflow: hidden;
  width: 100%;
  overflow-x: scroll;
}
.release {
  display: flex;
  justify-content: flex-end;
  font-size: 0.28rem;
  line-height: 0.39rem;
  color: #666666;
}
.time {
  display: flex;
  justify-content: flex-end;
  font-size: 0.28rem;
  line-height: 0.39rem;
  color: #666666;
  margin-top: 0.08rem;
  padding-bottom: 0.24rem;
  border-bottom: 0.01rem rgb(223, 222, 222) solid;
}
.files {
  font-size: 0.28rem;
  /* color: #005395; */
  line-height: 0.4rem;
  padding: 0.24rem 0;
  border-bottom: 0.01rem rgb(223, 222, 222) solid;
}
.files a {
  display: block;
  color: #005395;
  margin-top: 0.1rem;
}
.keyword {
  padding: 0.24rem 0;
  border-bottom: 0.01rem rgb(223, 222, 222) solid;
}
.keyword span {
  display: inline-block;
  color: rgb(0, 0, 255);
  margin-left: 0.2rem;
  text-decoration: underline;
  font-size: 0.28rem;
  line-height: 0.35rem;
}
.good {
  text-align: center;
  margin: 0.24rem auto;
  width: 2rem;
  height: 0.88rem;
  line-height: 0.88rem;
  background-color: #b8d1e6;
  border-radius: 20px;
  font-size: 0.4rem;
  color: #005395;
}

.goodClick {
  text-align: center;
  margin: 0.24rem auto;
  width: 2rem;
  height: 0.88rem;
  line-height: 0.88rem;
  background-color: #b8d1e6;
  border-radius: 20px;
  font-size: 0.4rem;
  color: #005395;
}
</style>