<template>
  <div class="app-container" v-loading="loading">
    <el-row :gutter="16">
      <el-col :span="18">
        <el-card>
          <collapse-panel :value="true" title="基础信息">
            <el-descriptions :column="3" >
              <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="骑行时长">{{ detail.duration | dv}}</el-descriptions-item>
              <el-descriptions-item label="骑行距离">{{ detail.distance | fix2 | dv}} km</el-descriptions-item>
              <el-descriptions-item label="终止原因" :span="2">{{ detail.endReason || '-' }}</el-descriptions-item>
              <el-descriptions-item label="取消备注" :span="3">{{ detail.cancelRemark || '-' }}</el-descriptions-item>
            </el-descriptions>
          </collapse-panel>
          
          <collapse-panel :value="true" title="费用信息">
            <el-descriptions :column="4" >
              <el-descriptions-item label="支付金额">{{ detail.payAmount | fix2 | dv }} 元</el-descriptions-item>
              <el-descriptions-item label="预存金额">{{ detail.depositFee | fix2 | dv }} 元</el-descriptions-item>
              <el-descriptions-item label="总费用">{{ detail.totalFee | fix2 | dv }} 元</el-descriptions-item>
              <el-descriptions-item label="调度费">{{ detail.dispatchFee | fix2 | dv }} 元</el-descriptions-item>
              <el-descriptions-item label="管理费">{{ detail.manageFee | fix2 | dv }} 元</el-descriptions-item>
              <el-descriptions-item label="骑行费">{{ detail.ridingFee | fix2 | dv }} 元</el-descriptions-item>
              <el-descriptions-item label="车损费">{{ detail.deductionFee | fix2 | dv }} 元</el-descriptions-item>
              <el-descriptions-item label="已退款">{{ detail.payRefunded | fix2 | dv }} 元</el-descriptions-item>
              <el-descriptions-item label="退款中">{{ detail.payRefunding | fix2 | dv }} 元</el-descriptions-item>
              <el-descriptions-item label="实收">{{ detail.payAmount - detail.payRefunded - detail.payRefunding | fix2 | dv }} 元</el-descriptions-item>
            </el-descriptions>
          </collapse-panel>
          
          <collapse-panel :value="true" title="套餐信息">
            <el-descriptions :column="3" >
              <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">{{ formattedStartRule }}</el-descriptions-item>
              <el-descriptions-item label="区间规则" :span="3" v-if="SuitRidingRule.INTERVAL === detail.suitRidingRule">{{ formattedIntervalRule }}</el-descriptions-item> -->
            </el-descriptions>
          </collapse-panel>
          
          <collapse-panel :value="true" title="归还信息">
            <el-descriptions :column="3" >
              <el-descriptions-item label="归还方式">
                <dict-tag :options="dict.type.order_return_mode" :value="detail.returnMode"/>
              </el-descriptions-item>
              <el-descriptions-item label="归还类型">
                <dict-tag :options="dict.type.order_return_type" :value="detail.returnType"/>
              </el-descriptions-item>
              <el-descriptions-item label="归还时间">{{ detail.endTime }}</el-descriptions-item>
              <el-descriptions-item label="归还经度" v-if="detail.returnLon">{{ detail.returnLon }}</el-descriptions-item>
              <el-descriptions-item label="归还纬度" v-if="detail.returnLat">{{ detail.returnLat }}</el-descriptions-item>
              <el-descriptions-item label="起始站点">{{ detail.startAreaSubName || '-' }}</el-descriptions-item>
              <el-descriptions-item label="归还站点">{{ detail.endAreaSubName || '-' }}</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-item label="支付超时时间">{{ detail.payExpireTime | dv}}</el-descriptions-item>
            </el-descriptions>
          </collapse-panel>
          
          <collapse-panel :value="true" title="视频信息">
            <el-descriptions :column="1" >
              <el-descriptions-item label="视频链接">
                <el-link type="primary" :href="detail.videoUrl" target="_blank">查看视频</el-link>
              </el-descriptions-item>
              <el-descriptions-item label="视频时间">{{ detail.videoTime }}</el-descriptions-item>
            </el-descriptions>
          </collapse-panel>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { getOrder } from '@/api/bst/order'
import CollapsePanel from '@/components/CollapsePanel/index.vue'
import {SuitRidingRule} from '@/utils/enums'

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
  },
  data() {
    return {
      id: null,
      detail: {},
      loading: false,
      SuitRidingRule,
    }
  },
  created() {
    this.id = this.$route.params.id
    this.getDetail()
  },
  methods: {
    getDetail() {
      this.loading = true
      getOrder(this.id).then(res => {
        this.detail = res.data;
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>