<script setup lang="ts">
import { useCssModule } from 'vue';
import emptyImg from '@/assets/img/emptyImg.png';

const errorMsg = defineModel<string>('errorMsg', { default: ' - 更多任务期待您的创建 - ' });
const showButton = defineModel<boolean>('showButton', { default: false });
const imgSrc = defineModel<string>('imgSrc', { default: emptyImg });

const emit = defineEmits(['handle-click']);
const style = useCssModule();
</script>

<template>
  <el-empty>
    <template #image v-if="imgSrc">
      <slot>
        <!-- 如果放了图片，默认展示图片位置 -->
        <img :src="imgSrc" alt="" :class="style.img" />
      </slot>
    </template>
    <template #description>
      <slot name="description">
        <el-text>{{ errorMsg }}</el-text>
      </slot>
    </template>
    <el-button color="#71b73c" v-if="showButton" @click="emit('handle-click')" class="btn">
      <div style="color: #fff">+ 新建问卷</div>
    </el-button>
  </el-empty>
</template>

<style scoped lang="scss" module>
.img {
  width: 30vw;
  height: auto;
}

.btn {
  color: #fff;
  font-weight: 400;
  border-radius: 8px;
}
</style>
