<template>
  <div class="order_details">
    <div class="cotent">
      <div class="left_part">
        <div class="order_info">
          <h2>订单信息</h2>
          <ul>
            <li>
              <p>
                <span>商家名称:</span>
                <span>{{ order.shopName }}</span>
              </p>
              <p>
                <span>订单ID:</span>
                <span>{{ order.orderId }}</span>
              </p>
              <p>
                <span>支付单号:</span>
                <span>{{ order.transactionId }}</span>
              </p>
              <p>
                <span>订单编号:</span>
                <span>{{ order.orderFormid }}</span>
              </p>
            </li>
            <li>
              <p>
                <span>订单状态:</span>
                <span v-if="order.state == 1">待付款</span>
                <span v-else-if="order.state == 2">待发货</span>
                <span v-else-if="order.state == 3">待收货</span>
                <span v-else-if="order.state == 4">已完成</span>
                <span v-else-if="order.state == 5">交易关闭（已取消）</span>
                <span v-else-if="order.state == 6">待成团</span>
                <span v-else-if="order.state == 7">待售后</span>
                <span v-else-if="order.state == 8">待核销（未付款）</span>
                <span v-else-if="order.state == 9">待核销（已付款）</span>
                <span v-else-if="order.state == 10">已核销</span>
                <span v-else>--</span>
              </p>
              <p>
                <span>售后状态:</span>
                <span>{{ order.afterStateName }}</span>
              </p>
            </li>
            <li>
              <p>
                <span>支付方式:</span>
                <span v-if="order.paymentMode === 1">微信</span>
                <span v-else-if="order.paymentMode === 2">支付宝</span>
                <span v-else-if="order.paymentMode === 3">花呗分期</span>
                <span v-else-if="order.paymentMode === 4">通联支付</span>
                <span v-else-if="order.paymentMode === 5">平台余额支付</span>
                <span v-else-if="order.paymentMode === 6">商家余额支付</span>
                <span v-else-if="order.paymentMode === 7">佣金支付</span>
                <span v-else-if="order.paymentMode === 8">消费金支付</span>
                <span v-else-if="order.paymentMode === 9">惠市宝支付</span>
                <span v-else>--</span>
              </p>
              <p>
                <span>物流方案:</span>
                <span>{{ order.logisticsName }}</span>
              </p>
            </li>
            <li>
              <p>
                <span>商家赠送代金券：</span>
                <span>{{ order.shopVoucher }}</span>
              </p>
            </li>
            <li>
              <p>
                <span>平台赠送代金券：</span>
                <span>{{ order.platformVoucher }}</span>
              </p>
            </li>
            <li>
              <p>
                <span>总赠送代金券：</span>
                <span>{{ order.presenterVoucher }}</span>
              </p>
            </li>
            <li>
              <p>
                <span>创建时间:</span>
                <span>{{ order.createTime }}</span>
              </p>
              <p>
                <span>支付时间:</span>
                <span>{{ order.paymentTime }}</span>
              </p>
            </li>
            <li>
              <p>备注:{{ order.remark }}</p>
            </li>
          </ul>
        </div>
        <div class="goods_info">
          <h2>商品信息</h2>
          <div v-for="(item, index) in order.products" :key="index" class="goods_list">
            <div class="good_price">
              <ul>
                <li>
                  <p>商品总价: ¥{{ order.orderPrice }}</p>
                  <p>支付金额: ¥{{ order.price }}</p>
                </li>
                <li>
                  <p>物流费用: ￥{{ order.logisticsPrice }}</p>
                </li>
              </ul>
            </div>
            <div class="good_details">
              <ul>
                <li>
                  <img :src="item.image">
                  <div class="details">
                    <p>{{ item.productName }}</p>
                    <p class="skuDetails">
                      <span
                        v-for="(detailsItem, detailsindex) in item.skuDetails" :key="detailsindex"
                        class="detail_span"
                      >
                        {{ detailsItem.skuName }}: {{ detailsItem.skuValue }}
                      </span>
                    </p>
                    <p>SKU: {{ item.skuId }}</p>
                  </div>
                </li>
                <li class="cen">
                  ¥{{ `${item.productPrice} * ${item.number}` }}
                </li>
                <li>
                  {{ order.orderPrice }}
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 未发货时物流信息显示去发货按钮 -->
        <div v-show="order.logisticsName && order.logisticsNum" class="logistics_info">
          <h2>物流信息</h2>
          <el-button
            v-if="!order.logisticsNum && (order.state == 2)" type="primary" class="send_good"
            @click="handleSendGoods"
          >
            去发货
          </el-button>
          <div v-else class="logistics_content">
            <p class="logistics_title">
              <span>物流公司: {{ order.logisticsName }}</span>
              <span>运单号: {{ order.logisticsNum }}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="right_part">
        <div class="pay_order_info">
          <h2>下单人信息</h2>
          <p>下单账户: {{ order.customerName }}</p>
          <p>订单总数: {{ order.total }}个</p>
          <p>下单备注: {{ order.remark }}</p>
        </div>
        <div class="take_goods_info">
          <h2>收货信息</h2>
          <p>姓名: {{ order.receiveName }}</p>
          <p>手机号: {{ order.receivePhone }}</p>
          <p>地址: {{ order.receiveAdress }}</p>
        </div>
      </div>
    </div>
    <!-- 发货 -->
    <el-dialog
      :visible.sync="isVisible" title="发货" :close-on-click-modal="false" :modal-append-to-body="false"
      :modal="false"
    >
      <el-form ref="sendGoodsForm" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="快递公司" prop="express">
          <el-select v-model="form.express" filterable>
            <el-option v-for="(item, index) in companyList" :key="index" :label="item.dictName" :value="item.dictId" />
          </el-select>
        </el-form-item>
        <el-form-item label="快递单号" prop="deliverFormid">
          <el-input v-model="form.deliverFormid" maxlength="20" oninput="value = value.replace(/[^\a-\z\A-\Z0-9]/g,'')" />
        </el-form-item>
        <!-- <el-form-item label="快递公司编号" prop="shipperCode" v-if="false">
          <el-input v-model="form.shipperCode" />
          </el-form-item> -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="confirm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { orderGetById, orderGetSelect, orderDilevery } from '@/api/order'
