<template>
  <div :class="$style.sourcebox">
    <div :class="$style.searchsource">
      <a-button type="primary" @click="onSelecteAll">
        全选
      </a-button>
      <a-menu mode="inline" :default-open-keys="openKeys" :class="$style.menu">
        <a-sub-menu v-for="item in sourceData" :key="item.id">
          <span slot="title"
            ><span>{{ item.text }}</span></span
          >
          <a-checkbox
            v-for="i in item.children"
            ref="checkbox"
            :key="i.id"
            :checked="i.checked"
            @change="(e) => onChange(e, i.id)"
          >
            {{ i.text }}
          </a-checkbox>
        </a-sub-menu>
      </a-menu>
      <div :class="$style.btngroup">
        <a-button @click="set">
          重置
        </a-button>
        <a-button type="primary" @click="save">
          确定
        </a-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Message } from 'ant-design-vue'
import SourceService from './source-service'
import components from './_import-components/oa-search-source-import'

export default {
  name: 'OaSearchSource',
  metaInfo: {
    title: '搜索数据源配置',
  },
  components,
  data() {
    return {
      sourceData: [],
      typeIds: [],
      openKeys: [],
    }
  },
  mounted() {
    this.getSourceClassList()
  },
  methods: {
    getSourceClassList() {
      this.sourceData = []
      SourceService.getSourceClass().then((res) => {
        const data = res.data.filter((item) => item.children)
        data.filter((e) => {
          this.openKeys.push(e.id)
          e.children.map((item) => {
            item.checked = item.props.isVisible === '1'
            this.typeIds.push(item.id)
          })
        })
        this.sourceData = [...data]
      })
    },
    onSelecteAll() {
      this.typeIds = []
      this.sourceData.forEach((e) => {
        if (e.children) {
          e.children.forEach((item) => {
            this.$set(item, 'checked', true)
            this.typeIds.push(item.id)
          })
        }
      })
      this.sourceData = [...this.sourceData]
    },
    onChange(e, cId) {
      this.sourceData.forEach((i) => {
        if (i.children) {
          i.children.forEach((item) => {
            if (item.id === cId) {
              this.$set(item, 'checked', e.target.checked)
              if (e.target.checked) {
                this.typeIds.push(cId)
              } else {
                this.typeIds.splice(
                  this.typeIds.findIndex((item) => item === cId),
                  1
                )
              }
            }
          })
        }
      })
      this.sourceData = [...this.sourceData]
    },
    set() {
      this.typeIds = []
      this.sourceData.forEach((e) => {
        if (e.children) {
          e.children.forEach((item) => {
            this.$set(item, 'checked', false)
          })
        }
      })
      this.sourceData = [...this.sourceData]
    },
    save() {
      this.typeIds = [...new Set(this.typeIds)]
      SourceService.saveSource(this.typeIds).then((res) => {
        if (res.data) Message.success('保存成功!')
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
$bg: #fff;
$lh: 40px;
.sourcebox {
  display: flex;
  justify-content: center;
  height: 100%;
  background-color: $bg;
  .searchsource {
    min-width: 70%;
    :global(.ant-btn) {
      margin-top: 1rem;
      margin-left: 1.5rem;
    }

    .menu {
      padding-left: 1.5rem;
      margin-top: 1rem;
      border-right: 0;
      :global(.ant-menu-sub) {
        display: flex;
        flex-wrap: wrap;
        padding-left: 1rem;
        line-height: $lh;
      }
      :global(.ant-menu-submenu-arrow) {
        left: 0.6rem;
      }
    }

    .btngroup {
      margin-top: 1rem;
      margin-right: 2rem;
      text-align: center;
    }
  }
}
</style>
