<template>
  <div>
    <el-dialog
      title="编辑手工标签"
      custom-class="customer-dialog label-dailog"
      :visible.sync="visible"
      :close-on-click-modal="false"
      @close="cancel"
      width="600px"
    >
      <el-tabs v-model="activeName">
        <template v-for="tab in tabsList">
          <el-tab-pane
            :label="tab.label"
            :name="tab.name"
            :key="tab"
            v-if="!(tab.name==='weimo'&&!weimobTagFlag)"
          >
            <ul class="tags-list" v-if="tab.name==='clerk'&&tagsList.length">
              <li v-for="(item,index) in tagsList" :key="index" class="tag-item-new">
                <div class="tag-group-name" v-if="item.subTags && item.subTags.length">
                  {{ item.tagsName }}：
                </div>
                <div class="tag-style">
                  <el-checkbox-group
                    v-model="item.checkBox"
                    v-if="item.tagsName && item.subTags && item.subTags.length"
                  >
                    <el-checkbox
                      v-for="(list, idx) in item.subTags"
                      :key="idx"
                      :label="list.tagsName"
                      @change="changeCheck(item)"
                    />
                  </el-checkbox-group>
                </div>
              </li>
            </ul>
            <ul class="tags-list" v-if="tab.name==='other'&&tagsList.length">
              <li v-for="(item,index) in otherTagsList" :key="index" class="tag-item-new">
                <div class="tag-group-name" v-if="item.subTags && item.subTags.length">
                  {{ item.tagsName }}：
                </div>
                <div class="tag-style">
                  <el-checkbox-group
                    v-model="item.checkBox"
                    v-if="item.tagsName && item.subTags && item.subTags.length"
                  >
                    <el-checkbox
                      v-for="(list, idx) in item.subTags"
                      :key="idx"
                      :label="list.tagsName"
                      @change="changeCheck(item)"
                    />
                  </el-checkbox-group>
                </div>
              </li>
            </ul>
            <ul class="tags-list" v-if="tab.name==='weimo'&&tagsList.length">
              <li v-for="(item,index) in weimobTagsList" :key="index" class="tag-item-new">
                <div class="tag-group-name" v-if="item.subTags && item.subTags.length">
                  {{ item.tagsName }}：
                </div>
                <div class="tag-style">
                  <el-checkbox-group
                    v-model="item.checkBox"
                    v-if="item.tagsName && item.subTags && item.subTags.length"
                  >
                    <el-checkbox
                      v-for="(list, idx) in item.subTags"
                      :key="idx"
                      :label="list.tagsName"
                      @change="changeCheck(item)"
                    />
                  </el-checkbox-group>
                </div>
              </li>
            </ul>
          </el-tab-pane>
        </template>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" :loading="btnLoading" @click="submit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { doFetch } from '../../axios/api';
