<script>
import { getList } from '@/api/customer/tag'

export default {
  name: 'SelectTag',
  components: {},
  props: {
    // 添加标签显隐
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '选择标签',
    },
    selected: {
      type: Array,
      default: () => [],
    },
    type: {
      type: String,
      default: 'add',
    },
  },
  data() {
    return {
      list: [],
      listOneArray: [],
      selectedGroup: '', // 选择的标签分组
      removeTag: [],
      Pselected: [],
    }
  },
  watch: {
    // type(val) {
    //   val === 'remove' && (this.removeTag = this.selected.slice())
    // },
    selected(val) {
      if (this.type === 'add') {
        this.Pselected = []
        val.forEach((element) => {
          let find = this.listOneArray.find((d) => {
            return element.tagId === d.tagId
          })
          this.Pselected.push(find)
        })
      } else if (this.type === 'remove') {
        this.removeTag = val.slice()
        this.Pselected = val.slice()
      }
      // this.list = JSON.parse(JSON.stringify(this.list))
    },
    list (val) {
      if (this.type === 'add') {
        this.Pselected = []
        this.selected.forEach((element) => {
          let find = this.listOneArray.find((d) => {
            return element.tagId === d.tagId
          })
          this.Pselected.push(find)
        })
      } else if (this.type === 'remove') {
        this.removeTag = this.selected.slice()
        this.Pselected = this.selected.slice()
      }
    }
  },
  computed: {
    Pvisible: {
      get() {
        // this.getTree();
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      },
    },
  },
  created() {
    this.getList()
  },
  mounted() {},
  methods: {
    getList() {
      getList().then(({ rows }) => {
        // this.list = Object.freeze(rows)
        this.list = rows
        this.listOneArray = []
        this.list.forEach((element) => {
          element.weTags.forEach((d) => {
            this.listOneArray.push(d)
          })
        })
      })
    },
    submit() {
      if (!this.Pselected.length) {
        this.msgError('请至少选择一个标签')
        return
      }
      this.Pvisible = false
      this.$emit('success', this.Pselected)
    },
    isChecked(unit) {
      // debugger
      return this.Pselected.some((el) => {
        return unit.tagId === el.tagId
      })
    },
    toJson(data) {
      return JSON.stringify(data)
    },
  },
}
</script>

<template>
  <el-dialog :title="title" :visible.sync="Pvisible">
    <div>
      <span class="mr20">选择分组</span>
      <el-select v-model="selectedGroup" placeholder="请选择">
        <el-option label="所有标签" value></el-option>
        <el-option
          v-for="(item, index) in list"
          :key="index"
          :label="item.gourpName"
          :value="item.groupId"
        ></el-option>
      </el-select>
      <div class="mt20" v-if="Pvisible">
        <el-checkbox-group v-if="type !== 'remove'" v-model="Pselected">
          <template v-for="(item, index) in list">
            <div
              class="bfc-d mr30"
              v-if="item.groupId === selectedGroup || !selectedGroup"
              :key="index"
            >
              <template v-for="(unit, unique) in item.weTags">
                <el-checkbox
                  v-if="unit.name.trim()"
                  :label="unit"
                  :key="index + '' + unique"
                  >{{ unit.name }}</el-checkbox
                >
              </template>
            </div>
          </template>
        </el-checkbox-group>
        <el-checkbox-group v-else v-model="Pselected">
          <template v-for="(item, index) in removeTag">
            <el-checkbox
              v-if="item.groupId === selectedGroup || !selectedGroup"
              :label="item"
              :key="index"
              >{{ item.name.trim() || '(空的无效标签，请移除)' }}</el-checkbox
            >
          </template>
        </el-checkbox-group>
      </div>
      <slot></slot>
    </div>
    <div slot="footer">
      <el-button @click="Pvisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.user-list {
  .el-row {
    line-height: 26px;
  }
}
.mr30 {
  margin-right: 30px;
}
</style>
