<template>
  <div>
    <!-- 添加标签、编辑标签 -->
    <el-dialog :title="title" :visible.sync="showEditTagPop" top="10vh" width="900px" :before-close="handleClose" custom-class="edit-tag" :close-on-click-modal="false" append-to-body>
      <div class="dialog-box">
        <div class="tag-info">
          <p class="tag-name">
            {{ tagDataAssgin.tagName }}
            <span class="tag-flag">{{ tagDataAssgin.isActive == 1 ? '实时' : '非实时' }}</span>
          </p>
          <p class="tag-desc">{{ tagDataAssgin.tagDescribe }}</p>
        </div>
        <p v-if="tagId" class="m-t-20 m-b-20 tag-config">标签值设置<el-tooltip v-if="tagDataAssgin.columnKey==='haobanWechatRelatedTime'||(Object.keys(tagDataAssgin).length&&tagDataAssgin.tagValue&&JSON.parse(tagDataAssgin.tagValue).val[0].data.key==='haobanWechatRelatedTime')" popper-class="edit-tag-tooltip" placement="top" open-delay="100" effect="light"
        ><div slot="content"><span style="font-weight:600">固定时段：</span>在所选时间段内首次添加导购企微好友的；<br/><span style="font-weight:600">相对时段：</span>相对于“标签统计时间”（每天凌晨计算统计一次）的前X天/月/年内首次添加导购企微好友的，例：选择相对时段为“最近2天”，那么系统在5号凌晨进行统计时，统计的是在3号、4号首次添加导购企微好友的顾客；系统在6号凌晨统计时，统计的是4号、5号首次添加导购企微好友的顾客。</div><i class="iconfont icon-tishi"></i></el-tooltip></p>
        <!-- 所有标签的配置项 -->
        <div class="tag-config-options">
          <tag-config-options v-if="isAddFlag" :creatorId="creatorId" :tagId="tagDataAssgin.tagId" :columnKey="tagDataAssgin.columnKey" ref="tagConfig" :templateDataList="templateObj" @returnTagData="returnTagData"></tag-config-options>
        </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 './edit-tag.css';
import TagConfigOptions from '@/components/tag/tag-config-options';
// import tagDetails from '@/components/tagDetail/mixin/index';

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

  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(res => {
        if (res) {
          this.$emit('update:showEditTagPop', false);
          this.$emit('refersh', this.tagDataAssgin);
        }
      });
    },
    returnTagData(list) {
      this.$emit('returnTagData', list);
    }
  }
};
</script>

<style lang="less" scoped>
.dialog-box {
  .tag-info {
    padding-bottom: 10px;
    border-bottom: 1px solid #dcdfe6;
    .tag-name {
      display: flex;
      align-items: center;
      margin-bottom: 5px;
      font-weight: 600;
      color: #303133;
      .tag-flag {
        margin-left: 6px;
        padding: 3px 10px;
        font-size: 12px;
        border-top-right-radius: 5px;
        border-bottom-left-radius: 5px;
        background-color: #1890ff;
        color: #fff;
      }
    }
    .icon-tag-name {
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;
    }
    .tag-desc {
      margin-top: 5px;
      font-size: 14px;
      color: #606266;
    }
  }
  .tag-config {
    font-size: 14px;
    color: #606266;
    .iconfont.icon-tishi{
      margin-left: 5px;
      color: #909399;
    }
  }
  .tag-config-options {
    max-height: 50vh;
    overflow-y: auto;
  }
  .tag-value {
    margin-top: 10px;
    padding-top: 10px;
    margin-bottom: 10px;
    border-top: 1px solid #ebeef5;
  }
}
</style>
<style>
/* tooltip */
.edit-tag-tooltip.el-tooltip__popper.is-light{
  max-width: 400px;
  padding: 16px;
  font-size: 14px;
  font-weight: 400;
  color: #303133;
  line-height: 20px;
  border: none;
  border-radius: 2px;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
}
.edit-tag-tooltip.el-tooltip__popper.is-light .popper__arrow{
  border: none;
}
</style>
