<style lang="scss" scoped>
.select-project {
  width: 50%;
}
.row-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.row-item:last-of-type {
  margin-bottom: 0;
}
.row-item .hint-item {
  width: 24px;
  min-width: 24px;
  align-self: flex-start;
  line-height: 20px;
  height: 20px;
  margin-top: 9px;
}
.row-item .label-item {
  position: relative;
  align-items: flex-start;
  align-self: flex-start;
  line-height: 20px;
  height: 20px;
  margin-top: 10px;
  width: 140px;
  //   min-width: 80px;
  .text-item {
    font-size: 14px;
    width: 120px;
  }
}
.row-item .required-item {
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: #f45858;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.row-item .input-item {
  min-width: 480px;
  position: relative;
  // height: 35px;
  .tip {
    font-size: 12px;
    color: tomato;
  }
  .inventory-tags-lists-header {
    background-color: #F8F9FA;
    border: 1px solid #E4E9ED;
    height: 36px;
    line-height: 33px;
    border-radius: 4px 4px 0 0;
    font-weight: bold;
    display: flex;
  }

  .inventory-tags-lists-container {
    border: 1px solid #E4E9ED;
    margin-top: -1px;
    height: 100%;
    padding: 4px 0px;
    border-radius: 0 0 4px 4px;
  }

  .inventory-tags-lists-item {
    width: 100%;
    height: 37px;
    line-height: 37px;
    padding-left: 12px;
    padding-right: 12px;
    display: flex;
    font-size: 14px;
    color: #333;
  }
}
</style>
<template>
  <div class="select-project">
    <a-modal title="账户选择" v-model="showEdit" @ok="handleOk" @cancel="close" width="80%">
      <!-- <span style="margin-bottom:15px">是否同步快手主页</span> -->
      <div class="row-item">
        <div class="hint-item"></div>
        <div class="label-item">
          <div class="text-item">是否同步快手主页</div>
          <!-- <div class="required-item"></div> -->
        </div>
        <div class="input-item">
          <a-form-item>
            <a-switch v-model="shieldBackwardSwitch" />
          </a-form-item>
        </div>
      </div>
      <!-- <treeselect
        :multiple="multiple"
        :disable-branch-nodes="!multiple"
        :branch-nodes-first="true"
        :options="options"
        :load-options="loadOptions"
        placeholder="请选择项目"
        v-model="value"
        :value-consists-of="valueConsistsOf"
        :auto-load-root-options="false"
        :auto-select-descendants="false"
        @select="update"
        @input="emitValue"
        :limit="2"
        :default-options="true"
        :limitText="
          (count) => {
            return '隐藏' + count + '条'
          }
        "
        noChildrenText="该项目下暂无账号"
        :noOptionsText="showLoading"
      /> -->
      <!-- :default-expanded-keys="[2, 3]"
        :default-checked-keys="[5]" -->
      <el-tree
        :data="options"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        :load="loadOptions"
        lazy
        :check-strictly="true"
        ref="tree"
      >
      </el-tree>
    </a-modal>
  </div>
</template>

<script>
//   @open="getParticipateList"
// 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.
let called = false
export default {
  data: () => ({
    defaultProps: {
      children: 'children',
      label: 'label',
      id: 'id',
    },
    shieldBackwardSwitch: true,
    showEdit: false,
    value: null,
    valueConsistsOf: 'LEAF_PRIORITY',
    options: [],
    showLoading: 'loading...',
  }),
  props: {
    //是否多选
    multiple: {
      type: Boolean,
      default() {
        return true
      },
    },
    //判断媒体类型
    request: {
      type: String,
      default() {
        return '2,4'
      },
    },
    //一级请求接口
    reqUrl: {
      type: String,
      default() {
        return '/ctop/projectMember/participateListByMediaId'
      },
    },
  },
  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: {
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys())
    },
    handleOk(e) {
      console.log(e)
      var data = this.$refs.tree.getCheckedKeys()
      var dataArr = data.map(item=>{
        return item.split('@')[0]
      })
      // console.log(dataArr)
      this.showEdit = false
      this.$emit('synchro', {treeData:dataArr,shieldBackwardSwitch:this.shieldBackwardSwitch})
    },
    close() {
      this.showEdit = false
    },
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    update(node, id) {
      // console.log(node)
      getAction('/ctop/userAllocation/getAccountIdListByUserId', {
        userId: node.id.split(',')[1],
      }).then((res) => {
        console.log(res)
        // if (res.code == 0) {
        //   if (res.result.length > 0) {
        //     node.children = res.result.map((item) => {
        //       return {
        //         id: item.accountId,
        //         label: item.userName + '         ' + item.authName,
        //         isDisabled: true,
        //       }
        //     })
        //   } else {
        //   }
        // } else {
        //   new Error('Failed to load options: network error.')
        // }
      })
    },
    emitValue() {
      // this.$emit('update:appId', this.value)
    },
    loadOptions(node, resolve) {
      // Typically, do the AJAX stuff here.
      // Once the server has responded,
      // assign children options to the parent node & call the callback.
      console.log(node)
      var data = []
      if (node.level == 1) {
        var id = node.key.split('@')[1]

        getAction('/ctop/userAllocation/getAccountIdListByUserId', {
          userId: id,
        }).then((res) => {
          console.log(res)
          if (res.code == 0) {
            if (res.result.length > 0) {
              data = res.result.map((item) => {
                return {
                  id: item.accountId,
                  label:
                    (item.userName.length == 2
                      ? item.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
                      : item.userName.length == 3
                      ? item.userName + '\xa0\xa0\xa0\xa0'
                      : item.userName) +
                    '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
                    item.accountId +
                    '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
                    item.authName,
                  disabled: true,
                }
              })

              resolve(data)
            } else {
              data = []
              resolve(data)
            }
          } else {
          }
        })
      } else {
        data = []
        resolve(data)
      }
    },
    getParticipateList(productId) {d:
      //我参与的
      //   toutiaoParticipateList
      this.showEdit = true
      getAction('/ctop/userAllocation/getUserIdListByProductId', {
        productId: productId,
        userId: this.userInfo().id
      }).then((res) => {
        if (res.code == 0) {
          console.log(res)
          this.options = res.result.map((item) => {
            return {
              id: item.accountId+'@'+item.userId,
              label: item.userId+'-'+item.projectName,
              children: [],
            }
          })
        } else {
          this.showLoading = '暂无数据'
        }
      })
    },
  },

  mounted() {
    // this.getParticipateList()
  },
}
</script>