<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="运营区" prop="areaId" v-if="userName == 'admin'">
        <el-select v-model="queryParams.areaId" placeholder="请选择运营区" clearable>
          <el-option
            v-for="item in areaOptions"
            :key="item.areaId"
            :label="item.areaName"
            :value="item.areaId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单号" prop="orderNo">
        <el-input
          v-model="queryParams.orderNo"
          placeholder="请输入订单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="用户" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入用户"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备SN" prop="sn">
        <el-input
          v-model="queryParams.sn"
          placeholder="请输入设备SN"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="车牌号" prop="vehicleNum">
        <el-input
          v-model="queryParams.vehicleNum"
          placeholder="请输入车牌号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="区域" align="center" prop="area" />
      <el-table-column label="订单号" align="center" prop="orderNo" width="200"/>
      <el-table-column label="用户" align="center" prop="userName" width="100"/>
      <el-table-column label="设备SN" align="center" prop="sn" >
        <template slot-scope="scope">
          <router-link :to="'/system/device/sn/index/' + scope.row.sn" class="link-type">
            <span>{{ scope.row.sn }}</span>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="车牌号" align="center" prop="vehicleNum" >
        <template slot-scope="scope">
          <router-link :to="'/system/device/vehicleNum/index/' + scope.row.vehicleNum" class="link-type">
            <span>{{ scope.row.vehicleNum }}</span>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.et_order_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="90">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开始骑行" align="center" prop="unlockTime" width="90">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.unlockTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束骑行" align="center" prop="returnTime" width="90">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.returnTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付时间" align="center" prop="payTime" width="90">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.payTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付方式" align="center" prop="payType" width="80">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.et_pay_type" :value="scope.row.payType"/>
        </template>
      </el-table-column>
      <el-table-column label="金额(元)" align="center" prop="totalFee" width="70"/>
      <el-table-column label="备注" align="center" prop="mark" />
      <el-table-column label="订单时长" align="center" prop="duration" :formatter="formatDuration"/>
      <el-table-column label="距离" align="center" prop="distance" :formatter="formatDistance"/>
      <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:order:edit']"
          >详情</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="viewVideo(scope.row)"
            v-hasPermi="['system:order:edit']"
          >查看视频</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-check"
            v-if="scope.row.status == '5' && userName != 'admin'"
            @click="handleAudit(scope.row)"
            v-hasPermi="['system:order:edit']"
          >审核</el-button>
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.status == '6' && userName != 'admin'"
            icon="el-icon-money"
            @click="toCommunicate(scope.row)"
            v-hasPermi="['system:order:edit']"
          >去沟通</el-button>
          <el-button v-if="scope.row.status == '7' && userName == 'admin'"
                     size="mini"
                     type="text"
                     icon="el-icon-edit"
                     @click="handleAuthorityAudit(scope.row)"
                     v-hasPermi="['system:fault:query']"
          >官方审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改订单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
      <el-form ref="form" :model="form" label-width="140px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="支付订单编号：">{{ form.orderNo }}</el-form-item>
            <el-form-item label="租赁时长：">{{ formatDuration(form) }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="租赁用户：" >{{ form.phonenumber }}</el-form-item>
            <el-form-item label="行驶距离：" >{{ formatDistance(form) }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单状态：">{{ formatStatus(form.status) }}</el-form-item>
          </el-col>
        </el-row>
        <h2 style="font-weight: bold;font-size: 18px">设备信息</h2>
        <el-row>
          <el-col :span="12">
            <el-form-item label="车牌号：">{{ form.device.vehicleNum }}</el-form-item>
            <el-form-item label="SN：">{{ form.sn }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="MAC：">{{ form.device.mac }}</el-form-item>
            <el-form-item label="运营区域：" >{{ form.area }}</el-form-item>
          </el-col>
        </el-row>
        <h2 style="font-weight: bold;font-size: 18px">行程记录</h2>
        <el-row v-if="form.tripLogs">
          <template v-for="(log, index) in form.tripLogs" >
            <el-row :key="index">
              <el-col :span="12">
                <el-form-item :label="getTypeText(log.type)+'时间：'">
                  {{ log.createTime }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="getTypeText(log.type)+'地点：'">
                  {{ log.longitude }}, {{ log.latitude }}
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </el-row>
        <!--    显示路径    -->
        <el-row>
          <el-col :span="24">
            <trajectory-map
              v-if="showPlaceSearchMap"
              ref="map"
              :key="key"
              height="400px"
              :trip-route-str="form.tripRouteStr"
            />
          </el-col>
        </el-row>
        <h2 style="font-weight: bold;font-size: 18px;padding-top: 10px">费用明细</h2>
        <el-row>
          <el-col :span="12">
            <el-form-item label="预约费用：">{{ formatFee(form.appointmentFee) }}</el-form-item>
            <el-form-item label="运营区外调度费：">{{ formatFee(form.dispatchFee) }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="骑行费用：" >{{ formatFee(form.ridingFee) }}</el-form-item>
            <el-form-item label="停车点外调度费：" >{{ formatFee(form.manageFee) }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="实收：">{{ formatFee(form.payFee) }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="支付方式：">{{ formatType(form.payType) }}</el-form-item>
            <el-form-item label="支付时间：">{{ form.payTime }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计费模板：" >{{ form.rule.name }}</el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.etRefund">
          <el-col :span="12">
            <el-form-item label="预约费退款：">{{ formatFee(form.etRefund.appointmentFee) }}</el-form-item>
            <el-form-item label="调度费退款：">{{ formatFee(form.etRefund.dispatchFee) }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="骑行费用退款：" >{{ formatFee(form.etRefund.ridingFee) }}</el-form-item>
            <el-form-item label="停车点外调度费退款：" >{{ formatFee(form.etRefund.manageFee) }}</el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.etRefund">
          <el-col :span="12">
            <el-form-item label="退款原因：">{{ form.etRefund.reason }}</el-form-item>
            <el-form-item label="退款时间：">{{ form.etRefund.createTime }}</el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.etRefund">
          <el-col :span="12">
            <el-form-item label="结算总费用：">{{ formatFee(form.payFee-form.etRefund.appointmentFee-form.etRefund.dispatchFee-form.etRefund.ridingFee-form.etRefund.manageFee) }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 视频 -->
    <el-dialog :title="title2" :visible.sync="open2" width="600px" append-to-body>
      <el-form ref="form2" :model="form2" label-width="110px">
        <video v-if="form2.videoUrl" :src="form2.videoUrl" controls width="100%" height="auto"></video>
        <p v-else>暂无视频</p>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel2">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 审核对话框 -->
    <el-dialog title="审核" :visible.sync="open3" width="700px" append-to-body>
      <el-form :model="form3" ref="form3" label-width="100px" size="mini">
        <video v-if="form3.videoUrl" :src="form3.videoUrl" controls width="70%" height="auto"></video>
        <p v-else>暂无视频</p>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-show="view == true" @click="open3 = false">关 闭</el-button>
        <el-button v-show="view == false" type="success" @click="pass">通 过</el-button>
        <el-button v-show="view == false" type="danger" @click="reject">车辆有损坏</el-button>
      </div>
    </el-dialog>

    <el-dialog title="官方审核" :visible.sync="open5" width="700px" append-to-body>
      <el-form :model="form5" ref="form5" label-width="100px" size="mini">
        <el-form-item label="押金金额">
          <span style="color: red;font-weight: 700">200</span> 元
        </el-form-item>
        <el-form-item label="扣款金额：" prop="deductionAmount">
          <span style="color: red;font-weight: 700">{{form5.deductionAmount}}</span> 元
        </el-form-item>
<!--        <video v-if="form5.videoUrl" :src="form5.videoUrl" controls width="70%" height="auto"></video>-->
<!--        <p v-else>暂无视频</p>-->
        <!--   展示音频     -->
        <span>展示音频</span>
<!--        <el-col :span="24">-->
<!--          <el-form-item label="上传录音" prop="soundRecording" >-->
<!--            <audio-upload v-model="form5.audioFiles" :limit="5" :file-size="10" :file-type="['mp3', 'wav', 'ogg', 'aac','m4a']" />-->
<!--          </el-form-item>-->
<!--        </el-col>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-show="view == true" @click="open5 = false">关 闭</el-button>
        <el-button v-show="view == false" type="success" @click="authorityPass">通 过</el-button>
        <el-button v-show="view == false" type="danger" @click="authorityReject">驳回</el-button>
      </div>
    </el-dialog>

    <!-- 沟通录音弹窗 -->
    <el-dialog style="margin-top: 10vh !important;" title="沟通" :visible.sync="open4" width="700px" append-to-body>
      <el-form :model="form4" :rules="rules" ref="form4" label-width="100px" size="mini">
        <!--    录音文件    soundRecording -->
        <el-col :span="24">
          <el-form-item label="上传录音" prop="soundRecording" >
            <audio-upload v-model="form4.audioFiles" :limit="5" :file-size="10" :file-type="['mp3', 'wav', 'ogg', 'aac','m4a']" />
          </el-form-item>
        </el-col>
        <!--    扣款金额    确定扣款  deduction -->
        <el-col :span="24">
          <el-form-item label="扣款金额" prop="deductionAmount">
            <el-input v-model="form4.deductionAmount" placeholder="请输入扣款金额" />
          </el-form-item>
        </el-col>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open4 = false">关 闭</el-button>
        <el-button type="success" @click="confirmDeduction">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listOrder,
    getOrder,
    delOrder,
    addOrder,
    updateOrder,
    changePrice,
    refund,
    returnVehicle,
    deduction, passAudit, rejectAudit, authoritypass
  } from '@/api/system/order'
import TrajectoryMap from '@/components/Map/TrajectoryMap'
  import { getArea, optionselect as getAreaOptionselect } from '@/api/system/area'
  import { updateWithdraw } from '@/api/system/withdraw'
  import { MessageBox } from 'element-ui'

export default {
  name: "Order",
  dicts: ['et_order_type', 'et_pay_type', 'et_order_status'],
  components: {TrajectoryMap },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      userName: undefined,
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 通过key重新渲染area-map组件
      key: 0,
      areaOptions: [],
      // 总条数
      total: 0,
      // 订单表格数据
      orderList: [],
      area: null,
      // 弹出层标题
      title: "",
      title2: "",
      showPlaceSearchMap: false,
      // 是否显示弹出层
      open: false,
      open2: false,
      open3: false,
      open4: false,
      open5: false,
      view: false,
      view5: false,
      vehicleNum: null,
      audioFiles: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        areaId: null,
        area: null,
        orderNo: null,
        type: "1",
        statusList: '',// 如果
        userId: null,
        userName: null,
        deviceMac: null,
      },
      // 表单参数
      form: {
        device: {
          vehicleNum: null,
          mac: null
        },
        etRefund: {
          appointmentFee: null,
          ridingFee: null,
          dispatchFee: null,
          manageFee: null,
          reason: null,
          createTime: null
        },
        rule: {
          name: null
        },
        status: null,
        payType: null,
        payFee: null,
        appointmentFee: null,
        tripRouteStr: null,
        vehicleNum: null,
      },
      form2: {
        orderNo: null,
        appointmentFee: null,
        ridingFee: null,
        dispatchFee: null,
        manageFee: null,
        reason: null,
        createTime: null
      },
      form3: {
        orderNo: null,
        appointmentFee: null,
        ridingFee: null,
        dispatchFee: null,
        manageFee: null,
        reason: null,
        createTime: null
      },
      form4: {
        orderNo: null,
        deductionAmount: null,
        audioFiles: []
      },
      form5: {
        orderNo: null,
      },
      // 表单校验
      rules: {
        orderNo: [
          { required: true, message: "订单号不能为空", trigger: "blur" }
        ],
        userId: [
          { required: true, message: "用户不能为空", trigger: "blur" }
        ],
        payType: [
          { required: true, message: "支付方式不能为空", trigger: "change" }
        ],
        deductionAmount: [
          { required: true, message: "扣款金额不能为空", trigger: "blur" },
          { pattern: /^\d+$/, message: '扣款金额必须为正整数', trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    console.log("当前用户信息：",this.$store.state.user.name)
    this.userName = this.$store.state.user.name;
    if(this.userName === 'admin'){
      this.queryParams.statusList = '7';
    }else{
      this.queryParams.statusList = '5,6';
    }
    // statusList: '5,6,7',// 如果
    this.reset();
    this.reset2();
    this.getList();
    this.getAreaList();
  },
  methods: {
    confirmDeduction(){
      // 扣款金额 1. 退剩余押金
      this.$refs["form4"].validate(valid => {
        if (valid) {
          console.log("------44444---")
          if (this.form4.orderId != null) {
            this.form4.status = "7";
            updateOrder({
              orderId:this.form4.orderId,
              status:this.form4.status,
              deductionAmount:this.form4.deductionAmount,
              audioFiles: this.form4.audioFiles
            }).then(response => {
              this.$modal.msgSuccess("操作成功");
              this.open4 = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 通过  */
    pass(){
      this.$refs["form3"].validate(valid => {
        if (valid) {
          if (this.form3.orderNo != null) {
            console.log("---------"+JSON.stringify(this.form3))
            passAudit(this.form3.orderNo).then(response => {
              this.$modal.msgSuccess("操作成功");
              this.open3 = false;
              this.getList();
            });
          }
        }
      });
    },
    /**官方审核通过 自动退押金 */
    authorityPass(){
      this.$refs["form5"].validate(valid => {
        if (valid) {
          if (this.form5.orderNo != null) {
            console.log("---------"+JSON.stringify(this.form5))
            authoritypass(this.form5.orderNo).then(response => {
              this.$modal.msgSuccess("操作成功");
              this.open3 = false;
              this.getList();
            });
          }
        }
      });
    },
    /**官方驳回  返回状态 */
    authorityReject(){
      console.log("---------")
      this.$refs["form5"].validate(valid => {
        if (valid) {
          console.log("------66666---")
          if (this.form5.orderId != null) {
            this.form5.status = "6";
            updateOrder({orderId:this.form5.orderId,status:this.form5.status}).then(response => {
              this.$modal.msgSuccess("操作成功");
              this.open5 = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 拒绝  拒绝 提供押金抵扣*/
    reject(){
      console.log("---------")
      this.$refs["form3"].validate(valid => {
        if (valid) {
          console.log("------222---")
          if (this.form3.orderId != null) {
            this.form3.status = "6";
            updateOrder({orderId:this.form3.orderId,status:this.form3.status}).then(response => {
              this.$modal.msgSuccess("操作成功");
              this.open3 = false;
              this.getList();
            });
          }
        }
      });
    },
    handleAudit(row){
      this.open3 = true;
      this.form3 = row;
      console.log("this.form3============="+JSON.stringify(this.form3))
      this.view = false;
    },
    handleAuthorityAudit(row){
      this.open5 = true;
      this.form5 = row;
      console.log("this.form5============="+JSON.stringify(this.form5))
      this.view5 = false;
    },
    getTypeText(type) {
      switch (type) {
        case '1':
          return '开锁';
        case '2':
          return '临时锁车';
        case '3':
          return '解锁';
        case '4':
          return '关锁';
        default:
          return ''; // 或者根据实际情况返回其他默认值
      }
    },
    /** 查询字典类型列表 */
    getAreaList() {
      getAreaOptionselect().then(response => {
        this.areaOptions = response.data;
      });
    },
    changePrice(row){
      // console.log('changePrice')
      const orderId = row.orderId || this.ids
      this.reset2();
      getOrder(orderId).then(response => {
        this.form2 = response.data;
        // console.log("this.form2============="+JSON.stringify(this.form2));
        this.open2 = true;
        this.title2 = "改价";
      });
    },
    viewVideo(row){
      const orderId = row.orderId || this.ids
      this.reset2();
      getOrder(orderId).then(response => {
        this.form2 = response.data;
        this.open2 = true;
        this.title2 = "视频";
      });
    },
    // 去沟通
    toCommunicate: function(row) {
      this.$modal.confirm2('请确保与客户进行沟通并通过用户同意后方可扣款，并做好录音上传审核通过后方可扣押金,客户电话：'+row.userName,"车损押金扣款","去沟通").then(function() {
        console.log("-----去沟通----")
        // 打开上传录音弹窗，输入扣款金额
      }).then(() => {
        this.form4 = row;
        this.open4 = true;
      }).catch(() => {
      })
    },
    refund(row){
      // console.log('changePrice')
      const orderId = row.orderId || this.ids
      this.reset2();
      getOrder(orderId).then(response => {
        this.form2 = response.data;
        // console.log("this.form2============="+JSON.stringify(this.form2));
        this.open2 = true;
        this.title2 = "退款";
      });
    },
    returnVehicle(row){
      // console.log('returnVehicle--------------'+JSON.stringify(row))
      this.$modal.confirm('是否确认辅助还车MAC为：' + row.sn + '"的设备吗？').then(function() {
        return returnVehicle({orderNo:row.orderNo,returnType:"2"});
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("操作成功");
      }).catch(() => {
      });
    },
    formatDistance(row){
      // console.log("============"+JSON.stringify(row))
      // console.log("============"+row.distance)
      if(row == undefined || row.distance == null){
        return "";
      }
      return (row.distance / 1000).toFixed(1) + ' 公里';
    },
    //金额格式化，如果金额是null，则返回0.00，如果本来就是两位小数则直接返回，否则保留两位小数
    formatFee(fee){
      if (!fee) return '0.00元';
      const feeStr = fee.toString();
      const twoDecimalPattern = /^\d+(\.\d{2})?$/;
      if (twoDecimalPattern.test(feeStr)) {
        return `${feeStr}元`;
      }
      const formattedFee = parseFloat(fee).toFixed(2);
      return `${formattedFee}元`;
    },
    formatStatus(status) {
      //状态：0-预约中，1-取消预约，2-开始骑行，3-骑行结束，4-订单结束
      if (!status) return '未知';
      switch (status) {
        case '0':
          return '预约中';
        case '1':
          return '取消预约';
        case '2':
          return '开始骑行';
        case '3':
          return '骑行结束';
        case '4':
          return '订单结束';
        case '5':
          return '待审核';
        case '6':
          return '车辆有损坏';
        case '7':
          return '待官方审核';
        default:
          return '未知';
      }
    },
    formatType(payType) {
      switch (payType) {
        case 'ali':
          return '支付宝';
        case 'wx':
          return '微信';
        case 'sys':
          return '系统自动';
        default:
          return '无';
      }
    },
    formatDuration(row) {
      const createTime = new Date(row.createTime);
      const endTime = new Date(row.returnTime);
      if (!row.returnTime) {
        return "未结束";
      }
      const durationMilliseconds = endTime - createTime;
      // 计算小时、分钟和秒
      const hours = Math.floor(durationMilliseconds / (1000 * 60 * 60));
      const minutes = Math.floor((durationMilliseconds % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((durationMilliseconds % (1000 * 60)) / 1000); // 取整秒数
      // 格式化输出
      const formattedTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
      return formattedTime;
    },
    /** 查询订单列表 */
    getList() {
      this.loading = true;
      listOrder(this.queryParams).then(response => {
        this.orderList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 取消按钮
    cancel2() {
      this.open2 = false;
      this.reset2();
    },
    // 表单重置
    reset() {
      this.form = {
        orderId: null,
        areaId: null,
        orderNo: null,
        userId: null,
        deviceMac: null,
        payTime: null,
        payType: null,
        type: null,
        totalFee: null,
        mark: null,
        duration: null,
        distance: null,
        status: null,
        createTime: null,
        device: {
          vehicleNum: null,
          mac: null
        },
        etRefund: {
          appointmentFee: null,
          ridingFee: null,
          dispatchFee: null,
          manageFee: null,
          reason: null,
          createTime: null
        },
        appointmentFee: null,
        ridingFee: null,
        dispatchFee: null,
        manageFee: null,
        returnTime: null,
        user: {
          nickName: null
        },
        rule: {
          name: null
        }
      };
      this.resetForm("form");
    },
    reset2() {
      this.form2 = {
        orderId: null,
        orderNo: null,
        payTime: null,
        appointmentFee: null,
        ridingFee: null,
        dispatchFee: null,
        manageFee: null,
        reason: null,
        createTime: null
      };
      this.resetForm("form2");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.orderId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加订单";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const orderId = row.orderId || this.ids
      getOrder(orderId).then(response => {
        console.log("=====getOrder======="+JSON.stringify(response))
        this.form = response.data;
        if (response.data.etRefund) {
          this.form.etRefund = response.data.etRefund;
        }
        this.showPlaceSearchMap = true;
        this.open = true;
        this.title = "订单详情";
        this.key++;
      });
    },
    /** 提交改价 */
    submitChangePrice(){
      // console.log("=====submitChangePrice======="+this.form2)
      changePrice(this.form2).then(response => {
        this.$modal.msgSuccess("改价成功");
        this.open2 = false;
        this.getList();
      });
    },
    /** 提交退款 */
    submitRefund(){
      // console.log("=====submitRefund======="+this.form2)
      refund(this.form2).then(response => {
        this.$modal.msgSuccess("退款成功");
        this.open2 = false;
        this.getList();
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.orderId != null) {
            updateOrder(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addOrder(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const orderIds = row.orderId || this.ids;
      this.$modal.confirm('是否确认删除订单编号为"' + orderIds + '"的数据项？').then(function() {
        return delOrder(orderIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/order/export', {
        ...this.queryParams
      }, `order_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style>
  .el-dialog__body{
    padding: 0px 20px !important;
  }
  .el-form-item--mini.el-form-item {
    margin-bottom: 10px !important;
  }
  .el-dialog:not(.is-fullscreen) {
    margin-top: 1vh !important;
  }
</style>
