<template>
  <div class="list-item">
    <div class="item-box">
      <div class="item-left">
        <div class="icon-box">
          <Icon
            size="14"
            :icon="props.item.icon"
            style="font-size: 50px; color: #1c8dff"
            v-if="props.item && props.item.icon"
          />
          <IconFontSymbol v-else icon="tianshenpi" font-size="50" />
        </div>
      </div>
      <div class="item-right">
        <div class="template-box">
          <span class="item-form-name">{{ props.item.name }}</span>
          <span class="item-title">{{ props.item.code }}</span>
        </div>
        <div class="item-remark">备注：{{ item.remark }}</div>
      </div>
      <div class="fixed-checked">
        <slot name="pick"></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import IconFontSymbol from '/@/components/IconFontSymbol/Index.vue';
  import { Icon } from '/@/components/Icon';
  let props = withDefaults(
    defineProps<{
      item: { name: string; code: string; remark: string; icon: string };
      width: string;
    }>(),
    {
      item: () => {
        return { name: '', code: '', remark: '', icon: '' };
      },
      width: '258px',
    },
  );
</script>

<style lang="less" scoped>
  @custom-color: @primary-color;
  @bg-color: #ffffff;

  .list-item {
    width: v-bind('props.width');
    height: 115px;
    background: @bg-color;
    border-radius: 16px;
    margin: 0 13px 10px 0;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #f3f3f3;

    &:nth-child(4n) {
      margin-right: 0;
    }

    &:hover {
      border: 1px solid @custom-color;

      :deep(.ant-checkbox-inner) {
        border-color: @custom-color;
      }
    }

    .item-box {
      display: flex;
      padding: 10px;
      position: relative;
      height: 100%;
      align-items: center;

      .item-left {
        margin-right: 20px;
        height: 100%;

        .icon-box {
          width: 90px;
          height: 100%;
          background: #e9f4ff;
          border-radius: 10px;
          font-size: 32px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .item-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        width: 100%;
        font-size: 14px;
        z-index: 9;
        overflow: hidden;
      }

      .fixed-checked {
        position: absolute;
        bottom: -20px;
        z-index: 1;
        right: -6px;
      }

      .fixed-icon {
        position: absolute;
        right: -44px;
        font-size: 99px;
        transform: rotate(-30deg);
        top: -44px;
        z-index: 0;
      }
    }
  }

  .template-box {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
  }

  .img-box {
    width: 100%;
    height: 100%;
  }

  :deep(.ant-checkbox-inner) {
    border-color: #ddd;
  }

  .picked {
    :deep(.ant-checkbox-inner) {
      border-color: @custom-color;
    }
  }

  :deep(.ant-checkbox-checked .ant-checkbox-inner) {
    background-color: @custom-color;
  }

  :deep(.ant-checkbox-checked::after),
  :deep(.ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover),
  :deep(.ant-checkbox:hover),
  :deep(.ant-checkbox-input:focus + .ant-checkbox-inner) {
    border-color: @custom-color;
  }

  .item-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    font-size: 14px;
    color: #636e80;
  }

  .item-remark {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #c3c8cf;
    margin-right: 23px;
  }

  .item-form-name {
    font-weight: bold;
    font-size: 14px;
    color: #262626;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
