<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2023-02-09 16:36:47
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2023-02-13 19:26:11
 * @FilePath: \yuan-huoling-browser\src\components\tableBtn\tableBtn.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Descripttion: 表格按钮
 * @Author: tqh
-->
<template>
  <YaTooltip
    placement="top"
    trigger="hover"
    :content="title"
    :enterable="false"
    :hide-after="0"
  >
    <span class="img-icon">
      <img v-if="type == 1" src="../../assets/image/collection/edit.png" />
      <img v-if="type == 2" src="../../assets/image/collection/del.png" />
      <img v-if="type == 3" src="../../assets/image/collection/stop.png" />
      <img :class="{ 'disabeld': disabeld}" v-if="type == 16" src="../../assets/image/collection/disstop.png" />
      <img v-if="type == 4" src="../../assets/image/collection/loading.gif" />
      <img v-if="type == 5" src="../../assets/image/collection/end.png" />
      <img :class="{ 'disabeld': disabeld}" v-if="type == 15" src="../../assets/image/collection/disend.png" />
      <img v-if="type == 6" src="../../assets/image/collection/cancel.png" />
      <img v-if="type == 7" src="../../assets/image/collection/img6.png" />
      <img v-if="type == 8" src="../../assets/imgs/do.png" />
      <img v-if="type == 9" src="../../assets/imgs/add.png" />
      <img v-if="type == 10" src="../../assets/imgs/liwu.png" />
      <img v-if="type == 11" src="../../assets/imgs/back.png" />
      <img v-if="type == 12" src="../../assets/imgs/right.png" />
      <img v-if="type == 13" src="../../assets/imgs/through.png" />
      <img v-if="type == 14" src="../../assets/imgs/edit.png" />
    </span>
  </YaTooltip>
</template>
<script setup lang="ts" name="TableBtns">
import { ref, defineProps, watch } from "vue";
interface props {
  imgUrl?: String; // 图片路径
  title?: String; // 标题
  type?: String | Number; // 类型 1：编辑,2: 删除,3: 开始执行,4: 暂停，5：继续执行，6：取消,7:入库
  disabeld?: boolean
}
const { imgUrl = "", title = "",disabeld = false } = defineProps<props>();
</script>
<style lang="scss">
.img-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  position: relative;
  top: 5px;
  margin-right: 18px;
  img {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  .disabeld {
    cursor: not-allowed;
  }
}
</style>
