<style lang="scss" scoped>
.select-project {
  width: 50%;
}
</style>
<template>
  <div class="select-project">
    <treeselect
      :multiple="multiple"
      :disable-branch-nodes="!multiple"
      :options="options"
      :load-options="loadOptions"
      placeholder="请选择项目"
      v-model="value"
      :value-consists-of="valueConsistsOf"
      @select="update"
      @input="emitValue"
      :limit="2"
      :limitText="
        count => {
          return '隐藏' + count + '条'
        }
      "
      noChildrenText="该广告主下暂无项目"
      noOptionsText="暂无项目"
    />
  </div>
</template>

<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'

import { getAction, postAction } from '@/api/manage'
import { mapGetters } from 'vuex'
// We just use `setTimeout()` here to simulate an async operation
// instead of requesting a real API server for demo purpose.

export default {
  data: () => ({
    value: null,
    valueConsistsOf: 'LEAF_PRIORITY',
    options: [],
    mediaId: ''
  }),
  props: {
    multiple: {
      type: Boolean,
      default() {
        return true
      }
    },
    appId: {}
  },
  components: { Treeselect },
  watch: {
    $route(n, o) {},
    appId: {
      handler(n, o) {
        console.log(n)
        if (n.length == 0) {
          if (this.multiple) {
            this.value = []
          } else {
            this.value = ''
          }
        }
      },
      deep: true
    }
  },
  methods: {
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    update(node, id) {
      console.log(node, id)

      getAction('/ctop/project/getProjectByAdvertiserAndMediaId', {
        advertiserId: node.id,
        mediaId: this.mediaId
      }).then(res => {
        console.log(res)
        if (res.code == 0) {
          if (res.result.length > 0) {
            node.children = res.result.map(item => {
              return {
                id: item.id,
                label: item.projectName
              }
            })
          } else {
          }
        } else {
          new Error('Failed to load options: network error.')
        }
      })
    },
    emitValue() {
      this.$emit('update:appId', this.value)
    },
    getChildren() {},
    loadOptions({ action, parentNode, callback }) {
      // Typically, do the AJAX stuff here.
      // Once the server has responded,
      // assign children options to the parent node & call the callback.
      if (action === LOAD_CHILDREN_OPTIONS) {
        getAction('/ctop/project/getProjectByAdvertiserAndMediaId', {
          advertiserId: parentNode.id,
          mediaId: this.mediaId
        }).then(res => {
          console.log(res)
          if (res.code == 0) {
            if (res.result.length > 0) {
              parentNode.children = res.result.map(item => {
                return {
                  id: item.id,
                  label: item.projectName
                }
              })
              callback()
            } else {
              parentNode.children = []
              callback()
            }
          } else {
            callback(new Error('Failed to load options: network error.'))
          }
        })
      }
    },
    getParticipateList(mediaId) {
      this.mediaId = mediaId
      this.value = null
      getAction('/ctop/advertiser/getAdvertiserByCompany', { userId: this.userInfo().id }).then(res => {
        console.log(res)
        if (res.code == 0) {
          this.options = res.result.map(item => {
            return {
              id: item.id,
              label: item.name,
              children: null
            }
          })
        }
      })
    }
  },

  mounted() {}
}
</script>
