<template>
  <v-header title="确认订单" ref="header" async @fetch="fetch" backgroundColor="#fff">

    <view class="screen_all flex">
      <view class="flex-all-1 overflow confirm-container">
        <scroll-view
          class="screen_all"
          scroll-y
        >
          <view class="confirm-padding">
            <!-- 地址 -->
            <view class="confirm-address" @click="triggerAddress">
              <view class="screen_all row aCenter" v-if="address.id">
                <view class="flex-all-1 overflow">
                  <view class="confirm-address-title row">
                    <view class="confirm-address-name line-1">{{address.name}}</view>
                    <view>{{address.mobile}}</view>
                  </view>
                  <view class="confirm-address-info line-1">{{address.province_name}}{{address.city_name}}{{address.area_name}}{{address.address}}</view>
                </view>
                <text class="iconfont iconfont-more confirm-address-more"></text>
              </view>
              <view class="screen_all row aCenter" v-else-if="!firstLoadingStatus">
                <view class="flex-all-1 overflow">
                  <view class="confirm-address-title">选择地址</view>
                  <view class="confirm-address-info line-1">请选择配送地址</view>
                </view>
                <text class="iconfont iconfont-more confirm-address-more"></text>
              </view>
            </view>
            <!-- 商品 -->
            <view class="confirm-shop">
              <view class="confirm-shop-item"
                v-for="(item,index) in firstLoadingStatus ? skeletonData : info.productInfo"
                :key="index"
              >
                <layout-shop-item :item="item"></layout-shop-item>
              </view>
              <view class="row aCenter jEnd confirm-shop-info">
                <view>共{{count || 0}}件 商品小计:</view>
                <text class="confirm-shop-price-group"><text class="confirm-shop-price-em">¥</text><text>{{info.amount || '0.00'}}</text></text>
              </view>
            </view>

            <!-- 配送计划  -->
            <view v-if="is_distribution" class="confirm-distribution flex">
              <view @click="routerDistribution" class="flex-all-1 row aCenter">
                <view class="confirm-label flex-all-1">配送计划</view>
                <view class="confirm-distribution-more">查看详情</view>
                <text class="iconfont-more iconfont confirm-control-more"></text>
              </view>
              <view class="flex-all-1 row aCenter">
                <view class="confirm-label flex-all-1">送达时间</view>
                <view v-if="!firstLoadingStatus" class="row aCenter confirm-distribution-value">
                  <view>每月{{info.deliver_time}}号</view>
                  <view class="confirm-distribution-time">({{deliver_time}}首次配送)</view>
                </view>
              </view>
            </view>

            <!-- 功能 -->
            <view class="confirm-control">
              <view class="confirm-control-item row aCenter"
                v-for="(item,cIndex) in controlData"
                :key="cIndex"
                    @click="triggerControl(item)"
              >
                <view class="flex-all-1">{{item.label}}</view>
                <view v-if="info[item.key] || item.defaultValue" class="confirm-control-value row aCenter">
                  <text class="confirm-control-em">{{item.em}}</text>
                  <text>{{info[item.key] || item.defaultValue}}</text>
                </view>
                <view v-else-if="item.placeholder" class="confirm-control-value confirm-control-placeholder">{{item.placeholder}}</view>
                <text v-if="item.trigger" class="iconfont-more iconfont confirm-control-more"></text>
                <view v-else class="confirm-control-more-fixed"></view>
              </view>
            </view>
            <!-- 买家留言  -->
            <view class="confirm-message row aCenter">
              <view class="confirm-label">买家留言</view>
              <view class="flex-all-1">
                <input v-model="messageValue" class="confirm-message-input" placeholder-class="confirm-message-placeholder" placeholder="请输入留言备注（200字以内）" :maxlength="200" />
              </view>
            </view>
          </view>
        </scroll-view>

      </view>
      <view class="confirm-footer row aCenter">
        <view class="flex-all-1 overflow row aCenter confirm-footer-content">
          <view>应付总计：</view>
          <view class="confirm-footer-price">￥{{total}}</view>
        </view>
        <view @click="paySubmit" class="confirm-footer-button center">立即支付</view>
      </view>
    </view>

    <modal v-model="couponModal" animateContent="translateYR">
      <view class="screen_all flex">
        <view class="flex-all-1" @click="cancelCoupon"></view>
        <view class="confirm-coupon-modal flex">
          <view class="confirm-coupon-title">选择优惠券</view>
          <view class="flex-all-1 overflow">
            <tab :tabs="tabData">
              <view
                  v-for="(pItem,pIndex) in tabData"
                  :key="pIndex"
                  :slot="'tab-'+pIndex"
                  class="screen_all"
              >
                <view
                    class="screen_all flex overflow confirm-coupon-wrap"
                    v-if="couponList[pItem.key] && couponList[pItem.key].length>0"
                >
                  <view class="flex-all-1 confirm-coupon-scroll overflow">
                    <scroll-view class="screen_all" scroll-y>
                      <view class="confirm-coupon-screen overflow">
                        <view class="layout-use-coupon-item"
                              v-for="(item,index) in couponList[pItem.key] || []"
                              :key="index"
                        >
                          <layout-use-coupon
                              :key="item"
                              :item="item"
                              :type="pItem.type"
                              @checked="changeCoupon"
                              :value="!!couponStorageId[item.coupon_id]"
                          ></layout-use-coupon>
                        </view>
                      </view>
                    </scroll-view>
                  </view>
                  <view class="confirm-coupon-screen">
                    <view @click="confirmCoupon" class="confirm-coupon-button center">确定</view>
                  </view>
                </view>
                <empty v-else :title="pItem.emptyText"></empty>
              </view>
            </tab>
          </view>
        </view>
      </view>
    </modal>

    <pay-modal v-model="payModal" :icon="payFailMessage?'':'/static/images/pay-success.png'" :message="payFailMessage?payFailMessage:'支付成功'" :fail="!!payFailMessage" ></pay-modal>


  </v-header>
</template>

<script>
import vHeader from '@/components/v-header/main.vue';
import layoutShopItem from '@/layout/layout-shop-item/main.vue';
import mixins from './mixins/index';
import tab from '@/components/tab/main';
import layoutUseCoupon from '@/layout/layout-use-coupon/main';
import Modal from "../../components/modal/main";
import empty from '@/components/empty';
import payModal from '@/components/pay-modal/pay-modal';
export default {
  name: "confirm-order",
  mixins,
  components:{
    Modal,
    vHeader,
    layoutShopItem,
    tab,
    layoutUseCoupon,
    empty,
    payModal
  }
}
</script>

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