<template>
  <div class="submitInfo">
    <div class="score-card">
      <div class="score">总评分 {{ score }}</div>

      <div class="score-ratelist">
        <div class="rate-item" v-for="(item, index) in categories" :key="index">
          <div class="rate-title">{{ item.label }}</div>
          <div
            class="rate-info"
            v-for="(k, kIndex) in item.children"
            :key="kIndex"
          >
            <div class="rate-text">
              <span class="name">{{ kIndex + 1 }}.{{ k.label }}</span>
              <span class="val not" v-if="!getValue(k.value) && isPreview"
                >未评分</span
              >
              <span class="val" v-else>{{ getValue(k.value) }}分</span>
            </div>

            <div class="rate-img" v-if="getImg(k.value).length > 0">
              <img
                v-for="(item, index) in getImg(k.value)"
                :key="index"
                :src="item"
                alt=""
                @click="preview(getImg(k.value), index)"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="remark-card" v-if="rateInfo.remark">
      <div class="title">考察结论</div>
      <div class="card">
        {{ rateInfo.remark }}
      </div>
    </div>

    <div class="img-card" v-if="rateInfo.img && rateInfo.img.length > 0">
      <div class="title">现场图片材料</div>
      <div class="card">
        <img
          v-for="(item, index) in rateInfo.img"
          :key="index"
          :src="item"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
import expert from "../mixins/expert";
import { ImagePreview } from "vant";
export default {
  name: "rateInfo",
  mixins: [expert],
  props: {
    info: {
      type: Array,
      default: () => {
        return [];
      }
    },
    rateInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    isPreview: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    score() {
      let list = [...this.categories];
      return list.reduce((total, current) => {
        return (
          total +
          current.children.reduce((tChild, cChild) => {
            return tChild + this.getValue(cChild.value);
          }, 0)
        );
      }, 0);
    }
  },
  methods: {
    getValue(key) {
      let info = [...this.info].find(item => {
        return item.type === key;
      });
      return info ? info.score || 0 : 0;
    },
    getImg(key) {
      let info = [...this.info].find(item => {
        return item.type === key;
      });
      return info ? info.img || [] : [];
    },
    preview(imgs, index) {
      ImagePreview({
        images: imgs,
        startPosition: index
      });
    }
  }
};
</script>

<style lang="less" scoped>
.submitInfo {
  padding: 0 16px;
}
.score-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;

  .score {
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    line-height: 28px;
    line-height: 60px;
    text-align: center;
    background: #ffcf6a;
  }

  .score-ratelist {
    padding: 20px;

    .rate-item {
      .rate-title {
        font-size: 15px;
        color: #00000080;
        line-height: 24px;
        padding-bottom: 8px;
      }

      .rate-info {
        .rate-text {
          display: flex;
          justify-content: space-between;
          .name {
            font-size: 15px;
            font-weight: bold;
            color: #313233;
            line-height: 24px;
          }
          .val {
            font-size: 15px;
            color: #313233;
            line-height: 24px;

            &.not {
              font-size: 13px;
              color: #c8c9cc;
            }
          }
        }
        padding-bottom: 16px;

        .rate-img {
          display: flex;
          justify-content: flex-end;

          img {
            width: 44px;
            height: 44px;
            border-radius: 8px;
            margin-left: 5px;
            margin-top: 5px;
          }
        }
      }
    }
  }
}

.remark-card {
  .title {
    font-size: 20px;
    font-weight: bold;
    color: #000000;
    line-height: 30px;
    padding: 36px 0 10px;
  }

  .card {
    padding: 20px;
    background-color: #fff;
    font-size: 16px;
    color: #000000;
    line-height: 26px;
    border-radius: 8px;
  }
}

.img-card {
  .title {
    font-size: 20px;
    font-weight: bold;
    color: #000000;
    line-height: 30px;
    padding: 36px 0 10px;
  }

  .card {
    img {
      display: block;
      border-radius: 8px;
      width: 100%;
      margin-bottom: 12px;
    }
  }
}
</style>

<style></style>
