<!--
 * @Description: 添加分析标签集对话框组件（计算型和分析型通用）
 * @Author: wenjing
 * @Date: 2023-05-15 11:30:56
-->
<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="590px" center
		:before-close="handleCloseDialog" :close-on-click-modal="false" @open="handleOpenDialog">
    <el-form :ref="formName" :model="tagSetForm" :rules="tagSetRules" size="small" label-width="100px">
      <div style="display:flex;">
        <el-form-item label="key:" prop="key">
          <el-input style="width:180px;" v-model="tagSetForm.key" clearable 
            placeholder="请输入唯一键名称" :disabled="mode == 'edit'" />
        </el-form-item>
        <el-form-item style="margin-left:15px;" label="版本号:" prop="version" label-width="90px">
          <el-select style="width:140px" 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>
      <div style="display:flex;">
        <el-form-item label="采集标签：" prop="gatherTagsStr">
          <el-input style="width:400px" v-model="tagSetForm.gatherTagsStr" type="textarea"
            :autosize="{minRows: 3}" size="small" clearable placeholder="请输入或选择所引用的采集标签，多个以逗号分隔"/>
        </el-form-item>
        <gather-tagset-popup style="margin-left:10px; color:#397AFA" 
          :visible="gatherTagSetPopupVisible" :tagList="tagList"
          @update:visible="handleGatherTagSetPopupVisible" @confirm="handleSelGatherTagSet" />
      </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>
import aupUtil from '../../common/AupUtil.js';
import GatherTagSetPopup from './GatherTagSetPopup.vue';

export default {
  name: 'CompTagSetDlg',
  props: ['dialogVisible', 'mode', 'tagSetKey'],
  
  components: {
    'gather-tagset-popup': GatherTagSetPopup,
  },

  data() {
    return {
      formName: 'tagSetForm',
      tagSetForm: {},
      versionList: [],
      gatherTagSetPopupVisible: false,
      
      tagSetRules: {
				key: [
          { required: true, message: '请输入唯一键名称', trigger: 'blur' },
          { type: 'string', pattern: aupUtil.keyPattern, message: aupUtil.keyErrMsg, trigger: 'blur' },
					{ min: 1, max: 30, message: '最大长度不超过30个字符', trigger: 'blur' },
				],
        version: [
          { required: true, message: '请选择版本号', trigger: 'blur' },
				],
        gatherTagsStr: [
          { 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' },
				],
			}
    }
  },

  computed: {
    title() {
      return (this.mode =='add') ? '新增计算型标签集' : '编辑计算型标签集';
    },

    tagList() {
      let tags = !this.tagSetForm.gatherTagsStr ? [] : this.tagSetForm.gatherTagsStr.split(',');
      for (let index = 0; index < tags.length; index++) {
        tags[index] = tags[index].trim();
      }
      return tags;
    },
  },
  
  methods:{
    getAnalTagSetDO() {
      let url =  (this.mode =='add') ? this.commonUrl.URL_GET_COMPUTATION_TAG_SET_DO4_ADD
        : this.commonUtil.fillUrlArgments(this.commonUrl.URL_GET_COMPUTATION_TAG_SET_DO4_UPDATE, this.tagSetKey);
      this.appAxios("GET", url).then(result => {
        if (result == null) return;
        
        let tagSetDo = result.data;
        this.tagSetForm = {
          ...tagSetDo.tagSet, 
          tagType: tagSetDo.tagTypeList[0],
          gatherTagsStr: tagSetDo.tagSet.gatherTagList.join(',')
        };
        this.versionList = result.data.versionList;
      })
    },

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

    handleGatherTagSetPopupVisible(val) {
      this.GatherTagSetPopupVisible = val;
    },

    handleSelGatherTagSet(newTagList) {
      this.tagSetForm.gatherTagsStr = newTagList.join(',');
    },

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

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

        let url = (this.mode =='add') ? this.commonUrl.URL_SAVE_COMPUTATION_TAG_SET
          : this.commonUrl.URL_UPDATE_COMPUTATION_TAG_SET;
        let data = JSON.parse(JSON.stringify(this.tagSetForm));
        data.gatherTagList = data.gatherTagsStr.split(',')
        delete data.gatherTagsStr;

        this.appAxios((this.mode =='add') ? 'POST' : 'PUT', url, data).then(result => {
          if (result == null) return;
          this.$emit("close", true);
        })
      })
    },
  }
}
</script>

<style scoped>

</style>
