<script setup lang="ts">
import { ref } from "vue";

const value = ref("");
const showList = ref(false);
const handlerShowList = () => (showList.value = true);
const mock_list = [
  {
    title: "任务审批管理",
    data: [
      {
        title: "某某企业名称占位-1月拜访计划计划",
      },
      {
        title: "某某企业名称占位符占位占位-12月拜访计划计划",
      },
      {
        title: "某某企业-某某事业部-第四季度拜访计划计划",
      },
    ],
  },
  {
    title: "任务终审管理",
    data: [
      {
        title: "某某企业名称占位-1月拜访计划计划",
      },
      {
        title: "某某企业名称占位符占位占位-12月拜访计划计划",
      },
      {
        title: "某某企业名称占位符占位占位-12月拜访计划计划",
      },
    ],
  },
];
</script>


<template>
  <div class="input_wrap">
    <div class="ip_box">
        <img src="../../assets/images/IP.png" alt="">
      </div>
    <div class="input_box">
      <n-input
        v-model:value="value"
        placeholder="搜索任务ID、任务名称、提报人、拜访终端"
        type="text"
        @mousedown="handlerShowList"
      >
        <template #prefix>
          <SvgIcon name="magnifying-1" size="18"></SvgIcon>
        </template>
      </n-input>
    </div>
    <div class="list_box" v-show="showList">
      <div
        class="list_classfiy_item"
        v-for="(item, index) in mock_list"
        :key="index"
        :style="(index == mock_list.length-1)?'':'border-bottom:1px solid #e4e4e4'"
      >
        <div class="list_title">{{ item.title }}</div>
        <div class="list_item" v-for="(sitem,sindex) in item.data" :key="sindex">
          <SvgIcon name="task-icon" size="16"></SvgIcon>
          <a style="margin-left: 5px">{{ sitem.title }}</a>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.input_wrap {
  width: 60%;
  position: absolute;
  top: 20%;
  left: 20%;
  .ip_box{
    z-index: 0;
    position: relative;
    left: calc(50% - 40px);
    top: 30px;
    img{
      width: 80px;
      height: 80px;
    }
  }

  .input_box {
    z-index: 1;
    background: #ffffff;
    border: 1px solid #507afd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 12px 12px 0px rgba(80, 122, 253, 0.15),
      0px 0px 0px 0.5px #d4e3fc;
  }
  .list_box {
    background: #fefefe;
    border: 1px dashed #f4f4f4;
    border-radius: 8px;
    box-shadow: 0px 12px 12px 0px rgba(80, 122, 253, 0.15);
    margin-top: 15px;
    padding: 8px 16px;
    .list_classfiy_item {
      .list_title {
        font-size: 12px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        color: #999999;
        line-height: 17px;
        margin: 10px 0 10px 5px;
      }
      .list_item {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        margin-bottom: 10px;
      }
    }
  }
}
:deep(.n-input .n-input-wrapper) {
  margin: 8px;
}
</style>