export default {
  name: 'PendDetails',
  props: {
    detailRow: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      order: {},
      form: {
        orderId: '',
        express: '',
        deliverFormid: ''
      },
      isVisible: false,
      rules: {
        logisticsName: [
          { required: false, message: '请输入快递公司名称', trigger: 'blur' }
        ],
        deliverFormid: [
          { required: true, message: '请输入快递单号', trigger: 'blur' }
        ],
        express: [
          { required: true, message: '请选择快递公司', trigger: 'blur' }
        ]
      },
      companyList: []
    }
  },
  watch: {
    detailRow: {
      handler(nVal, oVal) {
        if (nVal) {
          this.form.orderId = nVal.orderId
          this.getProductList()
        }
      },
      deep: true
    }
  },
  created() {
    this.form.orderId = this.detailRow.orderId
    this.getProductList()
  },
  methods: {
    async getProductList() {
      const res = await orderGetById({ orderId: this.detailRow.orderId })
      this.order = res.data
    },
    confirm() {
      this.$refs.sendGoodsForm.validate((valid) => {
        if (valid) {
          this.form.orderId = this.detailRow.orderId
          orderDilevery(this.form).then((res) => {
            if (res.code === '') {
              this.$message({
                message: '发货成功',
                type: 'success'
              })
              this.isVisible = false
              this.$emit('cancel')
            }
          })
        }
      })
    },
    cancel() {
      this.isVisible = false
    },
    async getCompanyList() {
      const res = await orderGetSelect()
      if (res.code === '') {
        this.companyList = res.data
      }
    },
    handleSendGoods() {
      this.getCompanyList()
      this.isVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
@import url("../../../../styles/elDialog.scss");

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.order_details {
	h3 {
		margin: 20px 0 20px 20px;
		font-weight: 700;
	}

	.close {
		position: absolute;
		right: 20px;

		&:hover {
			cursor: pointer;
		}
	}

	.cotent {
		margin: 20px;
		overflow: hidden;
		font-size: 14px;

		.goods_info,
		.order_info,
		.logistics_info,
		.pay_order_info,
		.take_goods_info {
			background: #fff;
			margin-bottom: 10px;
			padding: 10px 20px;
		}

		.pay_order_info,
		.take_goods_info {
			p {
				line-height: 30px;
			}
		}

		h2 {
			margin: 0;
			font-weight: 400;
			height: 40px;
			line-height: 40px;
			font-size: 18px;
			text-align: -10px;
		}

		.left_part {
			float: left;
			width: calc(70% - 10px);
			margin-right: 10px;

			.order_info {
				box-sizing: border-box;

				ul {
					padding: 10px 30px;

					li {
						overflow: hidden;

						p {
							width: 50%;
							float: left;
							font-size: 14px;
							line-height: 30px;

							span {
								&:nth-child(2) {
									margin-left: 10px;
								}
							}
						}
					}
				}
			}

			.goods_info {
				.goods_list {
					padding: 15px;

					.good_price {
						ul {
							li {
								&:nth-child(1) {
									p {
										width: 50%;
										float: left;
									}
								}

								p {
									line-height: 30px;
								}
							}
						}

						border-bottom: 1px gray solid;
					}

					.good_details {
						ul {
							display: flex;
							margin-top: 20px;

							li {
								flex: 3;
								display: flex;
								justify-content: space-around;
								align-items: center;

								.details {
									margin: 0 30px;
									width: 180px;
									line-height: 20px;

									.skuDetails {
										margin-top: 8px;
										margin-bottom: 8px;
										margin-right: 10px;
										line-height: 1;
										color: #9e9e9e;

										.detail_span {
											margin-right: 8px;
										}
									}
								}

								img {
									width: 50px;
									height: 50px;
								}
							}
						}
					}
				}
			}

			.logistics_info {
				.send_good {
					display: block;
					margin: 20px auto !important;

					&:hover {
						cursor: pointer;
					}
				}

				.logistics_content {
					padding: 0 10%;

					.logistics_title {
						span {
							margin: 20px 0;
							display: inline-block;
							width: 45%;
						}
					}
				}
			}
		}

		.right_part {
			float: left;
			width: 30%;
		}
	}
}
</style>
