<template>
  <section class="chartPicker">
    <ai-dialog-btn :modal="false" dialog-title="选择图表模板" :customFooter="false"
                   @confirm="handleConfirm" @open="handleOpenDialog">
      <template #btn>
        <img class="pointer thumb" v-if="current.thumb" :src="current.thumb"/>
        <el-button v-else type="text">选择图表</el-button>
      </template>
      <div class="charts">
        <div class="item pointer" v-for="tpl in tpls" :key="tpl.type" :class="{selected:selected==tpl.type}"
             @click="selected=tpl.type">
          <img :src="tpl.thumb"/>
          <div v-text="tpl.label"/>
        </div>
      </div>
    </ai-dialog-btn>
  </section>
</template>
<script>
import AiDialogBtn from "dui/packages/layout/AiDialogBtn";
import {chartTpl} from "../config";

export default {
  name: "chartPicker",
  components: {AiDialogBtn},
  model: {
    prop: "value",
    event: "input"
  },
  props: {
    value: String,
    tpls: {default: () => chartTpl.map(e => e.list).flat()}
  },
  data() {
    return {
      selected: null
    }
  },
  computed: {
    current: v => v.tpls.find(e => e.type == v.value) || {}
  },
  watch: {
    value(v) {
      v && this.$emit("config", this.$echartTpls[v])
    }
  },
  methods: {
    handleConfirm() {
      this.$emit("input", this.selected)
    },
    handleOpenDialog() {
      this.selected = this.$copy(this.value)
    }
  },
}
</script>
<style scoped lang="scss">
.chartPicker {
  text-align: left;

  .pointer {
    cursor: pointer;
  }

  .thumb {
    width: 200px;
    height: 90px;
  }

  .charts {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 8px;

    .item {
      text-align: center;
      padding: 2px;
      border: 2px solid transparent;

      & > img {
        width: 100%;
        height: 90px;
      }

      &.selected, &:hover {
        border-color: #46f;
      }
    }
  }
}
</style>
