<!--version: 3, 选择弹窗-->
<!--版本更新内容：添加prop属性，修复多选-->

<template>
  <el-drawer :with-header="false" :visible.sync="visible" size="90%" direction="rtl" append-to-body>
    <div class="drawer-container">
      <div class="drawer-operator-box">
        <el-button type="primary" @click="submit()" icon="el-icon-check">确 认 选 择</el-button>
      </div>
      <div class="drawer-content">
        <user-check
          v-if="visible"
          ref="check"
          :multiple="multiple"
          :init-select="initSelect"
          :list-api="listApi"
          v-on="$listeners"
          :query="query"
        />
      </div>
    </div>
  </el-drawer>
</template>

<script>
import DeptTreeSelect from '@/components/Business/Dept/DeptTreeSelect.vue'
import Price from '@/views/bst/price/index.vue'
import BooleanTag from '@/components/BooleanTag/index.vue'
import { $showColumns } from '@/utils/mixins'
import UserCheck from '@/components/Business/User/UserCheck.vue'
import { listUser } from '@/api/system/user'

export default {
  name: "UserDrawer",
  mixins: [$showColumns],
  dicts: ['price_status'],
  components: {UserCheck, BooleanTag, Price, DeptTreeSelect},
  props: {
    // 标题
    title: {
      type: String,
      default: `选择用户`
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    show: {
      type: Boolean,
      default: false
    },
    query: {
      type: Object,
      default: () => ({})
    },
    initSelect: {
      type: Array,
      default: null,
    },
    listApi: {
      type: Function,
      default: listUser
    }
  },
  computed: {
    visible: {
      set(val) {
        this.$emit('update:show', val)
      },
      get() {
        return this.show;
      }
    }
  },
  methods: {
    // 确认选中
    submit() {
      if (this.multiple) {
        this.$emit('select', this.$refs.check.selected);
      } else {
        this.$emit('select', this.$refs.check.selected[0]);
      }
    },
  },
}
</script>
