<template>
  <div class="pen_ink">
    <el-input
      v-model="search_input"
      :prefix-icon="Search"
      placeholder="搜索模板"
    />
    <div class="grid_bg">
      <template v-for="(item,i) in pen_ink_list" :key="item.key">
        <div class="list" v-if="is_show(item.name)" @click="() => changeAi(item,i)">
          <div class="icon">
            <el-image
              style="width: 24px; height: 24px"
              :src="item.icon"
              fit="fill"
            />
          </div>
          <div data-v-4a916bec="" class="title" v-text="item.name"></div>
          <div data-v-4a916bec="" class="sub_title" v-text="item.sub_text"></div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
// AI写作
import { Search } from '@element-plus/icons-vue';
import { ref, defineEmits } from 'vue';

import { pen_ink_list } from './data';
const search_input = ref('');
const emits = defineEmits(['closeType','saveData'])


const is_show = i_name => {
  const rex = new RegExp(search_input.value);
  return rex.test(i_name);
};

const changeAi = (item, i) => {
    emits("closeType");
    emits("saveData",{...item, index: i, com_type: 'pen_ink'});
}
</script>

<style scoped>
.pen_ink {
  padding: 2px 10px 10px;
  overflow: hidden;
}

.grid_bg {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding-bottom: 20px;
  font-size: 14px;
  padding: 5px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.grid_bg::-webkit-scrollbar{
    width: 0;
}

.icon {
  background: #fff;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04),
    0 4px 10px rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04), 0 4px 10px rgba(0, 0, 0, 0.08);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
}

.list {
  font-size: 14px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  min-height: 145px;
  min-width: 150px;
  padding: 10px 20px;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02), 0 0px 5px rgba(0, 0, 0, 0.04);
}

.title {
  height: 22px;
  line-height: 22px;
  font-size: 14px;
  font-weight: 700;
  color: #4b4b4b;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 10px;
}

.sub_title{
    line-height: 18px;
    font-size: 12px;
    color: #8e8e8e;
    margin-top: 10px;
}
</style>
