<template>
  <div class="recorde-contian bg-f4f5f6" :style="{'min-height': $store.state.bodyH + 'px'}">
    <div class="list-contian">
      <van-list
        v-if="!!list.length"
        v-model="loading"
        :finished="finished"
        finished-text=" "
        @load="onLoad">
        <div class="recorde-list-cell bg-fff border-box" v-for="(item,index) in list" :key="index+item.storeName">
          <div
            class="recorde-list-cell_title flex flex-align-center font-12 border-bottom-1 padding-lr-12 border-box">
            <div class="recorde-list-cell_txt w-0 flex-1"><van-icon name="shop-o" class="m-r-4" />{{ item.storeName }}</div>
          </div>
          <div class="recorde-list-cell_list" v-for="(childItem,key) in item.goodsList" :key="key">
            <div class="flex border-box padding-lr-12 p-t-10">
              <div class="recorde-list-cell_left flex-1">
                <div class="list-cell_left_name font-12 color-232326">{{ childItem.goodsName }}</div>
              </div>
              <div class="recorde-list-cell_right flex-1 text-right">
                <div class="list-cell_right_num font-13 color-232326 ">{{ childItem.newPrice }}</div>
                <div class="list-cell_right_num font-13 color-848689 "><s>{{ childItem.oldPrice }}</s></div>
              </div>
            </div>
            <div class="recorde-list-cell_sku flex flex-align-center border-bottom-1 border-box padding-lr-12">
              <div class="flex-1 font-12 color-848689"><span>颜色分类: {{ childItem.color }} </span> <span class="p-l-8"> 尺码: {{ childItem.size }}</span></div>
              <div class="flex-1 font-12 color-848689 text-right"><van-icon name="cross"></van-icon>{{ childItem.goodsNum}}</div>
            </div>
          </div>
          <div class="recorde-list-cell_sub flex flex-align-center border-box padding-lr-12">
            <div class="list-cell_sub_date flex-1 font-12 color-232326">{{ item.date }} 购买</div>
            <div class="list-cell_sub_all flex-1 font-12 color-232326 text-right">共{{ item.goodsNum }}件商品 实付款: {{ item.priceAll }}</div>
          </div>
        </div>
      </van-list>
    </div>
    <div class="no-recorde-data no-data-contain" v-if="!list.length">
      <img src="../../assets/images/store-record-null-icon.png" alt="record-no-data"/>
      <p class="font-16 color-848689">暂无消费记录</p>
    </div>
  </div>
</template>

<script>
import { List, Icon  } from 'vant';
import { getRecordData } from '@/api/record.js';
export default {
  name: "record",
  components: {
    [List.name]: List,
    [Icon.name]: Icon
  },

  data() {
    return {
      list: [
         {
          storeName: 'MG江苏南京秦淮区大洋百货新街口店(MATERIAL GIRL)333333',
          goodsList: [
            {
              goodsName: '哥斯拉加厚白色鸭绒羽绒服女中长款2018冬装新款绿连帽外套太平鸟333333',
              newPrice: '1059.99',
              oldPrice: '1899.00',
              color: '元气绿',
              size: 'M',
              goodsNum: '1'
            },
            {
              goodsName: '哥斯拉加厚白色鸭绒羽绒服女中长款2018冬装新款绿连帽外套太平鸟333333',
              newPrice: '1059.99',
              oldPrice: '1899.00',
              color: '元气绿',
              size: 'M',
              goodsNum: '1'
            }
          ],
          date: '2018-12-06',
          goodsNum: '1',
          priceAll: '12345.90'
        },
        {
          storeName: 'MG江苏南京秦淮区大洋百货新街口店(MATERIAL GIRL)333333',
          goodsList: [
            {
              goodsName: '哥斯拉加厚白色鸭绒羽绒服女中长款2018冬装新款绿连帽外套太平鸟333333',
              newPrice: '1059.99',
              oldPrice: '1899.00',
              color: '元气绿',
              size: 'M',
              goodsNum: '1'
            },
            {
              goodsName: '哥斯拉加厚白色鸭绒羽绒服女中长款2018冬装新款绿连帽外套太平鸟333333',
              newPrice: '1059.99',
              oldPrice: '1899.00',
              color: '元气绿',
              size: 'M',
              goodsNum: '1'
            }
          ],
          date: '2018-12-06',
          goodsNum: '1',
          priceAll: '12345.90'
        }
      ],
      loading: false,
      finished: false
    };
  },

  computed: {

  },

  methods: {
    onLoad() {
      const that = this;
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          // this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        that.loading = false;

        // 数据全部加载完成
        if (that.list.length >=1) {
          that.finished = true;
        }
      }, 500);
    },

    /**
     * 获取消费记录数据
     */
    async getData() {
      const that = this;
      let resData = await getRecordData();
      if (resData.errorCode == 1) {
        that.list = resData;
      }
    }
  }
};
</script>

<style lang="less" scoped>

.recorde-list-cell {
  &+.recorde-list-cell {
    margin-top: 10px;
  }
}
.recorde-list-cell_title {
  width: 100%;
  height: 42px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

  .van-icon-shop-o {
    vertical-align: -1px;
  }

  .recorde-list-cell_txt {

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

.recorde-list-cell_sub {
  height: 42px;
}

.recorde-list-cell_left {
  min-width: 70%;
  .list-cell_left_name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    word-break: break-all;
    overflow: hidden;
  }
}

.recorde-list-cell_sku {
  height: 42px;
}

.van-icon-cross {
  vertical-align: -2px;
}

</style>
