<template>
  <el-dialog
    title="启用智能标注"
    :visible.sync="isOpen" width="500px" append-to-body @close="cancel" :close-on-click-modal="false"
  >
    <el-form ref="form" label-position="top" :rules="rules" :model="form" label-width="140px">
      <el-form-item label="智能标注类型" prop="learningType">
        <el-radio-group v-model="form.learningType">
          <el-radio label="active">主动学习</el-radio>
          <el-radio label="pre">预学习</el-radio>
        </el-radio-group>
        <p class="description">
          {{ form.learningType === 'active' ? '系统将自动使用半监督学习，通过深度学习等多种手段进行智能标注，使用人工标注进行优化' : '选择用户智能标注服务里面的服务,选择服务时需要注意服务关联的模型类型和数据集的标注类型相匹配'}}。
        </p>
      </el-form-item>

      <el-form-item label="算法类型" prop="algorithmType">
        <el-radio-group v-model="form.algorithmType">
          <el-radio label="fast">快速型</el-radio>
          <el-radio label="precise">精准型</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="智能标注服务节点" prop="serviceId">
        <el-select v-model="form.serviceId" placeholder="请选择智能标注服务节点" clearable style="width: 100%">
          <el-option v-for="dict in this.serviceList" :key="dict.serviceId" :label="dict.serviceName"
                     :value="dict.serviceId"
          />
        </el-select>
      </el-form-item>

      <el-alert
        v-if="showWarning"
        type="warning"
        :closable="false"
        show-icon
      >
        启动自动标注时，需数据中存在至少1种标签。当前自动标注只支持标注矩形框。
      </el-alert>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="loading">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { list, listWithNoPage } from '../../../../api/dataCenter/ailabelservice'
import { autoAnnotate } from '../../../../api/dataCenter/ailabelservice'

export default {
  props: {
    open: {
      type: Boolean,
      default: false,
      required: true
    },
    getList: {
      type: Function,
      required: true
    },
    taskId: {
      type: Number,
      default: 0,
      required: true
    }
  },
  computed: {
    isOpen: {
      get() {
        return this.open
      },
      set(value) {
        this.$emit('dialog-cancel') // 通知父组件
      }
    }
  },
  name: 'AILabelDialog',
  data() {
    return {
      visible: false,
      loading: false,
      form: {
        learningType: 'pre',
        algorithmType: 'fast'
      },
      rules: {
        learningType: [{ required: true, message: '请选择智能标注类型', trigger: 'blur' }],
        algorithmType: [{ required: true, message: '请选择算法类型', trigger: 'blur' }],
        serviceId: [{ required: true, message: '请选择智能标注服务节点', trigger: 'blur' }]
      },
      serviceList: [],
      showWarning: true,
      currentRow: null
    }
  },

  watch: {
    isOpen(newVal) {
      if (newVal) {
        this.getServiceList()
      }
    }
  },
  methods: {
    getServiceList() {
      listWithNoPage().then(response => {
        console.log('response' + response.data)
        this.serviceList = response.data
        if (this.serviceList.length > 0) {
          this.form.serviceId = this.serviceList[0].serviceId
        }
      })
    },
    async handleSubmit() {
      try {
        this.loading = true
        const data = { taskId: this.taskId, intelligentAnnotationServiceId: this.form.serviceId }
        await autoAnnotate(data).then(response => {
          console.log('response' + response.data)
          this.serviceList = response.data
          this.$message.success('智能标注成功')
        })
      } catch (error) {
        this.$message.error(error.message || '智能标注失败')
      } finally {
        this.cancel()
        this.getList()
        this.loading = false
      }
    },
    // 取消按钮
    cancel() {
      this.isOpen = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        learningType: 'pre',
        algorithmType: 'fast',
        serviceId: undefined
      } // 清空表单
      this.serviceList = []
    }
  }
}
</script>

<style scoped>
.smart-annotation-dialog {
  max-width: 600px;
}

.annotation-form {
  padding: 20px 0;
}

.form-section {
  margin-bottom: 20px;
}

.form-section h3 {
  font-size: 14px;
  margin-bottom: 10px;
  color: #333;
}

.description {
  font-size: 12px;
  color: #666;
  margin-top: 8px;
  line-height: 1.5;
}

.full-width {
  width: 100%;
}
</style>
