<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" :class="['tag-flag', tagDataAssgin.isActive ? 'real-time' : 'unreal-time']">{{ 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">
         <span class="inline-block"><dm-sub-title text="标签值设置"/></span>
        <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-QuestionCircleOutlined"></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 ref="animationStart" type="primary" @click="handleSave" style="margin-bottom: 14px">确 定</el-button>
      </span>
    </el-dialog>
    <i id="aniIcon" class="iconfont icon-biaoqian aniIcon" :style="{ right: `${animationPos.x}px`, bottom: `${animationPos.y}px` }"></i>
  </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,
      animationPos: {},
    };
  },
  watch: {
    tagData: {
      immediate: true,
      handler(newval) {
        this.isAddFlag = false;
        setTimeout(_ => {
          this.isAddFlag = true;
          this.tagId = newval.tagId;
          this.tagDataAssgin = newval;
          this.templateObj = newval;
        }, 20);
      }
    },
    showEditTagPop(newVal) {
      if (!newVal) {
        try {
          const getStore = this.$refs.tagConfig.$refs.storeNew;
          if (Array.isArray(getStore) && getStore[0].$children[1]) getStore[0].$children[1].popoverShow = false;
        } catch(e) {
          console.error(e);
        }
      }
    }
  },
  // mixins: [tagDetails],
  methods: {
    handleClose() {
      this.$emit('update:showEditTagPop', false);
    },
    handleSave($event) {
      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.startAnimation($event);
          this.$emit('update:showEditTagPop', false);
          this.$emit('refersh', this.tagDataAssgin);
        }
      }).catch(err => {
        this.$message.error({
          duration: 1000,
          message: err.message
        });
      })
    },
    returnTagData(list) {
      this.$emit('returnTagData', list);
    },
    startAnimation(e) {
      this.animationPos = {
        x: document.body.offsetWidth - e.pageX,
        y: document.body.offsetHeight - e.pageY
      }
      console.log(document.body.offsetWidth, e.pageX);
      document.querySelector('#aniIcon').style.display = 'block'
      setTimeout(_ => {
        document.querySelector('#aniIcon').style.display = 'none'
      }, 1800)
    },
  }
};
</script>

<style lang="less" scoped>
.dialog-box {
  .tag-info {
    background: #f7f8fa;
    padding: 16px;
    .tag-name {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      font-weight: 500;
      font-size: 16px;
      color: #303133;
      .tag-flag {
        margin-left: 6px;
        width: 44px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        font-size: 12px;
        border-top-right-radius: 5px;
        border-bottom-left-radius: 5px;
        color: #fff;
        &.real-time {
          background-color: #2F54EB;
        }
        &.unreal-time {
          background: #FA8C16;
        }
      }
    }
    .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;
  }
}
.aniIcon {
  display: none;
  position: absolute;
  z-index: 99999;
  color: #2F54EB;
  font-size: 26px;
  animation: toTrash 3s;
  opacity: 0;
}
@keyframes toTrash {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    right: 35px;
    bottom: 280px;
    transform: scale(0.5);
  }
  50% {
    opacity: 0.5;
    right: 35px;
    bottom: 280px;
    transform: scale(1.2);
  }
  100% {
    opacity: 0.5;
    right: 35px;
    bottom: 280px;
    transform: scale(0);
  }
}
</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>
