<template>
  <div class="menu">
    <div
      :class="[
        'menu-item',
        item.id == selected ? 'menu-item--selected' : '',
        type == 'attachment' ? 'menu-item--attachment' : '',
      ]"
      :style="{ width: width + 'px', height: height + 'px' }"
      v-for="item in data"
      :key="item.id"
    >
      <div class="menu-item_left" @click="handleClick(item)">
        <div class="menu-item_left-t">{{ item.title }}</div>
        <div class="menu-item_left-b">
          <span v-if="item.startTime">
            <span>化疗时间: </span>
            <span>{{ item.startTime }} </span>
          </span>
          <span v-if="item.doctor">
            <span>{{ item.doctor }} </span>
          </span>
        </div>
      </div>
      <div class="menu-item_right">
        <div class="menu-item_right-t" v-if="item.status">
          {{ item.status }}
        </div>
        <div class="menu-item_right-t" v-if="item.attachment">
          <i class="iconfont icon-xt-details-annex iconfont-attachment" />
          {{ item.attachment }}
        </div>
        <div class="menu-item_right-b">
          <span v-if="item.endTime">
            <span v-if="type == 'default'">报告时间: </span>
            <span>{{ item.endTime }} </span>
          </span>
        </div>
      </div>

      <div :class="['menu-item_right', 'menu-item_right--edit', type == 'default' ? 'hidden' : '']">
        <div class="menu-item_right-btn" @click="handleEdit(item)">
          <i class="iconfont icon-xt-details_edit_default" />
        </div>
        <div class="menu-item_right-btn" @click="handleDel(item)">
          <!-- 删除 -->
          <i class="iconfont icon-xt-details_delete_default" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  interface Props {
    data: Array<{
      id: string;
      // 标题
      title: string;
      // 化验时间
      startTime?: string;
      // 报告时间 | 创建时间
      endTime?: string;
      // 医生名字
      doctor?: string;
      // 附件
      attachment?: string;
      // 状态
      status?: string;
    }>;
    // 选中项
    selected: string;
    // 类型
    type: 'default' | 'attachment';
    // 宽度
    width?: number;
    // 高度
    height?: number;
  }
  withDefaults(defineProps<Props>(), {
    data: () => [],
    selected: '0',
    type: 'default',
    width: 445,
    height: 82,
  });
  const emit = defineEmits(['itemClick', 'edit', 'delete']);
  function handleClick(data) {
    emit('itemClick', data);
  }
  // 编辑
  function handleEdit(data) {
    emit('edit', data);
  }
  // 删除
  function handleDel(data) {
    emit('delete', data);
  }
</script>

<style lang="less" scoped>
  .menu {
    &-item {
      display: flex;
      justify-content: space-between;
      padding: 20px;
      cursor: pointer;
      color: #818694;
      font-size: 12px;
      font-weight: 400;
      background-color: #fff;

      &_left {
        &-t {
          font-size: 14px;
          font-weight: 500;
          color: #000a18;
          margin-bottom: 6px;
        }
        // &-b {
        // }
      }

      &_right {
        text-align: right;
        transition: all 0.3s ease-in-out;

        &-t {
          margin-bottom: 6px;
          display: inline-flex;
          align-items: center;

          .iconfont {
            font-size: 14px;
            margin-right: 2px;
          }
        }

        &-btn {
          margin-right: 16px;
          background: #fff;
          border-radius: 50%;
          width: 32px;
          height: 32px;
          text-align: center;
          line-height: 32px;

          &:last-child {
            margin-right: 0;
          }

          &:hover {
            color: #0075ff;
          }
        }

        &--edit {
          display: none;
        }
      }

      &:hover {
        background: #f6f8fa;
      }

      &--selected {
        background: #f6f8fa;
        box-shadow: 1px 0 0 0 #efefef, inset 3px 0 0 0 #0075ff;
      }

      &--attachment {
        justify-content: space-between;
        align-items: center;
        transition: all 0.3s ease-in-out;

        &:hover {
          .menu-item_right {
            display: none;
          }

          .menu-item_right--edit {
            display: flex !important;
          }
        }
      }
    }
  }
</style>
