<template>
  <div class="dialog" v-if="visible && info">
    <div class="dialog-main">
      <div class="dialog-title">{{ info.name }}</div>

      <div class="dialog-body">
        <!-- <div class="dialog-score" v-if="info.result">
          <div class="text" :style="{ color: info.color }">
            {{ info.result }}
          </div>
          <div class="count">{{ info.userValue }}</div>
        </div> -->

        <!-- <div class="dialog-text" v-if="info.text">
          {{ info.text }}
        </div>

        <div class="dialog-box" v-if="!info.text">
          <div
            v-for="(item, index) in [
              info.explanationAnalyzeResult.advicesList,
              info.explanationAnalyzeResult.detailsList,
            ].flat(Infinity)"
            :key="index"
          >
            <div class="dialog-box-title" :style="{ margin: 0 }">
              {{ item.name }}
            </div>
            <div
              class="dialog-box-item"
              v-for="(value, idx) in item.valuesList"
              :key="idx + value"
            >
              {{ value }}
            </div>
          </div>
        </div> -->


        <div class="dialog-text">xxxxxxxxxxxxxxx</div>
      </div>

      <div class="dialog-btn" @click="onClose">知道了</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  props: {
    visible: {
      type: Boolean,
      default: false,
    },

    info: {
      type: Object,
      default: null,
    },
  },

  methods: {
    onClose() {
      console.log("onClose: xxxxxxxxx", this.info);
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style scoped lang="scss">
.dialog {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);

  .dialog-main {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    display: flex;
    flex-direction: column;
    // background-color: red;

    width: 380rpx;
    // height: 548rpx;
    // min-height: 363rpx;
    // max-height: 548rpx;
    background: #f5f7fb;
    border-radius: 25rpx;
    box-sizing: border-box;
    padding: 25rpx;

    .dialog-title {
      color: #000000;
      font-size: 20rpx;
      text-align: center;
      font-weight: bolder;
      padding-bottom: 25rpx;
      border-bottom: 1rpx solid #d9d9d9;
    }

    .dialog-body {
      //   padding: 25rpx;
      margin-top: 25rpx;
      padding-bottom: 25rpx;
      // overflow-y: scroll;
      flex: 1;

      .dialog-score {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-bottom: 25rpx;
        // margin-top: 25rpx;
        // display: none;

        .text {
          font-size: 23rpx;
          color: #5ea2f0;
          font-weight: bold;
          line-height: 1;
        }

        .count {
          font-size: 18rpx;
          color: #343434;
          line-height: 1;
          margin-top: 3rpx;
        }
      }

      .dialog-text {
        font-size: 16rpx;
        color: #343434;
        line-height: 21rpx;
        // margin: 25rpx 0;
        letter-spacing: 3rpx;
        // margin-top: 25rpx;
        // background-color: red;
      }

      .dialog-box {
        overflow-y: scroll;
        max-height: 600rpx;
        // padding-top: 25rpx;
        // background-color: red;
        .dialog-box-title {
          font-size: 18rpx;
          color: #000000;
          font-weight: bolder;
          margin-top: 25rpx;
        }

        .dialog-box-item {
          font-size: 16rpx;
          color: #515f65;
          line-height: 21rpx;
          letter-spacing: 3rpx;
          margin-top: 6rpx;
        }
      }
    }

    .dialog-btn {
      height: 50rpx;
      background: #5ea2f0;
      border-radius: 15rpx;
      font-size: 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      &:active {
        opacity: 0.4;
      }
    }
  }
}
</style>
