<template>
  <el-dialog :visible.sync="visible" custom-class="delete-dialog" width="416px" @close="onClose">
    <div class="dialog-content">
      <i class="el-alert__icon el-icon-warning is-big icon" />
      <h2>{{ title }}</h2>
      <div v-loading="loading">
        <p class="desc">{{ desc }}</p>
        <p v-for="(item, index) in list" :key="index" class="item">
          <a :href="item.businessLink" target="_blank" @click="isOpenPage = true">{{ item.businessModuleName }}-{{ item.businessName }}</a>
        </p>
        <footer class="footer" v-if="!(type == 'delete' && list.length)">
          <el-button class="ml10" @click="$emit('update:visible',false)">取消</el-button>
          <el-button type="primary" @click="onSubmit">{{ type == 'deactive' ? '失效' : '删除' }}</el-button>
        </footer>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import errMsg from '@/common/js/error';
import {
  getGroupUseList
} from '@/request/api';;
export default {
  props: {
    visible: Boolean,
    data: {
      type: Object,
      default: () => ({})
    },
    type: String,
    title: String
  },
  data() {
    return {
      list: [],
      isOpenPage: false,
      loading: true
    };
  },
  computed: {
    desc() {
      if (this.type == "deactive") {
        return this.list.length ? '当前分组正在被以下模块使用，失效后使用该分组的活动将匹配不到分组下的人群并且分组客户数据将同步清空，是否继续处理为失效？' : '失效后非实时分组客户数据将同步清空，是否继续处理为失效？';
      } else {
        return this.list.length ? '当前分组正在被以下模块使用，请先删除对应的内容后再来删除分组。' : '删除后无法恢复，确认要删除该分组吗？';
      }
    }
  },
  methods: {
    checkGroup() {
      this.loading = true;
      const params = {
        memberTagGroupIds: this.data.memberTagGroupId,
        requestProject: 'gic-member-tag-web',
        operateType: this.type == 'deactive' ? 1 : 2
      };
      getGroupUseList(params).then(res => {
        const { errorCode, result } = res;
        if (errorCode === 1) {
          this.list = result || [];
          return;
        }
        errMsg.errorMsg(res.data);
      }).finally(() => this.loading = false);
    },
    onClose() {
      this.$emit('update:visible', false);
      this.$emit('close');
    },
    onSubmit() {
      this.$emit('update:visible', false);
      this.$emit('submit', this.data, this.type);
    },
    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;
}
/deep/ .el-dialog__body {
  padding-bottom: 20px;
}
.delete-dialog {
  position: relative;
  .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>
