<!--
 * @Description: 添加人工标签组件
 * @Author: liusheng
 * @Date: 2024-06-05 16:30:56
-->
<template>
  <el-popover v-model="showAddTagPopup" placement="bottom-start" width="300"
    trigger="click" @show="handleShowManualTagPopup">
    <el-form ref="manualTagForm" :model="manualTagForm" :rules="manualTagRules">
      <el-form-item label="标签名：" prop="manualTag" label-width="80px">
        <el-select style="width:220px;" v-model="manualTagForm.manualTag" filterable
          default-first-option size="small" clearable placeholder="请选择或输入标签">
          <el-option v-for="(tagSubject, index) in manualTaglist" :key="index" 
            :label="tagSubject.tagName + ' (' + tagSubject.subjectKey + ')'" :value="tagSubject" />
        </el-select>
      </el-form-item>
    </el-form>
    <div style="text-align:right; margin:0">
      <el-button type="text" size="mini" @click="handleCancelManualTag">取消</el-button>
      <el-button type="primary" size="mini" @click="handleConfirmManualTag">确定</el-button>
    </div>
    <i v-if="iconBtn" class="el-icon-plus" style="color:#397AFA" slot="reference"></i>
    <el-button v-else slot="reference" type="primary" icon="el-icon-plus" size="small">新增</el-button>
  </el-popover>
</template>

<script>
export default {
  name: 'AddManualTagPopup',
  props: {
    aupUserId: {
      type: Number
    }, 
    manualTaglist: {
      type: Array,
      default: []
    },
    iconBtn: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      showAddTagPopup: false,
      manualTagForm: {
        manualTag: {}
      },
			manualTagRules: {
				manualTag: [
          { required: true, message: '请选择标签', trigger: 'blur' },
				]
			}
    }
  },

  methods: {
    markManualTag() {
      let param = {
        aupUserId: this.aupUserId, 
        tagName: this.manualTagForm.manualTag.tagName,
        subjectKey: this.manualTagForm.manualTag.subjectKey
      };

      let requestData = {
        method: 'POST',
        url: this.commonUrl.URL_MARK_MANUAL_TAG,
        param: param,
        contentType: this.commonConst.CNTYPE_URLENCODED
      };
      this.vueRequest(requestData).then(result => {
        if (result == null) return;
        this.$emit("close", true);
      })
    },

		handleShowManualTagPopup() {
      this.manualTagForm.manualTag = '';
    },

    handleConfirmManualTag() {
      this.$refs['manualTagForm'].validate((valid) => {
        if (!valid) return false;
        this.showAddTagPopup = false;
        this.markManualTag();
      });
    },
    
    handleCancelManualTag() {
      this.showAddTagPopup = false;
      this.$emit("close", false, true);
    },
  }
}
</script>

<style scoped>

</style>
