<template>
  <div class="app-container">
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%" v-dialogDrag append-to-body>
      <el-descriptions class="margin-top" title="推广人信息" :column="3" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            推广人姓名
          </template>
          {{ formData.oldUserName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            推广人电话
          </template>
          {{ formData.oldUser.mobile }}
        </el-descriptions-item>
      </el-descriptions>

      <el-descriptions class="margin-top" title="被推广人信息" :column="3" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            被推广人姓名
          </template>
          {{ formData.newUserName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            被推广人电话
          </template>
          {{ formData.newUser.mobile }}
        </el-descriptions-item>
      </el-descriptions>

      <el-descriptions class="margin-top" title="推广记录" :column="2" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-star-off"></i>
            推广渠道
          </template>
          <dict-tag :type="DICT_TYPE.PROMOTION_CHANNEL" :value="formData.promotionChannel"/>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-collection"></i>
            推广人推广码
          </template>
          {{ formData.uniqueCode }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-timer"></i>
            被推广人注册时间
          </template>
          {{ formData.registerTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-place"></i>
            推广人角色
          </template>
          <dict-tag :type="DICT_TYPE.SYSTEM_USER_TYPE" :value="formData.oldUser.userType"/>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'PromotionData',
  data(){
      return{
        // 弹出层标题
        dialogTitle: '推广记录查看',
        // 是否显示弹出层
        dialogVisible: false,
        formData:{
          oldUser: {
            mobile: null,
          },
          newUser: {
            mobile: null,
          },
          oldUserName: null,
          newUserName: null,
          promotionChannel: null,
          uniqueCode: null,
          registerTime: null,
          userType: null
        },
      }
  },
  methods:{
    /** 打开弹窗 */
    async open(row) {
      this.reset()
      this.formData = row
      this.dialogVisible = true
    },
    /** 表单重置 */
    reset() {
      this.formData = {
        oldUser: {
          mobile: null,
        },
        newUser: {
          mobile: null,
        },
        oldUserName: null,
        newUserName: null,
        promotionChannel: null,
        uniqueCode: null,
        registerTime: null,
        userType: null
      }
      this.resetForm('formRef')
    },
  }
}
</script>

<style scoped>

</style>
