<template>
  <el-dialog title="订单详情" :visible.sync="isVisible">
    <el-form>
      <el-row>
        <el-col :span="12">
          <el-form-item label="订单号">
            <span>{{row.no}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付时间">
            <span>{{row.updTime}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="订单状态">
            <span v-if="row.status == '2'">取消</span>
			<span v-if="row.status == '3'">待付款</span>
			<span v-if="row.status == '4'">待出行</span>
			<span v-if="row.status == '5'">出行中</span>
			<span v-if="row.status == '6'">已完成</span>
			<span v-if="row.status == '-1'">定损中</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="用户ID/实名">
            <span>{{row.userId}}</span>/<span>{{row.username}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="配车">
            <span>{{row.vehicleNumberPlat}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="取车">
            <span>{{dateFormat(row.orderRentVehicleDetail.startTime)}}</span>
            <span>{{row.orderRentVehicleDetail.startCityName}}{{row.orderRentVehicleDetail.startAddr}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="交车公司">
            <span>{{row.startCompanyName}}</span>
            <span>({{row.orderRentVehicleDetail.startCityName}}{{row.orderRentVehicleDetail.startAddr}})</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="还车">
            <span>{{dateFormat(row.orderRentVehicleDetail.endTime)}}</span>
            <span>{{row.orderRentVehicleDetail.endCityName}}{{row.orderRentVehicleDetail.endAddr}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="收车公司">
            <span>{{row.endCompanyName}}</span>
			    <!--<span>({{row.orderRentVehicleDetail.endCityName}}{{row.orderRentVehicleDetail.endAddr}})</span></span>-->
          </el-form-item>
        </el-col>
      </el-row>
      <!--<el-table :data="tableData" border fit highlight-current-row style="width: 100%">
        <el-table-column width="200" align="center" label="房车">
            <template scope="scope">
                <span>{{scope.no}}</span>
            </template>
        </el-table-column>
        
       </el-table>-->
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="sure">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import {
    page,
    saveOrderViolation
  } from 'api/order/rentVehicle';
  import {mapGetters} from 'vuex';
  import {
    formatDate
  } from '../../../utils/dateFormattor';
  import {
    getToken
  } from '../../../utils/auth';
  import {
    getOneIllegalRow
  } from 'api/order/rentVehicle';
  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";
  import ElForm from "../../../../node_modules/element-ui/packages/form/src/form.vue";
  export default {
    props: ["row"],
    name: 'illegalDialog',
    components: {
      ElForm,
      ElFormItem,
      ElCol,
      ElInput,
      ElRow
    },
    data() {
      return {
        isVisible: false,
        tableData:[],
      }
    },
    created() {
        console.log(JSON.stringify(this.row))

    },
    watch: {
      isVisible(newValue, oldValue){
        if(!newValue){
          this.$emit('detailEvent', false);
        }
      },
    },
    mounted() {
      let that = this;
      this.isVisible = true;
    },
    computed: {
      ...mapGetters([
        'elements',
      ]),
      getHeaderWithToken() {
        return {Authorization: getToken()};
      }
    },
    methods: {
      /**
       * 弹框-取消
       * */
      cancel() {
        this.$emit('detailEvent', false);
      },
      sure:function(){
          this.$emit('detailEvent', false);
      },
      /**
       * 格式化时间
       * @param timestamp
       * @returns {*}
       */
      dateFormat(timestamp) {
        let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        return formatDate(date, 'yyyy-MM-dd hh:mm');
      },
    }
  }
</script>
<style>
  .el-form-item__content{
    display: inline-block;
  }
</style>
