<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="configId">
        {{ formData.configId || '--' }}
      </el-form-item>
      <el-form-item label="关联平台组合活动ID" prop="composeId">
        <div style="display: flex;align-items: center;">
          <span>{{ formData.composeId || '--' }}</span>
          <el-button
            v-if="formData.composeId"
            style="margin-left: 14px;" type="warning" size="mini"
            @click="$refs.DetailModal2 && $refs.DetailModal2.handleOpen({ composeId: formData.composeId })"
          >
            详情
          </el-button>
        </div>
      </el-form-item>
      <el-form-item label="活动配置类型" prop="configType">
        <span v-if="formData.configType === 1">升级活动</span>
        <span v-else-if="formData.configType === 2">分佣活动</span>
        <span v-else-if="formData.configType === 3">社区活动</span>
        <span v-else-if="formData.configType === 4">赠券活动</span>
        <span v-else-if="formData.configType === 5">赠金活动</span>
        <span v-else-if="formData.configType === 6">商圈订单</span>
        <span v-else-if="formData.configType === 7">爆品家具</span>
        <span v-else-if="formData.configType === 8">社区订单</span>
        <span v-else-if="formData.configType === 9">用户代金券转增</span>
        <span v-else-if="formData.configType === 10">商家代金券转赠</span>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="是否参与" prop="joinRole">
        <span v-if="formData.joinRole === 1">是</span>
        <span v-else-if="formData.joinRole === 2">否</span>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="规则" prop="joinRule">
        <span v-if="formData.joinRule === 1">金额</span>
        <span v-else-if="formData.joinRule === 2">比例</span>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="升级类型" prop="roleType">
        <span v-if="formData.roleType === 1">团长</span>
        <span v-else-if="formData.roleType === 2">合伙人</span>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="参与金额" prop="joinMoney">
        ￥{{ typeof formData.joinMoney === 'number' ? formData.joinMoney : '--' }}
      </el-form-item>
      <el-form-item label="关联佣金配置ID" prop="ruleId">
        <div style="display: flex;align-items: center;">
          <span>{{ formData.ruleId || '--' }}</span>
          <el-button
            v-if="formData.ruleId"
            style="margin-left: 14px;" type="warning" size="mini"
            @click="$refs.DetailModal1 && $refs.DetailModal1.handleOpen({ ruleId: formData.ruleId })"
          >
            详情
          </el-button>
        </div>
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        {{ formData.createTime || '--' }}
      </el-form-item>
      <el-form-item label="更新时间" prop="updateTime">
        {{ formData.updateTime || '--' }}
      </el-form-item>
    </el-form>

    <!-- 佣金配置详情 -->
    <DetailModal1 ref="DetailModal1" />
    <!-- 组合活动详情 -->
    <DetailModal2 ref="DetailModal2" />
  </el-dialog>
</template>

<script>
import { getPlatformComposeConfigById } from '@/api/active/combinationActivities'
import DetailModal1 from '../../../commissionAllocation/gradeCommission/components/DetailModal'
import DetailModal2 from '../../combinationActivities/components/DetailModal'

export default {
  name: 'DetailModal',
  components: {
    DetailModal1,
    DetailModal2
  },
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '900px',
        title: '查看组合活动配置详情'
      },
      visible: false,
      formData: {
        configId: '',
        composeId: '',
        configType: '',
        joinRole: '',
        joinRule: '',
        roleType: '',
        joinMoney: '',
        ruleId: '',
        createTime: '',
        updateTime: ''
      }
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    handleOpen(params = {}) {
      this.formData = Object.assign(this.$options.data().formData, params)
      if (params.configId) {
        this.getInfo(params.configId)
      }
      this.visible = true
    },
    async getInfo(id) {
      const loading = this.$loading({ text: '加载中' })
      try {
        const res = await getPlatformComposeConfigById({ id })
        this.formData = Object.assign(this.$options.data().formData, res.data, {
          configId: res.data.configId || '',
          composeId: res.data.composeId || '',
          configType: res.data.configType || '',
          joinRole: res.data.joinRole || '',
          joinRule: res.data.joinRule || '',
          roleType: res.data.roleType || '',
          joinMoney: res.data.joinMoney || '',
          ruleId: res.data.ruleId || '',
          createTime: res.data.createTime || '',
          updateTime: res.data.updateTime || ''
        })
      } finally {
        loading.close()
      }
    }
  }
}
</script>

