<template>
  <zj-page-container>
    <div style="box-sizing: border-box; padding: 0 10px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="详情" name="first"></el-tab-pane>
        <el-tab-pane label="操作记录" name="second"></el-tab-pane>
      </el-tabs>
    </div>
    <zj-page-fill>
      <template v-if="activeName == 'first'">
        <div style="box-sizing: border-box; padding: 10px">
          <div>
            <div class="order-main">
              <el-row style="padding: 15px 15px 10px">
                <el-col :span="24">
                  <div class="order-main-title">
                    <span>订单编号：{{ orderDetail.esOrderId }}</span>
                    <span>下单时间：{{ orderDetail.createTime }}</span>
                  </div>
                </el-col>
              </el-row>
              <div style="width: 100%; padding: 10px 15px 15px 15px">
                <el-row>
                  <el-col :span="10">
                    <!--  -->
                    <div v-if="~[0, 1].indexOf(detailsTypeCp)" style="display: flex">
                      <div>
                        <div class="order-main-status">
                          <span>{{
                            {
                              SAVE: '待支付',
                              WAIT: '待确认',
                              PAID: '待发货',
                              SEND: '卖家发货',
                              OVER: '已完成',
                              TIME_OUT: '超时',
                              CANCEL: '已售后/取消',
                              WAIT_REFUND: '售后中'
                            }[orderDetail.status]
                          }}</span>
                        </div>
                        <div class="order-main-opt-btn">
                          <template>
                            <el-button
                              v-if="~['SEND', 'OVER'].indexOf(orderDetail.status)"
                              size="small"
                              type="primary"
                              @click="lookkuaidi"
                              >查看物流</el-button
                            >
                            <el-button
                              v-if="~['SEND', 'OVER'].indexOf(orderDetail.status)"
                              size="small"
                              type="primary"
                              @click="detailsTypeCp = 2"
                              >退货退款</el-button
                            >
                          </template>
                        </div>
                      </div>
                    </div>
                    <!--  -->
                    <div v-if="detailsTypeCp == 2">
                      <el-form ref="formTHref" :model="formTH" label-width="80px" size="mini">
                        <el-form-item
                          label="处理结果"
                          prop="refundType"
                          :rules="[{ required: true, message: '请选择', trigger: 'blur' }]"
                        >
                          <el-radio-group v-model="formTH.refundType">
                            <el-radio label="GOODS">仅退货</el-radio>
                            <el-radio label="REFUND">仅退款</el-radio>
                            <el-radio label="GOODS_REFUND">退货退款</el-radio>
                          </el-radio-group>
                        </el-form-item>
                        <el-form-item
                          v-if="~['GOODS', 'GOODS_REFUND'].indexOf(formTH.refundType)"
                          label="退货数量"
                          prop="refundNum"
                          :rules="[{ required: true, message: '请填写', trigger: 'blur' }]"
                        >
                          {{
                            (() => {
                              if (formTH.refundType == 'GOODS') formTH.refundPrice = ''
                            })()
                          }}
                          <el-input v-model="formTH.refundNum"></el-input>
                        </el-form-item>
                        <el-form-item
                          v-if="~['REFUND', 'GOODS_REFUND'].indexOf(formTH.refundType)"
                          label="退款金额"
                          prop="refundPrice"
                          :rules="[{ required: true, message: '请填写', trigger: 'blur' }]"
                        >
                          {{
                            (() => {
                              if (formTH.refundType == 'REFUND') formTH.refundNum = ''
                            })()
                          }}
                          <el-input type="number" v-model="formTH.refundPrice"></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                          <el-input type="textarea" v-model="formTH.refundRemark"></el-input>
                        </el-form-item>
                      </el-form>
                    </div>
                  </el-col>
                  <el-col v-if="detailsTypeCp == 0" :span="14" style="padding-top: 10px">
                    <el-steps :active="zhuangtai" align-center>
                      <el-step title="买家下单"></el-step>
                      <el-step title="买家付款"></el-step>
                      <el-step title="卖家发货"></el-step>
                      <el-step title="交易成功"></el-step>
                    </el-steps>
                  </el-col>
                </el-row>
              </div>
            </div>

            <div class="order-receive-info">
              <el-row :gutter="10">
                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                  <div class="info">
                    <div class="info_title">卖家信息</div>
                    <div class="info_bottom">
                      <div class="info_bottom_lt">
                        <el-image
                          v-if="orderDetail.sellUrl"
                          style="width: 40px; height: 40px"
                          :src="$showImgUrl(orderDetail.sellUrl)"
                        ></el-image>
                      </div>
                      <div class="info_bottom_rt">
                        <div>昵称：{{ orderDetail.sellName }}</div>
                        <div>手机号：{{ orderDetail.sellMobile }}</div>
                        <div>发布时间：{{ orderDetail.sellTime }}</div>
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                  <div class="info">
                    <div class="info_title">买家信息</div>
                    <div class="info_bottom">
                      <div class="info_bottom_lt">
                        <el-image
                          v-if="orderDetail.wechatUserUrl"
                          style="width: 40px; height: 40px"
                          :src="$showImgUrl(orderDetail.wechatUserUrl)"
                        >
                        </el-image>
                      </div>
                      <div class="info_bottom_rt">
                        <div v-if="orderDetail.wechatUserName">昵称：{{ orderDetail.wechatUserName }}</div>
                        <div v-if="orderDetail.wechatUserMobile">手机号：{{ orderDetail.wechatUserMobile }}</div>
                        <div>收货人信息：({{ orderDetail.userName }}){{ orderDetail.userMobile }}</div>
                        <div>
                          收货人地址：{{
                            orderDetail.province +
                            orderDetail.city +
                            orderDetail.area +
                            orderDetail.street +
                            orderDetail.receAddress
                          }}
                        </div>
                        <div>
                          支付方式：{{
                            { WECHAT: '微信支付', CASH: '到店支付', TRANSFER: '转账支付' }[orderDetail.payType]
                          }}
                        </div>
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col v-if="~['SEND', 'OVER'].indexOf(orderDetail.status)" :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                  <div class="info">
                    <div class="info_title">物流信息</div>
                    <div class="info_bottom">
                      <div class="info_bottom_rt">
                        <div>
                          <el-radio-group disabled v-model="orderDetail.pickType">
                            <el-radio label="YES">自提</el-radio>
                            <el-radio label="NO">物流</el-radio>
                          </el-radio-group>
                        </div>
                        <div v-if="orderDetail.pickType == 'NO'">快递单号：{{ orderDetail.logisticsNo }}</div>
                        <div v-if="orderDetail.pickType == 'NO'">快递公司：{{ orderDetail.logisticsName }}</div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>

            <h3>商品信息</h3>
            <div class="order-main" style="border: none">
              <!-- 订单表格 -->
              <el-table :data="[orderDetail]" style="width: 100%" border>
                <el-table-column label="商品信息" min-width="200">
                  <template slot-scope="scope">
                    <el-row>
                      <el-col v-if="scope.row.goodsUrl" :span="6">
                        <el-image style="width: 40px; height: 40px" :src="$showImgUrl(scope.row.goodsUrl)">
                          <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                          </div>
                        </el-image>
                      </el-col>
                      <el-col :span="18">
                        <div>{{ scope.row.esGoodsName }}</div>
                      </el-col>
                    </el-row>
                  </template>
                </el-table-column>
                <el-table-column prop="goodsPrice" label="单价" align="center"></el-table-column>
                <el-table-column prop="num" label="数量" align="center"></el-table-column>
                <el-table-column prop="totalAmount" label="商品总金额" align="center" min-width="100"></el-table-column>
                <el-table-column prop="refundPrice" label="退款金额" align="center"></el-table-column>
              </el-table>
            </div>

            <h3 v-if="detailsTypeCp == 1">收款信息</h3>
            <div v-if="detailsTypeCp == 1" class="order-main">
              <div style="width: 100%; padding: 10px 15px 15px 15px">
                <el-row>
                  <el-col :span="10">
                    <div>
                      <el-form ref="formSKref" :model="formSK" label-width="80px" size="mini">
                        <el-form-item
                          label="收款金额"
                          prop="price"
                          :rules="[{ required: true, message: '请填写', trigger: 'blur' }]"
                        >
                          <el-input type="number" v-model="formSK.price"></el-input>
                        </el-form-item>
                        <el-form-item label="收款金额" prop="fileUrl">
                          <ImageUpload :fileList="formSK.fileUrl" :limit="1" />
                        </el-form-item>
                        <el-form-item label="备注" prop="remark">
                          <el-input type="textarea" v-model="formSK.remark"></el-input>
                        </el-form-item>
                      </el-form>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-if="activeName == 'second'">
        <div style="box-sizing: border-box; padding: 10px">
          <div>
            <div class="order-main" style="border: none">
              <el-table :data="orderPayPriceList" style="width: 100%" border>
                <el-table-column prop="price" label="收款金额" align="center"></el-table-column>
                <el-table-column prop="fileUrl" label="收款凭证" min-width="200">
                  <template slot-scope="scope">
                    <el-image
                      v-if="scope.row.fileUrl"
                      style="width: 40px; height: 40px"
                      :src="$showImgUrl(scope.row.fileUrl)"
                    >
                      <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                      </div>
                    </el-image>
                  </template>
                </el-table-column>
                <el-table-column prop="createBy" label="操作人" align="center" min-width="100"></el-table-column>
                <el-table-column prop="createTime" label="操作时间" align="center"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </template>
    </zj-page-fill>
    <div style="box-sizing: border-box; padding: 10px; text-align: right">
      <!-- 确定退货退款 -->
      <el-button v-if="detailsTypeCp == 2" type="primary" size="small" @click="faqituikuan">确定</el-button>
      <!-- 确认收款 -->
      <el-button v-if="detailsTypeCp == 1" type="primary" size="small" @click="quererndingda">确认收款</el-button>
    </div>
  </zj-page-container>
