<template>
  <div class="app-container">
    <el-card class="cardStyle" v-if="orderInfo[0].orderStatus === '4' || orderInfo[0].orderStatus === '2'">
      <div style="margin: 10px">
        <span style="color: #bf1c1c">该笔订单为异常状态，请检查充电桩状态！</span>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="dialogVisible = true">手动结算</el-button>
      </div>

      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="35%"
        >
        <span>平台收到充电桩传来的最后一次实时监测数据<br/></span>

        <el-table style="width: 100%" :data="monitorDataList" border>
          <el-table-column prop="dateTime" label="时间" align="center"/>
          <el-table-column prop="chargingAmount" label="消费金额" align="center"/>
          <el-table-column prop="chargingDegree" label="充电度数" align="center"/>
        </el-table>

        <el-divider>下面可以输入自定义消费金额和充电度数</el-divider>

        <div style="display:flex;justify-content:center;">
          <el-form :model="manualSettlementParam">
            <el-form-item label="消费金额:" prop="chargingAmount" label-width="80px">
              <el-input-number v-model.number="manualSettlementParam.chargingAmount" :precision="2" :controls="false" style="width: 50%"/>
            </el-form-item>
            <el-form-item label="充电度数:" prop="chargingDegree" label-width="80px">
              <el-input-number v-model.number="manualSettlementParam.chargingDegree" :precision="2" :controls="false" style="width: 50%"/>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmManualSettlement">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
    <!-- 进度条-->
    <el-card class="cardStyle">
      <div style="margin: 30px">
        <div
          style="text-align: center; margin-bottom: 30px"
          v-if="
            orderInfo[0].orderStatus === '4' ||
            orderInfo[0].orderStatus === '6'
          "
        >
          停止理由：
          <span style="color: red">{{ orderInfo[0].stopReasonMsg }}</span>
        </div>
        <el-steps
          :active="orderInfo[0].orderStatus !== '6' ? 2 : 4"
          align-center
          finish-status="success"
        >
          <el-step
            title="客户下单"
            :description="orderInfo[0].createTime"
          ></el-step>
          <el-step
            title="开始充电"
            :description="orderInfo[0].orderStatusDescribe"
          ></el-step>
          <el-step
            title="结束充电"
            :description="orderInfo[0].endTime"
          ></el-step>
          <el-step title="完成充电" description="充电时长"></el-step>
        </el-steps>
      </div>
    </el-card>
    <!--  订单信息  -->
    <el-card class="cardStyle">
      <h3>订单信息</h3>
      <el-table style="width: 100%" :data="orderInfo" border>
        <el-table-column prop="orderCode" label="订单号" align="center" width="280"/>
        <el-table-column prop="transactionCode" label="交易流水号" align="center" width="280"/>
        <el-table-column prop="logicCard" label="卡号" align="center" width="280"/>
        <el-table-column prop="orderStatusDescribe" label="订单状态描述" align="center"/>
        <el-table-column prop="createTime" label="创建时间" align="center"/>
        <el-table-column prop="startTime" label="开始时间" align="center"/>
        <el-table-column prop="endTime" label="结束时间" align="center"/>
        <el-table-column prop="startSOC" label="起始SOC" align="center"/>
        <el-table-column prop="endSOC" label="终止SOC" align="center"/>
        <el-table-column prop="stopReasonMsg" label="订单停止原因" align="center"/>
      </el-table>
      <div class="marginTop"></div>
    </el-card>

    <!--  收费明细  -->
