<template>
  <div class="order w100 h100">
    <search-result :result-num="sum"></search-result>
    <div class="clientInfo">{{this.clientInfo.clientName}}</div>
    <div class="list">
      <van-pull-refresh
        v-model="isRefreshing"
        @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :error.sync="error"
          :offset="10"
          @load="onLoad">
          <div class="listContent" v-for="item in orderList" :key="item.orderNo" @click="onOrderClick(item)">
            <van-row>
              <van-col span="9">订单编号：</van-col>
              <van-col span="15">{{item.orderNo}}</van-col>
            </van-row>
            <van-row>
              <van-col span="9">订单类型：</van-col>
              <van-col span="15">{{splitInfo(item.webFromType,'/')[1]}}</van-col>
            </van-row>
            <van-row>
              <van-col span="9">订单来源：</van-col>
              <van-col span="15">{{splitInfo(item.webFromType,'/')[0]}}</van-col>
            </van-row>
            <van-row>
              <van-col span="9">客户地址：</van-col>
              <van-col span="15">{{splitInfo(item.webFromType,'/')[2]}}</van-col>
            </van-row>
            <van-row>
              <van-col span="9">送货优先级：</van-col>
              <van-col span="15">{{splitInfo(item.webFromType,'/')[3]}}</van-col>
            </van-row>
            <van-row>
              <van-col span="9">仓库信息：</van-col>
              <van-col span="15">{{item.orderType}}</van-col>
            </van-row>
            <van-row>
              <van-col span="9">箱数：</van-col>
              <van-col span="15">{{item.boxsTotal}}</van-col>
            </van-row>
            <van-row>
              <van-col span="9">含税总金额：</van-col>
              <van-col span="15">{{item.taxAmountTotal | toFix(2) |separator('',' 元')}}</van-col>
            </van-row>
            <van-button plain round size="mini" type="info" class="btn_info" @click.stop="onOrderInfoClick(item)">物流信息
            </van-button>
            <div class="item-line"></div>
            <div class="item-info-btn">
              <span>查看详情</span>
              <van-icon name="arrow" size="15"/>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <div class="footer">
      <p class="text-center remove-margin">合计: <span>{{totalMoney | toFix(2) |separator('',' 元')}}</span></p>
    </div>

    <van-popup
      v-model="logInfoShow"
      closeable
      close-icon-position="top-right"
      position="bottom"
      class="flex flex-column"
      :style="{ height: '100%' }">
      <logistics :order-log-info="orderItem"/>
    </van-popup>
  </div>
</template>

<script>
// 引入接口
import {
  getOrderList
} from '@/api/saleSituation'
import {getResListNum} from '@/utils/common'
// 引入组件
import SearchResult from '@/components/SearchResult'
import logistics from './Logistics'

export default {
  name: 'order',
  components: {
    logistics,
    SearchResult
  },
  props: {
    chooseTime: {
      type: Object,
      default: () => {
      }
    },
    tabData: {
      type: Object,
      default: () => {}
    },
    clientInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      totalMoney: 0,
      time: {},
      sum: '0',
      currentPage: 1,
      pageSize: 10,
      isRefreshing: false,
      loading: false,
      finished: false,
      error: false,
      logInfoShow: false,
      orderList: [],
      orderItem: {}
    }
  },
  mounted() {
    this.time = JSON.parse(JSON.stringify(this.chooseTime))
  },
  watch: {
    chooseTime: {
      handler(val) {
        this.time = JSON.parse(JSON.stringify(this.chooseTime))
        this.onRefresh()
      },
      deep: true
    },
    tabData: {
      deep: true,
      handler (val) {
        this.onRefresh()
      }
    },
    clientInfo: {
      handler(val) {
        this.onRefresh()
      },
      deep: true
    }
  },
  destroyed() {
  },
  methods: {
    onRefresh() {
      this.currentPage = 1
      this.finished = false
      this.getPostData()
    },
    onLoad() {
      this.loading = true
      this.getPostData()
    },
    onOrderClick(data) {
      this.$emit('click', data)
    },
    onOrderInfoClick(order) {
      this.logInfoShow = !this.logInfoShow
      this.orderItem = order
      this.orderItem['dbName'] = this.tabData.sysDbSource
      this.orderItem['tmsTestDb'] = this.tabData.tmsTestDb
      this.orderItem['tmsRealDb'] = this.tabData.tmsRealDb
      this.orderItem['appTestDb'] = this.tabData.appTestDb
      this.orderItem['appRealDb'] = this.tabData.appRealDb
      this.orderItem['clientId'] = this.clientInfo.clientId
    },
    splitInfo(res, key) {
      return res.split(key)
    },
    getPostData() {
      let _this = this

      let data = {
        'attr': {
          'orgId': _this.tabData.orgId,
          'startdate': _this.time.start,
          'enddate': _this.time.end,
          'saler': _this.tabData.saler,
          'clientId': _this.clientInfo.clientId
        },
        'dbName': _this.tabData.sysDbSource, // 'erp_ogg_shaphar',
        'start': _this.currentPage,
        'length': _this.pageSize
      }
      getOrderList(data).then(rt => {
        if (rt.code === 1 || rt.code === '1') {
          // 若当前页为第一页
          if (_this.currentPage === 1) {
            _this.orderList = rt.data
            _this.sum = getResListNum(rt.msg)
          } else {
            // 否则 默认为加载更多数据
            _this.orderList = _this.orderList.concat(rt.data)
          }
          _this.totalMoney = 0
          _this.orderList.forEach((item, index) => {
            let totalNum = parseFloat(item.taxAmountTotal)
            _this.totalMoney += totalNum
          })
          // 若 获取的数据长度小于规定的则代表为最后数据
          if (rt.data.length < _this.pageSize) {
            _this.finished = true
          } else {
            // 否则页数自增1
            _this.currentPage++
          }
          // 加载 code 异常
        } else {
          _this.error = true
        }
        // 加载状态结束
        _this.loading = false
        _this.isRefreshing = false
      }).catch(e => {
        _this.$toast('列表获取失败')
        _this.loading = false
        _this.error = true
        // _this.finished = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .order {
    display: flex;
    flex-direction: column;

    .clientInfo {
      color: #23262A;
      font-weight: bold;
      font-size: 16px;
      margin-left: 10px;
      margin-bottom: 10px;
    }

    .list {
      width: 100%;
      flex: 1;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }

    .listContent {
      background: white;
      margin-bottom: 8px;
      padding: 2px 14px 2px 14px;
      position: relative;

      /deep/ .van-row {
        padding-top: 6px;
        padding-bottom: 6px;

        .van-col {
          font-size: 14px;
        }

        .van-col--9 {
          color: #677282;
        }
      }

      .btn_info {
        width: 70px;
        height: 24px;
        position: absolute;
        right: 14px;
        bottom: 54px;
      }
    }

    .footer {
      background-color: $bc1;
      height: 44px;
      line-height: 44px;
      position: relative;
      font-size: 16px;
      p span {
        font-size: 16px;
        font-weight: bold;
        color: $tc5;
      }
    }
  }
</style>
