<template>
  <div>
    <!-- 添加标签、编辑标签 -->
    <el-dialog :title="title" :visible.sync="showEditTagPop" width="540" :before-close="handleClose">
      <div class="dialog-box">
        <p class="tag-name">{{ tagData.tagName }}</p>
        <p class="tag-desc">根据会员信息扩展字段统计而来</p>
        <p class="tag-desc">标签值设置</p>
        <!-- 所有标签的配置项 -->
        <tag-config-options v-if="tagData.tagId" :tagId="tagData.tagId" ref="tagConfig"></tag-config-options>
        <div class="tag-mode">
          <p>营销方式</p>
          <tag-mode></tag-mode>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import TagMode from '@/components/tag/tag-mode';
import TagConfigOptions from '@/components/tag/tag-config-options';
import tagDetails from '@/components/tagDetail/mixin/index';

export default {
  name: 'edit-tag',
  components: {
    TagMode,
    TagConfigOptions
  },
  props: {
    // 是否现在编辑标签的弹窗
    showEditTagPop: Boolean,
    // 编辑标签的弹窗标题
    title: String,
    // 标签数据
    tagData: Object
  },
  data() {
    return {
      tagId: '',
      postTemplateData: {
        selectedVal: [],
        template: []
      },
      templateData: []
    };
  },
  mixins: [tagDetails],
  methods: {
    handleClose() {
      this.$emit('update:showEditTagPop', false);
    },
    async handleSave() {
      const ret = this.$refs.tagConfig.getTemplateData();
      this.templateData = JSON.parse(JSON.stringify(ret));
      this.tagId = this.tagData.tagId;
      this.confirmPost().then(() => {
        this.$emit('update:showEditTagPop', false);
      });
    }
  }
};
</script>

<style scoped></style>
