<template>
  <div class="app-container" v-loading="loading">
    <el-row :gutter="10">
      <el-col :span="18">
        <el-card>
          <el-row class="mb10" type="flex" justify="end">
            <el-button
              size="small"
              plain
              type="danger"
              icon="el-icon-close"
              @click="handleEnd(detail)"
              v-has-permi="['bst:order:end']"
              v-show="OrderStatus.canEnd().includes(detail.status)"
            >结束订单</el-button>
            <el-button
              size="small"
              plain
              type="warning"
              icon="el-icon-wallet"
              @click="handleRefund(detail)"
              v-has-permi="['bst:order:refund']"
              v-show="OrderStatus.canRefund().includes(detail.status)"
            >退款</el-button>
            <el-button
              size="small"
              plain
              type="warning"
              icon="el-icon-wallet"
              @click="handleVerify(detail)"
              v-has-permi="['bst:order:verify']"
              v-show="OrderStatus.canVerify().includes(detail.status)"
            >审核</el-button>
          </el-row>
          <collapse-panel :value="true" title="基础信息">
            <el-descriptions :column="4" >
              <el-descriptions-item label="订单编号">{{ detail.no | dv}}</el-descriptions-item>
              <el-descriptions-item label="订单状态">
                <dict-tag :options="dict.type.order_status" :value="detail.status" size="small"/>
              </el-descriptions-item>
              <el-descriptions-item label="运营区">{{ detail.areaName | dv}}</el-descriptions-item>
              <el-descriptions-item label="创建时间">{{ detail.createTime | dv}}</el-descriptions-item>
              <el-descriptions-item label="开始时间">{{ detail.startTime | dv}}</el-descriptions-item>
              <el-descriptions-item label="结束时间">{{ detail.endTime | dv}}</el-descriptions-item>
              <el-descriptions-item label="到期时间">{{ detail.maxTime | dv}}</el-descriptions-item>
              <el-descriptions-item label="骑行时长">{{ toDescriptionFromSecond(detail.duration).text | dv}}</el-descriptions-item>
              <el-descriptions-item label="骑行距离">{{ detail.distance / 1000 | fix2 | dv}} 公里</el-descriptions-item>
              <el-descriptions-item label="结束原因" v-if="detail.endReason">{{ detail.endReason | dv }}</el-descriptions-item>
              <el-descriptions-item label="取消原因" v-if="detail.cancelRemark">{{ detail.cancelRemark | dv }}</el-descriptions-item>
            </el-descriptions>
          </collapse-panel>
          
          <collapse-panel :value="true" title="费用信息">
            <el-descriptions :column="4" >
              <el-descriptions-item label="预存">{{ detail.depositFee | fix2 | dv }} 元</el-descriptions-item>
              <el-descriptions-item label="结算金额" v-if="detail.totalFee != null">{{ detail.totalFee | fix2 | dv }} 元</el-descriptions-item>
              <el-descriptions-item label="骑行费" v-if="detail.ridingFee != null">{{ detail.ridingFee | fix2 | dv }} 元</el-descriptions-item>
              <el-descriptions-item label="调度费" v-if="detail.dispatchFee">{{ detail.dispatchFee | fix2 | dv }} 元</el-descriptions-item>
              <el-descriptions-item label="管理费" v-if="detail.manageFee">{{ detail.manageFee | fix2 | dv }} 元</el-descriptions-item>
              <el-descriptions-item label="车损费" v-if="detail.deductionFee">{{ detail.deductionFee | fix2 | dv }} 元</el-descriptions-item>
              <el-descriptions-item label="退款">
                {{ detail.payRefunded | fix2 | dv }} 元
                <template v-if="detail.payRefunding">
                  <span style="color: red;">（退款中：{{ detail.payRefunding | fix2 | dv }} 元）</span>
                </template>
              </el-descriptions-item>
              <el-descriptions-item label="实收">{{ detail.payedAmount - detail.payRefunded - detail.payRefunding | fix2 | dv }} 元</el-descriptions-item>
            </el-descriptions>
          </collapse-panel>
          
          <collapse-panel :value="true" title="套餐信息">
            <el-descriptions :column="4" >
              <el-descriptions-item label="套餐名称">
                {{ detail.suitName }}
                <dict-tag :options="dict.type.suit_type" :value="detail.suitType" size="mini" style="margin-left: 4px;"/>
                <dict-tag :options="dict.type.suit_riding_rule" :value="detail.suitRidingRule" size="mini" style="margin-left: 4px;"/>
              </el-descriptions-item>
              <el-descriptions-item label="免费骑行时间" :span="3">
                {{ detail.suitFreeRideTime | dv }}
                <dict-tag :options="dict.type.suit_rental_unit" :value="detail.suitRentalUnit"/>
              </el-descriptions-item>
              <el-descriptions-item label="起步规则" :span="3" v-if="SuitRidingRule.START === detail.suitRidingRule">
                在{{detail.suitStartRule.startingTime}}{{unitLabel(detail.suitRentalUnit)}}以内，起步价{{detail.suitStartRule.startingPrice}}元；
                超出起步时间后，超出的时间每{{detail.suitStartRule.timeoutTime}}{{unitLabel(detail.suitRentalUnit)}}收费{{detail.suitStartRule.timeoutPrice}}元，
                不满{{detail.suitStartRule.timeoutTime}}{{unitLabel(detail.suitRentalUnit)}}，按{{detail.suitStartRule.timeoutTime}}{{unitLabel(detail.suitRentalUnit)}}计算。
              </el-descriptions-item>
              <el-descriptions-item label="区间规则" :span="3" v-if="SuitRidingRule.INTERVAL === detail.suitRidingRule">
                <template v-if="detail.suitIntervalRule && detail.suitIntervalRule.length > 0">
                  <div v-for="(rule, index) in detail.suitIntervalRule" :key="index">
                    <template v-if="index === detail.suitIntervalRule.length - 1">
                      在{{rule.start}}{{unitLabel(detail.suitRentalUnit)}}之后，
                      每{{rule.eachUnit}}{{unitLabel(detail.suitRentalUnit)}}收费{{rule.fee}}元；
                    </template>
                    <template v-else>
                      在{{rule.start}}~{{rule.end}}{{unitLabel(detail.suitRentalUnit)}}之间，
                      每{{rule.eachUnit}}{{unitLabel(detail.suitRentalUnit)}}收费{{rule.fee}}元；
                    </template>
                  </div>
                </template>
                <template v-else>
                  暂无区间规则
                </template>
              </el-descriptions-item>
            </el-descriptions>
          </collapse-panel>
          
          <!-- <collapse-panel :value="true" title="归还信息">
            <el-descriptions :column="4" >
              <el-descriptions-item label="定位方式">
                <dict-tag :options="dict.type.order_return_mode" :value="detail.returnMode" size="small"/>
              </el-descriptions-item>
              <el-descriptions-item label="归还类型">
                <dict-tag :options="dict.type.order_return_type" :value="detail.returnType" size="small"/>
              </el-descriptions-item>
              <el-descriptions-item label="归还时间">{{ detail.endTime }}</el-descriptions-item>
              <el-descriptions-item label="归还定位">{{ detail.returnLon | dv }}, {{ detail.returnLat | dv }}</el-descriptions-item>
              <el-descriptions-item label="起始站点">{{ detail.startAreaSubName | dv }}</el-descriptions-item>
              <el-descriptions-item label="归还站点">{{ detail.endAreaSubName | dv }}</el-descriptions-item>
            </el-descriptions>
          </collapse-panel> -->
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <collapse-panel :value="true" title="设备信息">
            <el-descriptions :column="1" >
              <el-descriptions-item label="SN">{{ detail.deviceSn }}</el-descriptions-item>
              <el-descriptions-item label="MAC">{{ detail.deviceMac }}</el-descriptions-item>
              <el-descriptions-item label="车牌号">{{ detail.deviceVehicleNum }}</el-descriptions-item>
            </el-descriptions>
          </collapse-panel>
          
          <collapse-panel :value="true" title="用户信息">
            <el-descriptions :column="1" >
              <el-descriptions-item label="用户">{{ detail.userName }}</el-descriptions-item>
              <el-descriptions-item label="手机">{{ detail.userPhone }}</el-descriptions-item>
            </el-descriptions>
          </collapse-panel>
          
          <collapse-panel :value="true" title="支付信息">
            <el-descriptions :column="1" >
              <el-descriptions-item label="支付单号">{{ detail.payNo }}</el-descriptions-item>
              <el-descriptions-item label="支付渠道">{{ detail.payChannelName }}</el-descriptions-item>
              <el-descriptions-item label="支付时间">{{ detail.payTime }}</el-descriptions-item>
            </el-descriptions>
          </collapse-panel>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="box-card" v-if="detail.id" style="margin-top: 10px;">
      <el-tabs lazy>
        <el-tab-pane label="车辆轨迹" v-if="checkPermi(['bst:locationLog:list'])">
          <device-location :query="{orderId: detail.id, timeRange: [detail.startTime, detail.endTime == null ? detail.maxTime : detail.endTime]}" :area-id="detail.areaId" />
        </el-tab-pane>
        <el-tab-pane label="收益信息" v-if="checkPermi(['bst:bonus:list'])">
          <bonus :query="{bstId: detail.id, bstType: BonusBstType.ORDER}" />
        </el-tab-pane>
        <el-tab-pane label="订单车辆" v-if="checkPermi(['bst:orderDevice:list'])">
          <order-device :query="{orderId: detail.id}" />
        </el-tab-pane>
        <el-tab-pane label="支付信息" v-if="checkPermi(['bst:pay:list'])">
          <pay :query="{bstId: detail.id, bstType: PayBstType.ORDER}"/>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <order-refund-dialog :id="detail.id" :visible.sync="showRefundDialog" @success="getDetail" />

    <order-verify-dialog :id="detail.id" :visible.sync="showVerifyDialog" @success="getDetail" />
  </div>