<!--    <el-card class="cardStyle">
      <h3>收费明细</h3>
      <el-table style="width: 100%" :data="orderDetail" border>
        <el-table-column prop="totalUsedElectricity" label="总用电量" align="center"/>
        <el-table-column prop="totalOrderAmount" label="订单总金额" align="center"/>
        <el-table-column prop="totalElectricityAmount" label="电费总金额" align="center"/>
        <el-table-column prop="totalServiceAmount" label="服务费总金额" align="center"/>

        <el-table-column prop="sharpUsedElectricity" label="尖时段用电量" align="center"/>
        <el-table-column prop="sharpElectricityPrice" label="尖时段电费单价" align="center"/>
        <el-table-column prop="sharpServicePrice" label="尖时段服务费单价" align="center"/>

        <el-table-column prop="peakUsedElectricity" label="峰时段用电量" align="center"/>
        <el-table-column prop="peakElectricityPrice" label="峰时段电费单价" align="center"/>
        <el-table-column prop="peakServicePrice" label="峰时段服务费单价" align="center"/>

        <el-table-column prop="flatUsedElectricity" label="平时段用电量" align="center"/>
        <el-table-column prop="flatElectricityPrice" label="平时段电费单价" align="center"/>
        <el-table-column prop="flatServicePrice" label="平时段服务费单价" align="center"/>

        <el-table-column prop="valleyUsedElectricity" label="谷时段用电量" align="center"/>
        <el-table-column prop="valleyElectricityPrice" label="谷时段电费单价" align="center"/>
        <el-table-column prop="valleyServicePrice" label="谷时段服务费单价" align="center"/>
      </el-table>
      <div class="marginTop"></div>
    </el-card>-->

    <el-card class="cardStyle">
      <h3>收费明细</h3>
        <el-table :data="tableData" border show-summary :summary-method="getSummaries">
          <el-table-column prop="periodType" label="时段类型" width="180" align="center"/>
          <el-table-column prop="electricityPrice" label="电费单价(元/千瓦时)" align="center"/>
          <el-table-column prop="servicePrice" label="服务费单价(元/千瓦时)" align="center"/>
          <el-table-column prop="usedElectricity" label="用电量(千瓦时)" align="center"/>
          <el-table-column prop="electricityAmount" label="电费金额(元)" align="center"/>
          <el-table-column prop="serviceAmount" label="服务费金额(元)" align="center"/>
        </el-table>
      <div class="marginTop"></div>
    </el-card>

    <el-card class="cardStyle">
      <h3>实时订单数据</h3>
      <el-table style="width: 100%" :data="orderRealTimeInfo" border>
        <el-table-column prop="orderAmount" label="消费金额" align="center" width="280">
          <template slot-scope="scope">
            <span>￥{{
                scope.row.orderAmount === "0.0000" ? "0" : scope.row.orderAmount
              }} </span>
          </template>
        </el-table-column>

        <el-table-column prop="chargedDegree" label="充电度数" align="center">
          <template slot-scope="scope">
            <span>{{
                scope.row.chargedDegree === "0.0000" ? "0" : scope.row.chargedDegree
              }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="chargingTime" label="充电时长" align="center"/>
        <el-table-column prop="soc" label="当前soc" align="center"/>
      </el-table>
      <div class="marginTop"></div>
    </el-card>

    <!--    支付信息-->
    <el-card class="cardStyle">
      <h3>支付信息</h3>
      <el-table style="width: 100%" :data="payDetail" border>
        <el-table-column prop="payAmount" label="支付金额" align="center"/>
        <el-table-column prop="payModeDesc" label="支付方式" align="center"/>
        <el-table-column prop="payStatus" label="支付状态" align="center">
          <template slot-scope="scope">
            <span>{{
              scope.row.payStatus === "1" ? "支付完成" : "待支付"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="payTime" label="支付时间" align="center"/>
        <el-table-column prop="outTradeNo" label="商务单号" align="center"/>
        <el-table-column prop="refundAmount" label="退款金额" align="center"/>
      </el-table>
      <div class="marginTop"></div>
    </el-card>

    <!--  设备信息  -->
    <el-card class="cardStyle">
      <h3>设备信息</h3>
      <el-table style="width: 100%" :data="pileIn" border>
        <el-table-column prop="merchantName" label="运营商名称" align="center"/>
        <el-table-column prop="pileSn" label="设备编号" align="center"/>
        <el-table-column prop="ratedCurrent" label="额定电流(A)" align="center"/>
        <el-table-column prop="ratedVoltage" label="额定电压(V)" align="center"/>
        <el-table-column prop="ratedPower" label="额定功率(KW)" align="center"/>
      </el-table>
      <div class="marginTop"></div>
    </el-card>

    <!--  用户信息  -->
    <el-card class="cardStyle">
      <h3>用户信息</h3>
      <el-table style="width: 100%" :data="userInfo" border>
        <el-table-column prop="nickName" label="用户昵称" align="center"/>
        <el-table-column prop="mobileNumber" label="用户手机号" align="center"/>
        <el-table-column prop="principalBalance" label="本金金额" align="center"/>
        <el-table-column prop="giftBalance" label="赠送金额" align="center"/>
        <el-table-column prop="totalAccountAmount" label="总金额" align="center"/>
      </el-table>
      <div class="marginTop"></div>
    </el-card>
    <!--    时间 描述-->
    <el-card
      class="cardStyle"
      v-if="
        orderInfo[0].orderStatus === '1' || orderInfo[0].orderStatus === '6'
      "
    >
      <div class="marginTop"></div>
      <order-echarts :obj="obj"></order-echarts>
    </el-card>
  </div>
</template>
<script>
import {getOrder, manualSettlementOrder} from "@/api/order/order";
import OrderEcharts from "@/views/order/order/orderEcharts";

export default {
  name: "",
  components: { OrderEcharts },
  data() {
    return {
      orderList: this.$route.params.orderCode,
      orderInfo: [],
      payDetail: [],
      userInfo: [],
      obj: {},
      orderDetail:[],
      pileIn: [],
      orderRealTimeInfo: null,
      // 手动结算对话框Visible
      dialogVisible: false,
      // 最后一次实时监测数据
      lastMonitorData: {},
      // monitorDataList: [this.lastMonitorData],
      // 手动结算参数
      manualSettlementParam: {
        orderCode: null,
        chargingAmount: null,
        chargingDegree: null,
      },
      tableData: []
    };
  },
  created() {
    this.getOrderDetail();
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (column.property === 'usedElectricity' ||column.property ==='electricityAmount' || column.property==='serviceAmount' ) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        }
      });
      return sums;
    },
    clickManualSettlement() {
      this.dialogVisible = true;
    },
    confirmManualSettlement() {
      if (this.manualSettlementParam.chargingAmount == null) {
        return false;
      }
      if (this.manualSettlementParam.chargingDegree == null) {
        return false;
      }
      this.manualSettlementParam.orderCode = this.orderInfo[0].orderCode;
      console.log("确认手动结算订单param:", this.manualSettlementParam);
      manualSettlementOrder(this.manualSettlementParam).then(response => {
        this.dialogVisible = false;
        this.getOrderDetail();
      })
    },
    async getOrderDetail() {
      console.log("主页面传递过来的参数", this.orderList);
      // console.log(this.orderList.orderCode)
      const { data } = await getOrder(this.orderList);
      console.log("getOrder", data);
      this.obj = data;
      this.orderInfo = [data.orderInfo];
      console.log("this.orderInfo", this.orderDetail);
      this.payDetail = data.payRecordList;
      console.log("this.payDetail", this.payDetail);
      this.userInfo = [data.memberInfo];
      console.log("this.userInfo", this.userInfo);
      this.pileIn = [data.pileInfo];
      console.log("this.pileIn", this.pileIn);
      this.orderRealTimeInfo = [data.orderRealTimeInfo];
      this.orderDetail = [data.billingDetails];
      this.tableData = data.chargeDetails;
      this.lastMonitorData = data.lastMonitorData;
    },
  },
    computed: {
        // 一个计算属性的 getter
        monitorDataList() {
            return [this.lastMonitorData];
        }
    }
};
</script>
<style>
.cardStyle {
  margin-bottom: 10px;
}
.marginTop {
  margin-top: 10px;
}
</style>
