<template>
  <div class="content">
    <div>
      <div class="header" style="height: 60px; ">
        <div class="leftPanel">
          <span>Hi {{ user.loginName }}</span>
        </div>

        <div class="rightPanel">
          <div style="margin-top: 5px;margin-right: 8px;">
            当前版本<br />
            {{ newestVersion }}
          </div>
          <div>
            <span class="iconfont icon-history" style="color: #b2d6fe; font-size:37px;font-weight: lighter;"></span>
          </div>
        </div>
      </div>

    </div>


    <div class="problemContent">
      <div class="textContent">
        版本详情
      </div>
      <div class="searchProblem">
        <div class="searchExpand">
          <a-select :options="searchOptions" show-search placeholder="请输入要查询的平台版本" style="width: 100%"
            @change="handleChange" option-filter-prop="children" :filter-option="filterOption">
          </a-select>
          <a-collapse>
            <a-collapse-panel :key="index" :header="item.versionName" v-for="(item, index) in dataSource">
              <p @click="getDetails(item)">{{ item.versionDescription }}</p>
            </a-collapse-panel>

          </a-collapse>
        </div>

        <div class="problemDetail">

          <div class="problemDescribe">
            <span style="font-weight: bolder;">版本描述</span>
            <div v-html="version.versionContent"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { getVersionList } from '../../../packages/api/manage'
import { time } from '../../../packages/utils/time'
import '../../../static/icons2/iconfont.css'

export default {
  name: 'Version',
  components: {
  },
  data() {
    return {
      user: {},
      dataSource: [],
      version: {
        versionContent: '请选择版本查看相关说明'
      },
      searchOptions: [],
      searchFilterOptions: [],
      newestVersion: "1.0.0"


    }
  },
  created() {
    this.user = this.userInfo
    this.getData()
  },
  mounted() {
  },
  computed: {

    userInfo() {
      return this.$store.getters.userInfo
    },


  },
  methods: {
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    handleSearch(e) {
      this.searchOptions = this.searchFilterOptions.filter((item, index) => {
        return item.label.includes(e)
      })
    },
    handleChange(e) {
      this.dataSource.map((item, index) => {
        if (e === item.versionId) {
          this.version.versionContent = item.versionContent

        }
      })
    },
    getDetails(item) {
      this.version.versionContent = item.versionContent
    },
    // 数据请求
    getData(pageNum = 1, pageSize = 100, versionName = '') {
      getVersionList({ pageNum: pageNum, pageSize: pageSize, versionName: versionName }).then((res) => {
        let result = res.result.data
        this.newestVersion = res.result.data[res.result.data.length - 1].versionName

        let options = []
        result.map((item, index) => {
          options.push({ label: item.versionName, value: item.versionId })
        })
        this.searchFilterOptions = options
        this.searchOptions = options
        this.dataSource = result


      })
    },
    // 格式化
    formatTime(val) {
      return time.formatTime(val, "yyyy/MM/dd")
    },
    // 跳转
    goToHelp() {
      this.$router.push({
        path: 'problem',

      });
    },
    // 跳转
    goToProjectManger() {
      this.$router.push({
        name: 'ProjectManage',

      });
    },

  }
}
</script>
  <style lang="less" scoped>
  p {
    padding: 10px 0 10px 10px;
    margin: 0;
    border-radius: 5px;
  }
  
  p:hover {
    background-color: #e6f7ff;
  }
  
  .problemContent .searchProblem .problemDetail .problemDescribe {
    background-color: #fafafa;
    margin: 10px 10px;
    padding-left: 10px;
    padding-top: 10px;
    overflow: scroll;
    height: 500px;
  
  }
  
  .problemContent .searchProblem {
    color: black;
    display: flex;
    box-shadow: 1px 1px 5px 0px rgba(178, 214, 254);
    border-radius: 7px;
  }
  
  .problemContent .searchProblem .problemDetail {
  
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  
  }
  
  .problemContent .searchProblem .problemDetails {
    height: 50px;
    margin: 10px 10px;
    background-color: #fafafa;
    line-height: 50px;
    padding-left: 10px;
    font-weight: bolder;
  }
  
  .problemContent .searchProblem .searchExpand {
    width: 300px;
    height: 100%;
  }
  
  .problemContent .searchProblem {
    height: 530px;
  }
  
  .problemContent {
    padding-left: 50px;
    padding-right: 50px;
    color: #134495;
  }
  
  .problemContent .textContent {
    height: 60px;
    font-size: 24px;
    font-weight: bolder;
    line-height: 60px;
  
  }
  
  .header {
    position: relative;
    color: #134495;
  
  }
  
  .header .leftPanel {
    position: absolute;
    left: 0;
    top: 0;
    padding-left: 50px;
    font-size: 36px;
    font-weight: bolder;
  
  }
  
  .header .rightPanel {
    position: absolute;
    right: 30px;
    top: 0;
    display: flex;
    font-weight: bolder;
  
  }
  
  .content {
    background-color: white;
  }
  
  /deep/ .ant-collapse-item {
    background-color: white;
  }
  </style>
  