<template>
  <div>
    <a-modal
      title="查看详情"
      :footer="null"
      :width="1100"
      :destroyOnClose="true"
      @cancel="isShow = false"
      v-model="isShow">
      <v-select ref="orderStatus" code="ORDER_STATUS" placeholder="请选择" allowClear v-show="false"></v-select>
      <div class="orderDetail-content">
        <a-form>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item label="下单时间" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
                <span>{{ orderDetailData.orderTime }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="单号" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
                <span>{{ orderDetailData.orderNo }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="门店名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
                <span>{{ orderDetailData.storeName }}</span>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item label="服务名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
                <span>{{ orderDetailData.itemName }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="手机号码" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
                <span>{{ orderDetailData.customerMobile }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="状态" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
                <span>{{ orderDetailData.orderStatus }}</span>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item label="应付(￥)" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
                <span>{{ orderDetailData.payableAmount }} 元</span>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="实付(￥)" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
                <span v-if=" orderDetailData.payStatus == 'PAID' ">{{ orderDetailData.paymentAmount }} 元</span>
                <span v-if=" orderDetailData.payStatus != 'PAID' ">{{ 0 }} 元</span>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="优惠(￥)" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
                <span>{{ orderDetailData.orderCoupons ? orderDetailData.couponAmount : 0 }} 元</span>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item label="使用优惠券" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
                <span>{{ orderDetailData.orderCoupons ? orderDetailData.orderCoupons[0].couponTitle : '--' }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="洗车照片" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
                <div style="display: flex;">
                  <div class="imgBox">
                    <div>
                      <img v-if="orderDetailData.beginImage" class="imgCar" :src="orderDetailData.beginImage" alt="" @click="isShowBeginImageModal=true">
                      <div v-if="!orderDetailData.beginImage" class="imgCar">--</div>
                    </div>
                    <div>洗车前</div>
                  </div>
                  <div class="imgBox">
                    <div>
                      <img v-if="orderDetailData.endImage" class="imgCar" :src="orderDetailData.endImage" alt="" @click="isShowEndImageModal=true">
                      <div v-if="!orderDetailData.endImage" class="imgCar">--</div>
                    </div>
                    <div>洗车后</div>
                  </div>
                </div>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row style="text-align: center;margin-top: 100px;">
            <a-col>
              <a-form-item>
                <a-button type="default" @click="isShow=false">返回列表</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-modal>
    <!-- 查看洗车前后照片对比 -->
    <a-modal
      class="imgModal"
      title="洗车前照片"
      :width="600"
      :footer="null"
      :destroyOnClose="true"
      @cancel="isShowBeginImageModal=false"
      v-model="isShowBeginImageModal">
      <img :src="orderDetailData.beginImage" class="pic" />
    </a-modal>
    <a-modal
      class="imgModal"
      title="洗车后照片"
      :width="600"
      :footer="null"
      :destroyOnClose="true"
      @cancel="isShowEndImageModal=false"
      v-model="isShowEndImageModal">
      <img :src="orderDetailData.endImage" class="pic" />
    </a-modal>
  </div>
</template>

<script>
import {
  Upload,
  VSelect
} from '@/components'
import {
  orderDetail
} from '../../api/order.js'
export default {
  components: {
    Upload,
    VSelect
  },
  name: 'OrderDetailModal',
  props: {
    openModal: { //  弹框是否展示
      type: Boolean,
      default: false
    },
    nowId: {
      type: Number,
      default: null
    }
  },
  data () {
    return {
      orderDetailData: [],
      isShow: this.openModal,
      isShowBeginImageModal: false, // 洗车前图片弹窗
      isShowEndImageModal: false // 洗车后图片弹窗
    }
  },
  methods: {},
  watch: {
    //  父页面传过来的弹框状态以及当前行id
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    nowId (newValue, oldValue) {
      if (newValue) {
        orderDetail({
          id: newValue
        }).then(res => {
          // console.log(res, '------------')
          this.orderDetailData = res.data
          if (res.status == 200) {
            setTimeout(() => {
              res.data.orderStatus = this.$refs.orderStatus.getNameByCode(res.data.orderStatus)
            }, 500)
          }
        })
      }
    },
    //  重定义的弹框状态
    isShow (val) {
      if (!val) {
        this.$emit('close')
      }
    }
  }
}
</script>
<style lang="less">
	.orderDetail-content .ant-form-inline .ant-form-item {
		margin-bottom: 20px;
	}

	.imgBox {
		text-align: center;
		margin-left: 10px;
		.imgCar {
			height: 50px;
			width: auto;
		}
	}
	.pic {
		transform: scale(1);
		display: block;
		max-width: 100%;
		height: 100%;
		margin: 0 auto;
	}
</style>
