<template>
  <el-row v-loading="dataListLoading">
    <el-col :span="20" :offset="2">
      <el-form label-position="right"
               ref="ruleForm">
        <el-form-item>
          <h3>订单详情</h3>
        </el-form-item>
        <el-form-item>
          <p>订单编号：{{ info.orderNumber }}</p>
        </el-form-item>
        <el-form-item>
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              prop="productName"
              label="商品信息">
            </el-table-column>
            <el-table-column
              prop="productPrice"
              label="单价">
            </el-table-column>
            <el-table-column
              prop="receiverName"
              label="收件人姓名">
            </el-table-column>
            <el-table-column
              prop="receiverPhone"
              label="收件人手机号">
              <template slot-scope="scope">
                <p>{{ scope.row.receiverPhone.replace(/^(\d{3})(\d{4})(\d{4})$/, '$1****$2') }}</p>
              </template>
            </el-table-column>
            <el-table-column
              prop="receiverAddress"
              label="收件人地址">
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item v-if="tableData.length">
          <el-card>
            <div class="TT-order-list">
              <div class="count">
                <p>商品型号：1款</p>
                <p>总计件数：{{ tableData.length }}件</p>
              </div>
              <p class="money">
                <span>总计商品费用: </span>
                <span class="col_f64f6f">{{ tableData.reduce((total, cur) => total + cur.productPrice, 0) }}金币</span>
              </p>
            </div>
            <div class="TT-order-list">
              <p>快递件数：{{ tableData.length }}件</p>
              <p class="money">
                <span>总计快递费用：</span>
                <span class="col_f64f6f">{{ tableData.reduce((total, cur) => total + cur.warehpusePrice, 0) }}金币</span>
              </p>
            </div>
          </el-card>
        </el-form-item>
        <el-form-item>
          <!--orderStatus: 订单状态(0未支付1已支付2已取消)-->
          <el-button type="primary"
                     :disabled="isDisabled"
                     class="TT-submit-button"
                     @click="submitForm('ruleForm')"
                     v-if="info.orderStatus === 0">
            支付{{
              tableData.reduce((total, cur) => total + cur.productPrice, 0) + tableData.reduce((total, cur) => total + cur.warehpusePrice, 0)
            }}金币
          </el-button>
          <el-button class="TT-submit-button" disabled v-if="info.orderStatus === 1">已支付</el-button>
          <el-button class="TT-submit-button" disabled v-if="info.orderStatus === 2">已取消</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
import Crypto from '@/utils/crypto'

export default {
  name: 'goods-order-detail',
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      dataListLoading: false,
      isDisabled: false,
      tableData: [],
      info: {}
    }
  },
  created () {
    this.funInit()
  },
  methods: {
    funInit () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/gift/order/detail'),
        method: 'get',
        params: this.$http.adornParams({
          'id': Crypto.decrypt(this.id)
        })
      }).then(({ data }) => {
        if (data.status) {
          const { products } = data.data
          this.tableData = products
          this.info = data.data
        } else {
          this.$message.error(data.msg)
        }
        this.dataListLoading = false
      })
    },
    submitForm (formName) {
      this.isDisabled = true
      this.$http({
        url: this.$http.adornUrl('/gift/order/pay'),
        method: 'get',
        params: this.$http.adornParams({
          'id': Crypto.decrypt(this.id)
        })
      }).then(({ data }) => {
        this.isDisabled = false
        if (data.status) {
          this.$message({
            type: 'success',
            message: data.msg,
            onClose: () => {
              this.$router.push({ name: 'orderCheckOrder' })
            }
          })
          return
        }
        this.$message.error(data.msg)
      }).catch(() => {
        this.isDisabled = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.col_f64f6f {
  color: #f64f6f;
}

.TT-submit-button {
  float: right;
  width: 200px;
  margin: 20px auto;
}

.TT-order-list {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  .count {
    display: flex;
    align-items: center;

    p {
      &:nth-of-type(2) {
        margin-left: 40px;
      }
    }
  }

  .money {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: 60px;

    span {
      &:nth-of-type(2) {
        margin-left: 10px;
      }
    }
  }
}
</style>
