<template>
  <BasicModal
    :title="getTitle"
    :subTitle="getSubTitle"
    :canFullscreen="false"
    @register="registerModal"
    @ok="handleSubmit"
    @cancel="handleSubmit"
    width="580px"
  >
    <div class="wrap shortcut">
      <div
        :class="[
          'shortcut-item',
          item.selected ? 'shortcut-item--seleted' : '',
          !item.selected && disabled ? 'shortcut-item--disabled' : '',
        ]"
        v-for="item in shortcutData"
        :key="item.name"
        @click="selectedShortcut(item)"
      >
        <i :class="['iconfont shortcut-item_icon', 'icon-xt-fail']" />
        <div class="shortcut-item_name">{{ item.name }}</div>
      </div>
    </div>
  </BasicModal>
</template>

<script setup lang="ts">
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { computed } from 'vue';
  import { reactive } from 'vue';
  import { ref } from 'vue';
  const emit = defineEmits(['success']);
  const getTitle = computed(() => '快捷入口');
  const count = reactive({
    total: 4,
    curr: 1,
  });
  const getSubTitle = computed(() => '(已选' + count.curr + '/' + count.total + ')');
  const disabled = ref<boolean>(false);
  const shortcutData = ref([
    {
      icon: 'icon-xt-fail',
      name: '透前准备',
      route: '/bizArchives/index',
      selected: false,
    },
    {
      icon: 'icon-xt-fail',
      name: '透析室',
      route: '/bizArchives/index',
      selected: false,
    },
    {
      icon: 'icon-xt-fail',
      name: '查房',
      route: '/bizVisit/check',
      selected: true,
    },
    {
      icon: 'icon-xt-fail',
      name: '交班记录',
      route: '/bizArchives/handover_shifts',
      selected: false,
    },
    {
      icon: 'icon-xt-fail',
      name: '透前准备1',
      route: '/bizArchives/index',
      selected: false,
    },
    {
      icon: 'icon-xt-fail',
      name: '透析室1',
      route: '/bizArchives/index',
      selected: false,
    },
    {
      icon: 'icon-xt-fail',
      name: '查房1',
      route: '/bizVisit/check',
      selected: true,
    },
    {
      icon: 'icon-xt-fail',
      name: '交班记录1s',
      route: '/bizArchives/handover_shifts',
      selected: false,
    },
  ]);
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async data => {
    console.log('🚀 ~ file: code.vue:21 ~ data:', data);
    setModalProps({ confirmLoading: false });
    disabledShortcut();
  });

  function selectedShortcut(data) {
    console.log('🚀 ~ file: ShortcutModal.vue:67 ~ data:', data);
    if (count.curr == count.total && !data.selected) return;
    shortcutData.value = shortcutData.value.map(ele => {
      if (ele.name == data.name) {
        ele.selected = !ele.selected;
      }
      return ele;
    });
    disabledShortcut();
  }
  function disabledShortcut() {
    count.curr = shortcutData.value.filter(ele => ele.selected).length;
    if (count.curr == count.total) {
      disabled.value = true;
    } else {
      disabled.value = false;
    }
  }
  async function handleSubmit() {
    console.log('提交请求');
    emit('success');
    closeModal();
  }
</script>

<style lang="less" scoped>
  .wrap {
    padding: 8px;
  }

  .shortcut {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    &-item {
      width: 120px;
      height: 120px;
      border-radius: 8px;
      cursor: pointer;
      margin-bottom: 18px;

      &_icon {
        display: block;
        text-align: center;
        padding: 20px 10px;
        font-size: 24px;
        margin-right: 4px;
      }

      &_name {
        text-align: center;
      }

      &--seleted {
        border: 1px solid #006dff;
        background: #ecf0f5;
      }

      &--disabled {
        color: #d3dadf;
        background: #f4f5f7;
        cursor: not-allowed;
      }

      &:hover {
        box-shadow: 0 0 18px 0 rgb(0 37 74 / 12%);
      }
    }
  }
</style>
