<template>
  <a-card :bordered="false">
    <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>{{'-'}}</span>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="优惠券名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
              <span>{{"-"}}</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.paymentAmount}} 元</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>
                  <div style="border: 1px solid #eee;overflow: hidden;padding: 8px 0 0 8px; margin-right: 20px;">
                    <Upload :file-list="" :fileSize="0.25" listType="picture-card">
                    </Upload>
                  </div>
                  <div style="text-align: center;">洗车前</div>
                </div>
                <div>
                  <div style="border: 1px solid #eee;overflow: hidden;padding: 8px 0 0 8px;">
                    <Upload :file-list="" :fileSize="0.25" listType="picture-card">
                    </Upload>
                  </div>
                  <div style="text-align: center;">洗车后</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="goBack()">返回列表</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </a-card>
</template>

<script>
  import { Upload, VSelect } from '@/components'
  import { orderDetail } from '../../api/order.js'
  export default {
    components: { Upload, VSelect },
    data() {
      return {
        orderDetailData:[]
      }
    },
    methods: {
      // // 查看详情
      // getOrderDetail(){
      //   orderDetail()
      // },
      // 返回列表
      goBack() {
        this.$router.push({
          name: 'OrderCenter'
        })
      },
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        let params = vm.$route.query
        if(params.id){
          orderDetail({id: params.id}).then(res=>{
            console.log(res,'------------')
            if(res.status == 200){
              vm.orderDetailData = res.data
              vm.orderDetailData.orderStatus = vm.$refs.orderStatus.getNameByCode(vm.orderDetailData.orderStatus)
            }
          })
        }
      })
    }
  }
</script>
<style lang="less">
  .orderDetail-content .ant-form-inline .ant-form-item {
    margin-bottom: 20px;
  }
  /* 去掉上传图片组件原有的删除按钮 */
  :global(.anticon-delete) {
    display: none;
  }
</style>
