<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2023-09-13 17:06:52
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2023-09-25 13:43:26
 * @FilePath: \yuan-asset-module-browser\src\views\collection\components\engineDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <ya-dialog :dialogProps="dialogProps" width="642px" :headerIcon="false">
      <template #content>
        <div class="ya-engine">
          <template v-for="child in engineInfo" :key="child.key">
            <div class="ya-status" v-if="child.slotName">
              <div class="ya-info-left">{{ child.label }}：</div>
              <div class="ya-info-right">
                <div>{{ child.value?.description||'-' }}</div>
                <div class="ya-cpu ya-block">CPU：{{ child.value?.cpu||'0%'}}</div>
                <div class="ya-memory ya-block">内存：{{ child.value?.memory ||'0%'}}</div>
                <div class="ya-disk ya-block">硬盘：{{ child.value?.disk ||'0%'}}</div>
              </div>
            </div>
            <div class="ya-info" :class="{'ya-status':child.key=='engineDesc'}" v-if="!child.slotName && child.label">
              <div class="ya-info-left">{{ child.label }}：</div>
              <div class="ya-info-right">{{ child.value || '-' }}</div>
            </div>
            <ya-table
              class="ya-detail-table"
              v-if="!child.label"
              :column="engineColumn"
              :data="child.value ||[]"
            >
              <template #yaProgress="{item}">
                <YaProgressbar
                  :stroke-width="9"
                  :percentage="(item.progress||0)*1"
                >
                </YaProgressbar>
              </template>
            </ya-table>
          </template>
        </div>
      </template>
    </ya-dialog>
  </div>
</template>
<script lang="ts" setup>
import { defineProps,ref,defineExpose } from 'vue';
const { dialogProps } = defineProps({
  dialogProps: Object,
});
const engineColumn = [
  {
    prop: 'taskId',
    label: '任务ID',
    width:'200px'
  },
  {
    prop: 'progress',
    label: '进度',
    slotName: 'yaProgress',
  },
];
const engineInfo = ref([
  {
    key: 'engineId',
    label: '引擎ID',
    value: '',
  },
  {
    key: 'engineName',
    label: '引擎名称',
    value: '',
  },
  {
    key: 'hostIp',
    label: 'IP',
    value: '',
  },
  {
    key: 'authCode',
    label: '授权码',
    value: '',
  },
  {
    key: 'networkAreaDesc',
    label: '访问网络域',
    value: '',
  },
  {
    key: 'version',
    label: '当前版本',
    value: '',
  },
  {
    key: 'hostStatus',
    label: '引擎状态',
    slotName: 'yaEngineStatus',
    value: {},
  },
  {
    key: 'gmtModified',
    label: '更新时间',
    value: '更新时间',
  },
  {
    key: 'gmtCreate',
    label: '添加时间',
    value: '',
  },
  {
    key: 'engineDesc',
    label: '详细描述',
    value: '',
  }, 
  {
    key:'taskProgress',
    value: [],
  },
]);
defineExpose({
  engineInfo,
});
</script>
<style lang="scss" scoped>
::v-deep .el-button--primary {
  display: none;
}

.ya-engine {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 20px;
  color: var(--el-text-color-placeholder);

  .ya-info-right {
    color: var(--el-text-color-primary);
    flex: 1;
  }

  .ya-info {
    width: 50%;
    display: flex;
    margin-bottom: 24px;
  }

  .ya-status {
    width: 100%;
    display: flex;
    margin-bottom: 24px;

    .ya-info-right {
      display: flex;
      flex: 1;

      .ya-block {
        margin-left: 12px;
        padding: 2px 8px;
        text-align: center;
        line-height: 17px;
        border-radius: 10px;
        box-sizing: border-box;
        font-size: 12px;
      }

      .ya-cpu {
        background: rgba(0, 149, 255, 0.1);
        color: var(--el-color-primary);
      }
      .ya-memory {
        color: #59ac4a;
        background: rgba(89, 172, 74, 0.1);
      }
      .ya-disk {
        background: rgba(144, 88, 219, 0.1);
        color: #9058db;
      }
    }
  }
  .ya-detail-table {
    width: 100%;
    ::v-deep .el-progress-bar__outer{
      background-color: #EFEFEF;
    }
    ::v-deep .el-progress-bar__inner{
      background-color: #59ac4a;
    }
  }
}
</style>
