<template>
  <div class="wrapper">
    <div style="background-color: #dee0e3; margin: 20px 19.6%; border-radius: 5px">
      <div style="text-align: center">
        <div class="ace-line" dir="auto">
          <span data-string="true">​</span>
        </div>
        <div class="ace-line" dir="auto">
          <span
            data-string="true"
            style="font-weight: bold; margin: 10px 0; color: #245bdb"
            >欢迎使用鲸致系统 👏</span
          >
          <span data-string="true">​</span>
        </div>
        <div class="ace-line" dir="auto">
          <span style="font-size: 12px"
            >你可以通过此文档来了解产品更新日志与功能预告等信息～ ❤️</span
          >
        </div>
        <div class="ace-line" data-node="true" dir="auto">
          <span data-string="true" data-enter="true" data-leaf="true">​</span>
        </div>
      </div>
    </div>
    <!-- 这里改成系统发布类通知 -->
    <div style="display: flex; justify-content: center; height: 680px">
      <div class="items">
        <div class="title">📅 发布日志</div>

        <div v-for="(item, index) in com">
          <div class="log-title">
            <span>{{index == 0?"⛳️":"📲"}}</span>{{ item.versionTime }}
            {{ item.versionTime.substring(0, 10) == today ? "今日" : "" }}
          </div>
          <div  class="log-content"> 
            <span style="font-weight: 600;margin-bottom: 5px;"><span class="blue-mark">•</span>{{item.sysName }}:</span>
            <span style="white-space: pre-wrap;display: block;padding-left:30px" v-html="item.versionDesc"></span>
          </div>
          <div v-if="item.manualUrl" class="manual" @click="btnManual(item)">使用操作手册</div> 
       <div class="div-line"></div>
        </div>
      

      <div class="title title-r bg-notice">🔊公告通知</div>
       <div style="font-size: 13px;line-height: 16px;padding: 5px 10px 20px;color:rgb(183,91,69);display: flex;flex-direction: column;"> 
        <span  v-for="(item, index) in notices"><span class="blue-mark">•</span>{{item.versionDesc}}</span>
      </div>

      </div>
      

      <div style="width:20px"></div>

      <div class="items">
        <div class="title title-r">🏃 功能预告</div>
        <span style="color: #de7802;font-weight: 600;"><span class="blue-mark">•</span>开发中</span>
        <div v-for="(item, index) in deving"> 
          <div class="log-content" style="padding: 10px 0 0;">  
            <span>👨🏻‍💼{{ item.sysName }}：预计发布 {{ item.versionTime.substring(0,10) }}</span> 
            <span style="white-space: pre-wrap;font-size: 13px;padding: 5px 10px;" v-html="item.versionDesc"></span>
          </div> 
        </div>
       <div class="div-line"></div>
 
       <div v-if="bugs.length>0">
        <span style="color: rgb(149,145,140);font-weight: 600;"><span class="blue-mark">•</span>缺陷修复</span>
        <div v-for="(item, index) in bugs"> 
          <div class="log-content" style="padding: 10px 0;">  
            <span>⁉️{{ item.sysName }}：预计修复 {{ item.versionTime.substring(0,10) }}</span>
            <span style="white-space: pre-wrap;font-size: 12px;padding: 5px 10px;" v-html="item.versionDesc"></span>
          </div> 
        </div>
      </div>



       <div class="title title-r bg-feelback">🙉 我要反馈</div>
       <div style="font-size: 13px;line-height: 16px;padding: 0px 10px 20px;display: flex;flex-direction: column;">
        <span><span class="blue-mark">•</span>产研负责：刘清高 13262258272（同微）</span>
        <span><span class="blue-mark">•</span>Bug&配置：宋觐麒</span>
        <span><span class="blue-mark">•</span>技术支持：陆闰震、张富峰、谭有波</span>
        <span><span class="blue-mark">•</span>产品需求：徐阳</span>
        <span class="blue-mark">•微信群二维码</span><img src="https://mall.zhaijieshi.cc/file/jzmall/storage/1ahqc2crdmo8dy218uga.png" style="margin:20px" width="150px"></img>
      </div>
       <!-- <el-input type="textarea" :rows="4"  placeholder="请输入您要反馈的内容"></el-input>
       <el-button type="info" size="small" style="margin: 5px 0;float:right"  @click="handleQuery">反馈</el-button> -->

      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/utils/date";
import { latestVersion } from "@/api/version";

export default {
  components: {},
  data() {
    return {
      today: formatDate(new Date(), "yyyy-MM-dd"),
      list: [],
      deving: [], //开发中
      com: [], //完成
      bugs:[],//bug
      notices:[],//公告 
    };
  },
  created() {
  },
  mounted(){ 
    this.getList();
  },
  methods: {
    getList() {
      if(this.list.length>0||this.$store.state.user.isIndexNoticeLoaded) return; 
      this.$store.commit('SET_NOTICE_LOADED', true);
      latestVersion().then((res) => {
        this.list = res.data.data;
        this.deving = this.list.filter((item) => item.status == 1&&item.sysType!='Bug修复'&&item.sysType!='首页公告');
        this.com = this.list.filter((item) => item.status == 0&&item.sysType!='首页公告');
        this.bugs = this.list.filter((item) => item.status == 1&&item.sysType=='Bug修复');
        this.notices = this.list.filter((item) => item.status == 0&&item.sysType=='首页公告');
      });
    },
    btnManual(item) {
      window.open(item.manualUrl, "_blank");
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.div-line{
  margin: 10px 0px 10px; 
  border-top: 1px dashed rgb(227, 218, 218)
}
.log-content{
  display: flex; 
  font-size: 13px; 
  line-height: 18px;
  flex-direction: column;
}
.manual { 
      color: #73b9db;
    font-size: 12px;
    margin-right: 10px;
    cursor: pointer;
    margin-left: 30px;
    margin-top: 10px;
}
.blue-mark {
  color: blue;
  font-size: 15px;
  font-weight: 800;
  padding: 0 8px 0 5px;
}
.items {
  width: 30%;
  height: 100%;
  background-color: rgb(250, 250, 251);
}
.title {
  background-color: #dbc8fd;
  line-height: 30px;
  border-radius: 5px;
  padding: 5px 10px;
  margin-bottom: 20px;
  color: #245bdb;
  font-weight: 600;
}

.bg-notice{
  background-color:  #e7dff6 !important;
  color: #413737 !important;
  margin-bottom: 10px;
}

.bg-feelback{
  background-color:  #f8f3e9 !important;
  margin-bottom: 10px;
}

.title-r{
  margin-right: 0px;
   color: #de7802;
    background-color:#ece3d1
}

.log-title {
  color: #245bdb;
  font-weight: 600;
  padding-bottom: 10px;
}
</style>
