<template>
  <div class="policy-container flx-center">
    <div class="container">
      <img :src="imgUrl" height="560" style="width: 100%" />
      <el-input v-model="searchValue" placeholder="搜索关键词" @change="search">
        <template #suffix>
          <el-icon size="24" style="cursor: pointer" @click="search"><Search /></el-icon>
        </template>
      </el-input>
      <div class="flx-justify-between" style="margin-bottom: 64px">
        <policy title="南山就业政策公告" :list="policyList" is-more />
        <policy title="南山就业活动" :list="policyList" is-more />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { imgUrl } from '@/assets/imgUrl'
import { Search } from '@element-plus/icons-vue'
import policy from '@/components/policy.vue'

const policyList = [
  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' },
  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' },
  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' },
  { detail: '深圳市创业带动就业补贴办事指南' },
  { detail: '深圳市创业带动就业补贴办事指南' },
  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' },
  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' },
  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' },
  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' },
  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' }
]
const searchValue = ref()

const search = () => {
  console.log(searchValue.value)
}
</script>

<style lang="scss" scoped>
.policy-container {
  width: 100%;
  .container {
    width: 1316px;
    text-align: center;

    img {
      border-radius: 12px;
      margin: 17px 0 19px;
    }

    .el-input {
      width: 869px;
      height: 62px;
      margin-bottom: 24px;
      :deep(.el-input__wrapper) {
        border-radius: 29px;
        padding: 0 45px;
      }
    }
  }
}
</style>
