<template>
  <div class="help">
    <div class="help-wrapper help-tip">
      <div class="help-title">温馨提示</div>
      <div v-for="(tipItem, tipIndex) in tipList" :key="tipIndex" class="help-tip-content">
        <div class="help-tip-content-label">{{ tipItem.title }}</div>
        <div
          v-for="(childItem, childIndex) in tipItem.content"
          :key="childIndex"
          class="help-tip-content-value"
        >
          {{ childItem }}
        </div>
      </div>
    </div>
    <div class="help-wrapper help-list">
      <div class="help-title">常见问题</div>
      <cr-cell-group>
        <cr-cell
          v-for="(item, index) in helpList"
          :key="index"
          :title="item.title"
          is-link
          @click="goHelpDetail(item)"
          @right-click="goHelpDetail(item)"
        />
      </cr-cell-group>
    </div>
  </div>
</template>
<script>
import api from '@/api/receipts';
export default {
  data() {
    return {
      tipList: [],
      helpList: {}
    };
  },
  async beforeRouteEnter(to, from, next) {
    const [res, error] = await api.userInoviceHelpQuery();
    if (!error) {
      next(vm => {
        vm.helpList = res.helpList;
        vm.tipList = res.tipList;
      });
    } else {
      next('/404');
    }
  },
  created() {
    // this.userInoviceHelpQuery();
  },
  methods: {
    async userInoviceHelpQuery() {
      const [res, error] = await api.userInoviceHelpQuery();
      if (!error) {
        this.helpList = res.helpList;
        this.tipList = res.tipList;
      }
    },
    goHelpDetail(item) {
      this.$router.push({
        name: 'InvoiceHelpDetail',
        params: item
      });
    }
  }
};
</script>
<style lang="less" scoped>
.help {
  &-title {
    .text-size(14);
    font-weight: bold;
    padding: 5px 0 5px 10px;
    // padding-top: 5px;
    // padding-bottom: 5px;
  }
  &-wrapper {
    padding-top: 10px;
    background-color: @white;
  }
  &-tip {
    min-height: 270px;
    border-radius: 0 0 10px 10px;
    &-content {
      .text-size(13);
      padding: 5px 10px;
    }
  }
  &-list {
    margin-top: 10px;
    border-radius: 5px 5px 0 0;
    min-height: 500px;

    @{deep} .cr-cell {
      .text-size(12);
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
  // &-container {
  //   padding: 10px;
  //   .text-size(14);
  //   color: @black;
  //   background-color: @white;
  // }
  // &-li {
  //   line-height: 44px;
  //   border-bottom: solid #ededed 1px;
  //   &:last-child {
  //     border-bottom: none;
  //   }
  // }
}
</style>
