/**
 * Select业务组件定制模板
 * 
 * <pro-select-customer openModel="">
 *    <!-- 选择组件 -->
 *    <use-component />
 * </pro-select-customer>
 * 
 * @author xiufu.wang 
 */

import selectDatasourceMixin from 'mars-pro/packages/pro-select/src/mixins/select-datasource';
import selectBaseMixin from 'mars-pro/packages/pro-select/src/mixins/select-base';
import ElButton from 'mars-pro/packages/button';
import ElDialog from 'mars-pro/packages/dialog';

export default {
  name: 'ProSelectCustomer',
  componentName: 'ProSelectCustomer',
  inheritAttrs: false,
  mixins: [selectBaseMixin, selectDatasourceMixin],
  components: {
    ElButton,
    ElDialog
  },
  props: {
    //打开模式 modal | dropdown
    openModel: String
  },
  data() {
    return {
      visible: false
    }
  },
  computed: {
    isShowSearch() {
      return false
    }
  },
  methods: {
    renderSelectWapper() {
      if (this.openModel !== 'modal') {
        const content = (
          <div>
            {this.$slots.default}
          </div>
        )
        return selectBaseMixin.methods.renderSelectWapper.call(this, content)
      } else {
        const _dialogDatas = {
          props: {
            ...this.$attrs,
            visible: this.visible && !this.selectDisabled,
          }
        }
        return (
          <div style="display:inline-block">
            {
              selectBaseMixin.methods.renderSelectWapper.call(this, null, {
                attrs: {
                  hideSuffix: true,
                  foreverVisibleFalse: true
                }
              }, (
                <template slot="append">
                  <ElButton disabled={this.selectDisabled} on-click={this.handleOpen}>选择</ElButton>
                </template>
              ))
            }
            <ElDialog {..._dialogDatas}>
              {this.$slots.default}
            </ElDialog>
          </div>)
      }
    },
    handleOpen() {
      if (this.selectDisabled) { 
        return
      }
      this.visible = true
    },
    handleClose() {
      this.$refs.elselect.visible = false
      this.visible = false
    }
  },
  render() {
    return this.renderSelectWapper()
  }
}