<!-- 详情 -->
<template>
  <div>
    <el-card class="box-card">
      <div class="topBox">
        <div class="title omit">
          基本信息
        </div>
      </div>
      <div class="content">
        <div class="item">
          <div class="label">任务ID：</div>
          <span class="value">{{row.cleanId}}</span>
        </div>
        <div class="item">
          <div class="label">任务名称：</div>
          <span class="value">{{row.taskName}}</span>
        </div>
        <div class="item">
          <div class="label">清洗类型：</div>
          <span class="value">{{row.cleanType==1?'文本数据清洗':''}}</span>
        </div>
        <div class="item">
          <div class="label">清洗数据集：</div>
          <span class="value">{{row.datasetName}}</span>
        </div>
        <div class="item">
          <div class="label">创建人：</div>
          <span class="value">{{row.createUserIdDictMap.name}}</span>
        </div>
        <div class="item">
          <div class="label">创建时间：</div>
          <span class="value">{{row.startTime}}</span>
        </div>
        <div class="item">
          <div class="label">完成时间：</div>
          <span class="value">{{row.finishTime}}</span>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div>
        <div class="title">
          异常清洗
        </div>
        <div class="cardList">
          <template v-for="(item,index) in filterCleanConfig">
            <configeCard v-model="filterCleanConfig[index]" :key="item.name" />
          </template>
          <div style="width: 240px;" v-for="item in 7" :key="item"> </div>
        </div>
        <cleaningTable :cleanId='row.cleanId' api="getCleanList" />
      </div>
    </el-card>
    <el-card class="box-card">
      <div>
        <div class="title">
          过滤
        </div>
        <div class="cardList">
          <template v-for="(item,index) in filterFilterConfig">
            <configeCard v-model="filterFilterConfig[index]" :key="item.name" />
          </template>
          <div style="width: 240px;" v-for="item in 7" :key="item"> </div>
        </div>
        <cleaningTable :cleanId='row.cleanId' api="getFilterList" />
      </div>
    </el-card>
    <el-card class="box-card">
      <div>
        <div class="title">
          去隐私
        </div>
        <div class="cardList">
          <template v-for="(item,index) in filterDesensitiveConfig">
            <configeCard v-model="filterDesensitiveConfig[index]" :key="item.name" />
          </template>
          <div style="width: 240px;" v-for="item in 7" :key="item"> </div>
        </div>
        <cleaningTable :cleanId='row.cleanId' api="getDesensitiveList" />
      </div>
    </el-card>
  </div>
</template>

<script>
import configeCard from './configeCard.vue'
import cleaningTable from './cleaningTable.vue'
import { DataSetCleaning } from '@/api/gptController.js'
export default {
  data() {
    return {
      cleanConfig: [
        {
          icon: '',
          tag: '移除不可见字符',
          name: 'remove_invisible_character',
          content: '移除ASCII中的一些不可见字符, 如0-32 和127-160这两个范围'
        },
        {
          icon: '',
          tag: '规范化空格',
          name: 'replace_uniform_whitespace',
          content: '将不同的unicode空格比如  u2008，转成正常的空格'
        },
        {
          icon: '',
          tag: '去除乱码',
          name: 'remove_non_meaning_characters',
          content: '去除乱码和无意义的unicode'
        },
        {
          icon: '',
          tag: '繁体转简体',
          name: 'replace_traditional_chinese_to_simplified',
          content: '繁体转简体，如“不經意，妳的笑容”清洗成“不经意，你的笑容”'
        },
        {
          icon: '',
          tag: '去除网页标识符',
          name: 'remove_web_identifiers',
          content: '移除文档中的html标签，如<html>,<dev>,<p>等'
        },
        {
          icon: '',
          tag: '去除表情',
          name: 'remove_emoji',
          content: '去除文档中的表情，如‘🐰’, ‘🧑🏼’等'
        }
      ],
      filterConfig: [
        {
          icon: '',
          tag: '检查文档的词数目',
          name: 'filter_check_number_words',
          content: '词数目不在指定范围会被过滤掉，如中文[1,1000000]'
        },
        {
          icon: '',
          tag: '检查文档的字重复率',
          name: 'filter_check_character_repetition_removal',
          content: '如果字重复率太高，意味着文档中重复的字太多，文档会被过滤掉'
        },
        {
          icon: '',
          tag: '检查文档的词重复率',
          name: 'filter_check_word_repetition_removal',
          content: '如果词重复率太高，意味着文档中重复的词太多，文档会被过滤掉'
        },
        {
          icon: '',
          tag: '检查文档的特殊字符率',
          name: 'filter_check_special_characters',
          content: '如果特殊字符率太高，意味着文档中特殊字符太多，文档会被过滤掉'
        },
        {
          icon: '',
          tag: '检查文档的色情暴力词率',
          name: 'filter_check_flagged_words',
          content: '如果色情暴力词率太高，文档会被过滤掉'
        }
      ],
      desensitiveConfig: [
        {
          icon: '',
          tag: '去除Email',
          name: 'replace_emails',
          content: '去除email地址'
        },
        {
          icon: '',
          tag: '去除IP地址',
          name: 'replace_ip',
          content: '去除IPv4 或者 IPv6 地址'
        },
        {
          icon: '',
          tag: '去除数字',
          name: 'replace_identifier',
          content: '去除数字和字母数字标识符，如电话号码、信用卡号、十六进制散列等，同时跳过年份和简单数字的实例'
        }
      ],
      config: {
        cleanConfig: [],
        desensitiveConfig: [],
        filterConfig: []
      }
    }
  },
  props: ['row'],
  components: { configeCard, cleaningTable },

  computed: {
    filterCleanConfig() {
      return this.cleanConfig.filter((item) => {
        return this.config.cleanConfig.some((item2) => {
          return item.name === item2.name
        })
      })
    },
    filterFilterConfig() {
      return this.filterConfig.filter((item) => {
        return this.config.filterConfig.some((item2) => {
          return item.name === item2.name
        })
      })
    },
    filterDesensitiveConfig() {
      return this.desensitiveConfig.filter((item) => {
        return this.config.desensitiveConfig.some((item2) => {
          return item.name === item2.name
        })
      })
    }
  },

  mounted() {
    this.configList()
  },

  methods: {
    configList() {
      DataSetCleaning.configList(this, { datasetCleanConfigDtoFilter: { cleanId: this.row.cleanId } })
        .then((res) => {
          let { cleanConfig, desensitiveConfig, filterConfig } = res.data.dataList[0]
          this.config.cleanConfig = JSON.parse(cleanConfig)
          this.config.desensitiveConfig = JSON.parse(desensitiveConfig)
          this.config.filterConfig = JSON.parse(filterConfig)
        })
        .catch((e) => {
          console.log(e)
        })
    }
  }
}
</script>
<style scoped>
.box-card {
  margin-bottom: 20px;
}
.topBox {
  display: flex;
  justify-content: space-between;
}
.title {
  font-size: 16px;

  margin-bottom: 16px;
  width: calc(100% - 50px);
}
.item {
  min-width: 400px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
.content {
  display: flex;
  flex-wrap: wrap;
}
.cardList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
</style>
