<template>
  <el-dialog title="会员订单详情" :visible.sync="dialogVisible" class="order-details">
    <el-form :model="form" ref="form" label-width="90px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="订单号:">
            <span>{{form.no}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支付时间:">
            <span>{{form.crtTime}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单状态:">
            <span>{{form.status}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="姓名:">
            <span>{{form.realName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="手机号:">
            <span>{{form.telephone}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="名称:">
            <span>{{form.name}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="商品价格:">
            <span>{{form.goodsAmount}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单价格:">
            <span>{{form.orderAmount}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="实际价格:">
            <span>{{form.realAmount}}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="modal_modal" v-show="resetCarVisible"></div>
  </el-dialog>
</template>

<script>
  import ElRow from "element-ui/packages/row/src/row";
  import ElInput from "../../../../node_modules/element-ui/packages/input/src/input.vue";
  import ElCol from "element-ui/packages/col/src/col";
  import ElFormItem from "../../../../node_modules/element-ui/packages/form/src/form-item.vue";

  export default {
    props: ["memberRow"],
    name: 'memberOrderDetailModal',
    components: {
      ElFormItem,
      ElCol,
      ElInput,
      ElRow
    },
    data() {
      return {
        updateNumberPlat: false,//是否重新配车
        dialogVisible: false,
        resetCarVisible: false,
        resetCarForm: {
          no: '',
          numberPlate: '',//重新配车车牌号
        },
        form: {
          couponAmount: undefined,
          crtHost: undefined,
          crtName: undefined,
          crtTime: undefined,
          crtUser: undefined,
          detailId: undefined,
          endCompanyName: undefined,
          goodsAmount: undefined,
          hasDiscount: undefined,
          hasMemberRight: undefined,
          hasPay: undefined,
          id: undefined,
          name: undefined,
          realName: undefined,
          no: undefined,
          orderAmount: undefined,
          orderOrigin: undefined,
          orderTourDetail: {
            adultNum: undefined,
            childNum: undefined,
            contactEmail: undefined,
            contactMan: undefined,
            contactPhone: undefined,
            costDetail: undefined,
            crtTime: undefined,
            dayNum: undefined,
            endAddr: undefined,
            endTime: undefined,
            goodId: undefined,
            hasInsure: undefined,
            id: undefined,
            isOutside: undefined,
            orderId: undefined,
            siteId: undefined,
            spePriceId: undefined,
            startAddr: undefined,
            startCity: undefined,
            startCityName: undefined,
            startCompanyId: undefined,
            startTime: undefined,
            totalNumber: undefined,
            tourUserIds: undefined,
            updTime: undefined,
            verificationId: undefined
          },
          payOrigin: undefined,
          picture: undefined,
          realAmount: undefined,
          refundStatus: undefined,
          startCompanyName: undefined,
          status: undefined,
          ststusName:undefined,
          telephone: undefined,
          type: undefined,
          updTime: undefined,
          userId: undefined,
          username: undefined,
          vehicleNumberPlat: undefined,
          version: undefined,
        },
        rules: {
          numberPlate: [
            {
              type: 'string',
              required: true,
              message: '请输入车牌号',
              trigger: 'blur'
            }
          ]
        },
      }
    },
    watch: {
      dialogVisible(newValue, oldValue) {
        if (!newValue) {
          this.$emit("memberOrderDetailDialogEvent", this.updateNumberPlat);
        }
      },
    },
    mounted() {
      this.getOrderInfo();

    },
    methods: {
      getOrderInfo() {
        this.form=this.memberRow
        this.dialogVisible=true
      }
    }
  }
</script>
<style>
  .label-text {
    margin-left: 10px;
    margin-right: 20px;
  }

  .label-title {
    margin-top: 10px;
  }

  .orderDetail tr th {
    background: #eef1f6;
  }

  .orderDetail tr td, .orderDetail tr th {
    width: 500px;
    text-align: center;
    border: 1px solid #dfe6ec;
    margin-left: 100px;
    margin-right: 100px;
    padding: 10px;
  }

  .label-value {
    margin-left: 80px;
    margin-right: 100px;
  }

  #license-img {
    width: 50px;
    height: 50px;
  }

  .order-details .el-form-item {
    margin-bottom: 10px !important;
  }

  .modal_modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    background: #000;
    z-index: 2000;
  }
</style>
