<template>
  <div class="order-form">
    <div class="order-status">
      <div class="order-title">
        <span>订单[{{details.orderNo}}]详情</span>
        <el-button size="small" style="margin-left: 20px" @click="handleBack">返回</el-button>
      </div>
      <div class="status-steps">
        <el-steps :active="activeSteps" align-center>
          <el-step v-for="(v,i) in orderStatusList" :key="i" :title="v.label" :description="v.des"></el-step>
        </el-steps>
      </div>
    </div>

    <div class="order-info">
      <div class="info-title">基本信息</div>
      <div class="info-content">
        <el-table :data="[orderInfo]" border>
          <el-table-column label="订单号" prop="orderNo" align="center"></el-table-column>
          <el-table-column label="下单人" prop="nickname" align="center"></el-table-column>
          <el-table-column label="订单金额" prop="orderAmount" align="center"></el-table-column>
          <!-- <el-table-column label="优惠信息" prop="discountAmount" align="center"></el-table-column> -->
          <el-table-column label="实付兑换豆" prop="paymentPoints" align="center"></el-table-column>
          <el-table-column label="支付方式" prop="payType" align="center"></el-table-column>
          <el-table-column label="支付时间" prop="paymentTime" align="center"></el-table-column>
        </el-table>
      </div>
      <div class="info-remark">
        <div class="remark-item">
          <span class="label">配送方式：</span>
          <span class="value">物流</span>
        </div>
        <div class="remark-item">
          <span class="label">备注：</span>
          <span class="value">{{ details.buyerRemark||'无' }}</span>
        </div>
      </div>
    </div>

    <div class="goods-info">
      <div class="info-title">商品信息</div>
      <div class="goods-table">
        <el-table :data="details.orderDetails" border>
          <el-table-column label="商品图片" align="center">
            <template slot-scope="scope">
              <el-image :src="scope.row.productCover" class="goods-image"></el-image>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" prop="productTitle" align="center"></el-table-column>
          <el-table-column label="商品编号" prop="productCode" align="center"></el-table-column>
          <el-table-column label="商品单价" prop="price" align="center">
            <template slot-scope="scope"> 兑换豆{{ scope.row.pointsPerProduct }} </template>
          </el-table-column>
          <el-table-column label="数量" prop="productNum" align="center"></el-table-column>
          <el-table-column label="总价" align="center">
            <template slot-scope="scope">
              兑换豆{{ scope.row.pointsTotal }}
            </template>
          </el-table-column>
        </el-table>
        <div class="goods-total">
          <span>免运费</span>
          <span>商品合计：<em>兑换豆{{details.paymentPoints}}</em></span>
        </div>
      </div>
    </div>

    <div class="receiver-info">
      <div class="info-title">收货信息</div>
      <div class="info-content">
        <el-table :data="[details.shopOrderAddress]" border>
          <el-table-column label="收货人" prop="receiverName" align="center"></el-table-column>
          <el-table-column label="联系方式" prop="receiverPhone" align="center"></el-table-column>
          <el-table-column label="地区" prop="region" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row"> {{ scope.row.provinceName+scope.row.cityName+scope.row.areaName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="收货地址" prop="address" align="center">
            <template slot-scope="scope">
              {{ scope.row.addressDetail }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="form-footer">
      <el-button @click="handleBack">返回</el-button>
    </div>
  </div>
</template>

<script>
import { shopOrderInfo } from '@/api/pointsMall'
export default {
  name: "OrderForm",
  data () {
    return {
      details: {
        orderPackages: []
      },
      // orderStatusList: [0, 10, 20, 30, 100],
      orderStatusList: [
        { label: '支付订单', des: '未支付', status: 10 },
        { label: '商家发货', des: '待发货', status: 20 },
        // { label: '确认收货', des: '待收货', status: 30 },
        { label: '交易完成', des: '未完成', status: 30 }
      ],
      activeSteps: 3,
      orderInfo: {
      },
      orderRemark: {
        expressType: '物流',
        remark: '无需汇明'
      },
      receiverInfo: {
        receiver: '张军华',
        phone: '18507889876',
        region: '湖北省武汉市',
        address: '光谷大道一号'
      },
      goodsList: [
        {
          image: '',
          name: '五行养生茶',
          code: '4214324324',
          price: 123.00,
          count: 1
        }
      ]
    }
  },
  created () {
    this.getDetails()
  },
  methods: {
    handleBack () {
      this.$router.back();
    },
    getDetails () {
      shopOrderInfo(this.$route.query.orderId).then(res => {
        this.details = res.data
        // this.orderStatusList.map((v, i) => {
        //   if (v.status == this.details.orderStatus) {
        //     this.activeSteps = i + 1;
        //   }
        // })
        for (let i = 0; i < this.orderStatusList.length; i++) {
          if (i == 0) {
            this.orderStatusList[i].des = this.details.orderTime;
          } else if (i == 1) {
            this.orderStatusList[i].des = this.details.orderPackages[0].shipTime;
          } else if (i == 2) {
            this.orderStatusList[i].des = this.details.actualReceivingTime
          }
          if (this.orderStatusList[i].status == this.details.orderStatus) {
            this.activeSteps = i + 1;
            break
          }
        }

        this.orderInfo = {
          orderNo: this.details.orderNo,
          nickname: this.details.nickname + '（' + this.details.mobile + '）',
          orderAmount: this.details.orderAmount,
          // discountAmount: "无",
          paymentPoints: this.details.paymentPoints,
          payType: "兑换豆",
          paymentTime: this.details.paymentTime,
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.order-form {
  padding: 20px;
  background: #fff;

  .order-status {
    margin-bottom: 20px;
    padding: 20px 30px;
    // background: #f5f7fa;
    border-radius: 4px;

    .order-title {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      span {
        font-size: 16px;
        font-weight: bold;
      }
    }
  }

  .info-title {
    margin-bottom: 20px;
    padding-left: 10px;
    font-size: 16px;
    font-weight: bold;
    border-left: 4px solid #409eff;
  }

  .info-content {
    display: flex;
    flex-wrap: wrap;
  }

  .info-remark {
    margin-top: 15px;
    display: flex;
    align-items: center;

    .remark-item {
      display: flex;
      align-items: center;
      margin-right: 30px;

      .label {
        color: #606266;
      }

      .value {
        color: #303133;
        margin-left: 5px;
      }
    }
  }

  .goods-info {
    margin: 30px 0 10px;

    .goods-image {
      width: 60px;
      height: 60px;
      border-radius: 4px;
    }

    .goods-total {
      margin-top: 15px;
      text-align: right;

      span {
        margin-left: 20px;
        color: #606266;

        em {
          color: #f56c6c;
          font-style: normal;
          font-weight: bold;
        }
      }
    }
  }

  .form-footer {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
