<template>
  <div class="evaluate">
    <!-- 标题区域 -->
    <div class="evaluate_title">
      <div class="title_text">用户评价</div>
      <img src="@/assets/images/33.png" />
    </div>

    <!-- 内容区域 -->
    <div class="evaluate_content">
      <!-- 左边图表区域 -->
      <div class="content_chart" ref="gaugeChart"></div>

      <!-- 右边评价列表区域 -->
      <div class="content_list">
        <!-- 每一条评价区域 -->
        <div
          class="item_box"
          v-for="(item, index) in evaluateList"
          :key="index"
        >
          <div class="box_img">
            <img
              src="https://pic.rmb.bdstatic.com/daca09fd4974fe3361289d3306db4d63.jpeg"
            />
          </div>
          <div class="box_info">
            <div class="info_name">{{ item.name }}</div>
            <div class="info_time">{{ item.time }}</div>
            <div class="info_detail">{{ item.content }}</div>
          </div>
        </div>
      </div>

      <!-- 右边查看详情区域 -->
      <div class="content_more" @click="handleClickDetail">
        查看详情
        <div class="more_icon"></div>
      </div>
    </div>
  </div>

  <!-- 评价列表弹窗区域 -->
  <Transition name="fade">
    <EvaluateDetailDialog v-if="showDetail" @closeDialog="closeDialog" />
  </Transition>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as Echarts from "echarts";
import EvaluateDetailDialog from "./evaluateDetailDialog.vue";

// 仪表图DOM元素
const gaugeChart = ref(null);

// 评价列表弹窗显示隐藏控制
const showDetail = ref<boolean>(false);

const evaluateList = ref([
  {
    name: "华志杰",
    time: "2024-01-24 15:15:02",
    content: "体验不错",
  },
  {
    name: "刘子麟",
    time: "2024-01-28 16:23:15",
    content: "一般",
  },
  {
    name: "夏文涛",
    time: "2024-03-24 12:15:08",
    content: "体验很好",
  },
]);

onMounted(() => {
  // 初始化仪表图
  initGaugeChart();
});

const initGaugeChart = () => {
  let myGaugeChart = Echarts.init(gaugeChart.value);
  // 仪表图配置
  const options = {
    series: [
      {
        type: "gauge",
        radius: "65%",
        min: 0,
        max: 100,
        splitNumber: 5,
        axisLine: {
          lineStyle: {
            width: 6,
            color: [
              [0.2, "#4A9EFF"],
              [0.4, "#4A9EFF"],
              [0.6, "#4A9EFF"],
              [0.8, "#4A9EFF"],
              [1, "#4A9EFF"],
            ],
            shadowColor: "#010319",
            shadowBlur: 10,
          },
        },
        pointer: {
          icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
          length: "52%",
          width: 20,
          offsetCenter: [0, "-30%"],
          itemStyle: {
            color: "auto",
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          color: "#8CA0A3",
          fontSize: 20,
          distance: -55,
          formatter: function (value: any) {
            if (value === 80) {
              return "优";
            } else if (value === 60) {
              return "良";
            } else if (value === 40) {
              return "中";
            } else if (value === 20) {
              return "差";
            }
            return "";
          },
        },
        title: {
          offsetCenter: [0, "75%"],
          fontSize: 17,
          color: "#8CA0A3",
          width: 97,
          height: 32,
          backgroundColor: "#091F36",
          borderRadius: 20,
        },
        detail: {
          fontSize: 30,
          offsetCenter: [0, "10%"],
          valueAnimation: true,
          color: "inherit",
        },
        data: [
          {
            value: 70,
            name: "体验指数",
          },
        ],
      },
    ],
  };
  myGaugeChart.setOption(options);
};

// 点击查看详情回调
const handleClickDetail = () => {
  showDetail.value = true;
};

// 自定义事件
const closeDialog = (data: boolean) => {
  showDetail.value = data;
};
</script>

<style lang="scss" scoped>
.evaluate {
  width: 100%;
  height: 100%;

  .evaluate_title {
    position: relative;
    width: 548px;
    height: 41px;
    line-height: 41px;

    .title_text {
      position: absolute;
      left: 15px;
      z-index: 1;
      font-size: 23.5px;
      font-weight: bold;
      color: #e0efff;
    }

    img {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 548px;
      height: 16px;
    }
  }

  .evaluate_content {
    position: relative;
    display: flex;
    margin-top: 35px;
    width: 548px;
    height: 295px;

    .content_chart {
      width: 285px;
      height: 295px;
    }

    .content_list {
      width: 263px;
      height: 265px;
      overflow-y: auto;

      .item_box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px;
        width: 253px;
        height: 70px;

        .box_img {
          width: 43px;
          height: 43px;
          border-radius: 50%;
          border: 3px solid #2b99ff;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .box_info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 190px;
          height: 70px;
          font-size: 16px;

          .info_name {
            font-size: 20px;
          }
          .info_time {
          }
          .info_detail {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }

    .content_more {
      position: absolute;
      right: 0;
      bottom: -10px;
      display: flex;
      align-items: center;
      height: 24px;
      font-size: 16px;
      color: #a8d5ff;
      cursor: pointer;

      .more_icon {
        margin-left: 14px;
        width: 23.5px;
        height: 23.5px;
        background-image: url(@/assets/images/right.png);
        background-size: 100% 100%;
      }
    }
  }
}
</style>
