<template>
  <div class="orderItem h100">
    <div class="list-amount">
          共<span class="red-tips">25</span>条订单信息
      </div>
    <div class="datalist">
      <van-pull-refresh
      v-model="isRefreshing"
      @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad">
          <p style="font-weight: 600" class="text-center font14 commonTotal">
                20027/(2351089)莆田学院附属医院
          </p>
          <div v-for="(item, index) in datalists" :key="index" @click="itemClick(index)">
            <div class="content pos-relative" :class="{'active': chooseIndex === index}">
<!--              <van-row class="w100 font14" style="margin-bottom: 16px;">-->
<!--                <van-col span="8" style="font-weight: 600;">序号：{{index+1}}</van-col>-->
<!--                <van-col span="15" style="text-align: right;color:#1989fa;">-->
<!--                  <span>查看商品信息</span>-->
<!--                </van-col>-->
<!--                <van-col span="1" style="text-align: right;color:#1989fa;">-->
<!--                  <van-icon class="rightIcon" name="arrow" />-->
<!--                </van-col>-->
<!--              </van-row>-->
              <div class="w100 font16 " style="margin-bottom: 16px;display: flex;align-items: center;height: 22px">
                <div span="15" style="font-weight: 600;flex: 1">序号：{{index+1}}</div>
                <span style="text-align: right;color:#1989fa;">查看商品信息</span>
                <van-icon size="20px" style="line-height: 22px;" color="#1989fa" name="arrow" />
              </div>
              <van-row class="w100 font14" style="height: 22px;line-height: 22px">
                <van-col span="8">SAP订单编号:</van-col>
                <van-col span="16">
                  102201912020056
                </van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8" style="height: 22px;line-height: 22px">
                <van-col span="8">药厂订单编号:</van-col>
                <van-col span="16">
                  767646127487249821090
                </van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8">
                <van-col span="8">订单类型:</van-col>
                <van-col span="16">
                  正常订单
                </van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8">
                <van-col span="8">订单来源:</van-col>
                <van-col span="16">
                </van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8">
                <van-col span="8">收货地址:</van-col>
                <van-col span="16">
                  荔城区梅园东路181号、东圳东路999号
                </van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8">
                <van-col span="8">送货优先级:</van-col>
                <van-col span="16">
                正常
                </van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8">
                <van-col span="8">仓库信息:</van-col>
                <van-col span="16">
                202/民康公司普药库
                </van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8">
                <van-col span="8">订单明细行数:</van-col>
                <van-col span="16">
                25
                </van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8">
                <van-col span="8">含税金额:</van-col>
                <van-col span="16">
                39000.00 元
                </van-col>
              </van-row>
              <van-row class="w100 font14 margin-t8">
                <van-col span="8">无税金额:</van-col>
                <van-col span="16">
                35000.00 元
                </van-col>
              </van-row>
              <!-- <van-icon class="rightIcon" name="arrow" /> -->
              <van-button plain type="info" class="flowInfo" @click.stop="show = true; baseAttr = []; activeNames = []">
                物流信息
              </van-button>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <van-popup
      v-model="show"
      closeable
      close-icon-position="top-right"
      position="bottom"
      class="flex flex-column"
      :style="{ height: '100%' }">
      <p class="popTitle">物流信息</p>
      <div class="border"></div>
      <van-collapse v-model="baseAttr">
              <van-collapse-item title="20027/(2351089)莆田学院附属医院" name="1">
                <div class="">
                  <van-row class="w100 font14 margin-t5">
                    <van-col span="8">SAP订单编号 :</van-col>
                    <van-col span="16">
                      102201912020056
                    </van-col>
                  </van-row>
                  <van-row class="w100 font14 margin-t5">
                    <van-col span="8">药厂订单编号 :</van-col>
                    <van-col span="16">
                      2873647861837183461
                    </van-col>
                  </van-row>
                  <van-row class="w100 font14 margin-t5">
                    <van-col span="8">订单类型 :</van-col>
                    <van-col span="16">
                      正常订单
                    </van-col>
                  </van-row>
                  <van-row class="w100 font14 margin-t5">
                    <van-col span="8">订单来源:</van-col>
                    <van-col span="16">

                    </van-col>
                  </van-row>
                  <van-row class="w100 font14 margin-t5">
                    <van-col span="8">收货地址 :</van-col>
                    <van-col span="16">
                      荔城区梅园东路181号、东圳东路999号
                    </van-col>
                  </van-row>
                  <van-row class="w100 font14 margin-t5">
                    <van-col span="8">送货优先级 :</van-col>
                    <van-col span="16">
                      正常
                    </van-col>
                  </van-row>
                  <van-row class="w100 font14 margin-t5">
                    <van-col span="8">仓库信息 :</van-col>
                    <van-col span="16">
                      202/民康公司普药库
                    </van-col>
                  </van-row>
                  <van-row class="w100 font14 margin-t5">
                    <van-col span="8">订单明细行数:</van-col>
                    <van-col span="16">
                    25
                    </van-col>
                  </van-row>
                  <van-row class="w100 font14 margin-t5">
                    <van-col span="8">含税金额:</van-col>
                    <van-col span="16">
                    39000.00 元
                    </van-col>
                  </van-row>
                  <van-row class="w100 font14 margin-t5">
                    <van-col span="8">无税金额:</van-col>
                    <van-col span="16">
                    35000.00 元
                    </van-col>
                  </van-row>
                </div>
              </van-collapse-item>
      </van-collapse>
      <div class="list-amount font16 padding-16" style="background-color: #eeeeee;">
          共<span style="color: red;" class="red-tips">2</span>条发货单信息
      </div>
      <van-tabs
        :sticky="false"
        :swipeable="true"
        :swipe-threshold="5"
        :line-height="'2px'"
        class="flex1"
        :title-active-color="'#1989fa'">
        <van-tab v-for="(item, index) in tabslists"
          :key="index"
          :title="item.name">
          <div class="tab-list">
            <van-collapse v-model="activeNames">
              <van-collapse-item title="发货单信息" name="1" class="pos-relative">
                <van-row class="logisticsinfo">
                  <img class="img-card" style="left: 0;position: absolute;top: 0;bottom: 0;margin: auto;" src="@/assets/img/car.jpg"/>
                  <van-col span="20" style="margin-left: 21px;">
                    <div>
                      <p>发货单编号：3454325432543252</p>
                      <p>发货单状态：已签收</p>
                      <p>发货单时间：2019-11-14 10:40</p>
                      <p>发票信息：201911031112233</p>
                      <p></p>
                      <van-grid clickable :border="false" :column-num="3">
                        <van-grid-item v-for="(item,index) in demoImg" :key="index" @click="showImgPreview(index)">
                          <van-image
                            width="60px"
                            height="60px"
                            :src="item"/>
                          <div style="font-size: 10px">名称{{index}}</div>
                        </van-grid-item>
                      </van-grid>
                    </div>
                  </van-col>
                </van-row>
              </van-collapse-item>
            </van-collapse>
            <van-steps direction="vertical" :active="0">
              <van-step v-for="(item, index) in logisticsList" :key="index" >
                <span>{{item.name}}</span>
                <p>{{item.content}}</p>
                <p>{{item.time}}</p>
              </van-step>
            </van-steps>
          </div>
        </van-tab>
      </van-tabs>
    </van-popup>
    <van-image-preview
      v-model="imageShow"
      :images="demoImg"
      @change="onChange">
      <template v-slot:index>名称{{ index }}</template>
    </van-image-preview>
  </div>
