<template>
  <div class="recorde-contian bg-f4f5f6" :style="{'min-height': $store.state.bodyH + 'px'}">
    <div class="list-contian">
      <van-list
        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">颜色分类：{{ childItem.color }}   尺码：{{ childItem.size }}</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">
      <i class="font_family icon-mendianxiaofeijiluweikong font-50 color-606266"></i>
      <p class="font-14 color-303133">门店消费记录为空</p>
    </div>
  </div>
</template>

<script>
import { List, Icon  } from 'vant';
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);
    }
  }
};
</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>