</template>

<script>
import { getOrder, endOrder } from '@/api/bst/order'
import CollapsePanel from '@/components/CollapsePanel/index.vue'
import {SuitRidingRule, PayBstType, BonusBstType, OrderStatus} from '@/utils/enums'
import OrderDevice from '@/views/bst/orderDevice/index.vue'
import Pay from '@/views/bst/pay/index.vue'
import Bonus from '@/views/bst/bonus/index.vue'
import DeviceLocation from '@/views/bst/device/view/components/DeviceLocation.vue'
import OrderRefundDialog from '@/views/bst/order/components/OrderRefundDialog.vue'
import OrderVerifyDialog from '@/views/bst/order/components/OrderVerifyDialog.vue'
import { toDescriptionFromSecond } from '@/utils/date'

export default {
  name: 'OrderView',
  dicts: ['order_status', 'device_lock_status', 'suit_type', 'suit_rental_unit', 'suit_riding_rule', 'order_return_mode', 'order_return_type'],
  components: {
    CollapsePanel,
    OrderDevice,
    Pay,
    Bonus,
    DeviceLocation,
    OrderRefundDialog,
    OrderVerifyDialog
  },
  data() {
    return {
      OrderStatus,
      id: null,
      detail: {},
      loading: false,
      SuitRidingRule,
      PayBstType,
      BonusBstType,
      showRefundDialog: false,
      showVerifyDialog: false,
    }
  },
  created() {
    this.id = this.$route.params.id
    this.getDetail()
  },
  methods: {
    toDescriptionFromSecond,
    getDetail() {
      this.loading = true
      getOrder(this.id).then(res => {
        this.detail = res.data;
      }).finally(() => {
        this.loading = false
      })
    },
    handleRefund(row) {
      this.showRefundDialog = true;
    },
    handleVerify(row) {
      this.showVerifyDialog = true;
    },
    handleEnd(row) {  
      this.$confirm(`确定结束订单${row.no}吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true;
        endOrder(row.id).then(response => {
          this.$message.success("结束成功");
          this.getDetail();
        }).catch(() => {
          this.loading = false;
        });
      });
    },
    unitLabel(value) {
      return this.dict.type.suit_rental_unit.find(item => item.value === value)?.label || value;
    },
  }
}
</script>