<script>
import AiDrag from "./AiDrag.vue";
import AiDvSvg from "./layout/AiDvSvg/AiDvSvg.vue";

export default {
  name: "AiDvDialog",
  components: {AiDvSvg, AiDrag},
  props: {
    title: {default: "弹窗"},
    tableData: {default: () => []},
    columns: {type: [Array, Object]}
  },
  data() {
    return {
      dialog: false,
      detail: {}
    }
  },
  computed: {
    colConfigs() {
      let config = []
      if (!Array.isArray(this.columns)) {
        config = Object.entries(this.columns).map(([key, value]) => {
          return {...value, prop: key}
        })
      } else config = this.columns
      return config
    }
  },
}
</script>

<template>
  <section class="AiDvDialog">
    <ai-drag v-if="dialog" :resizable="false">
      <ai-dv-svg :title="title" @close="dialog=false">
        <slot v-if="$slots.default"/>
        <el-table v-else class="simple" :data="tableData">
          <el-table-column v-for="item in colConfigs" :key="item.prop" :prop="item.prop" :label="item.label"/>
        </el-table>
      </ai-dv-svg>
    </ai-drag>
  </section>
</template>

<style scoped lang="scss">
@import "dv";

.AiDvDialog {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 999;
  transform: translate(-50%, -50%);
}
</style>
