<template>
  <div class="list-show-mode">
    <NodeHead :nodeName="t('表单展现模式')" />
    <a-row :gutter="18" class="mt-5">
      <a-col :span="6" v-for="item in modeList" :key="item.key">
        <a-popover :title="t(item.name + '说明')">
          <template #content>
            <!-- <a-image :width="500" :src="item.img1" /> -->
            <div>{{ item.tips }}</div>
          </template>
          <div class="list-show-mode-item" @click="handleModeClick(item)">
            <img :src="item.img" class="w-full" />
            <label :style="{ display: listPageMode == item.key ? 'block' : 'none' }">{{
              t(item.name)
            }}</label>
          </div>
        </a-popover>
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import NodeHead from '/@/components/ModalPanel/src/NodeHead.vue';
  import defaultPng from '/@/assets/images/list-default.png';
  import verticalPng from '/@/assets/images/list-vertical.png';

  import defaultPng1 from '/@/assets/images/list-default1.png';
  import verticalPng1 from '/@/assets/images/list-vertical1.png';

  const props = defineProps({
    value: String,
  });
  const emits = defineEmits(['listStyle', 'update:value']);
  const { t } = useI18n();

  const modeList = [
    {
      img: defaultPng,
      img1: defaultPng1,
      name: t('默认模式'),
      key: '0',
      tips: '该模式有列表页和表单页',
    },
    {
      img: verticalPng,
      img1: verticalPng1,
      name: t('表单模式'),
      key: '1',
      tips: '该模式只有表单页',
    },
  ];
  const listPageMode = ref<string>(props.value || '0');
  watch(
    () => props.value,
    (val) => {
      if (val) listPageMode.value = val;
    },
  );

  function handleModeClick(item) {
    listPageMode.value = item.key;
    emits('update:value', listPageMode.value);
    emits('listStyle', listPageMode.value);
  }
</script>
<style scoped lang="less">
  .list-show-mode {
    border-top: 1px solid #eee;
    padding-top: 30px;
    margin: 0 16px;

    &-item {
      border-radius: 8px;
      border: 1px solid #eee;
      padding: 40px 26px 1px;
      position: relative;

      &:hover {
        label {
          display: block !important;
        }
      }

      label {
        position: absolute;
        top: 0;
        right: 0;
        width: 90px;
        height: 30px;
        line-height: 30px;
        background: #dcedff;
        box-shadow: 0 2px 6px 0 rgb(0 0 0 / 15%);
        border-radius: 0 8px;
        font-weight: bold;
        font-size: 13px;
        color: #1c8dff;
        text-align: center;
        display: none;
      }
    }
  }
</style>
