<template>
  <div class="kyb-select-entity">
    <div v-if="!hideToolbar&&!showonly" class="q-pa-xs">
      <kyb-input
      v-if="!hideInput"
        v-model="keyword"
        style="width:160px;"
        class="float-left"
        :entity="entity"
        dense
        :outlined="inputProps && inputProps.outlined !== undefined ? inputProps.outlined : true"
        :label="inputProps && inputProps.label||'关键字'"
        completion
        v-bind="inputProps"
        :title-key="titleKey"
        :value-key="valueKey"
        :group-key="groupKey"
        :query-param="queryParam"
        :query-url="queryUrl"
        @selected="selectItem"
        @input="input"
      ></kyb-input>
      <!-- showRight是附加到下面的右侧侧滑面板的模型 -->
      <q-btn
        v-if="!hideButton"
        label=" 选择... "
        color="primary"
        class="q-ml-xs"
        style="padding:7px 12px;"
        dense
        outline
        @click="showSelectWin=true"
      >
        <q-tooltip>选择数据</q-tooltip>
      </q-btn>
    </div>
    <kyb-list-show
      :entity="linkOtherTable||entity"
      :select-type="selectType"
      :title-key="titleKey"
      :value-key="valueKey"
      :group-key="groupKey"
      showonly
      :can-del="!showonly"
      v-model="valueInner"
      @input="$emit('input',$event)"
    />
    <q-dialog v-model="showSelectWin" transition-show="scale" transition-hide="scale" persistent>
      <kyb-select
        ref="select"
        style="min-width:300px;min-height:260px;"
        :style="dialogContentStyle"
        class="bg-white q-pa-sm"
        :entity="entity"
        :can-add="false"
        :can-del="false"
        v-model="valueInner"
        :is-group="isGroup"
        :title-key="titleKey"
        :value-key="valueKey"
        :group-key="groupKey"
        :select-type="selectType"
        :query-param="queryParamInnerWin"
        :link-more-entity="linkMoreEntity"
        :link-entity-my-key="linkEntityMyKey"
        :link-more-my-id="linkMoreMyId"
        :hide-toolbar="mdata.hideToolbar"
        v-bind="$props"
        @input="selectWinInput"
        show-page
      >
        <template #top-right>
          <q-btn flat v-close-popup  icon="close" class="absolute-top-right"/>
        </template>
        <template #top="{ queryParam, find }">
          <slot name="select-top" v-bind="{ queryParam, find }"></slot>
        </template>
      </kyb-select>
    </q-dialog>
  </div>
</template>
<script>
/**
 * 选择实体，能和数据库交互，可单选或多选
 */
// import { uid } from 'quasar'
import KybMdata from '../kyb-mdata.js'

export default {
  mixins: [KybMdata],
  name: 'kyb-select-entity',
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    hideToolbar: Boolean, // 是否隐藏工具栏
    hideInput: Boolean,
    hideButton: Boolean,
    inputProps: Object,
    isGroup: Boolean, // 是否分组显示
    showonly: Boolean, // 是否只读
    mdata: {
      type: Object,
      default: () => {
        return {}
      }
    }, // 元数据结构
    value: [String, Array], // 已选中的对象id
    selectType: { type: String, default: 'one' }, // one单选，more多选
    titleKey: { type: String, default: 'name' }, // 显示字段
    valueKey: { type: String, default: '_id' }, // 值的字段
    groupKey: { type: String, default: 'group' }, // 分组的字段
    queryUrl: String,
    dialogContentStyle: String
  },
  data: function() {
    return {
      keyword: null,
      valueInner:
        typeof this.value === 'string' ? this.value.split(',') : this.value,
      queryParamInner: JSON.parse(JSON.stringify(this.queryParam)),
      queryParamInnerWin: JSON.parse(JSON.stringify(this.queryParam)),
      showSelectWin: false
    }
  },
  watch: {
    value(obj) {
      this.valueInner = obj
    },
    queryParam(newVal) {
      this.queryParamInner = JSON.parse(JSON.stringify(newVal))
      this.queryParamInnerWin = JSON.parse(JSON.stringify(newVal))
    }
  },
  computed: {},
  created() {
    // alert(this.titleKey)
    this.queryParamInner || (this.queryParamInner = {})
    this.queryData()
  },
  mounted() {},

  methods: {
    selectItem(item) {
      let v = item[this.valueKey]
      this.valueInner || (this.valueInner = [])
      if (this.selectType === 'one') {
        this.valueInner = [v]
      } else if (this.selectType === 'more') {
        let r = this.valueInner.reduce((re, item) => {
          re[item] = true
          return re
        }, {})
        r[item[this.valueKey]] = true
        this.valueInner = Object.keys(r)
      }
      this.keyword = ''
      this.$emit('input', this.valueInner)
    },
    selectWinInput(item) {
      this.valueInner = item
      this.$emit('input', item)
    },
    listShowInput(item) {
      this.valueInner = item
      this.$emit('input', item)
    },
    input($event) {},
    queryData() {}
  }
}
</script>
<style lang="stylus"></style>
