<template>
  <!-- <div style="display: flex; gap: 10px; align-items: center">
    <el-popover
      :width="300"
      :visible="null"
      popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
    >
      <template #reference>
        <el-text
          style="font-weight: bold; text-align: center; display: block"
          type="primary"
          color="rgb(236, 245, 255)"
        >
          {{ computedVal }}
        </el-text>
      </template>

      <template #default>
        <div class="demo-rich-conent" style="display: flex; gap: 2px; flex-direction: column">
          <div class="demo-progress">
            <el-progress
              type="dashboard"
              :width="100"
              :percentage="percentage"
              :color="colors"
              :format="customFormat"
            />
          </div>

          <el-row :gutter="6">
            <el-col :span="12" :xs="24" :sm="12" :md="6" class="elColInfo">
              <el-statistic title="绑定ID" :value="null">
                <template #suffix>
                  <el-tag size="default" type="primary">{{ moduleId }}</el-tag>
                </template>
              </el-statistic>
            </el-col>

            <el-col :span="12" :xs="24" :sm="12" :md="12" class="elColInfo">
              <el-statistic title="节点名称" :value="null">
                <template #suffix>
                  <el-tag size="default" type="success">{{ modeName }}</el-tag>
                </template>
              </el-statistic>
            </el-col>

            <el-col :span="12" :xs="24" :sm="12" :md="6" class="elColInfo">
              <el-statistic title="类型" :value="null">
                <template #suffix>
                  <el-tag size="default" type="primary">{{ moduleType }}</el-tag>
                </template>
              </el-statistic>
            </el-col>
          </el-row>
        </div>
      </template>
    </el-popover>

    <el-tag type="primary">{{ modeName }}</el-tag>
  </div> -->

  <el-row v-if="location === 'top'">
    <el-col :span="24" class="flex-center">
      <el-tag type="primary" size="small" style="opacity: 0.9">
        <el-text type="primary" style="max-width: 65px" size="small" truncated>
          {{ modeName }}
        </el-text>
      </el-tag>
    </el-col>
  </el-row>

  <el-row justify="center">
    <el-col :span="12" class="flex-center" v-if="location === 'left'">
      <el-tag type="primary" size="small" style="opacity: 0.9">
        <el-text type="primary" style="max-width: 65px" size="small" truncated>
          {{ modeName }}
        </el-text>
      </el-tag>
    </el-col>

    <el-col :span="12" class="flex-center">
      <div style="display: flex; gap: 10px; align-items: center">
        <el-popover
          :width="300"
          :disabled="true"
          popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
        >
          <template #reference>
            <el-text style="font-weight: bold; text-align: center; display: block">
              {{ computedVal }}
            </el-text>
          </template>

          <template #default>
            <div class="demo-rich-conent" style="display: flex; gap: 2px; flex-direction: column">
              <div class="demo-progress">
                <el-progress
                  type="dashboard"
                  :width="100"
                  :percentage="percentage"
                  :color="colors"
                  :format="customFormat"
                />
              </div>

              <el-row :gutter="6">
                <el-col :span="12" :xs="24" :sm="12" :md="6" class="elColInfo">
                  <el-statistic title="绑定ID" :value="null">
                    <template #suffix>
                      <el-tag size="default" type="primary">{{ moduleId }}</el-tag>
                    </template>
                  </el-statistic>
                </el-col>

                <el-col :span="12" :xs="24" :sm="12" :md="12" class="elColInfo">
                  <el-statistic title="节点名称" :value="null">
                    <template #suffix>
                      <el-tag size="default" type="success">{{ modeName }}</el-tag>
                    </template>
                  </el-statistic>
                </el-col>

                <el-col :span="12" :xs="24" :sm="12" :md="6" class="elColInfo">
                  <el-statistic title="类型" :value="null">
                    <template #suffix>
                      <el-tag size="default" type="primary">{{ moduleType }}</el-tag>
                    </template>
                  </el-statistic>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-popover>
      </div>
    </el-col>

    <el-col :span="12" class="flex-center" v-if="location === 'right'">
      <el-tag type="primary" size="small" style="opacity: 0.9">
        <el-text type="primary" style="max-width: 65px" size="small" truncated>
          {{ modeName }}
        </el-text>
      </el-tag>
    </el-col>
  </el-row>

  <el-row v-if="location === 'bottom'">
    <el-col :span="24" class="flex-center">
      <el-tag type="primary" size="small" style="opacity: 0.9">
        <el-text type="primary" style="max-width: 65px; opacity: 1" size="small" truncated>
          {{ modeName }}
        </el-text>
      </el-tag>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { onMounted, ref, computed, onUnmounted, watch } from 'vue';
