<template>

    <div class="content">
      <div>
        <div class="header" style="height: 60px; ">
          <div class="leftPanel">
            <span>Hi, {{ user.loginName }}</span>
          </div>
  
          <div class="rightPanel" @click="goToVersion">
            <div style="margin-top: 10px;margin-right: 8px;">
              当前版本<br />
              {{ newestVersion }}
            </div>
            <div style="margin-top: 3px;">
              <span class="iconfont icon-history" style="color: #b2d6fe; font-size:37px;font-weight: lighter;"></span>
            </div>
          </div>
        </div>
  
      </div>
      <div class="myProject">
        <div class="textContent">
          <div class="myProjectText">
            我的项目
          </div>
          <div class="helpText" @click="goToHelp">
            帮助文档
          </div>
        </div>
        <div class="cardPanel">
          <div class="projectCard" v-for="item in dataSource" @click="goToProjectManger">
            <div>
              <ul>
                <li>项目名称:{{ item.projectName }}</li>
                <li>项目版本号:{{ item.version }}</li>
                <li>操作人:{{ item.operator.loginName }}</li>
                <li>操作时间:{{ formatTime(item.operator.updateTime) }}</li>
              </ul>
            </div>
            <div class="iconEnter">
              <!-- 图标 -->
              <div style="transform: rotate(90deg);line-height: 48px;display: inline-block;margin-top: 15px;">
                <span class="iconfont icon-upload" style="font-size: 48px;font-weight: bolder;color:#b2d6fe;"></span>
              </div>
            </div>
          </div>
          <div style="position:relative;width: 100px;">
            <div class="seeMore" @click="goToProjectManger" v-show="dataSource.length > 0">
              查看更多...
            </div>
          </div>
  
        </div>
  
      </div>
  
      <div class="problemContent">
        <div class="textContent">
          常见问题
        </div>
        <div class="searchProblem">
          <div class="searchExpand">
            <div style="margin-bottom:5px">
              <a-select :options="searchOptions" show-search v-model="searchProblem" placeholder="请输入要搜索的问题"
                style="width: 100%" @change="handleChange" option-filter-prop="children"
                :filter-option="filterOption">
              </a-select>
            </div>
            <a-collapse>
              <a-collapse-panel :key="index" :header="name" v-for="(item, name, index) in problemData">
                <p @click="getDetail(i)" v-for="(i, index) in item">{{ i.questionName }}</p>
              </a-collapse-panel>
            </a-collapse>
          </div>
  
          <div class="problemDetail">
            <div class="problemDetails">
              常见问题 {{ question.questionDescription }}
            </div>
            <div class="problemDescribe">
              <span style="font-weight: bolder;">解决方法</span>
              <div v-html="question.questionAnswer"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  
  </template>
  
  <script>
  import { manageProjectList, getProblemList, getVersionList } from '../../packages/api/manage'
  import { time } from '../../packages/utils/time'
  import moment from 'moment'
  import { timeFix } from '../../packages/utils/util'
  import { mapState } from 'vuex'
  import '../../static/icons2/iconfont.css'
  
  export default {
    name: 'Analysis',
    components: {
    },
    data() {
      return {
        timeFix: timeFix(),
        user: {},
        version: 3.0,
        dailyMonth: true,
        mode: ['month', 'month'],
        monthRange: [moment(), moment()],
        monthPick: moment(),
        favorLists: [],
        noticeLists1: [],
        noticeLists2: [],
        loading: true,
        height: null,
        dataSource: {},
        problemData: {},
        question: {
          questionDescription: '请选择相关问题进行查看',
          questionAnswer: '请选择相关问题进行查看'
        },
        searchProblem: '',
        searchOptions: [],
        searchFilterOptions: [],
        searchDatasource: {},
        newestVersion: "1.0.0"
      }
    },
    created() {
      this.user = this.userInfo
      this.height = window.innerHeight - 100
      this.getData()
      this.getProblem()
      this.handleSearchNewestVersion()
    },
    mounted() {
    },
    computed: {
      ...mapState({
        nickname: (state) => state.user.nickname,
        welcome: (state) => state.user.welcome
      }),
      userInfo() {
        return this.$store.getters.userInfo
      },
      datePick() {
        const endofMonth = moment(this.monthPick).endOf('month').format('DD')
        const selectMonth = this.monthPick.format('YYYY-MM')
        const pickMonth = []
        pickMonth.push(`${selectMonth}-01 00:00:00`)
        pickMonth.push(`${selectMonth}-${endofMonth} 23:59:59`)
        return pickMonth
      },
      dateRange() {
        const endofMonth = moment(this.monthRange[1]).endOf('month').format('DD')
        const startMonth = this.monthRange[0].format('YYYY-MM')
        const endMonth = this.monthRange[1].format('YYYY-MM')
        const pickMonth = []
        pickMonth.push(`${startMonth}-01 00:00:00`)
        pickMonth.push(`${endMonth}-${endofMonth} 23:59:59`)
        return pickMonth
      },
      show() {
        return process.env.NODE_ENV !== 'test'
      },
  
    },
    methods: {
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      // 查询最新版本
      handleSearchNewestVersion() {
        getVersionList({ pageNum: 1, pageSize: 100, versionName: '' }).then(res => {
          this.newestVersion = res.result.data[res.result.data.length - 1].versionName
        })
      },
      handleChange(e) {
        this.searchDatasource.map((item, index) => {
          if (item.questionId === e) {
            this.question.questionDescription = item.questionDescription
            this.question.questionAnswer = item.questionAnswer
          }
        })
      },
      getDetail(item) {
        this.question.questionDescription = item.questionDescription
        this.question.questionAnswer = item.questionAnswer
      },
      getProblem(pageNum = 1, pageSize = 100, questionName = '', questionCategory = '') {
        getProblemList({ pageNum: pageNum, pageSize: pageSize, questionName: questionName, questionCategory: questionCategory }).then((res) => {
          let result = res.result.data
          this.searchDatasource = result
          let options = []
          result.map((item, index) => {
            options.push({ label: item.questionName, value: item.questionId })
          })
          this.searchOptions = options
          this.searchFilterOptions = options
          let category = []
          let dataResolve = {}
  
          result.map((item, index) => {
            if (category.includes(item.questionCategory)) {
              dataResolve[item.questionCategory].push(item)
            } else {
              category.push(item.questionCategory)
              dataResolve[item.questionCategory] = []
              dataResolve[item.questionCategory].push(item)
  
            }
          })
          this.problemData = dataResolve
  
        })
      },
      getData(pageNum = 1, pageSize = 3, projectName = '') {
        manageProjectList({ pageNum: pageNum, pageSize: pageSize, projectName: projectName }).then((res) => {
          let result = res.result.data
          this.dataSource = result
        })
      },
      formatTime(val) {
        return time.formatTime(val, "yyyy/MM/dd")
      },
      goToHelp() {
        this.$router.push({
          name: 'problem-detail'
        });
      },
      goToProjectManger() {
        this.$router.push({
          name: 'gen-project-manage',
  
        });
      },
      goToVersion() {
        this.$router.push({
          name: 'version-detail',
  
        });
      },
      // ..............................
      startLoading() {
        this.loading = true
      },
      stopLoading() {
        this.loading = false
      },
      handlePanelChange(value, mode) {
        this.monthRange = value
        this.mode = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]]
      },
      dailyUpdate() {
        this.dailyMonth = true
      },
      monthUpdate() {
        this.dailyMonth = false
      },
      goPage(favor) {
        this.$router.push({
          path: favor.tailInfos.tUmResource.webUrl
        })
      }
    }
  }
  </script>
  <style lang="less" scoped>
  @import './dashboard/Workplace.less';
  
  .card-content {
    display: inline-block;
    flex: 1;
    margin: 5px 10px;
    height: 100%;
  }
  
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;
    font-size: 12px;
  
    .extra-item {
      display: inline-block;
      margin-right: 24px;
  
      a {
        margin-left: 24px;
      }
    }
  }
  
  .content-item {
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    width: 80px;
    height: 100px;
    margin: 18px;
    border-radius: 4px;
    background: #fff;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
  }
  
  .content-item-icon {
    display: inline-block;
    width: 42px;
    height: 42px;
    margin-bottom: 16px;
    border-radius: 8px;
  }
  
  .content-item-name {
    width: 100%;
    margin: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 20px;
  }
  
  .notice-button {
    margin-top: 10px;
    float: right;
  }
  
  // -------------------------------
  
  p {
    padding: 10px 0 10px 10px;
    margin: 0;
    border-radius: 5px;
  }
  
  p:hover {
    background-color: #e6f7ff;
  }
  
  .problemContent .searchProblem .problemDetail .problemDescribe {
    height: 100%;
    background-color: #fafafa;
    margin: 5px 10px;
    padding-left: 10px;
    padding-top: 10px;
    overflow: scroll;
    height: 500px;
    border-radius: 7px;
  
  
  }
  
  .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: 70px;
    margin: 10px 10px;
    background-color: #fafafa;
    line-height: 30px;
    padding-left: 10px;
    font-weight: bolder;
    overflow: hidden;
    border-radius: 7px;
  }
  
  .problemContent .searchProblem .searchExpand {
    width: 300px;
    height: 100%;
    padding: 5px;
    overflow: scroll;
  }
  
  .problemContent .searchProblem {
    height: 350px;
  }
  
  .problemContent {
    padding-left: 50px;
    padding-right: 50px;
    color: #134495;
  
  }
  
  .problemContent .textContent {
    height: 40px;
    font-size: 24px;
    font-weight: bolder;
  
  }
  
  .myProject {
    padding-left: 50px;
    padding-right: 50px;
    color: #134495;
  }
  
  .myProject .textContent {
    height: 30px;
    margin-top: 10px;
    font-weight: bolder;
  }
  
  .myProject .textContent .myProjectText {
    float: left;
    font-size: 24px;
  }
  
  .myProject .helpText {
    float: right;
  }
  
  .myProject .cardPanel {
    display: flex;
    margin-top: 20px;
    position: relative;
  
  }
  
  .myProject .cardPanel .seeMore {
    position: absolute;
    bottom: 0;
    right: 0;
    top: 100px;
  }
  
  .header {
    position: relative;
    color: #134495;
  
  }
  
  .header .leftPanel {
    position: absolute;
    left: 0;
    top: 0;
    padding-left: 50px;
    font-size: 36px;
    font-weight: bolder;
  
  }
  
  .myProject .cardPanel .projectCard {
    width: 300px;
    height: 120px;
    display: flex;
    padding-top: 15px;
    margin-bottom: 20px;
    box-shadow: 1px 1px 5px 0px #b2d6fe;
    border-radius: 7px;
    overflow: hidden;
    position: relative;
  
  }
  
  .myProject .cardPanel .projectCard:not(:first-child) {
    margin-left: 40px;
  }
  
  .myProject .cardPanel .projectCard ul {
    display: inline-block;
    margin: auto;
  
  
  }
  
  .myProject .cardPanel .projectCard ul li {
    text-decoration: none;
    list-style: none;
    margin-top: 2px;
  }
  
  .header .rightPanel {
    /* border: 1px solid red; */
    position: absolute;
    right: 30px;
    top: 0;
    display: flex;
    font-weight: bolder;
  
  }
  
  .myProject .cardPanel .iconEnter {
    height: 100%;
    /* border: 1px solid red; */
    width: 20%;
    position: absolute;
    right: 20px;
    top: 20px;
    // margin-top: 20px;
  }
  
  .content {
    background-color: white;
    // border: 1px solid red;
    // padding-bottom: 100px;
  }
  
  /deep/ .ant-collapse-item {
    background-color: white;
  }
  </style>
  