<template>
  <div
    class="ya-box"
    :class="{ 'ya-active-border': checkedCount.includes(item.id) }"
    v-for="(item, i) in data"
    :key="i"
    @click="handlerToSelect(item.id)"
  >
    <div class="ya-top">
      <img
        class="ya-img"
        v-if="item.switch && !checkedCount.includes(item.id)"
        src="../../../assets/image/icon-open.png"
        alt=""
      />
      <img
        v-if="item.switch && checkedCount.includes(item.id)"
        class="ya-img"
        src="../../../assets/image/icon-selected.png"
        alt=""
      />
      <img
        class="ya-img"
        v-if="!item.switch"
        src="../../../assets/image/icon-close.png"
        alt=""
      />
      <div class="ya-right">
        <div class="ya-right-top">
          {{ item.engineName || '-'
          }}<el-switch
            v-if="buttons.has('开关')"
            v-model="item.switch"
            @change="handlerChangeStates(item)"
          ></el-switch>
        </div>
        <div class="ya-right-middle">
          <span class="ya-ip">{{ item.hostIp || '-' }}</span
          ><span class="ya-version"
            ><img src="../../../assets/image/icon-version.png" alt="" />版本 {{
              item.version || '-'
            }}</span
          >
          <!-- <span class="ya-upgrade" @click="handlerToUpgrade(data)">升级</span> -->
        </div>
        <div class="ya-right-bottom">
          <div class="ya-id">ID：{{ item.engineId || '-' }}</div>
          <div class="ya-net">{{ item.networkAreaDesc || '-' }}</div>
        </div>
      </div>
    </div>
    <div class="ya-middle">
      <div class="ya-progress">
        <span class="ya-text">CPU（{{ (item.cpu)+'%' }}）</span>
        <YaProgressbar
          :show-text="false"
          :percentage="item.cpu"
        ></YaProgressbar>
      </div>
      <div class="ya-progress">
        <span class="ya-text">内存（{{ (item.memory)+'%' }}）</span>
        <YaProgressbar
          :show-text="false"
          :percentage="item.memory"
        ></YaProgressbar>
      </div>
      <div class="ya-progress">
        <span class="ya-text">磁盘（{{ (item.disk)+'%' }}）</span>
        <YaProgressbar
          :show-text="false"
          :percentage="item.disk"
        ></YaProgressbar>
      </div>
    </div>
    <div class="ya-bottom">
      <div
        class="ya-bottom-left"
        :class="{
          'ya-abnormal': item.engineStatus == 'error',
          'ya-success':
            item.engineStatus == 'upgrading' ||
            item.engineStatus == 'running' ||
            item.engineStatus == 'starting',
        }"
      >
        <img  v-if="item.engineStatus == 'error'" src="../../../assets/image/icon-abnormal.png" alt="">
        <img  v-if="item.engineStatus == 'upgrading'"  src="../../../assets/image/icon-upgrade.png" alt="">
        <img v-if="item.engineStatus == 'running'"  src="../../../assets/image/icon-run.png" alt="">
        <img v-if="item.engineStatus == 'starting'"  src="../../../assets/image/icon-init.png" alt="">
        <img v-else src="../../../assets/image/icon-leisure.png" alt="" />
        {{ item.engineStatusDesc || '-' }}
      </div>
      <div class="ya-bottom-right">
        <span
          v-if="buttons.has('编辑')"
          class="ya-detail"
          @click="handlerToEdit(item)"
          >编辑</span
        >
        <span
          v-if="buttons.has('删除')"
          class="ya-del"
          @click="handlerToDelBlock(item)"
          >删除</span
        >
        <img
          v-if="buttons.has('详情')"
          src="../../../assets/image/icon-go.png"
          alt=""
          @click="handlerLookDetail(item)"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, defineEmits, defineExpose, ref } from 'vue';
