<template>
  <div class="help-detail">
    <div class="help-detail-container">
      <div class="help-detail-title">{{ title }}</div>
      <div v-if="contentText" class="help-detail-content" v-html="contentText" />
      <ul v-if="contentList.length" class="help-detail-list">
        <li v-for="(ctxItem, ctxIndex) in contentList" :key="ctxIndex" class="help-detail-list__li">
          {{ ctxIndex + 1 }}、<span v-html="ctxItem" />
        </li>
      </ul>

      <dl v-if="remarks" class="help-detail-remark">
        <dt class="help-detail-remark__label">注：</dt>
        <dd class="help-detail-remark__value">{{ remarks }}</dd>
      </dl>
    </div>
    <div class="help-detail-footer">
      <span class="help-detail-footer__text">没有解决您的问题？</span>
      <a class="help-detail-footer__customer" @click="goCustomer">联系客服</a>
    </div>
  </div>
</template>

<script>
import api from '@/api/receipts';
import customerMixin from '../mixins/customer.mixin';
export default {
  mixins: [customerMixin],
  data() {
    return {
      title: '',
      contentText: null,
      contentList: [],
      remarks: '',
      account: ''
    };
  },
  created() {
    console.log(this.$route.params);
    // this.userInoviceHelpQuery();
    const helpItem = this.$route.params;
    this.filterHelpItem(helpItem);
  },
  methods: {
    async userInoviceHelpQuery() {
      const [res, error] = await api.userInoviceHelpQuery();
      if (!error) {
        this.filterHelpItem(res);
      }
    },
    filterHelpItem(helpItem) {
      // const helpItem = helpConfig[this.$route.query.id];
      if (helpItem) {
        this.title = helpItem.title;
        this.remarks = helpItem.remarks;
        if (typeof helpItem.content === 'string') {
          this.contentText = helpItem.content;
        } else {
          this.contentList = helpItem.content;
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
.help-detail {
  padding: 10px;
  min-height: 400px;
  background-color: @white;
  display: flex;
  flex-direction: column;

  a {
    color: @font-color-spec !important; // #4288fb;
  }
  &-container {
    flex: 1;
  }

  &-title {
    .text-size(18);
    font-weight: bold;
    padding: 15px 0;
  }
  &-content {
    text-indent: 2em;
    padding: 0 10px;
    // color: @gray-4;
    .text-size(14);
  }

  &-list {
    padding: 0 10px;
    .text-size(14);
    &__li {
      margin-bottom: 5px;
    }
  }

  &-remark {
    .text-size(14);
    padding: 0 10px;
    &__label {
      font-weight: bold;
      line-height: 40px;
    }
  }

  &-footer {
    .text-size(12);
    padding: 40px 0;
    text-align: center;
    &__text {
      color: @gray-4;
    }
    &__customer {
      .text-size(12);
    }
  }
}
</style>
