<template>
  <el-dialog title="" width="416px" top="30vh" custom-class="cre-dialog" :visible.sync="batchDialog" center :modal-append-to-body="false" :before-close="closeBatch">
    <p class="tips" slot="title">{{ operNum == 0 ? '批量失效' : operNum == 1 ? '批量删除' : '修改所属分类' }}</p>

    <div v-if="[0,1].includes(operNum)" class="el-message-box__status el-alert__icon el-icon-warning is-big icon"></div>
    <div v-loading="loading">
      <div class="batch-content">
        <div v-if="operNum == 0">
          <p class="batch-txt">{{ list.length ? '存在分组正在被以下模块使用，失效后使用该分组的活动将匹配不到分组下的人群并且分组客户数据将同步清空，是否继续处理为失效？' : '失效后非实时分组客户数据将同步清空，是否继续处理为失效？'}}</p>
        </div>
        <div v-if="operNum == 1">
          <p class="batch-txt">{{ list.length ? '存在分组正在被以下模块使用，请先删除对应的内容后再来删除分组。' : '删除后无法恢复，确认要删除该分组吗？' }}</p>
        </div>
        <div v-if="operNum == 2">
          选择分类：<el-select v-model="groupId" placeholder="清选择分类" v-loadmore="loadMoreGroupList" filterable remote :remote-method="searchGroupList" style="width: 305px">
            <el-option v-for="el in groupList" :key="el.memberTagGroupClassifyId" :value="el.memberTagGroupClassifyId" :label="el.classifyName"></el-option>
          </el-select>
        </div>
        <!-- <div v-if="operNum == 2">
          <p class="title">
            所有分类
          </p>

          <ul class="batch-ul">
            <li v-for="(item, i) in groupList" :key="item.memberTagGroupClassifyId" class="batch-li" :class="{'active-li': i == listIndex}" @click="chooseGroup(item, i)">
              {{ item.classifyName }}
            </li>
          </ul>
          <p class="group-name">选中的分类：{{ groupName }}</p>
        </div> -->
        <template  v-if="operNum == 0 || operNum == 1">
          <p v-for="(item, index) in list" :key="index" class="item">
            {{ item.groupName }}：<a :href="item.businessLink" target="_blank" @click="isOpenPage = true">{{ item.businessModuleName }}-{{ item.businessName }}</a>
          </p>
        </template>
      </div>

      <div class="cre-btn" v-if="!(operNum == 1 && list.length)">
        <el-button @click="closeBatch">取 消</el-button>
        <el-button type="primary" @click="confirmBatch">{{ !operNum ? '失 效' : operNum == 1 ? '删 除' : '确 定'}}</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { memberGroupList, getGroupUseList, batchModifyEffective, batchDeleteGroup, batchChangeGroup } from '@/request/api';
