<template>
  <el-dialog title="批量操作分组数据" width="340px" top="30vh" :visible.sync="batchDialog" center :modal-append-to-body="false" :before-close="closeBatch">
    <div class="batch-content">
      <div v-if="operNum == 0">
        <div class="el-message-box__status el-icon-warning"></div>
        <p class="batch-txt">是否确定批量修改分组为失效！</p>
      </div>
      <div v-if="operNum == 1">
        <div class="el-message-box__status el-icon-warning"></div>
        <p class="batch-txt">是否确定批量删除分组！</p>
      </div>
      <div v-if="operNum == 2">
        我的会员分组
        <ul class="batch-ul">
          <li v-for="item in groupList" :key="item.memberTagGroupClassifyId" class="batch-li" @click="chooseGroup(item)">
            {{ item.classifyName }}
          </li>
        </ul>
        <p class="group-name">选中的分组：{{ groupName }}</p>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeBatch">取 消</el-button>
      <el-button type="primary" @click="confirmBatch">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { memberGroupList, batchModifyEffective, batchDeleteGroup, batchChangeGroup } from '@/request/api';

export default {
  name: 'batch-list',

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

  data() {
    return {
      batchDialog: false,
      operNum: -1,
      groupList: [],
      groupName: ''
    };
  },

  methods: {
    confirmBatch() {
      console.log(this.operateNumber);
      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 == 1) {
              console.log(res);
              this.$message.success({
                message: '修改成功'
              });
            }
          })
          .catch(err => {
            console.log(err);
          });
      } else if (batchNum == 1) {
        batchDeleteGroup(param).then(res => {
          if (res.errorCode == 1) {
            this.$message.success({
              message: '删除成功'
            });
          }
        });
      } else if (batchNum == 2) {
        if (!this.groupName) {
          this.$message.warning({
            message: '请先选择的会员分组的分类'
          });
          return;
        }
        let index = this.groupList.findIndex(el => el.classifyName === this.groupName);
        param.memberTagGroupClassifyId = this.groupList[index].memberTagGroupClassifyId;
        batchChangeGroup(param)
          .then(res => {
            if (res.errorCode == 1) {
              this.$message.success({
                message: '修改分类成功'
              });
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
      this.closeBatch();
      // 触发更新
      this.$emit('refresh-list');
    },
    // 选择分组
    chooseGroup(list) {
      this.groupName = list.classifyName;
    },
    // 关
    closeBatch() {
      this.batchDialog = false;
      this.$emit('update:batchVisiable', false);
    },
    getMemberGroupList() {
      memberGroupList({
        requestProject: 'gic-member-tag-web'
      })
        .then(res => {
          if (res.errorCode === 1) {
            this.groupList = res.result.map(el => ({
              ...el,
              edit: false
            }));
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },

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

  watch: {
    batchVisiable(newval) {
      this.batchDialog = newval;
    },
    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;
}
.batch-ul {
  margin-top: 10px;
  .batch-li {
    padding: 5px 10px;
    cursor: pointer;
    &:hover {
      background-color: #f3f6f9;
    }
  }
}
.group-name {
  margin-top: 20px;
  font-size: 16px;
  font-weight: bold;
}
</style>
