<template>
  <el-dialog
    :visible.sync="visible"
    v-bind="modalOptions"
    append-to-body
  >
    <el-form
      ref="formData"
      :model="formData"
      size="mini"
      label-position="left"
      label-suffix=":"
      label-width="200px"
    >
      <!-- 分佣日志信息 -->
      <el-form-item label="ID" prop="commissionLogId">
        {{ formData.commissionLogId || '--' }}
      </el-form-item>
      <el-form-item label="活动配置类型" prop="commissionType">
        <span v-if="formData.commissionType === 1">升级活动</span>
        <span v-else-if="formData.commissionType === 2">分佣活动</span>
        <span v-else-if="formData.commissionType === 3">社区活动</span>
        <span v-else-if="formData.commissionType === 4">赠券活动</span>
        <span v-else-if="formData.commissionType === 5">赠金活动</span>
        <span v-else-if="formData.commissionType === 6">商圈订单</span>
        <span v-else-if="formData.commissionType === 7">爆品家具</span>
        <span v-else-if="formData.commissionType === 8">社区订单</span>
        <span v-else-if="formData.commissionType === 9">用户代金券转增</span>
        <span v-else-if="formData.commissionType === 10">商家代金券转赠</span>
        <span v-else-if="formData.commissionType === 11">同城联盟卡</span>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="交易时间" prop="tradeTime">
        {{ formData.tradeTime || '--' }}
      </el-form-item>
      <el-form-item label="关联订单编号" prop="orderFormid">
        {{ formData.orderFormid || '--' }}
      </el-form-item>
      <el-form-item label="购买用户ID" prop="buyerUserId">
        {{ formData.buyerUserId || '--' }}
      </el-form-item>
      <el-form-item label="下单用户号码" prop="phone">
        {{ formData.phone || '--' }}
      </el-form-item>
      <el-form-item label="支付金额" prop="orderPrice">
        {{ formData.orderPrice || '--' }}
      </el-form-item>
      <el-form-item label="佣金比例/金额" prop="orderProportion">
        <span v-if="formData.orderProportion <= 1">{{ formData.orderProportion * 100 }}%</span>
        <span v-else-if="formData.orderProportion > 1">￥{{ formData.orderProportion }}</span>
      </el-form-item>
      <el-form-item label="上级身份" prop="tidentity">
        {{ formData.tidentity || '--' }}
      </el-form-item>
      <el-form-item label="上级ID" prop="tid">
        {{ formData.tid || '--' }}
      </el-form-item>
      <el-form-item label="上级手机号" prop="tphone">
        {{ formData.tphone || '--' }}
      </el-form-item>
      <el-form-item label="用于分佣的佣金总额" prop="commissionPrice">
        ￥{{ typeof formData.commissionPrice === 'number' ? formData.commissionPrice : '--' }}
      </el-form-item>
      <el-form-item label="获得佣金" prop="userCommission">
        ￥{{ typeof formData.userCommission === 'number' ? formData.userCommission : '--' }}
      </el-form-item>
      <el-form-item label="佣金分配详情" prop="commissionDetail">
        {{ formData.commissionDetail || '--' }}
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>

export default {
  name: 'DetailModal',
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '800px',
        title: '查看升级日志详情'
      },
      visible: false,
      formData: {
        commissionLogId: '',
        commissionType: '',
        tradeTime: '',
        orderFormid: '',
        buyerUserId: '',
        phone: '',
        orderPrice: '',
        orderProportion: '',
        tidentity: '',
        tid: '',
        tphone: '',
        commissionPrice: '',
        userCommission: '',
        commissionDetail: ''
      }
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    handleOpen(params = {}) {
      this.formData = Object.assign(this.$options.data().formData, params)
      if (params.id) {
        // this.getInfo(params.id)
      }
      this.visible = true
    },
    async getInfo(id) {
      const loading = this.$loading({ text: '加载中' })
      try {
        const res = await xxx({ id })
        this.formData = Object.assign(this.$options.data().formData, res.data, {
          id: res.data.id || ''
        })
      } finally {
        loading.close()
      }
    }
  }
}
</script>

