<template>
  <div class="popup">
    <!-- @click.native="select" 决定由父节点的click发起调用（会将自身vue对象传递给调用事件） 通过open()方法打开-->
    <Input v-model="popupName"  ref="popupInput" :disabled="disabled" :icon="icon" :placeholder="placeholder" @on-focus="nativeClick"></Input>
    <Icon v-if="isShowClose" type="close" class="close-btn" @click.native="clean"></Icon>
  </div>
</template>

<script>
import popupGrid from "./popupGrid.vue";
export default {
  name: "popup",
  components: {},
  model: {
    event: "input"
  },
  props: {
    server :{
      type    : Object,
      default (){
        return {};
      }      
    },
    title:{
      type: String,
      default: ""
    },
    vendorId:{
      type: String,
      default: ""
    },
    disabled:{
      type: Boolean,
      default() {
          return false;
      }
    },
    //设置model接收
    popupName: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: ""
    },
    icon:{
      type: String,
      default: "search"
    },
    //popup组件查询项对象
    condition :{
      type    : Object,
      default (){
        return {};
      }      
    },
    //popup组件表格项对象
    grid :{
      type    : Object,
      default (){
        return {};
      }      
    },
    //显示字段名
    textField:{
      type: String,
      default: ""
    },
    valueField:{
      type: String,
      default: ""
    },
    //是否展示删除的X
    isShowClose:{
      type: Boolean,
      default: false
    },
    isMultiple: {
      // 是否多选
      type: Boolean,
      default: false
    },
  },

  data() {
    return {
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    select() {
      new this.$pageModal(
        popupGrid,
        {
          props: {
            condition: this.condition,
            grid: this.grid,
            server: this.server,
            title:this.title,
            isMultiple:this.isMultiple
          }
        },
        data => {
          let rdata = JSON.parse(JSON.stringify(data))
          this.popupName = rdata[this.textField]
          this.$emit("selected", [rdata,this.textField,this.valueField]);
          this.$emit("input", this.popupName);
        }
      );
    },
    clean() {
      this.popupName = ""
      this.$emit("selected", [{},this.textField,this.valueField]);
      this.$emit("input", "");
    },
    //可以json中不配置 在打开方法中配置查询 表格信息 以及 title信息
    open(popup){
      if(popup){
        this.condition = popup.condition?Object.assign(this.condition,popup.condition):this.condition;
        this.grid = popup.grid?Object.assign(this.grid,popup.grid):this.grid;
        this.title = popup.title?popup.title:this.title;
      }
      this.select();
      this.$refs["popupInput"].blur();
    },
    nativeClick(){
       this.$emit("on-focus",this);
    }
  }
};
</script>

<style lang='less' scoped>
.popup {
  position: relative;
  display: inline-block;

  .close-btn {
    position: absolute;
    right: 30px;
    top: 50%;
    margin-top: -7px;
    font-size: 14px;
    color: #80848f;
    display: none;
    cursor: pointer;
  }

  &:hover {
    .close-btn {
      display: inline-block;
    }
  }
}
</style>