<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" />
          </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-tooltip v-if="item.key == LIST_MODE.VERTICAL && listPageMode == item.key">
          <template #title>提示：是否隐藏列表页和选项卡只显示新增表单</template>
          <div class="my-4">
            <span>仅显示表单：</span
            ><a-switch
              v-model:checked="onlyShowForm"
              @change="emits('update:config', { onlyShowForm, isShowBtn })"
            />
          </div>
          <div v-if="onlyShowForm">
            <span>显示提交按钮：</span
            ><a-switch
              v-model:checked="isShowBtn"
              @change="emits('update:config', { onlyShowForm, isShowBtn })"
            />
          </div>
        </a-tooltip>
      </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 horizontalPng from '/@/assets/images/list-horizontal.png';
  import cardPng from '/@/assets/images/list-card.png';
  import defaultPng1 from '/@/assets/images/list-default1.png';
  import verticalPng1 from '/@/assets/images/list-vertical1.png';
  import horizontalPng1 from '/@/assets/images/list-horizontal1.png';
  import cardPng1 from '/@/assets/images/list-card1.png';
  import { LIST_MODE } from '/@/enums/formViewEnum';
  const props = defineProps({
    value: String,
    config: Object,
  });
  const emits = defineEmits(['listStyle', 'update:value', 'update:config']);
  const { t } = useI18n();
  const onlyShowForm = ref<boolean>(props.config?.onlyShowForm || false);
  const isShowBtn = ref<boolean>(
    props.config?.isShowBtn === undefined ? true : props.config?.isShowBtn,
  );
  const modeList = [
    {
      img: defaultPng,
      img1: defaultPng1,
      name: t('默认模式'),
      key: LIST_MODE.DEFAULT,
    },
    {
      img: cardPng,
      img1: cardPng1,
      name: t('卡片模式'),
      key: LIST_MODE.CARD,
    },
    {
      img: verticalPng,
      img1: verticalPng1,
      name: t('上下模式'),
      key: LIST_MODE.VERTICAL,
    },
    {
      img: horizontalPng,
      img1: horizontalPng1,
      name: t('左右模式'),
      key: LIST_MODE.HORIZONTAL,
    },
  ];
  const listPageMode = ref<string>(props.value || LIST_MODE.DEFAULT);
  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>