import url from '../../axios/url';
import { mapState } from 'vuex';
import { checkFalse, checkStatus, checkSuccess } from '../../../../static/js/checkStatus';
export default {
  name: 'CustomergradeDialog',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    memberId: {
      type: String,
      default: '',
    },
  },
  data () {
    return {
      visible: false,
      tabsList: [
        { name: 'clerk', label: '导购标签' },
        { name: 'other', label: '其他标签' },
        { name: 'weimo', label: '微盟标签' },
      ],
      activeName: 'clerk',
      weimobTagFlag: false,
      tagsList: [],
      otherTagsList: [],
      weimobTagsList: [],
      btnLoading: false,
    };
  },
  computed: {
    ...mapState(['showEditClique']),
  },
  watch: {
    dialogVisible (n, o) {
      this.visible = n;
    },
  },
  created () {
    this.getTagList();
  },
  methods: {
    cancel () {
      this.$emit('update:dialogVisible', false);
    },
    getTagList () {
      doFetch(url.clerkTags, {
        memberId: this.memberId,
      })
        .then(res => {
          if (res.data.errorCode === 0) {
            const {
              tagsList = [],
              otherTagsList = [],
              weimobTagsList = [],
              weimobTagFlag = false,
            } = res.data.result;
            this.tagsList = this.formatTagsList(tagsList);
            this.otherTagsList = this.formatTagsList(otherTagsList);
            this.weimobTagsList = this.formatTagsList(weimobTagsList);
            this.weimobTagFlag = weimobTagFlag;
          } else {
            checkFalse(res.data.message);
          }
        })
        .catch(err => {
          checkStatus(err);
        });
    },
    formatTagsList (tempList) {
      const curTagsList = [];
      if (!tempList.length) return curTagsList;
      const paranttag = tempList.filter(item => {
        return item.parentTagsId == null;
      });
      paranttag.forEach(item => {
        const subTags = [];
        const checkBox = [];
        tempList.forEach(list => {
          if (item.tagsId == list.parentTagsId) {
            subTags.push(list);
            if (list.isCheck) {
              checkBox.push(list.tagsName);
            }
          }
        });
        curTagsList.push({ ...item, subTags, checkBox });
      });
      return curTagsList;
    },
    // 切换选中
    changeCheck (item) {
      let count = 0;
      this.$nextTick(_ => {
        // 站位
      });
      for (let i = 0; i < item.checkBox.length; i++) {
        const val = item.checkBox[i];

        for (let j = 0; j < item.subTags.length; j++) {
          if (val == item.subTags[j].tagsName) {
            item.subTags[j].isCheck = 1;
            count++;
          }
        }
      }
      // 是否都选中了
      if (count == item.subTags.length) {
        item.isCheck = 1;
      }
    },
    submit () {
      this.btnLoading = true;
      const tagIds = [];
      const arr = [
        ...this.tagsList,
        ...this.otherTagsList,
        ...this.weimobTagsList,
      ];
      // 循环对比tagsName 是否在勾选框内部
      arr.forEach(ele => {
        ele.subTags.forEach(list => {
          if (ele.checkBox.indexOf(list.tagsName) > -1) {
            tagIds.push(list.tagsId);
          }
        });
      });
      let curtagIds = null;
      if (tagIds.length > 0) {
        curtagIds = tagIds.join(',');
      }
      if (!curtagIds) {
        this.$message.warning('至少选择一个手工标签！');
        return;
      }
      doFetch(url.updateClerkTags, {
        memberId: this.memberId,
        tagIds: curtagIds,
      })
        .then(res => {
          if (res.data.errorCode === 0) {
            checkSuccess();
            this.$emit('update:dialogVisible', false);
            this.$emit('refresh');
          } else {
            checkFalse(res.data.message);
          }
        })
        .then(() => {
          this.dilogTagVisible = false;
        })
        .catch(err => {
          checkStatus(err);
        }).finally(_ => (this.btnLoading = false));
    },
  },
};

</script>
<style lang="less" scoped>
</style>
<style lang="less">
// 去除dailog-footer上边框
.customer-dialog .el-dialog__footer {
  padding-top: 0;
  padding-bottom: 20px;
  border-top: none !important;
}
.customer-dialog .el-dialog__body {
  padding-bottom: 0;
}
.label-dailog {
  .el-tabs__header {
    margin-bottom: 29px;
  }
  .el-dialog__body {
    padding-top: 0;
  }
  .el-tabs__content {
    height: 247px;
    padding-left: 20px;
    overflow-y: scroll;
    .tag-item-new {
      .tag-group-name {
        margin-bottom: 10px;
        font-size: 14px;
        color: #909399;
        line-height: 20px;
      }
      .tag-style {
        .el-checkbox-group {
          display: flex;
          flex-wrap: wrap;
          .el-checkbox {
            line-height: 20px;
            margin-bottom: 20px;
          }
          .el-checkbox + .el-checkbox {
            margin-left: 0;
          }
        }
      }
    }
  }
}
</style>
