<template>
  <div>
    <!-- 添加标签、编辑标签 -->
    <el-dialog :title="title" :visible.sync="showEditTagPop" width="540" :before-close="handleClose" :close-on-click-modal="false" append-to-body>
      <div class="dialog-box">
        <p class="tag-name">{{ tagDataAssgin.tagName }}</p>
        <p class="tag-desc">{{ tagDataAssgin.tagDescribe }}</p>
        <p v-if="tagId" class="m-t-20 m-b-20">标签值设置</p>
        <!-- 所有标签的配置项 -->
        <tag-config-options v-if="isAddFlag" :tagId="tagDataAssgin.tagId" ref="tagConfig" :templateDataList="templateObj" @returnTagData="returnTagData"></tag-config-options>
      </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 TagConfigOptions from '@/components/tag/tag-config-options';
// import tagDetails from '@/components/tagDetail/mixin/index';

export default {
  name: 'edit-tag',
  components: {
    TagConfigOptions
  },
  props: {
    // 是否现在编辑标签的弹窗
    showEditTagPop: Boolean,
    // 编辑标签的弹窗标题
    title: String,
    // 标签数据
    tagData: Object
  },

  // watch: {
  //   tagData: {
  //     immediate: true,
  //     handler(newval) {
  //       this.tagId = '';
  //       this.$nextTick(_ => {
  //         this.tagId = newval.tagId;
  //       });
  //     }
  //   }
  // },

  data() {
    return {
      tagId: '',
      postTemplateData: {
        selectedVal: [],
        template: []
      },
      templateData: [],
      tagDataAssgin: {},
      templateObj: {},
      isAddFlag: false
    };
  },
  watch: {
    tagData: {
      immediate: true,
      handler(newval) {
        this.isAddFlag = false;
        setTimeout(_ => {
          this.isAddFlag = true;
          this.tagId = newval.tagId;
          this.tagDataAssgin = newval;
          this.templateObj = newval;
        }, 20);
      }
    }
  },
  // mixins: [tagDetails],
  methods: {
    handleClose() {
      this.$emit('update:showEditTagPop', false);
    },
    handleSave() {
      const ret = this.$refs.tagConfig.getTemplateData();

      this.templateData = JSON.parse(JSON.stringify(ret));
      this.tagId = this.tagDataAssgin.tagId;
      this.$refs.tagConfig.saveConfirm().then(_ => {
        this.$emit('update:showEditTagPop', false);
        this.$emit('refersh', this.tagDataAssgin);
      });
    },
    returnTagData(list) {
      this.$emit('returnTagData', list);
    }
  }
};
</script>

<style lang="less" scoped>
.dialog-box {
  .tag-name {
    display: inline-block;
    vertical-align: middle;
  }
  .icon-tag-name {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
  }
  .tag-desc {
    font-size: 14px;
    line-height: 26px;
    color: #606266;
    border-bottom: 1px solid #dcdfe6;
  }
  .tag-name {
    font-size: 14px;
    font-weight: bold;
  }
  .tag-value {
    margin-top: 10px;
    padding-top: 10px;
    margin-bottom: 10px;
    border-top: 1px solid #ebeef5;
  }
}
</style>
