<template>
  <!-- <div>
    <a-card bordered :class="$style.tree">
      <div slot="title">
        <span>角色</span>
        <a-checkbox>含下级</a-checkbox>
      </div>
      <a-checkbox-group :options="roleList"></a-checkbox-group>
    </a-card> -->
  <sd-picker-source-lazy-list :load-list-data="loadListData" v-bind="$attrs" v-on="$listeners" />
  <!-- </div> -->
</template>

<script>
import GroupUserService from '@/addressbook/group-user-service'
import axios from '@/common/services/axios-instance'
import components from './_import-components/sd-strategy-picker-import'

export default {
  name: 'SdStrategyPicker',
  metaInfo: {},
  components,
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      roleList: [],
      childrenList: [],
      strategyIdList: [
        'C.personalUserGroupOperatorResolver',
        'C.currentUserAuthGroupOperatorResolver',
        'C.oaCurrentUserGroupOperatorResolver',
        'C.processUsersOperatorResolver',
      ],
    }
  },
  created() {
    this.roleLoadListData()
    this.loadListData()
  },
  methods: {
    loadListData() {
      return axios.get('api/framework/v1/process-query/operator-strategy/children').then((res) => {
        return res.data.filter((r) => this.strategyIdList.includes(r.id))
      })
    },
    roleLoadListData() {
      return GroupUserService.getRoles().then((val) => {
        this.roleList = val.map((item) => {
          return {
            value: item.code,
            label: item.name,
          }
        })
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.tree {
  position: absolute;
  top: -41px;
  left: 309px;
  width: 200px;
  height: calc(100% + 42px);
  :global .ant-card-head {
    height: 38px;
    :global .ant-card-head-title {
      padding: 6px 0;
      :global .ant-checkbox-wrapper {
        float: right;
      }
    }
  }
  div:global(.ant-card-body) {
    height: calc(100% - 42px);
    padding: 0;
    > div {
      width: 100%;
      height: 100%;
      overflow: auto;
      label {
        display: block;
        margin: 10px 0 10px 10px;
      }
    }
  }

  // :global(.ant-card-head > .ant-card-head-wrapper > .ant-card-head-title) {
  //   padding: 0;
  //   margin-right: 4px;
  // }
}
.list {
  padding: 5px 10px;
  cursor: pointer;
}
</style>
