<template>
  <el-dialog :visible.sync="visible" custom-class="delete-dialog" width="416px" :show-close="false">
    <div class="delete-dialog-content">
      <i class="el-alert__icon el-icon-warning is-big icon" />
      <h2>确认删除该标签吗？</h2>
      <p class="desc">{{ desc }}</p>
      <p v-for="item in list" :key="item.memberTagGroupId" class="item">
        <a :href="`/member-tag/#/memberGroupEdit?memberTagGroupId=${item.memberTagGroupId}`" target="_blank" @click="isOpenPage = true">{{ item.groupName }}</a>
      </p>
      <footer class="footer">
        <el-button class="ml10" @click="onClose">取消</el-button>
        <el-button type="primary" @click="onSubmit">删除</el-button>
      </footer>
    </div>
  </el-dialog>
</template>

<script>
import errMsg from '@/common/js/error';
import { getRequest } from '@/api/api';
export default {
  props: {
    visible: Boolean,
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      list: [],
      isOpenPage: false
    };
  },
  computed: {
    desc() {
      return this.list.length ? '该标签下的标签值正在被分组使用，删除后会员分组将查询不到对应的会员。' : '标签删除后，若有正在使用该标签的会员分组则会员分组覆盖人群将查询不到该标签下的人群。';
    }
  },
  methods: {
    checkGroup() {
      const { tagId, tagItemId } = this.data;
      const params = {
        tagId,
        tagItemId
      };
      getRequest('/member-tag-value/check-member-group-ref', params).then(res => {
        const { errorCode } = res.data;
        if (errorCode === 1) {
          this.list = res.data.result || [];
          return;
        }
        errMsg.errorMsg(res.data);
      });
    },
    onClose() {
      this.$emit('update:visible', false);
      this.$emit('close');
    },
    onSubmit() {
      this.onClose();
      this.$emit('submit', this.data);
    },
    subWindowChange() {
      addEventListener('visibilitychange', this.visibleityWindowFn)
    },
    visibleityWindowFn() {
      if (!document.hidden && this.isOpenPage) this.checkGroup();
    }
  },
  watch: {
    visible(newVal) {
      newVal && this.checkGroup();
      this.subWindowChange();
      if (!newVal) {
        removeEventListener('visibilitychange', this.visibleityWindowFn);
        this.isOpenPage = false;
      };
    }
  }
};
</script>

<style scoped lang="scss">
/deep/ .el-dialog__header {
  padding: 0;
}
.delete-dialog {
  position: relative;
  .delete-dialog-content {
    padding: 5px 10px 4px 50px;
    h2 {
      color: #303133;
      font-weight: bold;
      font-size: 16px;
      margin-bottom: 9px;
    }
    .desc {
      font-size: 14px;
      font-weight: 400;
      color: #303133;
      line-height: 20px;
      margin-bottom: 16px;
    }
    .item:not(:last-of-type) {
      margin-bottom: 10px;
    }
    a {
      color: #2f54eb;
    }
    .footer {
      margin-top: 24px;
      text-align: right;
    }
  }
}
.ml10 {
  margin-left: 10px;
}
.icon {
  font-size: 21px;
  position: absolute;
  color: #fa8c16;
  left: 30px;
  top: 22px;
}
</style>
