<style scoped>
  .q-pt-none .unchecked {
    margin-right: 10px;
    margin-top: 5px;
    cursor: pointer;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 400;
    height: 28px;
    line-height: 28px;
    border-radius: 4px;
    background: #f6f6f6;
  }

  .q-pt-none .select {
    color: #3c66ee;
    background-color: #edf2fd;
  }
</style>
<template>
  <div class="labelgroup">
    <q-dialog v-model="alert">
      <q-card>
        <q-card-section>
          <div class="text-h6">标签</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
          <div class="main_LabelContent" style='max-height: 378px;overflow-y: auto;border-bottom: 1px solid #d7d7d7;'>
            <div v-for="(x,y) in LableList" :key="y" style='padding-bottom: 15px;'>
              <div style="color: #606266;font-size: 14px;font-weight: 700;">{{x.Name}}</div>
              <div style="display: flex;flex-wrap: wrap;">
                <div v-for='(item,index) in x.ChildList' :key='index' class="unchecked"
                  :class="{ 'select': item.chek == true }" @click='changechek(y,index)'>{{item.Name}}</div>
              </div>
            </div>
          </div>
          <div style="display: flex;flex-wrap: wrap;max-height: 110px;overflow-y: auto;margin: 10px 0;">

            <q-chip v-for="(tag,tagindex) in selectList" :key="tagindex" removable @remove="getclose(tag,tagindex)"
            color="orange" text-color="white" size='sm'>
              {{tag.Name}}
            </q-chip>
          </div>
        </q-card-section>
        <q-card-actions align="right" class="bg-white">
          <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="goclose" />
          <q-btn label="确定" color="accent q-px-md" style="font-weight:400 !important" @click="determine" />
        </q-card-actions>

      </q-card>
    </q-dialog>
  </div>
</template>
<script>
  import { defineComponent, ref, onMounted } from 'vue'
  import customerService from '@/api/customer'

  export default defineComponent({
    props: {
      list: {
        type: Array,
        default: () => []
      },
    },

    setup(props, ctx) {
      let selectList = ref(props.list)
      let LableList = ref([])
      const goclose = () => {//关闭弹窗
        ctx.emit('close')
      }
      const determine = () => {//确定并返回数据
        ctx.emit('submit', selectList.value)
      }
      const getclose = (tag, index) => {
        let Id = tag.Id
        for (let i = 0; i < LableList.value.length; i++) {
          let ChildList = LableList.value[i].ChildList
          if (ChildList.length > 0) {
            for (let j = 0; j < ChildList.length; j++) {
              if (Id == ChildList[j].Id) {
                LableList.value[i].ChildList[j].chek = false
                selectList.value.splice(index, 1)
                return
              }
            }
          }
        }
      }
      const changechek = (y, index) => {
        LableList.value[y].ChildList[index].chek = !LableList.value[y].ChildList[index].chek;
        selectList.value = [];
        LableList.value.forEach(x => {
          if (x.ChildList.length > 0) {
            x.ChildList.forEach(j => {
              if (j.chek == true) {
                selectList.value.push(j)
              }
            })
          }

        })
      }
      const getLabelList = () => {
        customerService.getLabelList({}).then((res) => {
          if (res.data.Code == 1) {
            LableList.value = res.data.Data
            LableList.value.forEach(x => {
              if (x.ChildList.length > 0) {
                x.ChildList.forEach(j => {
                  j.chek = false;
                  for (let index = 0; index < props.list.length; index++) {
                    const element = props.list[index];
                    if (element.Id == j.Id) {
                      j.chek = true;
                      break
                    }
                  }
                })
              }
            })
          }
        })
      }
      onMounted(() => {//进入页面就调用
        getLabelList()
      })


      return {
        alert: ref(true),
        goclose,
        determine,
        selectList,
        getLabelList,
        LableList,
        changechek,
        getclose
      }
    }

  })
</script>