import { Minus, Plus, ElementPlus } from '@element-plus/icons-vue';
import { useNodeByModelsStore } from '@/components/mt-edit/store/nodeByModels';
import emitter from '@/utils/emitter';

const nodeByModelsStore = useNodeByModelsStore();

onMounted(() => {
  loadingModuleById();
  saveodeByModels();
});

onUnmounted(() => {
  console.log('组件卸载');
  deleteByModels();
  emitter.off(props.definitionItemJson.id);
});

const props = defineProps({
  moduleType: {
    type: String,
    default: '--'
  },
  moduleId: {
    type: String,
    default: '--'
  },
  definitionItemJson: {
    type: Object,
    default: () => ({})
  },
  location: {
    type: String,
    default: 'bottom'
  }
});

console.log('itemjson:', props.definitionItemJson.id);

function saveodeByModels() {
  if (props.moduleId == '' || props.moduleId == undefined || props.moduleId == '--') return;
  nodeByModelsStore.saveOrUpdate(props.moduleId, props.definitionItemJson.id);
}

function deleteByModels() {
  if (props.moduleId == '' || props.moduleId == undefined || props.moduleId == '--') return;
  nodeByModelsStore.delete(props.moduleId, props.definitionItemJson.id);
}

watch(
  () => props.moduleId,
  (newVal, oldVal) => {
    loadingModuleById();
    nodeByModelsStore.change(newVal, oldVal, props.definitionItemJson.id);
  }
);

emitter.on(props.definitionItemJson.id, (value) => {
  console.log('触发事件', value);
  loadingModuleById();
});

let moduleUnit = ref<string>();
let modeName = ref<string>();
let percentage = ref<number>();

function loadingModuleById() {
  if (
    props.moduleId !== '' &&
    props.moduleId !== undefined &&
    props.moduleId !== '--' &&
    window.globalData[props.moduleId]
  ) {
    let module = window.globalData[props.moduleId];
    modeName.value = module.node.name;
    percentage.value = module.double;
    moduleUnit.value = module.node.unit;
  }
}

// 计算属性——既读取又修改
let computedVal = computed({
  // 读取
  get() {
    if (percentage.value == undefined && moduleUnit.value == undefined) return '--';
    return percentage.value + '' + moduleUnit.value;
  },
  // 修改
  set() {}
});

const customFormat = () => {
  // 返回您自定义的单位和数值
  if (percentage.value == undefined && moduleUnit.value == undefined) return '--';
  return percentage.value + '' + moduleUnit.value;
};

const colors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 }
];
</script>

<style scoped>
/* 设置固定宽度和文本省略 */
.ellipsis-tag {
  width: 65px; /* 设置固定宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  align-items: center; /* 水平居中 */
}

.flex-center {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
}

.el-statistic {
  /* 控制文字大小 */
  --el-statistic-content-font-size: 16px;
}

.elColInfo {
  text-align: center;
}

:deep(.el-progress__text) {
  /* 控制文字大小 */
  font-size: 16px !important;
}

.demo-progress .el-progress--line {
  margin-bottom: 15px;
  max-width: 500px;
}
.demo-progress .el-progress--circle {
  margin-right: 15px;
}
.fontStyle {
  color: rgb(51, 126, 204);
}
h3 {
  margin: 0;
  padding: 0;
  text-align: center;
  /* padding-top: 5px;
  padding-bottom: 5px; */
}
.demo-radius .radius {
  height: 28px;
  min-width: 66px;
  width: fit-content;
  border: 2px solid rgba(51, 125, 204, 0.205);
  border-radius: 0;
  padding: 0 8px;
  box-sizing: border-box;
}
</style>
