<template>
  <div class="copyright">
    <div class="copyHead">1</div>
    <div class="copyBody">2</div>
    <div class="searchInput">
      <el-input  size="large" v-model="search.input" placeholder="请输入关键词">
        <template #suffix>
            <el-icon class="fileIcon" @click="fileClick"><VideoCameraFilled /></el-icon>
        </template>
        <template #append>搜 索</template>
      </el-input>
      <el-upload
        v-if="showUpLoad"
        class="upload_video_image"
        drag
        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        multiple
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          将文件拖拽至此处或<em>点击上传</em>
        </div>
      </el-upload>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const showUpLoad = ref(false);
const search = ref({
  input: '',
});

const fileClick = () => {
    showUpLoad.value = !showUpLoad.value;
}
</script>

<style scoped>
.copyright {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  flex-direction: column;
}

.searchInput{
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 40em;
    position: absolute;
}

.upload_video_image{
    margin-top: 1em;
}

.copyBody {
  flex: 1;
}

.copyHead {
  height: 200px;
  flex-basis: 200px;
  flex-shrink: 0;
}
.fileIcon{
    cursor: pointer;
}
</style>

<style>
.copyright .el-input-group__append{
    color: #fff;
    cursor: pointer;
    background-color: #4e6ef2;
}
</style>
