<template>
  <ul class="consult">
    <li v-for="(item, index) in changeHistory" :key="index" class="consult-item">
      <template v-if="item.type === 1">
        <div class="consult-top">
          <div class="consult-top-avatar">
            <cr-image width="100%" height="100%" :src="item.avatar" />
          </div>
          <div class="consult-top-right">
            <div class="consult-top-right__title">{{ item.nickName }}</div>
            <div class="consult-top-right__time">{{ parseTime(item.changeTime) }}</div>
          </div>
        </div>
        <div class="consult-bottom">{{ item.content }}</div>
      </template>
      <template v-else>
        <div class="consult-item-title">{{ item.titleText }}</div>
        <div v-for="(cItem, cIndex) in item.items" :key="cIndex">
          <div v-if="cItem.itemType === 1" class="consult-item-block">
            <span>{{ cItem.text }}</span>
          </div>
          <div v-else-if="cItem.itemType === 2" class="consult-item-img">
            <div v-for="(img, ind) in cItem.images" :key="ind" class="consult-item-img__image">
              <cr-image width="100%" height="100%" fit="cover" :src="img" />
            </div>
          </div>
        </div>
      </template>
    </li>
  </ul>
</template>

<script>
import { parseTime } from '@/service/utils.service';
import orderApi from '@/api/order.api';
export default {
  data() {
    return {
      changeHistory: [],
      changeConfig: {
        goodsStatusText: '货物状态',
        applyReasonName: '退款原因',
        refundAmount: '退款金额',
        applyCount: '退款份数',
        refundMethodInfo: '退款方式',
        remark: '退款说明'
      }
    };
  },
  async created() {
    const serviceNo = this.$route.params.serviceNo;
    const [res, error] = await orderApi.afterV2ChangeHistory({ serviceNo });
    if (!error) {
      this.changeHistory = res?.changeHistory || [];
      console.log(res);
    }
  },
  methods: {
    parseTime
  }
};
</script>
<style lang="less" scoped>
.consult {
  .text-size(14);
  color: @black;
  padding: 12px;
  box-sizing: border-box;

  &-top {
    display: flex;
    align-items: center;
    &-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      overflow: hidden;
    }
    &-right {
      flex: 1;
      padding-left: 5px;
      box-sizing: border-box;
      &__time {
        color: @gray-4;
        .text-size(12);
      }
    }
  }

  &-bottom {
    margin-top: 8px;
  }

  &-item {
    padding: 12px;
    box-sizing: border-box;
    background-color: @white;
    border-radius: 8px;
    margin-bottom: 12px;

    &-title {
      font-weight: bold;
      padding-bottom: 4px;
    }
    &-block {
      display: flex;
      // padding-top: 10px;
      line-height: 20px;
      &__label {
        display: inline-block;
        // width: 100px;
      }
      &__value {
        flex: 1;
      }
    }
    &-img {
      display: flex;
      flex-wrap: wrap;
      &__image {
        width: 77px;
        height: 77px;
        margin-right: 4px;
        margin-top: 8px;
      }
    }
  }
}
</style>
