<template>
  <div class="goods-info">
    <div v-if="detailData.length !== 0" class="goods-info-details">
      <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        > -->
        <div class="list" v-for="(item, index) in detailData" :key="index">
          <!-- <goods-info-detail :item="item"></goods-info-detail> -->
          <goods-info-list-item :item="item"></goods-info-list-item>
        </div>
          <!-- <goods-info-detail
            v-for="(item, index) in detailData.goodsInfos"
            :key="index"
            :title="item"
          ></goods-info-detail> -->
        <!-- </van-list>
      </van-pull-refresh> -->
    </div>
    <van-empty v-if="detailData.length === 0" description="暂无数据" />
     <div class="goods-sum" v-if="isShowTotalAmount">
      <div class="sum-number-detail">共 {{orderItem.goodsInfos.length}} 个商品</div>
      <div class="sum-amount">金额总计：<span style="font-size: 16PX;">￥{{orderItem.orderTotalAmount}}</span></div>
    </div>
    <goods-high-search v-model="showHighSearch" @onsearch="moreSearchConfirm" @onclean="moreSearchClean"/>
  </div>
</template>

<script>
import {AmountNumFormat} from '@/utils/common'
import goodsInfoDetail from "../components/goodsInfoDetail"
import goodsInfoListItem from "./goodsInfoListItem"
import GoodsHighSearch from "../components/goodsHighSearch"
import {getMyOrderDetail} from '@/api/myOrder'
export default {
  name: "goodsInfo",
  components: {
    GoodsHighSearch,
    goodsInfoDetail,
    goodsInfoListItem
  },
  data() {
    return {
      goodsInfos: [],
      loading: false,
      finished: false,
      //   error: false,
      refreshing: false,
      showHighSearch: false,
      orderItem: this.$route.query,
      detailData: [],
      moreSearchInfo: {
        goodsCode: '', // 商品编号
        goodsName: '', // 商品名称
        goodsSpec: '', // 商品规格
        manufacturer: '', // 生产企业
      },
      totalAmount: 0,
      isShowTotalAmount: true
    }
  },
  props: {
    // totalAmount: {
    //   type: String,
    //   default: '0.00'
    // }
  },
  computed: {
    // 总价格
    orderTotalAmount () {
      // if (this.detailData.orderTotalAmount) {
      //   return AmountNumFormat(this.detailData.orderTotalAmount)
      // } else {
        // return this.orderItem.orderTotalAmount
        return AmountNumFormat(this.totalAmount)
      // }
    }
  },
  mounted() {
    // 设置标题栏关闭返回按钮
    this.$store.commit("setNavBar", {
      show: true,
      leftArrow: true,
      rightIcon: true,
      title: "商品清单",
      leftText: "",
      leftClick: this.onBrowserBack,
      rightClick: this.onShowSearch,
    });
    window.addEventListener("popstate", this.onBrowserBack, false);
    this.getOrderDetail()
  },
  destroyed() {
    // 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
    window.removeEventListener("popstate", this.onBrowserBack, false);
  },
  methods: {
    // 高级搜索查询
    moreSearchConfirm(data) {
      this.moreSearchInfo = JSON.parse(JSON.stringify(data))
      console.log(this.moreSearchInfo)
      this.getOrderDetail()
    },
    // 高级搜索取消
    moreSearchClean(data) {
      console.log(this.moreSearchInfo)
      this.moreSearchInfo = JSON.parse(JSON.stringify(data))
      this.getOrderDetail()
    },
    onBrowserBack() {
      this.$router.go(-1);
    },
    onShowSearch() {
      this.showHighSearch = !this.showHighSearch;
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.list.length >= 20) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = false;
      this.onLoad();
    },
    /* 获取订单详情 */
    getOrderDetail() {
      let params = {
        'businessType': '',
        'clientID': [],
        'endDate': '',
        'goodsCode': this.moreSearchInfo.goodsCode,
        'goodsDesc': '',
        'goodsId': '',
        'goodsName': this.moreSearchInfo.goodsName,
        'goodsSpec': this.moreSearchInfo.goodsSpec,
        'isDelivered': '',
        'isInvoice': '',
        'isWeb': '',
        'manufacturer': this.moreSearchInfo.manufacturer,
        'mdmClientCode': '',
        'order': '',
        'orderId': this.orderItem.orderId, // 19977352;19965720
        'orderNo': this.orderItem.orderNo, // 225202103170165
        'orderStatusCode': '',
        'orderType': this.orderItem.orderType,
        'pageNum': 1,
        'pageSize': 20,
        'shippingAdress': '',
        'sort': '',
        'sourceDb': this.orderItem.sourceDb,
        'sourceOrderNo': '',
        'sourceSystem': '',
        'startDate': '',
        'supplierId': []
      }
      getMyOrderDetail(params).then(res => {
        this.detailData = []
        this.totalAmount = 0
        if (res.code === 200 && res.data &&
          res.data.entity && res.data.entity.detailList) {
          this.detailData = res.data.entity.detailList
          if (this.detailData.length !== this.orderItem.goodsInfos.length) {
            this.isShowTotalAmount = false
          } else {
            this.isShowTotalAmount = true
          }
          let total = 0
          this.detailData.forEach(item => {
            console.log(parseFloat(item.taxAmount))
            total = total + parseFloat(item.taxAmount)
            console.log(total)
          })
          this.totalAmount = total
        } else if (res.code === 500) {
          _this.$toast(rt.message)
        }
      }).catch(err => {
        console.log('订单详情', err)
      })
    }
  }
};
</script>

<style scoped lang="scss">
.goods-info {
  height: 100%;

  .order-sum {
    font-size: 14px;
    font-weight: 700;
    display: flex;
    padding: 15px 20px;
    color: #666;

    .sum-number-detail {
      padding-left: 10px;
    }
  }

  .goods-info-details {
    // background-color: white;
    width: 100%;
    height: calc(100vh - 96px);
    // height: 120px;
    overflow: scroll;
    padding: 10PX;
    .list{
      border-radius: 5px;
      margin-bottom: 10PX;
    }
  }
}
.goods-sum{
  width:100%;
  height: 50px;
  background-color: #4496EC;
  z-index: 1000;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  color: white;
  display: flex;
  line-height: 48px;
  padding: 0px 10px;
  font-size: 15PX;
    .sum-number-detail {
      width: 50%;
      text-align: left;
    }
   .sum-amount {
      width: 50%;
      text-align: right;
    }
}
</style>
