<template>
  <div class="setting-tag">
    <el-dialog
      :visible.sync="visibleDialog"
      :title="dialogTitle"
      :close-on-click-modal="false"
      :lock-scroll="false"
      :before-close="closeDialog"
    >
      <span class="title">选择接受的消息类型：</span>
      <el-checkbox-group v-model="selectList" class="self-check-group">
        <template v-for="item in tabs">
          <el-checkbox :key="item.compName" :label="item.label" :value="item.compName" :checked="item.show" />
        </template>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sure">
          确 定
        </el-button>
        <el-button @click="closeDialog">
          取 消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'SettingTag',
  props: {
    visibleDialog: {
      type: Boolean,
      default: false
    },
    tabsList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      dialogTitle: '消息设置',
      tabs: [],
      selectList: []
    }
  },
  mounted() {
    this.filterTabsList()
  },
  methods: {
    // 关闭弹窗
    closeDialog() {
      this.$emit('update:visibleDialog', false)
    },
    // 过滤数据
    filterTabsList() {
      const vm = this
      this.tabsList.forEach(item => {
        if (item.compName !== 'allMessage') {
          vm.tabs.push({
            label: item.name,
            show: item.show,
            compName: item.compName
          })
        }
      })
    },
    // 确定改变
    sure() {
      this.$emit('changeTabsShow', this.selectList)
      this.closeDialog()
    }
  }
}
</script>

<style scoped lang="less">
.setting-tag {
  .title {
    padding-left: 20px;
  }
  .self-check-group {
    margin: 20px 0;
    padding-left: 20px;
  }
}
</style>
