<template>
  <div class="app-main-height">
    <el-form ref="form" class="list">
      <el-form-item label="订单编号">
        <span>{{ form.orderNum }}</span>
      </el-form-item>
      <el-form-item label="商品名称">
        <span>{{ form.goodsName }}</span>
      </el-form-item>
      <el-form-item label="套餐名称">
        <span>{{ form.comboName }}</span>
      </el-form-item>
      <el-form-item label="商品单价">
        <span>¥{{ form.comboPrice }}</span>
      </el-form-item>
      <el-form-item label="购买数量">
        <span>{{ form.comboNum }}</span>
      </el-form-item>
      <el-form-item label="订单金额">
        <span>¥{{ form.orderAmount }}</span>
      </el-form-item>
       <el-form-item label="优惠金额">
        <span>¥{{ form.couponsAmout }}</span>
      </el-form-item>
       <el-form-item label="实付金额">
        <span>¥{{ form.payAmount }}</span>
      </el-form-item>
       <el-form-item label="支付方式">
        <span>{{ form.paytype==2?"礼品卡支付":"微信支付" }}</span>
      </el-form-item>
      <el-form-item label="订单状态">
        <span style="color: red">{{ form.orderState | toState(form.orderState) }}</span>
      </el-form-item>
      <el-form-item label="订单生成时间">
        <span>{{ form.createTime }}</span>
      </el-form-item>
      <el-form-item label="微信名">
        <span>{{ form.wxName }}</span>
      </el-form-item>
      <el-form-item label="供货商名称">
        <span>{{ form.providerName }}</span>
      </el-form-item>
      <el-form-item label="收货人/手机号">
        <span>{{ form.consignee }}/{{ form.phone }}</span>
      </el-form-item>
      <el-form-item label="收货地址">
        <span>{{ form.address }}</span>
      </el-form-item>
      <el-form-item label="用户留言">
        <span v-if="form.note">{{ form.note }}</span>
        <span v-else>暂无留言</span>
      </el-form-item>

      <el-form-item v-if="qiutOrderTime" label="取消时间">
        <span>{{ form.refundTime }}</span>
      </el-form-item>
      <el-form-item v-if="qiutOrderInfo" label="取消原因">
        <span>{{ form.refundReason }}</span>
      </el-form-item>
      <el-form-item v-if="qiutCause" label="取消描述">
        <span style="display: block">{{ form.refundDesc }}</span>
      </el-form-item>

      <el-form-item label="货运公司/单号" v-if="courierNumShow">
        <!-- <span>{{form.courierName}}/{{ form.courierNum }}</span> -->
        <span v-if="form.courierName">
          <span>{{ form.courierName }}/{{ form.courierNum }}</span>
        </span>
        <span v-else>暂无</span>
      </el-form-item>
      <el-form-item v-if="payTimeShow" label="付款时间">
        <span>{{ form.payTime }}</span>
      </el-form-item>
      <el-form-item v-if="deliverTimeShow" label="发货时间">
        <span>{{ form.deliveryTime }}</span>
      </el-form-item>
      <el-form-item v-if="receivingTimeShow" label="确认收货时间">
        <span>{{ form.customerGoodsTime }}</span>
      </el-form-item>

      <el-form-item v-if="applyRefundTimeShow" label="申请退款时间">
        <span>{{ form.refundTime }}</span>
      </el-form-item>

      <el-form-item v-if="refundReason" label="退款原因">
        <span>{{ form.refundReason }}</span>
      </el-form-item>

      <el-form-item v-if="reasonInfo" label="原因描述">
        <span style="display: block">{{ form.refundDesc }}</span>
      </el-form-item>
      <el-form-item v-if="agreeRefundTime" label="店铺退款时间">
        <span>{{ form.merchantsRefundTime }}</span>
      </el-form-item>
      <el-form-item v-if="form.orderState === '2'" label="商家拒绝">
        <span>{{ form.merchantsRefuseReason }}</span>
        <span style="display: block">{{ form.merchantsRefuseDesc }}</span>
      </el-form-item>
      <el-form-item v-if="completeRefundTime" label="完成退款时间">
        <span>{{ form.refundOverTime }}</span>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="close">返回</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "UserManagementEdit",
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      form: {
        orderNum: "",
        goodsName: "",
        comboName: "",
        comboPrice: "",
        comboNum: "",
        orderAmount: "",
        orderState: "",
        refundReason: "",
        createTime: "",
        refundTime: "",
        consignee: "",
        phone: "",
        wxName: "",
        courierNum: "",
      },
      title: "",
      dialogFormVisible: true,
      row: "",
      md: "",
      form: {},
      payTimeShow: false, //付款时间
      courierNumShow: false, //快递单号
      courierNameShow: false, //快递名称
      deliverTimeShow: false, //发货时间
      applyRefundTimeShow: false, //  申请退款时间
      receivingTimeShow: false, //  收货时间
      refundReason: false, //退款原因
      reasonInfo: false, //退款原因描述
      agreeRefundTime: false, //同意退款时间
      completeRefundTime: false, //完成退款时间
      qiutOrderTime: false, //取消订单时间
      qiutOrderInfo: false, //取消原因
      qiutCause: false, //取消订单原因描述
    };
  },
  created() {
    console.log(this.$route.query.orderID);
    this.form.orderID = this.$route.query.orderID;
    this.getDetails(this.form);
  },
  methods: {
    // 根据状态控制显隐
    showOrHide() {
      let that = this;
      switch (that.form.orderState) {
        /*
        Code	msg
            1	待退款
            0	待付款
            2	已付款
            3	已发货
            4	退款中
            5	已退款
            6	已取消
            7	确认收货/已完成
            -2	全部
        */
        /*
       payTimeShow:false,  //付款时间
        courierNumShow:false,  //快递单号
        courierNameShow:false,  //快递名称
        deliverTimeShow:false,  //发货时间
        applyRefundTimeShow:false,   //  申请退款时间
        receivingTimeShow:false,    //  收货时间
        refundReason:false,    //退款原因
        reasonInfo:false,    //退款原因描述
        agreeRefundTime:false,    //同意退款时间
        completeRefundTime:false,    //完成退款时间
        qiutOrderTime:false,    //取消订单时间
        qiutOrderInfo:false,    //取消原因
        qiutCause :false,    //取消订单原因描述
      */
        case "1":
          that.courierNameShow = true;
          that.courierNumShow = true;
          that.payTimeShow = true;
          that.deliverTimeShow = true;
          that.applyRefundTimeShow = true;
          that.refundReason = true;
          that.reasonInfo = true;
          break;
        case "2":
          that.payTimeShow = true;
          break;
        case "3":
          that.courierNameShow = true;
          that.courierNumShow = true;
          that.payTimeShow = true;
          that.deliverTimeShow = true;
          break;
        case "4":
          that.courierNameShow = true;
          that.courierNumShow = true;
          that.payTimeShow = true;
          that.deliverTimeShow = true;
          that.applyRefundTimeShow = true;
          that.refundReason = true;
          that.reasonInfo = true;
          that.agreeRefundTime = true;
          break;
        case "5":
          that.courierNameShow = true;
          that.courierNumShow = true;
          that.payTimeShow = true;
          that.deliverTimeShow = true;
          that.applyRefundTimeShow = true;
          that.refundReason = true;
          that.reasonInfo = true;
          that.agreeRefundTime = true;
          that.completeRefundTime = true;
          break;
        case "6":
          that.qiutOrderTime = true;
          that.qiutOrderInfo = true;
          that.qiutCause = true;
          break;
        case "7":
          that.courierNameShow = true;
          that.courierNumShow = true;
          that.payTimeShow = true;
          that.deliverTimeShow = true;
          that.receivingTimeShow = true;
      }
    },
    showEdit(row, md) {
      this.title = "查看详情";
      this.md = md;
      this.getDetails(row);
      this.dialogFormVisible = true;
    },
    close() {
      this.$router.go(-1);
    },
    getDetails(row) {
      const params = {
        type: "getOrderDetails",
        data: {
          orderID: row.orderID,
        },
      };
      this.$http.post(this.$api.getOrderDetails, params).then((res) => {
        console.log(res);
        this.form = res;
        this.showOrHide();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-form-item {
  border-bottom: 1px solid #ebeef5;
  ::v-depp {
    .el-form-item__label {
      text-align: left;
      padding: 0 50px 0 0;
      width: 140px;
    }
  }
}
</style>