const { data, buttons } = defineProps({
  data: Array,
  buttons: Array,
});
const emit = defineEmits([
  'handlerToEdit',
  'handleChangeCheck',
  'handlerChangeStates',
  'handlerLookDetail',
  'handlerToDelBlock',
  'handlerToUpgrade',
]);
//编辑事件
const handlerToEdit = (data) => {
  emit('handlerToEdit', data);
};
//传递给父组件的事件，根据父组件传递来的全选按钮的值来进行操作
const childEvent = (state?) => {
  checkedCount.value = state
    ? data.map((item) => {
        return item.id;
      })
    : [];
};
//选中的数据的标识符组合
const checkedCount: any = ref([]);
//选中的事件
const handlerToSelect = (i) => {
  if (checkedCount.value?.includes(i)) {
    let index = checkedCount.value?.findIndex((item) => item == i);
    checkedCount.value.splice(index, 1);
  } else {
    checkedCount.value.push(i);
  }
  emit('handleChangeCheck', checkedCount.value.length);
};
//开关的事件
const handlerChangeStates = (data) => {
  emit('handlerChangeStates', data);
};
//详情按钮的事件
const handlerLookDetail = (data) => {
  emit('handlerLookDetail', data);
};
//删除按钮的事件
const handlerToDelBlock = (data) => {
  emit('handlerToDelBlock', data);
};
//升级按钮的事件
const handlerToUpgrade = (data) => {
  emit('handlerToUpgrade', data);
};
defineExpose({
  childEvent,
  checkedCount,
});
</script>
<style lang="scss" scoped>
.ya-box {
  width: calc((100% - 48px) / 3);
  background: rgba(70, 127, 234, 0);
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 16px;
  box-sizing: border-box;
  margin-bottom: 24px;
  &:nth-child(3n-1) {
    margin: 0px 24px;
    margin-bottom: 24px;
  }
  .ya-top {
    display: flex;
    .ya-img {
      width: 60px;
      height: 60px;
      margin-right: 16px;
      border-radius: 6px;
    }
    .ya-right {
      flex: 1;
      .ya-right-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        font-weight: 500;
        color: var(--el-text-color-primary);
        line-height: 22px;
        ::v-deep .el-switch {
          height: auto;
        }
      }
      .ya-right-middle {
        display: flex;
        align-items: center;
        font-size: 14px;
        margin: 8px 0px;

        .ya-ip {
          color: var(--el-text-color-primary);
        }
        .ya-version {
          color: var(--el-text-color-placeholder);
          margin-left: 12px;
          img {
            width: 14px;
            height: 11px;
            margin-right: 4px;
          }
        }
        .ya-upgrade {
          margin-left: 12px;
          color: var(--el-color-primary);
          text-decoration: underline;
          cursor: pointer;
        }
      }
      .ya-right-bottom {
        display: flex;
        margin-bottom: 12px;
        .ya-id {
          border-radius: 10px;
          color: #fe7f09;
          border: 1px solid #fe7f09;
          padding: 0px 10px;
          box-sizing: border-box;
          margin-right: 12px;
        }
        .ya-net {
          background: rgba(0, 149, 255, 0.1);
          border-radius: 10px;
          padding: 0px 10px;
          color: var(--el-color-primary);
        }
      }
    }
  }
  .ya-middle {
    display: flex;
    flex-wrap: wrap;
    padding: 16px 0px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    .ya-progress {
      width: 50%;
      display: flex;
      &:not(:last-child) {
        margin-bottom: 8px;
      }
      .ya-text {
        font-size: 14px;
        color: var(--el-text-color-regular);
        line-height: 20px;
      }
      ::v-deep .el-progress {
       flex: 1;
       margin-right: 12px;
      }
    }
  }
  .ya-bottom {
    display: flex;
    justify-content: space-between;
    padding-top: 16px;
    .ya-bottom-left {
      display: flex;
      align-items: center;
      color: rgba(0, 0, 0, 0.4);
      img {
        width: 12px;
        height: 12px;
        margin-right: 8px;
      }
    }
    .ya-abnormal {
      color: var(--el-color-error);
    }
    .ya-success {
      color: var(--el-color-primary);
    }
    .ya-bottom-right {
      display: flex;
      align-items: center;
      line-height: 20px;
      span {
        margin-right: 16px;
      }
      .ya-detail {
        cursor: pointer;
        color: var(--el-color-primary);
      }
      .ya-del {
        cursor: pointer;
        color: #ec5e42;
      }
      img {
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
    }
  }
}
.ya-active-border {
  border: 1px solid var(--el-color-primary);
}
</style>
