<!-- 创建 -->
<template>
  <el-form label-position="left" ref="form" label-width="auto" :model="form" :size="defaultFormItemSize" :rules="rules" class="formBox">
    <!-- <el-row class="title">基本信息</el-row> -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class='title'>基本信息</div>
      </div>
      <el-form-item label="任务名称:" prop="taskName">
        <el-input v-model="form.taskName" :size="defaultFormItemSize" style="width:400px"></el-input>
      </el-form-item>
      <el-form-item label="清洗数据集:" prop="datasetId">
        <el-cascader ref="cascader" style="width:400px" v-model="form.datasetId" :options="dataList" :props="{ label: 'name', value: 'id', emitPath: false }" @change="cascaderChange"></el-cascader>
      </el-form-item>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class='title'>异常清洗配置</div>
      </div>
      <div class="cardList">
        <template v-for="(item,index) in cleanConfig">
          <configeCard v-model="cleanConfig[index]" :key="item.name" />
        </template>
        <div style="width: 240px;" v-for="item in 7" :key="item"> </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class='title'>过滤配置</div>
      </div>
      <div class="cardList">
        <template v-for="(item,index) in filterConfig">
          <configeCard v-model="filterConfig[index]" :key="item.name" />
        </template>
        <div style="width: 240px;" v-for="item in 7" :key="item"> </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class='title'>去隐私配置</div>
      </div>
      <div class="cardList">
        <template v-for="(item,index) in desensitiveConfig">
          <configeCard v-model="desensitiveConfig[index]" :key="item.name" />
        </template>
        <div style="width: 240px;" v-for="item in 7" :key="item"> </div>
      </div>
    </el-card>
    <el-row type="flex" justify="end" class="dialog-btn-layer mt20">
      <el-button :size="defaultFormItemSize" :plain="true" @click="onCancel(false)">取消</el-button>
      <el-button type="primary" :size="defaultFormItemSize" @click="onSubmit">确定</el-button>
    </el-row>
  </el-form>
</template>

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

  computed: {},

  mounted() {
    this.intFrom()
  },
  methods: {
    intFrom() {
      this.getDataList()
      this.form = { ...this.form, ...this.item }
      try {
      } catch (error) {
        // console.log(error);
      }
    },
    getDataList() {
      MyDataSet.listForTree(this, {
        datasetVersionDto: {
          inputStatus: 1,
          releaseStatus: 0
        }
      })
        .then((res) => {
          this.dataList = res.data.map((item) => {
            return {
              id: item.datasetId,
              name: item.datasetName,
              // prettier-ignore
              children: item.datasetVersionList === [] ? [] : item.datasetVersionList.map((item2) => {
                return { id: item2.versionId, name: 'V' + item2.datasetVersion, versionName: item2.versionName }
              })
            }
          })
        })
        .catch((e) => {
          console.log(e)
        })
    },
    onCancel(isSuccess) {
      if (this.observer != null) {
        this.observer.cancel(isSuccess)
      }
    },
    getConfigData(data) {
      return data.map((item) => {
        return {
          name: item.name,
          args: item.isopen && !item.value ? 1 : item.isopen && item.value ? item.value : 0
        }
      })
    },
    cascaderChange() {
      this.form.datasetName = this.$refs['cascader'].getCheckedNodes()[0].data.versionName
    },
    onSubmit() {
      this.form.config.cleanConfig = this.getConfigData(this.cleanConfig)
      this.form.config.filterConfig = this.getConfigData(this.filterConfig)
      this.form.config.desensitiveConfig = this.getConfigData(this.desensitiveConfig)

      return new Promise((resolve, reject) => {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            let params = {}
            params.datasetCleanDto = { ...this.form }

            if (this.isEdit) {
              DataSetCleaning.update(this, params)
                .then((res) => {
                  resolve(res)
                  this.$message.success('编辑成功')
                  this.onCancel(true)
                })
                .catch((e) => {
                  reject(e)
                })
            } else {
              DataSetCleaning.startClean(this, params)
                .then((res) => {
                  resolve(res)
                  this.$message.success('添加成功')
                  this.onCancel(true)
                })
                .catch((e) => {
                  reject(e)
                })
            }
          } else {
            reject()
          }
        })
      })
    }
  }
}
</script>
<style scoped>
.formBox {
  height: calc(100% - 50px);
  overflow: scroll;
}
.title {
  font-size: 20px;
  height: 45px;
  line-height: 45px;
}
.introduce {
  color: #909399;
}
.box-card {
  margin-bottom: 20px;
}
.cardList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
.dialog-btn-layer {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
</style>
