<template>
  <m-modal
    v-model="visible"
    title="布局设定"
    width="98vw"
    height="93vh"
    offset-y=".2rem"
    bg-color="rgba(0,0,0,0.5)"
    :mask-closable="false"
    @close="onClose"
  >
    <div class="container">
      <div v-for="item in layoutOptions" :key="item.title" class="row">
        <div
          v-for="img in item.list"
          :key="img.key"
          class="img"
          :class="{ on: curKey === img.key }"
          @click="onSelect(img.key)"
        >
          <img :src="img.src" />
        </div>
        <div class="title">
          <p>{{ item.title }}</p>
        </div>
      </div>
    </div>
  </m-modal>
</template>

<script lang="ts" setup>
import { PropType, ref, watch } from 'vue'
import img1 from '@/assets/images/2-6-1.png'
import img2 from '@/assets/images/2-5-1.png'
import img3 from '@/assets/images/2-5-2.png'
import img4 from '@/assets/images/2-5-3.png'
import img5 from '@/assets/images/2-5-4.png'
import img6 from '@/assets/images/2-4-1.png'
import img7 from '@/assets/images/2-4-2.png'

const props = defineProps({
  modelValue: {
    type: Boolean as PropType<boolean>,
    default: false,
  },
})
const emit = defineEmits(['update:modelValue', 'select'])
const visible = ref(false)
watch(
  () => props.modelValue,
  (val) => (visible.value = val),
)
watch(
  () => visible.value,
  (val) => {
    emit('update:modelValue', val)
  },
)

const layoutOptions = [
  { title: '两列六块', list: [{ src: img1, key: '2-6-1' }] },
  {
    title: '两列五块',
    list: [
      { src: img2, key: '2-5-1' },
      { src: img3, key: '2-5-2' },
      { src: img4, key: '2-5-3' },
      { src: img5, key: '2-5-4' },
    ],
  },
  {
    title: '两列四块',
    list: [
      { src: img6, key: '2-4-1' },
      { src: img7, key: '2-4-2' },
    ],
  },
]
const curKey = ref<string | null>(null)
const onSelect = (key) => {
  curKey.value = key
}
const onClose = () => {
  emit('select', curKey.value)
}
</script>

<style lang="stylus" scoped>
.container
  height 100%
  display flex
  flex-direction column
  justify-content space-between
  .row
    .title
      width 23%
      text-align center
      p
        display inline-block
        background rgba(70,83,97,.3)
        color #B2DAEA
        padding .03rem .12rem
        box-shadow 0 0 0.06rem .01rem rgba(255,255,255,.1) inset
        font-weight bold
    .img
      display inline-block
      width 23%
      margin-right 2%
      cursor pointer
      border-radius .04rem
      position relative
      >img
        width 100%
        height 100%
      &:hover
        box-shadow 0 0 .1rem .01rem rgba(255,255,255,.3)
      &.on
        &:before
          position absolute
          top .08rem
          right .08rem
          content ''
          display inline-block
          background url('/src/assets/images/checked.png') center/100% 100% no-repeat
          width .12rem
          height @width
</style>
