<template>
  <v-header backgroundColor="#fff" title="订单详情"
    async
    ref="header"
    @fetch="fetch"
  >
    <view class="screen_all flex">
      <view class="flex-all-1 overflow">
        <scroll-view class="screen_all" scroll-y>
          <view class="order-detail-container">
            <view class="order-detail-header row aCenter">
              <image mode="heightFix" v-if="statusInfo.icon" :src="'/static/images/order-icon/'+statusInfo.icon+'.png'" class="order-detail-icon"></image>
              <view class="flex-all-1 overflow">
                <view class="line-1">{{statusInfo.label}}</view>
              </view>
              <view v-if="item.orderInfo && statusInfo.status == 1&&payStatus.msg">{{payStatus.msg || ''}}</view>
            </view>
            <!--  收货地址   -->
            <view class="order-modal row aCenter order-detail-address">
              <view class="order-address-icon-wrap">
                <image src="/static/images/address.png" class="order-detail-address-icon"></image>
              </view>
              <view class="flex-all-1 overflow">
                <view class="row aCenter">
                  <view class="order-address-name line-1">{{item.addressInfo.name}}</view>
                  <view>{{item.addressInfo.mobile}}</view>
                </view>
                <view class="line-1 order-address-info">{{item.addressInfo.province_name ||''}}{{item.addressInfo.city_name||''}}{{item.addressInfo.area_name||''}}{{item.addressInfo.address||''}}</view>
              </view>
            </view>
            <!--  物流信息   -->
            <view class="order-modal order-logistics jCenter">
              <view class="order-logistics-header row aCenter">
                <image src="/static/images/logistics.png" class="order-logistics-header-icon"></image>
                <view>物流信息</view>
              </view>
              <view class="order-logistics-line row">
                <view v-for="(item,index) in logisticsData" :key="index"
                      class="flex-all-1 center relative"
                      :class="{
                        'order-logistics-active': index <= statusSpeed
                      }"
                >
                  <view class="row aCenter">
                    <view class="order-logistics-circular center">
                      <view v-if="index <= statusSpeed" class="order-logistics-active-circular relative"></view>
                    </view>
                    <view class="absolute jCenter order-logistics-circular-line"
                          :style="{'left':index===0?'50%':'0',right:item.last?'50%':'0'}"
                    >
                      <view class="circular-line-target"></view>
                      <view v-if="index <= statusSpeed && statusSpeed>0" class="absolute jCenter circular-line-active"
                            :style="{'right':index===statusSpeed && statusSpeed !== 3?'50%':'0' }"
                      >
                        <view></view>
                      </view>
                    </view>
                  </view>
                  <view class="order-logistics-label">{{item.label}}</view>
                </view>
              </view>
            </view>
            <!--  商品   -->
            <view class="order-modal order-shop" >
              <view class="row aCenter order-title-model row aCenter">
                <image src="/static/images/shop.png" class="order-shop-icon"></image>
                <view class="line-1 order-title-container">{{config.name}}</view>
                <text class="iconfont iconfont-more order-more"></text>
              </view>
              <layout-ui-shop-item number
                v-for="(cItem,cIndex) in item.productList"
                :key="cIndex"
                :item="cItem"
                :periods="item.orderDelivery_count || 0"
                goDetail
              ></layout-ui-shop-item>
            </view>
            <!--  配送计划   -->
            <view v-if="item.orderInfo.is_datebuy" @click="triggerRouterDetail" class="order-modal order-distribution row aCenter">
              <view class="flex-all-1 order-label">配送计划</view>
              <text class="order-distribution-info">查看详情</text>
              <text class="iconfont iconfont-more order-distribution-more"></text>
            </view>
            <!--  费用明细   -->
            <view class="order-modal flex overflow order-cost" >
              <view class="order-title">费用明细</view>
              <view class="order-cost-item row aCenter"
                    v-for="(cItem,index) in costData"
                    :key="index"
                    v-if="cItem.where?item.orderInfo[cItem.key] && item.orderInfo[cItem.key]>0:true"
              >
                <view class="flex-all-1">{{cItem.label}}</view>
                <view class="order-cost-value">{{cItem.before || ''}}￥{{item.orderInfo[cItem.key]  || cItem.defaultValue || ''}}</view>
              </view>
              <view class="order-cost-footer row aCenter jEnd">
                <view>实付款：</view>
                <view class="order-cost-price">￥{{item.orderInfo.total_price || '0.00'}}</view>
              </view>
            </view>
            <!--  订单信息   -->
            <view class="order-modal flex overflow"  >
              <view class="order-title">订单信息</view>
              <view class="order-cost-item row aCenter"
                    v-for="(cItem,index) in orderData"
                    :key="index"
              >
                <view class="flex-all-1">{{cItem.label}}</view>
                <view class="order-cost-value">{{item.orderInfo[cItem.key] || ''}}</view>
              </view>
            </view>

            <!--  我的评价   -->
            <view class="order-comment" v-if="item.orderComment && item.orderComment.length > 0">
              <view class="order-comment-title">我的评价</view>
              <view v-for="(item,index) in item.orderComment"
                :key="index"
              >
                <view class="row aCenter order-comment-introduce">
                  <view class="order-comment-introduce-label">描述相符</view>
                  <v-rate type="comment" :value="item.rate" disabled></v-rate>
                  <view class="flex-all-1"></view>
                  <image @click.stop="triggerDeleteComment(item,index)" src="/static/images/delete.png" class="order-comment-delete" />
                </view>
                <view class="order-comment-content">{{item.comment}}</view>
                <view class="order-comment-comment-group row wrap" v-if="item.images && item.images.length > 0">
                  <v-image v-for="(cItem,cIndex) in item.images" :src="cItem" :key="cIndex" class="order-comment-image"></v-image>
                </view>
              </view>

            </view>

          </view>

        </scroll-view>
      </view>
      <view class="order-footer order-modal row aCenter">
        <button  open-type="contact" class="clear-button center order-footer-service">
          <image src="/static/images/service.png" class="order-service"></image>
          <view>客服</view>
        </button>
        <view class="flex-all-1 overflow jEnd">
          <layout-button-group
              :buttonGroup="statusInfo.buttonGroup"
              :item="buttonItem"
              size="big"
              type="order-detail"
              page="order-detail"
              @openPayModal="openPayModal"
          ></layout-button-group>
        </view>
        <pay-modal v-model="payModal" type="order" :message="payModalMessage"></pay-modal>
      </view>
    </view>
  </v-header>
</template>

<script>
import vHeader from '@/components/v-header/main';
import mixins from './mixins';
import layoutUiShopItem from '@/layout/layout-ui-shop-item/main';
import layoutButtonGroup from '@/layout/layout-button-group/layout-button-group';
import payModal from '@/components/pay-modal/pay-modal';
import vRate from '@/components/uni-rate/uni-rate';
import vImage from '@/components/v-image/main';
export default {
  name: "order-detail",
  components:{
    vHeader,
    layoutUiShopItem,
    layoutButtonGroup,
    payModal,
    vRate,
    vImage
  },
  mixins
}
</script>

<style scoped src="./style.scss" lang="scss">

</style>