</template>

<script>
import {ImagePreview} from 'vant'
export default {
  name: 'OrderItem',
  data() {
    return {
      imageShow: false,
      index: 0,
      datalists: [1,2,3,4,5],
      isRefreshing: false,
      loading: false,
      finished: false,
      activeNames: [],
      baseAttr: [],
      chooseIndex: '',
      tabslists: [
        {index: 0, name: '发货单1'},
        {index: 1, name: '发货单2'}
      ],
      show: false,
      title: '',
      info: {
        user: '',
        time: '',
        type: ''
      },
      itemInfo: {
        processChName: '',
        processInstName: '',
        currentState: '',
        startTime: '',
        creatorName: ''
      },
      logisticsList: [
        {time: '2019-11-14 10:40', name: '7.已签收', content: '签收人:张三'},
        {time: '2019-11-12 22:40', name: '6.运输中', content: '车牌号:沪A88888'},
        {time: '2019-11-12 20:23', name: '5.已发货', content: ''},
        {time: '2019-11-12 16:44', name: '4.复核完成', content: ''},
        {time: '2019-11-12 12:40', name: '3.拣配完成', content: ''},
        {time: '2019-11-11 10:00', name: '2.等待配货', content: ''},
        {time: '2019-11-10 09:30', name: '1.订单生成', content: ''}
      ],
      demoImg: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg',
        'https://img.yzcdn.cn/vant/apple-3.jpg',
        'https://img.yzcdn.cn/vant/apple-4.jpg',
        'https://img.yzcdn.cn/vant/apple-5.jpg'
      ]
    }
  },
  props: {
    itemData: Object
  },
  methods: {
    onChange(index) {
      this.index = index;
    },
    itemClick(index) {
      this.chooseIndex = index
      this.$emit('itemClickOrder', '')
    },
    onRefresh() {
      // 刷新接口
      this.todoList = []
      this.currentPage = 1
      this.isRefreshing = true
      setTimeout(() => {
        this.isRefreshing = false;
        this.datalists = [1,2,3,4,5]
        this.finished = false
      }, 500)
      // this.getTodoList()
    },
    onLoad() {
      // 加载更多接口
      this.loading = true
      // this.getTodoList()
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.datalists.push(this.datalists.length + 1);
        }
        // 加载状态结束
        this.loading = false

        // 数据全部加载完成
        if (this.datalists.length >= 20) {
          this.finished = true
        }
      }, 500)
    },
    showImgPreview(position) {
      this.imageShow = true
      // ImagePreview({
      //   images: this.demoImg,
      //   startPosition: position,
      //   onClose() {
      //     // do something
      //   }
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.orderItem{
  .datalist{
    height: calc(100% - 40px);
    overflow-x: hidden;
    overflow-y: auto;
  }
  /deep/ .van-cell__right-icon{
    color: #1989fa;
  }
  .list-amount {
    padding: 10px;
    height: 20px;
    line-height: 20px;
  }
  .red-tips {
    color: #fb1c1c;
    font-weight: bold;
    margin: 0 8px;
  }
  .popTitle{
    width: 100%;
    height: 46px;
    line-height: 46px;
    text-align: center;
    color: #1989fa;
    font-weight: bold;
    margin: 0;
    border-bottom: 1px solid #f7f8fa;
  }
  .border{
    width: 100%;
    height: 8px;
    background-color: #eee;
  }
  .border-bottom15 {
    border-bottom: 15px solid #eee;
  }
  .commonTotal{
    height: 50px;
    line-height: 50px;
    margin: 0;
    background-color: #fff;
    border-bottom: 1px solid #eeeeee;
    border-top: 1px solid #eeeeee;
    font-size: 16px;
  }
  .content {
    background: #FFFFFF;
    padding: 16px;
    border-bottom: #dedede 1px solid;
    &.active{
      background-color: #eaeaea;
      border-color: #eaeaea;
    }
    .rightIcon {
      font-size: 16px;
      height: 16px;
      width: 30px;
      text-align: center;
      line-height: 16px;
      display: inline-block;
      vertical-align: middle;
    }
  }
  .flowInfo {
    font-size: 16px;
    height: auto;
    line-height: 30px;
    border-radius: 15px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 2px 8px 2px;
    z-index: 0;
  }
  .tab-list{
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    /deep/ .van-collapse-item__content{
      position: relative;
    }
    .logisticsinfo{
      .img-card{
        width: 20px;
        padding: 10px;
      }
      p{
        margin: 5px;
      }
    }
    .way-card{
      p {
        margin-top: 5px;
        margin-bottom: 5px;
      }
    }
  }
  .h100 {
    height: 100%;
  }
}
</style>