import errMsg from '@/common/js/error';
export default {
  name: 'batch-list',

  props: {
    batchVisiable: Boolean,
    operateNumber: Number,
    multipleSelection: Array
  },

  data() {
    return {
      batchDialog: false,
      operNum: -1,
      groupList: [],
      groupName: '',
      groupId: '',
      listIndex: -1,
      list: [],
      params: {
        classifyName: '',
        pageNum: 1,
        totalPage: 1
      },
      loading: false
    };
  },
  directives: {
    loadmore: {
      inserted(el, binding) {
        const SELECTDOWN_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
        SELECTDOWN_DOM.addEventListener('scroll', function() {
          const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;
          if (CONDITION) {
            binding.value();
          }
        })
      }
    }
  },

  methods: {
    confirmBatch() {
      let batchNum = this.operateNumber;
      let tagIds = this.selectionList.map(el => el.memberTagGroupId);
      const param = {
        requestProject: 'gic-member-tag-web',
        memberTagGroupIds: tagIds.join(',')
      };
      // 1 批量失效 2批量删除 3批量转移会员组
      if (batchNum == 0) {
        param.effectiveStatus = 0;
        batchModifyEffective(param)
          .then(res => {
            if (res.errorCode == 0) {
              this.$message.success({
                message: '修改成功'
              });
            }
            this.$emit('submit');
          })
          .catch(err => {
            console.log(err);
          });
      } else if (batchNum == 1) {
        batchDeleteGroup(param).then(res => {
          if (res.errorCode == 0) {
            (res.result || []).length || this.$message.success({
              message: '删除成功'
            });
            this.$emit('after-del', res.result)
            this.$emit('submit', res.result);
          }
        });
      } else if (batchNum == 2) {
        if (!this.groupId) {
          this.$message.warning({
            message: '请先选择的会员分组的分类'
          });
          return;
        }
        param.memberTagGroupClassifyId = this.groupId;
        batchChangeGroup(param)
          .then(res => {
            if (res.errorCode == 0) {
              this.$message.success({
                message: '修改分类成功'
              });
            }
            this.$emit('submit');
          })
          .catch(err => {
            console.log(err);
          });
      }
      this.closeBatch();
      // 触发更新
      this.$emit('refresh-list');
    },
    // 选择分组
    chooseGroup(list, i) {
      this.listIndex = i;
      this.groupName = list.classifyName;
    },
    // 关
    closeBatch() {
      this.batchDialog = false;
      this.groupId = '';
      this.$emit('update:batchVisiable', false);
    },
    searchGroupList(classifyName) {
      this.params.classifyName = classifyName;
      this.params.pageNum = 0;
      this.loadMoreGroupList();
    },
    loadMoreGroupList() {
      if (this.params.pageNum + 1 > this.params.totalPage) {
        return
      }
      this.params.pageNum = this.params.pageNum + 1;
      this.getMemberGroupList();
    },
    getMemberGroupList() {
      const { classifyName, pageNum } = this.params;
      this.loading = true;
      if (pageNum == 1) {
        this.groupList = [];
      }
      memberGroupList({
        classifyName,
        pageNum,
        pageSize: 20,
        type: 0,
        requestProject: 'gic-member-tag-web',
      }).then(res => {
        const { errorCode, result } = res;
        if (errorCode != 0) return;
        if (Array.isArray(result.result)) {
          this.groupList = this.groupList.concat(result.result.filter(el => el.classifyName != '未分类' && el.classifyName != null));
        }
        this.params.totalPage = result.totalPage;
      }).finally(() => this.loading = false);
    },
    checkGroup() {
      this.loading = true;
      let tagIds = this.multipleSelection;
      const params = {
        memberTagGroupIds: tagIds.map(el => el.memberTagGroupId).toString(),
        requestProject: 'gic-member-tag-web',
        operateType: this.operateNumber == 0 ? 1 : this.operateNumber == 1 ? 2 : null
      };
      getGroupUseList(params).then(res => {
        const { errorCode, result } = res;
        if (errorCode == 0) {
          this.list = result || [];
          return;
        }
        errMsg.errorMsg(res.data);
      }).catch(err => {
        console.log(err);
      }).finally(() => this.loading = false);
    },
  },

  created() {
    this.selectionList = [];
  },

  watch: {
    batchVisiable(newval) {
      newval && [1,0].includes(this.operateNumber) && this.checkGroup();
      this.batchDialog = newval;
      this.getMemberGroupList();
    },
    operateNumber(newval) {
      this.operNum = newval;
    },
    multipleSelection: {
      immediate: true,
      handler(newval) {
        this.selectionList = newval;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.batch-txt {
  padding-left: 35px;
  padding-top: 7px;
  color: #303133;
  line-height: 20px;
}
.batch-title {
  color: #333;
  font-size: 18px;
}
.title {
  font-size: 14px;
  font-weight: bold;
}
.item {
  padding-left: 34px;
  margin-top: 16px;
}
a {
  color: #2f54eb;
}
.batch-ul {
  overflow-y: auto;
  max-height: 200px;
  margin-top: 10px;
  .batch-li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 2px 10px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    &:hover {
      background-color: #f6f8fd;
    }
  }
  .active-li {
    background-color: #f6f8fd;
    color: #2F54EB;
  }
}
.group-name {
  margin-top: 20px;
  font-size: 14px;
  color: #2F54EB;
}
.item:not(:last-of-type) {
  margin-bottom: 10px;
}
a {
  color: #2f54eb;
}
.icon {
  font-size: 18px;
  position: absolute;
  color: #fa8c16;
  left: 21px;
  top: 74px;
}
</style>
