<template>
<div class="help-info">
  <Card v-if="helpCategoryNameList.length==0" class="help-tips">
    <p class="tips-info">暂无数据~</p>
  </Card>
  <Card v-else style="min-height:90%">
    <div style="text-align:center;margin:20px 0">
      <Input v-model="keyWord" placeholder="请输入检索关键字" style="width: 400px" search @on-search="searchHelpInfo"/>
    </div>
    <div class="main-page">
      <Row>
        <Col span="8">
            <Menu :theme="theme2"
              :active-name="helpCategoryNameList[0].infoList[0].infoId"
              :open-names="[helpCategoryNameList[0].helpCategoryName]"
              @on-select="changeMenu"
            >
                <Submenu
                :name="name_item.helpCategoryName"
                v-for="(name_item,i) in helpCategoryNameList"
                :key="i">
                    <template slot="title">
                      {{name_item.helpCategoryName}}
                    </template>
                    <MenuItem
                    :name="title_item.infoId"
                    v-for="(title_item,i) in name_item.infoList"
                    :key="i"
                    >{{title_item.title}}</MenuItem>
                </Submenu>
            </Menu>
        </Col>
      </Row>
      <br>
      <div class="operation-info">
        <ul v-for="(item_detail,i) in detilList" :key="i">
          <help-info :infoDetail="item_detail" @listInfo="listInfo"></help-info>
        </ul>
      </div>
    </div>
  </Card>
</div>

</template>
<script>
import HelpInfo from './help-info'
export default {
  components: {
    HelpInfo
  },
  data () {
    return {
      theme2: 'light',
      category: {
        pageNum: '',
        pageSize: ''
      },
      keyWord: '',
      helpCategoryNameList: [],
      titleList: [],
      detilList: [],
      isHide: true
    }
  },
  methods: {
    searchHelpInfo () {
      let { keyWord } = this
      this.detilList = []
      this.api({
        apiName: 'helpInfoList',
        postdata: { keyWord },
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          res.data.forEach(item => {
            item.infoList.forEach(itemb => {
              this.detilList.push(itemb)
            })
          })
        }
      })
    },
    changeMenu (infoId) {
      this.detilList = []
      this.api({
        apiName: 'searchInfoId',
        postdata: infoId,
        success: (res) => {
          this.detilList.push(res.data)
        }
      })
    },
    listInfo () {
      this.detilList = []
      this.api({
        apiName: 'helpInfoList',
        postdata: this.keyWord,
        complete: () => {
          // this.loading = false
        },
        success: (res) => {
          if (res.data.length != 0) {
            this.helpCategoryNameList = res.data
            this.detilList.push(res.data[0].infoList[0])
          }
        }
      })
    }
  },
  created () {
    this.listInfo()
  }
}
</script>
<style scoped lang="less">
  .help-info{
    width: 100%;
    height:100%;
    position: relative;
    .help-tips{
      min-height:90%;
      .tips-info{
        font-size: 25px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }
    }
    .main-page{
      width: 100%;
      display: flex;
      // justify-content:space-around;
      .operation-info{
        width: 60%;
        .operation-main-title{
          margin: 20px 0;
          width: 100%;
          display: flex;
          justify-content:space-between;
          .info-title{
            font-size: 25px;
            line-height: 30px;
            font-weight:800;
          }
          // .btn{
          //   width: 28%;
          //   display: flex;
          //   justify-content:space-between;
          // }
        }
      }
      .operation-main-info{
        width: 100%;
        word-break: break-all;
        overflow: hidden;
        white-space:normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        height: 80px;
      }
    }
  }
</style>
