<template>
  <div>
    <el-steps :active="currStep" align-center class="step">
      <el-step v-for="item in stepList" :key="item.id" :title="item.label" :description="item.description"></el-step>
    </el-steps>
    <div class="info" v-loading="infoLoading">
      <div>
        当前订单状态：
        <el-tag type="primary" v-if="info.transactionStatus == 0">待支付</el-tag>
        <el-tag type="warning" v-if="info.transactionStatus == 10">待发货</el-tag>
        <el-tag type="warning" v-if="info.transactionStatus == 20">待收货</el-tag>
        <el-tag type="success" v-if="info.transactionStatus == 30">已完成</el-tag>
        <el-tag type="info" v-if="info.transactionStatus == 100">关闭</el-tag>
      </div>
      <el-form class="form" ref="info" inline :model="info">
        <div>
          <div class="title">基本信息</div>
          <el-form-item label="订单编号：">
            <div>{{ info.orderNo }}</div>
          </el-form-item>
          <el-form-item label="支付方式：">
            <!-- <span class="platformpay" v-if="info.exchange"> 积分兑换</span>
            <span class="" v-if="info.exchange && info.total_amount > 0">
              +</span> -->
            <span v-if="info.paymentMethod == 0">余额支付</span>
            <span v-if="info.paymentMethod == 1">微信支付</span>
            <span v-if="info.paymentMethod == 2">支付宝支付</span>
            <span v-if="info.paymentMethod == 3">积分支付</span>
          </el-form-item>
          <!-- <el-form-item label="支付订单号：">
            <div>{{ info.pay_order_code }}</div>
          </el-form-item> -->
          <el-form-item label="配送方式：">
            <span v-if="info.shippingMethod == 0">普通快递</span>
            <span v-if="info.shippingMethod == 10">自提点自提</span>
          </el-form-item>
          <!-- <el-form-item label="订单来源：">
            <div>
              {{
                info.channelType == 1
                  ? '微信小程序'
                  : info.channelType == 2
                  ? 'APP'
                  : '系统自动'
              }}
            </div>
          </el-form-item> -->
          <!-- <el-form-item label="订单可得贡献值：">
            <div>{{ isToFixed(info.final_consumption_value, 2) }}</div>
          </el-form-item> -->
          <el-form-item label="下单备注：">
            <div>{{ info.buyerRemark || '--' }}</div>
          </el-form-item>
          <el-form-item label="商家备注：">
            <div>{{ info.sellerRemark || '--' }}</div>
          </el-form-item>
        </div>

        <div v-if="info.orderAddress">
          <div class="title">收货人信息</div>
          <el-form-item label="收货人：">
            <div>{{ info.orderAddress.receiverName }}</div>
          </el-form-item>
          <el-form-item label="联系方式：">
            <div>{{ info.orderAddress.receiverPhone }}</div>
          </el-form-item>
          <el-form-item label="地区：">
            <div>
              {{ info.orderAddress.provinceName }}{{ info.orderAddress.cityName
              }}{{ info.orderAddress.areaName }}
            </div>
          </el-form-item>
          <el-form-item label="收货地址：">
            <div>{{ info.orderAddress.addressDetail }}</div>
          </el-form-item>
        </div>

        <div v-if="info.orderSelfPickup">
          <div class="title">自提信息</div>
          <el-form-item label="自提点：">
            <div>{{ info.orderSelfPickup.pointName }}</div>
          </el-form-item>
          <el-form-item label="地址：">
            <div>{{ info.orderSelfPickup.address }}</div>
          </el-form-item>
          <br />
          <el-form-item label="自提点联系人：">
            <div>{{ info.orderSelfPickup.receiver }}</div>
          </el-form-item>
          <el-form-item label="自提点联系电话：">
            <div>{{ info.orderSelfPickup.phone }}</div>
          </el-form-item>
          <br />
          <el-form-item label="自提人：">
            <div>{{ info.orderSelfPickup.receiverName }}</div>
          </el-form-item>
          <el-form-item label="自提人电话：">
            <div>{{ info.orderSelfPickup.receiverPhone }}</div>
          </el-form-item>
        </div>

        <div>
          <div class="title">商品信息</div>
          <el-table border :data="info.orderDetails" style="width: 100%; margin-top: 15px">
            <el-table-column prop="date" label="商品图片" align="center">
              <template slot-scope="scope">
                <div>
                  <img class="goods-img" :src="scope.row.productCover" />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="productTitle" label="商品名称" align="center">
            </el-table-column>
            <el-table-column prop="original_real_price" label="价格" align="center"><template slot-scope="scope">
                <div v-if="info.exchange">
                  {{ scope.row.singlePoint }}积分
                </div>
                <div v-else>
                  {{ scope.row.originalRealPrice }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="skuSetName" label="属性" align="center">
            </el-table-column>
            <el-table-column label="数量" align="center">
              <template slot-scope="scope">
                {{ scope.row.productNum }}
              </template>
            </el-table-column>
            <el-table-column prop="real_price" label="小计" align="center">
              <template slot-scope="scope">
                <div v-if="info.exchange">
                  {{ scope.row.totalPoint }}积分
                </div>
                <div v-else>
                  {{ scope.row.paymentAmount }}
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="real_price" label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="commission(scope.row)">查看分佣</el-button>
              </template>
            </el-table-column> -->
          </el-table>
          <div class="count">
            <label class="freight" v-if="info.totalReduced">总优惠：<label>￥{{ info.totalReduced }}</label></label>
            <label class="freight" v-if="info.totalProductCouponSharing">优惠券优：<label>￥{{ info.totalProductCouponSharing
                }}</label></label>
            <label class="ml10 freight">{{
              info.shippingFee ? '运费：￥' + info.shippingFee : '免运费'
            }}</label>
            <label>实付金额：<label class="price">￥{{ info.actualPayment }}
              </label></label>
            <label>实付积分：<label>{{ info.paymentPoints }}</label></label>
          </div>
        </div>
      </el-form>
    </div>

    <div>
      <el-dialog title="分佣信息" :visible.sync="dialogTableVisible" append-to-body width="1000px">
        <div class="title">分佣信息</div>
        <el-table :data="gridData" border>
          <el-table-column property="date" label="商品图片" width="300">
            <template slot-scope="scope">
              <div style="display: flex; align-items: center">
                <img :src="scope.row.goods_img" style="width: 100px; height: 100px" />
                <div>
                  <p>{{ scope.row.goods_title }}</p>
                  <p>{{ scope.row.sku_set_name }}x{{ scope.row.number }}</p>
                  <p>{{ scope.row.real_price }}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column property="sale_price" label="销售价格" width="200"></el-table-column>
          <el-table-column property="order_status" label="结算状态">
            <!-- 		   <template slot-scope="scope" v-if="scope.row.settlement==true">已结算</template>
		    <template slot-scope="scope" v-if="scope.row.settlement==false"  >未结算</template> -->
            <!--     <div v-if="scope.row.settlement==true">已结算</div>
      <div v-if="scope.row.settlement==false">未结算</div> -->
          </el-table-column>
          <el-table-column property="settlement_time" label="结算时间"></el-table-column>
          <el-table-column property="address" label="分佣人信息">
            <template slot-scope="scope">
              {{ scope.row.distribution_user_name }} /
              {{ scope.row.distribution_user_mobile }}
            </template>
          </el-table-column>
          <el-table-column property="able_gains" label="实际分佣金额"></el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// import seviceApi from '@/api/serviceApi.js'
// import serviceApione from '@/api/serviceApione.js'
export default {
  data() {
    return {
      stepList: [],
      info: {
        receipt: {}
      },
      currStep: null,
      infoLoading: false,
      dialogTableVisible: false,
      gridData: [],
    }
  },
  methods: {
    // commission (row) {
    //   this.dialogTableVisible = true
    //   serviceApione
    //     .getUserordergainsList({
    //       child_order_id: row.id
    //     })
    //     .then((res) => {
    //       if (res && res.data.code == 200) {
    //         this.gridData = res.data.page.list
    //       }
    //     })
    // },
    init(value) {
      this.infoLoading = true
      this.info = value
      this.dealStepList(value)
    },

    dealStepList(v) {
      this.stepList = []
      this.stepList = [
        {
          id: 0,
          label: '提交订单',
          description: v.orderTime
        },
        {
          id: 4,
          label: '支付订单',
          description: v.paymentTime ? v.paymentTime : '未支付'
        }
      ]
      let arr = []
      if (v.shippingMethod == 10) {
        // 自提
        arr = [
          {
            id: 1,
            label: '商家备货',
            description: v.autoStockUpLastTime
              ? v.autoStockUpLastTime
              : '待备货'
          },
          {
            id: 3,
            label: '确认提货',
            description: v.actualReceivingTime
              ? v.actualReceivingTime
              : '待提货'
          }
        ]
      } else {
        arr = [
          {
            id: 1,
            label: '商家发货',
            description: v.shippingTime
              ? v.shippingTime
              : '待发货'
          },
          {
            id: 3,
            label: '确认收货',
            description: v.actualReceivingTime
              ? v.actualReceivingTime
              : '待收货'
          }
        ]
      }
      this.stepList = [...this.stepList, ...arr]
      this.stepList.push({
        id: 5,
        label: '交易完成',
        description: v.completionTime ? v.completionTime : '未完成'
      })
      if (v.transactionStatus == 0) {
        this.currStep = 1
      } else if (v.transactionStatus == 10) {
        this.currStep = 2
      } else if (v.transactionStatus == 20) {
        this.currStep = 3
      } else if (v.transactionStatus == 30) {
        this.currStep = 4
      } else {
        this.currStep = null
      }
      this.infoLoading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.step {
  padding-bottom: 10px;
}

.info {
  padding-top: 10px;
  border-top: 6px solid #f1f1f1;
}

.form {
  margin-top: 10px;
  border-top: 1px solid #f1f1f1;
  padding: 10px 0;

  >div {
    margin-bottom: 20px;
  }

  .el-form-item {
    margin-right: 60px !important;
    margin-bottom: unset !important;
  }
}

.title {
  padding-left: 10px;
  border-left: 3px solid #17b3a3;
  line-height: 15px;
  font-size: 16px;
  margin: 5px 0;
  color: #333333;
  text-align: left;
}

.alipay {
  color: #009fe8;
}

.wechatpay {
  color: #1aad19;
}

.platformpay {
  color: #17b3a3;
}

.goods-img {
  width: 85px;
  height: 85px;
}

.count {
  padding: 10px 15px;
  border: 1px solid #ebeef5;
  border-top: unset;
  text-align: right;

  .freight {
    color: #b1b1b1;
    margin-right: 10px;
  }

  .price {
    color: #f3415f;
  }
}

.ml10 {
  margin-left: 10px;
}
</style>
