<template>
  <div class="table-header">
    <draggable
      v-model="tableHeaders"
      group="people"
      @change="set"
      @end="drag = false"
      @start="drag = true"
    >
      <div v-for="header in tableHeaders" :key="header.key">
        <el-popover placement="right" trigger="focus">
          <el-tooltip
            :content="`该字段${
              header.opt === '' ? '未' : ''
            }置于template标签内,置于template方便自定义`"
            class="item"
            effect="dark"
            placement="top-start"
          >
            <el-button v-if="header.opt === ''" @click="opt(header, 'template')"
              >{{ header.opt ? "点击关闭自定义" : "点击开启自定义" }}
            </el-button>
            <el-button v-else @click="opt(header, '')"
              >{{ header.opt ? "点击关闭自定义" : "点击开启自定义" }}
            </el-button>
          </el-tooltip>
          <el-tooltip
            :content="`该字段在表格中${header.show ? '显示' : '隐藏'}`"
            class="item"
            effect="dark"
            placement="top-start"
          >
            <el-button @click="hide(header)"
              >{{ header.show ? "点击隐藏字段" : "点击显示字段" }}
            </el-button>
          </el-tooltip>
          <div slot="reference" class="table-header-card">
            <el-tag>{{ header.key }}对应的标题名称</el-tag>
            <div>
              <el-input
                v-model="header.label"
                :placeholder="header.label + '对应的字段名称'"
              />
            </div>
          </div>
        </el-popover>
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
  components: {
    draggable,
  },
  props: {
    headers: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      tableHeaders: this.headers,
    };
  },
  watch: {
    headers(val) {
      this.tableHeaders = val;
    },
  },
  methods: {
    set() {
      this.$emit("update:headers", this.tableHeaders);
    },
    show(header) {
      header.show = true;
    },
    hide(header) {
      header.show = !header.show;
    },
    opt(header, opt) {
      header.opt = opt;
    },
    query(header, query) {
      header.query = query;
    },
  },
};
</script>
<style scoped>
.table-header-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 0;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.table-header >>> .el-input__inner {
  border: none;
  border-bottom: 1px solid #9e9e9e;
  border-radius: 0;
}

.el-popover {
  min-width: 100px !important;
}
</style>