<template>
 <el-popover
    :placement="placement"
    :title="title"
    :width="width + 'px'"
    :trigger="trigger"
    :popper-class="popperClass"
    v-model="showPopover"
    ref="popover"
    :content="content">
    <div v-if="aboutTable.tableShow">
        <zr-table :class="'zr-table-popover'" @rowClick="rowClick" :tableData="aboutTable.gridData" ref="multipleTable" :stripe="false" :border="false" :columObj="aboutTable.columObj">
		    </zr-table>
        <div class="table-bottom" v-if="aboutTable.tableShowBottom">
            <div class="table-bottom-item" v-for="(item,index) in aboutTable.tableBottom" :key="index" >
              <el-link :icon="item.icon" :underline="false" @click="goTo(item.type)">{{item.title}}</el-link>
            </div>
        </div>
    </div>
    <el-input v-if="configInfo.type == 'input'" v-model="configInfo.value" :style="{'width':configInfo.width?configInfo.width:'300px'}"  :placeholder="configInfo.placeholder"
        slot="reference" ref="input" @input="InputChange">
        <el-button v-if="configInfo.isAppend" slot="append" :icon="configInfo.icon" @click.stop="buttonClick"></el-button>
        </el-input>
    <el-button v-else slot="reference">{{buttonTitle}}</el-button>
  </el-popover>
</template>

<script>
export default {
  name: "ZrPopover",
  props: {
    trigger: {//触发方式
      type: String,
      default: "click",
    },
    title: {//标题默认为空
      type: String,
      default: "",
    },
    content: {//显示的内容
      type: String,
      default: "",
    },
    width: {//显示的内容
      type: String |  Number,
      default: "150",
    },
    placement: {//出现位置
      type: String,
      default: "bottom",
    },
    popperClass: {//自定义类名
      type: String,
      default: "",
    },
    buttonTitle: {//自定义按钮的文字
      type: String,
      default: "点击显示",
    },
    aboutTable: {//是否显示table--table参考zr_table
      type: Object,
      default: () => ({}),
    },
    configInfo: {//自定义初始点击类型按钮，input框等
      type: Object,
      default: () => ({}),
    },
  },
  watch: { 
    configInfo: {
      handler(newVal, oldVal) {
        console.log(newVal, "---",oldVal);
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return { 
        showPopover:false
       }
  },
  methods: {
    goTo(type) {
      if(type){
        this.$emit("goTo",type);
      }
    },
    InputChange(val){
      this.$emit("InputChange",val);
    },
    buttonClick(){
      this.$emit("buttonClick");
    },
    rowClick(row, column, event){
      this.$emit("rowClick",row, column, event);
    },
  },
};
</script>

<style lang="scss" scoped>
.zr-table-popover{
 /deep/ .el-table td.el-table__cell{
    cursor: pointer !important;
  }
}
.table-bottom {
  display: flex;
  height: auto;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #eaeaea;
  padding-top: 10px;
  .table-bottom-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    border-right: 1px solid #eaeaea;
    i {
      font-size: 18px;
      position: relative;
      top: -2px;
    }
  }

  .table-bottom-item:last-child {
    border-right: none;
  }
}
</style>
