<!--
 * @Description: 添加/编辑评估型标签弹出框组件
 * @Author: liusheng
 * @Date: 2024-07-03 16:30:56
-->
<template>
  <div>
    <el-form :ref="formName" :model="evalTagForm" :rules="evalTagRules" label-width="100px">
      <el-form-item label="标签名称：" prop="name">
        <el-input style="width:345px" v-model="evalTagForm.name" size="small" clearable placeholder="请输入标签名称" />
      </el-form-item>
      <el-form-item label="子标签：" prop="subTagsStr">
        <el-input style="width:345px" v-model="evalTagForm.subTagsStr" type="textarea"
          :autosize="{minRows: 2}" size="small" clearable placeholder="请输入子标签名称，多个以逗号分隔"/>
      </el-form-item>
      <el-form-item label="模块名称：" prop="module">
        <el-input style="width:345px" v-model="evalTagForm.module" size="small" clearable placeholder="请输入对应的Java模块包名称"/>
      </el-form-item>
    </el-form>
    <div style="text-align:center; margin:0">
      <el-button type="text" size="mini" @click="handleCancel">取消</el-button>
      <el-button type="primary" size="mini" @click="handleConfirm">确定</el-button>
    </div>
  </div>
</template>

<script>
import aupUtil from '../../common/AupUtil.js';

export default {
  name: 'EvalTagForm',
  props: ['mode', 'visible', 'tagSetIndex', 'tagSet', 'tagIndex'],

  data() {
    return {
      formName: 'evalTagForm',

      evalTagForm: {},
			evalTagRules: {
				name: [
          { required: true, message: '请输入标签名称', trigger: 'blur' },
          { type: 'string', pattern: aupUtil.tagNamePattern, message: aupUtil.tagNameErrMsg, trigger: 'blur' },
					{ min: 1, max: 20, message: '最大长度不超过20个字符', trigger: 'blur' },
				],
        subTagsStr: [
          { required: true, message: '请输入子标签名称，多个以逗号分隔', trigger: 'blur' },
          { 
            type: 'string', pattern: /^([a-zA-Z0-9\u4e00-\u9fa5])+(,[a-zA-Z0-9\u4e00-\u9fa5]+)*$/,
            message: '只能输入汉字、字母或数字，多个标签以逗号分隔', trigger: 'blur' 
          },
					{ min: 1, max: 200, message: '最大长度不超过200个字符', trigger: 'blur' },
				],
        module: [
          { required: true, message: '请输入Java模块包名称', trigger: 'blur' },
          { type: 'string', pattern: /^[a-zA-Z_$][a-zA-Z0-9_$]*(\.[a-zA-Z_$][a-zA-Z0-9_$]*)*$/, message: '不符合Java包名格式', trigger: 'blur' },
					{ min: 1, max: 100, message: '最大长度不超过100个字符', trigger: 'blur' },
				]
			}
    }
  },

  methods: {
    handleConfirm() {
      this.$refs[this.formName].validate((valid) => {
        if (!valid) return false;

        let data = {...this.evalTagForm};
        data.subTags = this.evalTagForm.subTagsStr.split(',');
        delete data.subTagsStr;
        this.$emit("confirm", this.tagSet, data);
      });
    },
    
    handleCancel() {
      this.$emit("close", this.tagSetIndex);
    },

    handleKeyDown(event) {
      if (event.key === 'Escape') {
        this.handleCancel();
      }
    }
  },

  watch: {
    visible(newVal) {
      if (!newVal) return;
      this.$refs[this.formName].clearValidate();
      if (this.mode === 'add') {
        this.evalTagForm = {};
      } else {
        let formData = JSON.parse(JSON.stringify(this.tagSet.tagList[this.tagIndex]));
        this.evalTagForm = {...formData, subTagsStr: formData.subTags.join(',')};
      }
    }
  },

  mounted() {
    // 添加全局键盘监听事件
    window.addEventListener('keydown', this.handleKeyDown);
  },

  beforeDestroy() {
    // 移除全局键盘监听事件
    window.removeEventListener('keydown', this.handleKeyDown);
  }
}
</script>

<style scoped>
.text {
  padding: 12px 0 15px 5px;
  font-size: 15px;
}
</style>
