<template>
  <el-dialog title="违章查询" :visible.sync="isVisible">
    <el-form>
      <el-row>
        <el-col :span="24">
          <el-form-item label="订单号">
            <span>{{row.no}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="订单金额">
            <span>{{row.realAmount}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <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="用户ID/实名">
            <span>{{row.userId}}</span>/<span>{{row.username}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="取车">
            <span>{{dateFormat(row.orderRentVehicleDetail.startTime)}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <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="8">
          <el-form-item label="还车">
            <span>{{dateFormat(row.orderRentVehicleDetail.endTime)}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="收车公司">
            <span><span>{{row.endCompanyName}}</span>
			    <span>({{row.orderRentVehicleDetail.endCityName}}{{row.orderRentVehicleDetail.endAddr}})</span></span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="违章截图" :style="{display:'block'}">
            <!--<el-upload-->
              <!--:action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"-->
              <!--list-type="picture-card"-->
              <!--:headers="getHeaderWithToken"-->
              <!--:on-success="handleSuccess"-->
              <!--:on-remove="handleRemove">-->
              <!--<i class="el-icon-plus"></i>-->
            <!--</el-upload>-->
            <!--<el-dialog v-model="dialogVisible" size="tiny">-->
              <!--<img width="100%" :src="dialogImageUrl" alt="">-->
            <!--</el-dialog>-->
            <el-upload
              class="upload-demo"
              :headers="getHeaderWithToken"
              :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
              :on-remove="handleRemove"
              :file-list="fileList2"
              :on-success="handleSuccess"
              list-type="picture-card">
              <!--<div slot="tip" class="el-upload__tip">最多上传5张</div>-->
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
          <el-form-item label="违章罚款" style="display: inline-block;">
            <el-input v-model="price" type="number" placeholder="请输入违章罚款金额"></el-input>
          </el-form-item>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="okHandler('form')">确 定</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 {
        BASE_API: process.env.BASE_API,
        price: undefined,//违章罚款金额
        isVisible: false,
        fileList2:[],//违章截图
      }
    },
    created() {

    },
    watch: {
      isVisible(newValue, oldValue){
        if(!newValue){
          this.$emit('illegalEvent', false);
        }
      },
    },
    mounted() {
      let that = this;
//      if(that.row.refundStatus == 3) {
        //refundStatus退款状态  0、未退款  1、已退还所有（取消订单时）2、 已退还部分（保留违章预备金）3、已退还所有押金（扣除该扣除的）
        that.getOne(that.row.detailId);
//      }
      this.isVisible = true;
    },
    computed: {
      ...mapGetters([
        'elements',
      ]),
      getHeaderWithToken() {
        return {Authorization: getToken()};
      }
    },
    methods: {
      /**
       * 根据id查询一条记录
       * */
     getOne(id){
       let t = this;
        getOneIllegalRow(id).then(response => {
          if(response.status == 200){
            let arr = response.data.picture.split(",");
            let fileList2 = [];
            let p = {};
            arr.map(function(item){
              p = {
                url: item
              };
              fileList2.push(p);
            });
            t.price = parseFloat(response.data.price);
            t.fileList2 = fileList2;
            t.id = response.data.id?response.data.id: undefined;
          } else {
            this.$notify({
              title: '失败',
              message: response.menu,
              type: 'error',
              duration: 2000
            });
          }
        })
     },
      /**
       * 上传成功
       * */
      handleSuccess(res, file) {
        let c = {url: res.data};
        this.fileList2.push(c);
        this.showLoadingBody = false;
      },
      /**
       * 删除违章图片
       * */
      handleRemove(file, fileList){
        this.fileList2 = fileList;
      },
      /**
       * 确定
       * */
      okHandler() {
        let arr = [];
        this.fileList2.map(function(item){
          arr.push(item.url);
        });
        let params = {
          picture:arr.join(","),
          price:this.price,
          detailId: this.row.detailId,
          id: this.id
        };
        saveOrderViolation(params).then(response => {
          if (response.status === 200) {
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            });
            this.$emit('illegalEvent', false);
          } else {
            this.$notify({
              title: '创建失败',
              message: '操作失败！',
              type: 'error',
              duration: 2000
            });
          }
        });
      },
      /**
       * 弹框-取消
       * */
      cancel() {
        this.$emit('illegalEvent', false);
      },
      /**
       * 格式化时间
       * @param timestamp
       * @returns {*}
       */
      dateFormat(timestamp) {
        let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
      },
    }
  }
</script>
<style>
  .el-form-item__content{
    display: inline-block;
  }
</style>
