<template>
  <div id="orderItem">
    <van-collapse v-model="activeNames">
      <van-collapse-item title="总览" name="1" class="pos-relative">
<!--        <van-dropdown-menu>-->
<!--          <van-dropdown-item v-model="value1" :options="option1" />-->
<!--        </van-dropdown-menu>-->
<!--        <van-collapse v-model="warehouses">-->
<!--          <van-collapse-item title="仓库" name="2" class="pos-relative">-->
<!--            <van-row class="w100 font14 commonTotal">-->
<!--              <van-col span="12">-->
<!--                <div style="border: #1989fa 1px solid;border-radius: 5px;-->
<!--    padding: 5px;margin: 10px" class="">-->
<!--                  <span>物流中心仓库01</span>-->
<!--                  <div style="font-size: 13px">订单总数：123</div>-->
<!--                  <van-icon name="success" />-->
<!--                </div>-->
<!--              </van-col>-->
<!--              <van-col span="12">-->
<!--                <div style="border: #1989fa 1px solid;border-radius: 5px;-->
<!--    padding: 5px;margin: 10px" class="">-->
<!--                  <span>物流中心仓库01</span>-->
<!--                  <div style="font-size: 13px">订单总数：123</div>-->
<!--                </div>-->
<!--              </van-col>-->
<!--            </van-row>-->
<!--          </van-collapse-item>-->
<!--        </van-collapse>-->
        <van-row class="w100 font14 commonTotal">
          <van-col class="title" span="24">
            <span>订单信息统计</span>
          </van-col>
        </van-row>
        <van-row class="w100 font14 commonTotal">
          <van-col span="12">
            <div :style="{backgroundImage: 'url(' + greenPath + ')' }" class="client">
              <p class="p1">25</p>
              <p class="p2">客户总数</p>
            </div>
          </van-col>
          <van-col span="12">
            <div :style="{backgroundImage: 'url(' + bluePath + ')' }" class="client">
              <p class="p1">355 / 7100</p>
              <p class="p2">订单总数 / 订单明细总数</p>
            </div>
          </van-col>
        </van-row>
        <van-row class="w100 font14 commonTotal">
          <van-col span="12">
            <div :style="{backgroundImage: 'url(' + redPath + ')' }" class="client">
              <p class="p1">18,239,356.00</p>
              <p class="p2">含税总金额</p>
            </div>
          </van-col>
          <van-col span="12">
            <div :style="{backgroundImage: 'url(' + purplePath + ')' }" class="client">
              <p class="p1">17,139,336.00</p>
              <p class="p2">无税总金额</p>
            </div>
          </van-col>
        </van-row>
        <div class="my-swipe">
          <van-row class="w100 font14">
            <van-col class="title" span="24">
              <span>订单状态分析</span>
            </van-col>
          </van-row>
          <van-swipe @change="onChange" style="height: 300px;" indicator-color="#1989fa">
            <van-swipe-item class="w100">
              <echarts-view style=" height: 280px;" :key="count"/>
            </van-swipe-item>
            <van-swipe-item>
              <returns-echarts-view style="height: 280px;" :key="counts"/>
            </van-swipe-item>
          </van-swipe>
        </div>
      </van-collapse-item>
    </van-collapse>
    <div class="list-amount">
        共<span class="red-tips">25</span>条客户信息
    </div>
    <van-pull-refresh
      v-model="isRefreshing"
      @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad">
        <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 pos-relative" style="margin-bottom: 16px;">-->
<!--              <van-col span="9" style="font-weight: 600;">序号：{{index+1}}</van-col>-->
<!--              <van-col span="14" 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 margin-t8">
              <van-col span="9">客户信息:</van-col>
              <van-col span="15">
                20027/(2351089)莆田学院附属医院
              </van-col>
            </van-row>
            <van-row class="w100 font14 margin-t8" style="height: 22px;line-height: 22px">
              <van-col span="9">订单总数:</van-col>
              <van-col span="15">
                102
              </van-col>
            </van-row>
            <van-row class="w100 font14 margin-t8">
              <van-col span="9">订单含税总金额:</van-col>
              <van-col span="15">
                327,662.30 元
              </van-col>
            </van-row>
            <van-row class="w100 font14 margin-t8">
              <van-col span="9">订单无税总金额:</van-col>
              <van-col span="15">
                320,563.30 元
              </van-col>
            </van-row>
            <!-- <van-icon class="rightIcon" name="arrow" /> -->
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import EchartsView from '@/components/EchartsView.vue'
import ReturnsEchartsView from '@/components/ReturnsEchartsView.vue'
import bluePath from '@/assets/img/1.jpg'
import redPath from '@/assets/img/2.jpg'
import greenPath from '@/assets/img/3.jpg'
import purplePath from '@/assets/img/4.png'
export default {
  components: {
    EchartsView,
    ReturnsEchartsView
  },
  name: 'CusItem',
  data() {
    return {
      images: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg'
      ],
      count: 1,
      counts: 1,
      activeNames: ['1'],
      warehouses: ['2'],
      datalists: [1,2,3,4,5],
      isRefreshing: false,
      loading: false,
      finished: false,
      greenPath: greenPath,
      bluePath: bluePath,
      redPath: redPath,
      purplePath: purplePath,
      chooseIndex: '',
      title: '',
      info: {
        user: '',
        time: '',
        type: ''
      },
      itemInfo: {
        processChName: '',
        processInstName: '',
        currentState: '',
        startTime: '',
        creatorName: ''
      },
      value1: 0,
      option1: [
        { text: '物流中心仓库1', value: 0 },
        { text: '物流中心仓库2', value: 1 },
        { text: '物流中心仓库3', value: 2 }
      ]
    }
  },
  props: {
    itemData: Object
  },
  mounted () {
    this.count ++
    this.counts ++
  },
  methods: {
    onChange() {
    },
    itemClick(index) {
      this.chooseIndex = index
      console.log(this.chooseIndex)
      this.$emit('itemClickCus', '')
    },
    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)
    }
  }
}
</script>

<style lang="scss" scoped>
#orderItem{
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  /deep/ .van-collapse-item__content{
    padding: 10px;
  }
  /deep/ .van-swipe__indicator{
    background-color: #999999;
  }
  /deep/ .van-cell__right-icon{
    color: #1989fa;
  }
  .my-swipe{
    margin-top: 10px;
  }
  .title{
    width: 100%;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 10px;
  }
  .list-amount {
    padding: 10px;
    height: 20px;
    line-height: 20px;
  }
  .red-tips {
    color: #fb1c1c;
    font-weight: bold;
    margin: 0 8px;
  }

  .commonTotal{
    background-color: #fff;
    // border-bottom: 1px solid #eeeeee;
    .client{
      height: 60px;
      margin: 5px;
      padding-top: 5px;
      .p1{
        color: #fff;
        text-align: center;
        margin: 0px 5px 0px 5px;
        line-height: 25px;
        display: flex;
        justify-content: left;
        height: 25px;
      }
      .p2{
        color: #fff;
        text-align: center;
        margin: 0px 5px 0px 5px;
        line-height: 25px;
        display: flex;
        justify-content: left;
        height: 25px;
        font-size: 13px;
      }
    }
  }
  .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;
    }
  }
}
</style>
