<script lang="ts" setup>
import { IconError, IconSuccess } from '@computing/opendesign-icons';
import { PropType } from 'vue';
// 样式已经在全局引入了，具体可以查看no-wrap-popover.scss
// 根据自己需要可以另外补充样式
interface IPopoverListdata {
  // 是否有前置图标(校验正确或者错误的图标)
  icon?: true;
  // 是否开启安全等级 指示器
  security?: boolean;
  // 安全等级描述 强/中/弱
  securityDescription?: string;
  // 指示器的背景颜色
  circleAndLineStyles?: string[];
  // 指示器的强、中、弱的文本颜色
  descriptionTextColor?: string,
  label?: string;
  // 校验结果 控制展示正确和错误图标
  state?: false;
  // 其他的
  [propName: string]: any;
}

const props = defineProps({
  data: {
    type: Array as PropType<IPopoverListdata[]>,
    required: true,
    default: () => {
      return [];
    },
  },
});
</script>

<template>
  <div class="povoer-content">
    <div v-for="(item, index) in props.data" :key="index" class="item">
      <span class="icon-box">
        <el-icon v-if="item.icon">
          <IconError v-show="!item.state" />
          <IconSuccess v-show="item.state" />
        </el-icon>
      </span>
      <span class="label">{{ item.label }}</span>
      <div v-if="item.security && item.circleAndLineStyles" class="safety-level-indicator">
        <!-- 遍历的是一个数字，所以i是从1开始的 -->
        <span v-for="i in 4" :key="i" class="level-item">
          <!-- 第二个圆圈开始要跟随前一段line的颜色 -->
          <span
            v-if="i >= 2"
            class="circle"
            :style="item.circleAndLineStyles.length > 0 ? item.circleAndLineStyles[i - 2] : ''"
          ></span>
          <span
            v-else
            class="circle"
            :style="item.circleAndLineStyles.length > 0 ? item.circleAndLineStyles[i - 1] : ''"
          ></span>
          <span
            v-if="i !== 4"
            class="line"
            :style="item.circleAndLineStyles.length > 0 ? item.circleAndLineStyles[i - 1] : ''"
          ></span>
        </span>
        <span class="level-description" :style="'color:' + item.descriptionTextColor">
          {{ item.securityDescription }}
        </span>
      </div>
    </div>
  </div>
</template>