</template>

<script>
import { esOrderDetail, esOrderRefund, esOrderPayPrice, esOrderPayPriceList } from '@/api/orderManagement'
import ImageUpload from '@/components/file-upload'
export default {
  components: {
    ImageUpload
  },
  props: {
    detailsId: {
      type: [String, Number],
      default: ''
    },
    detailsType: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      activeName: 'first',
      detailsTypeCp: this.detailsType,
      // 退货退款表单
      formTH: {
        refundType: '',
        refundNum: '',
        refundPrice: '',
        refundRemark: ''
      },
      // 收款表单
      formSK: {
        fileUrl: []
      },
      // 订单详情
      orderDetail: {},
      // 物流详情
      expressDetail: {},
      orderPayPriceList: []
    }
  },
  computed: {
    zhuangtai() {
      return !!~['SAVE', 'WAIT'].indexOf(this.orderDetail.status)
        ? 1
        : !!~['PAID'].indexOf(this.orderDetail.status)
        ? 2
        : !!~['SEND'].indexOf(this.orderDetail.status)
        ? 3
        : !!~['OVER'].indexOf(this.orderDetail.status)
        ? 4
        : -1
    }
  },
  watch: {
    detailsId: {
      handler(newVal, oldVal) {
        this.getEsOrderDetail()
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getEsOrderDetail() {
      esOrderDetail({
        esOrderId: this.detailsId
      }).then(res => {
        this.orderDetail = {
          ...res.data
        }
      })
      esOrderPayPriceList({
        esOrderId: this.detailsId
      }).then(res => {
        this.orderPayPriceList = res.data
      })
    },
    lookkuaidi() {
      this.$emit('viewMaterialFlow', { ...this.orderDetail })
    },
    faqituikuan() {
      this.$refs.formTHref.validate(valid => {
        if (valid) {
          esOrderRefund({
            esOrderId: this.detailsId,
            ...this.formTH
          }).then(res => {
            this.$message({ type: 'success', message: `确定退货退款成功!` })
            this.$emit('removeTab')
          })
        }
      })
    },
    quererndingda() {
      this.$refs.formSKref.validate(valid => {
        if (valid) {
          esOrderPayPrice({
            esOrderId: this.detailsId,
            ...this.formSK,
            fileUrl: this.formSK.fileUrl.map(item => item.url).join(',')
          }).then(res => {
            this.$message({ type: 'success', message: `确认收款成功!` })
            this.$emit('removeTab')
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.info {
  .info_title {
    font-size: 16px;
    font-weight: 700;
  }

  .info_bottom {
    display: flex;
    margin: 10px 0;

    .info_bottom_lt {
      width: 40px;
      height: 40px;
    }

    .info_bottom_rt {
      padding: 0 0 0 10px;
      line-height: 30px;

      .photoPZ {
        display: inline-block;
        vertical-align: text-top;
      }
    }
  }
}

.order-main {
  margin-top: 15px;
  border: 1px solid #e5e5e5;

  .order-main-title {
    font-size: 14px;
  }

  .order-main-title span {
    margin-right: 15px;
  }

  .order-main-status {
    padding: 15px 0;
    font-size: 24px;
    color: #409eff;
  }

  .order-main-opt-btn {
    padding: 15px 0;
  }
}

.order-receive-info {
  margin: 15px 0 30px;
  padding: 15px;
  background: #f5f7fa;

  :first-child div span {
    padding-right: 15px;
  }
}

.order-detail {
  background: #f5f7fa;

  .order-amount-info {
    padding: 15px 0;
    font-size: 12px;
    font-weight: bold;
  }

  ::v-deep .el-table tr,
  ::v-deep .el-table th {
    background-color: #f5f7fa;
  }
}

.main-detail {
  .title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
  }

  .item {
    display: flex;
    font-size: 14px;
    color: #666;
    padding-bottom: 12px;

    .label {
      white-space: nowrap;
    }
  }
}

.order-evaluate-info {
  margin: 15px 0;
  padding: 30px 15px;
  background: #f5f7fa;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      font-size: 16px;
      font-weight: 700;

      span {
        font-weight: normal;
        margin-left: 20px;
        font-size: 14px;
        color: #666;
      }
    }

    .right {
      display: flex;
      align-items: center;
      font-size: 14px;

      span {
        margin-right: 10px;
      }
    }
  }

  .main {
    margin-top: 20px;
    display: flex;

    .rate-list {
      font-size: 14px;
      flex-shrink: 0;
    }

    .tag-list {
      margin-left: 30px;

      ::v-deep .el-tag {
        margin-right: 10px;
        margin-bottom: 10px;
      }
    }
  }

  .content {
    width: 400px;
    line-height: 20px;
    font-size: 14px;
    color: #333;
    margin-top: 10px;
  }

  .img-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    width: 400px;

    ::v-deep .el-image {
      width: 100px;
      height: 100px;
      margin-right: 10px;
      margin-bottom: 10px;
      border: 1px solid #eaeaea;
    }
  }
}
</style>
