<template>
  <div class="userProfile">
    <el-descriptions class="margin-top" title="导出任务详情信息" :column="1">
      <el-descriptions-item label="导出人群" label-class-name="userPro-label" content-class-name="userPro-content">
        {{ data.groupName }}
      </el-descriptions-item>
      <el-descriptions-item label="选择标签" label-class-name="userPro-label" content-class-name="userPro-content" :labelStyle="{ flex: 'none' }">
        <div class="tagUserPro" v-for="(item, index) in data.flowTagList" :key="index">
          <p>{{ item.name }}</p>
          <el-tag type="success" v-for="(fullitem, key) in item.children" size="small" :key="key">{{ fullitem.label }}</el-tag>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="导出数量" label-class-name="userPro-label">
        <el-input size="mini" placeholder="请输入导出数量" type="number" readonly disabled v-model="data.count"> </el-input>
      </el-descriptions-item>
      <el-descriptions-item label="选择月份" label-class-name="userPro-label">
        <el-date-picker
          size="mini"
          readonly
          disabled
          v-model="data.fileTime"
          type="monthrange"
          range-separator="至"
          value-format="yyyyMM"
          format="yyyy-MM"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
        >
        </el-date-picker>
      </el-descriptions-item>
      <el-descriptions-item label="是否脱敏" label-class-name="userPro-label" content-class-name="userPro-content">
        <el-switch v-model="data.desens" disabled></el-switch>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
const data = {
  groupName: '吴东强测试导出数量',
  flowTagList: [
    {
      name: '产品标签',
      children: [
        { label: '绑定小程序', value: 1 },
        { label: '关注公众号', value: 2 },
        { label: '是否CAP订购', value: 3 },
        { label: '订购产品', value: 4 },
        { label: '产品大类', value: 5 },
        { label: '产品类别', value: 6 },
        { label: '用户订购状态', value: 7 },
        { label: '产品订购状态', value: 8 },
        { label: '订购产品时长', value: 9 },
        { label: '订购产品价格', value: 10 },
        { label: '当月退订', value: 11 },
        { label: '高频当月订退', value: 12 },
        { label: '退订距今时长', value: 13 },
        { label: '订购包月产品总时长', value: 14 },
        { label: '产品免流量使用比', value: 15 },
        { label: '免流流量使用量', value: 16 },
        { label: '快手激活', value: 17 },
        { label: '订购渠道', value: 18 },
        { label: '未订购产品', value: 19 }
      ]
    },
    {
      name: '大网标签',
      children: [
        { label: '王卡副卡套餐', value: 101 },
        { label: '月流量消耗', value: 20 },
        { label: '月视频流量消耗', value: 30 },
        { label: 'APP月使用小时数', value: 40 },
        { label: 'APP月使用天数', value: 50 }
      ]
    },
    {
      name: '算法标签',
      children: [
        { label: '订购预测_爱奇艺_xgb', value: 100 },
        { label: '订购预测_哔哩_xgb', value: 200 },
        { label: '订购预测_快手_dec', value: 300 },
        { label: '订购预测_腾讯_dec', value: 400 },
        { label: '订购预测_芒果_xgb', value: 500 },
        { label: '订购预测_优酷_xgb', value: 501 },
        { label: '订购预测_哔哩_dec', value: 502 },
        { label: '订购预测_优酷_dec', value: 503 },
        { label: 'b订购预测_爱奇艺_dec', value: 504 },
        { label: '订购预测_快手_xgb', value: 505 },
        { label: '订购预测_芒果_dec', value: 506 },
        { label: '订购预测_腾讯_xgb', value: 507 },
        { label: 'RFM价值', value: 508 }
      ]
    }
  ],
  count: 10000,
  fileTime: ['202302', '202303'],
  desens: true
}
export default {
  props: {
    list: { type: Object, default: {} }
  },
  name: 'userprofile',
  data() {
    return {
      data
    }
  },
  created() {
    this.data = this.list
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.userProfile {
  padding: 0 150px;
}
.tagUserPro {
  font-size: 14px;
  .el-tag {
    margin: 5px;
  }
}
::v-deep .el-tag.el-tag--success {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color: #67c23a;
}
::v-deep .userPro-label {
  font-size: 14px;
  width: 60px;
  padding: 5px 0;
}
::v-deep .userPro-content {
  font-size: 14px;
  padding: 5px 0;
}
</style>
