<!--
 * @Description: 添加人工标签集对话框组件
 * @Author: liusheng
 * @Date: 2024-07-08 14:30:56
-->
<template>
  <el-dialog title="新增采集标签集" :visible.sync="showDialog" width="570px" center
    :before-close="handleCloseDialog" :close-on-click-modal="false" @open="handleOpenDialog">
    <el-form :ref="formName" :model="tagSetForm" :rules="tagSetRules" size="small" inline>
      <div>
        <el-form-item label="key:" prop="key">
          <el-input style="width:180px;" v-model="tagSetForm.key" placeholder="请输入唯一键名称" clearable />
        </el-form-item>
        <el-form-item style="margin-left:15px;" label="版本号:" prop="version">
          <el-select style="width:180px" v-model="tagSetForm.version" placeholder="请选择标签集版本号" clearable>
            <el-option v-for="(item, index) in versionList" :key="index" :label="item" :value="item" />
          </el-select>
        </el-form-item>
      </div>
    </el-form>
    <div style="text-align: center; margin-top: 20px">
      <el-button size="small" @click="handleCloseDialog">取 消</el-button>
      <el-button type="primary" size="small" @click="handleSave">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'AddManualTagSetDlg',
	props: ['showDialog'],

  data() {
    return {
      formName: 'tagSetForm',
      tagSetForm: {},
      versionList: [],

      tagSetRules: {
				key: [
          { required: true, message: '请输入唯一键名称', trigger: 'blur' },
          { type: 'string', pattern: /^([a-zA-Z0-9]|[\u4e00-\u9fa5])+$/, message: '只能输入汉字、字母或数字', trigger: 'blur' },
					{ min: 1, max: 30, message: '最大长度不超过30个字符', trigger: 'blur' },
				],
        version: [
          { required: true, message: '请选择版本号', trigger: 'blur' },
				]
			}
    }
  },

  methods: {
    getManualTagSetDO4Add() {
      let url = this.commonUrl.URL_GET_MANUAL_TAG_SET_DO4_ADD;
      this.appAxios("GET", url).then(result => {
        if (result == null) return;
        
        this.tagSetForm = result.data.tagSet;
        this.versionList = result.data.versionList;
      })
    },

    handleOpenDialog() {
      this.tagSetForm = {};
			this.getManualTagSetDO4Add();
		},

    handleCloseDialog() {
      this.$refs[this.formName].clearValidate();
      this.$emit("close", false);
    },

    handleSave() {
      this.$refs[this.formName].validate(valid => {
        if (!valid) return false;
        let url = this.commonUrl.URL_SAVE_MANUAL_TAG_SET;
        this.appAxios('POST', url, this.tagSetForm).then(result => {
          if (result == null) return;
          this.$emit("close", true);
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
