<template>
  <div class="c-evaluate-warp">
    <div class="evaluate-warp-top">
      <div class="user-evaluate">
        <div class="score">{{ score }}</div>
        <div class="score-tips">
          <div class="tips">用户评价</div>
          <div class="score-val"><el-rate v-model="score" :allow-half="true" :colors="colors" size="large" :disabled="true" /></div>
        </div>
      </div>

      <div v-for="(n, index) in totalList" :key="n.name" class="top-tag-btn" @click="selectLabel(n.name)">
        <div class="tag-btn-warp">
          <div class="tag-btn-pos" :class="currentlabel != n.name ? 'normal' : 'act'">
            <span class="label-title">{{ n.title || '--' }}</span>
            <span class="label-num">{{ n.num || 0 }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="user-do-warp">
      <div class="do-title">用户评价</div>
      <div class="do-date"><el-rate v-model="score" allow-half="true" :colors="colors" size="large" :disabled="false" /></div>
      <div class="do-title">评价内容</div>
      <div class="do-fill">
        <el-input v-model="remark" type="textarea" placeholder="质量好，品质过硬，值得推荐！"></el-input>
        <!-- <upImg></upImg> -->
      </div>
      <div class="is-anonymous">
        <div class="do-is" :class="isAnonymous ? 'do-is-act' : 'do-is-no'" @click="doAnonymous">
          <div class="is-radio"></div>
          <span class="do-is-txt">匿名评价</span>
        </div>
        <div class="do-submit">
          <el-button type="primary" @click="submitEvaluate">提交评价</el-button>
        </div>
      </div>
    </div>

    <div class="evaluate-list">
      <div class="list-content">
        <template v-for="(e, indexe) in 2" :key="indexe">
          <div class="evaluate-item">
            <div class="evaluate-item-top">
              <div class="user-info">
                <div class="info-img">
                  <el-image :src="getAssetsFile('images/ecommerce/' + 'goods.png')?.href ?? ''" fit="cover" />
                </div>
                <div class="info-txt">
                  <div class="info-txt-pos">
                    <div class="info-txt-c">
                      <div class="name">用户名888888</div>
                      <div class="time">2025.01.01</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="score-val">
                <el-rate :model-value="3" :colors="colors" size="large" :disabled="true" />
              </div>
            </div>
            <div class="evaluate-item-content">
              <div class="content-txt">经过一段时间种植，都长出来了，也结出西红柿，中等个头，入口鲜嫩。性价比挺高，非常值得推荐。</div>
              <div class="content-img">
                <template v-for="(m, indexm) in 2" :key="indexm">
                  <div class="img-item">
                    <el-image :src="getAssetsFile('images/ecommerce/' + 'pic.png')?.href ?? ''" fit="cover" />
                  </div>
                </template>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script setup>
import { isEmpty, getAssetsFile } from '@/utils';
import { useRoute, useRouter } from 'vue-router';
import { ref, reactive, onMounted, watch } from 'vue';
import upImg from '@/components/upImg.vue';
const route = useRoute();
const router = useRouter();

let score = ref(4.5);
const colors = ref(['#99A9BF', '#25BF82', '#25BF82']);
const totalList = reactive([
  { title: '全部', name: 'all', num: 912 },
  { title: '成活率高', name: 'label1', num: 458 },
  { title: '抗病率高', name: 'label2', num: 242 },
  { title: '抗倒伏率高', name: 'label3', num: 106 },
  { title: '坐果率高', name: 'label4', num: 106 },
]);
let currentlabel = ref('all');

const selectLabel = (name) => {
  currentlabel.value = name;
};

let remark = ref('');
let isAnonymous = ref(false);

const doAnonymous = () => {
  isAnonymous.value = !isAnonymous.value;
};

const submitEvaluate = () => {};
</script>
<style lang="scss" scoped>
.c-evaluate-warp {
  width: 100%;
  ::v-deep() {
    .el-rate {
      .el-icon {
        font-size: 22px !important;
      }
    }
  }
  .evaluate-warp-top {
    display: inline-flex;
    justify-content: flex-start;
    width: 100%;
    gap: 16px;
    flex-wrap: wrap;
    .user-evaluate {
      display: inline-flex;
      justify-content: flex-start;
      .score,
      .score-tips {
        display: inline-block;
        vertical-align: middle;
      }
      .score {
        width: 80px;
        height: 80px;
        font-size: 32px;
        font-weight: 700;
        border-radius: 8px;
        text-align: center;
        color: $color-main;
        background: $color-main-table-header;
        line-height: 80px;
      }
      .score-tips {
        padding-left: 16px;
        vertical-align: middle;
        .tips {
          font-size: 18px;
          color: $color-666;
        }
        .score-val {
        }
      }
    }
    .top-tag-btn {
      display: inline-block;
      cursor: pointer;
      .tag-btn-warp {
        display: inline-flex;
        justify-content: center;
        flex-direction: column;
        height: 100%;
        .tag-btn-pos {
          padding: 0 16px;
          height: 48px;
          font-size: 18px;
          border-radius: 16px;
          line-height: 48px;
          &.normal {
            background: $color-main-table-header;
          }
          &.act {
            font-weight: 600;
            color: $color-fff;
            background: $color-main;
          }
          .label-title,
          .label-num {
            display: inline-block;
          }
          .label-num {
            padding-left: 8px;
          }
        }
      }
    }
  }
  .user-do-warp {
    width: 100%;
    .do-title {
      width: 100%;
      font-size: 18px;
      line-height: 36px;
    }
    .do-fill {
      padding: 16px;
      min-height: 100px;
      border-radius: 16px;
      background: $color-f5;
      ::v-deep() {
        .el-textarea__inner {
          font-size: 16px;
          color: $color-666;
          background: transparent !important;
          box-shadow: none !important;
        }
      }
    }
    .is-anonymous {
      display: inline-flex;
      justify-content: space-between;
      margin: 16px 0;
      width: 100%;
      .do-is {
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        &.do-is-act {
          .is-radio {
            border: 1px solid $color-main;
            background: $color-main;
          }
          .do-is-txt {
            color: $color-main;
          }
        }
        &.do-is-no {
          .is-radio {
            border: 1px solid $color-da;
            background: $color-fff;
          }
          .do-is-txt {
            color: $color-999;
          }
        }
        .do-is-txt,
        .is-radio {
          display: inline-block;
          vertical-align: middle;
        }
        .do-is-txt {
          padding-left: 8px;
        }
        .is-radio {
          position: relative;
          width: 20px;
          height: 20px;
          border-radius: 50%;
        }
        .is-radio::before {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background: $color-fff;
          content: ' ';
          transform: translate(-50%, -50%);
        }
      }
    }
  }
  .evaluate-list {
    width: 100%;
    .list-content {
      width: 100%;
      .evaluate-item {
        margin: 16px 0;
        width: 100%;
        .evaluate-item-top {
          display: inline-flex;
          justify-content: space-between;
          width: 100%;
          .user-info {
            display: inline-flex;
            justify-content: flex-start;
            width: calc(100% - 150px);
            .info-img,
            .info-txt {
              display: inline-block;
              vertical-align: middle;
            }
            .info-img {
              overflow: hidden;
              width: 64px;
              height: 64px;
              border-radius: 50%;
            }
            .info-txt {
              padding-left: 16px;
              .info-txt-pos {
                display: inline-flex;
                justify-content: center;
                height: 64px;
                flex-direction: column;
                .name {
                  font-size: 16px;
                }
                .time {
                  font-size: 14px;
                  color: $color-999;
                }
              }
            }
          }
          .score-val {
            width: 150px;
            text-align: right;
          }
        }
        .evaluate-item-content {
          width: 100%;
          .content-txt {
            width: 100%;
            font-size: 18px;
          }
          .content-img {
            display: inline-flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            gap: 24px;
            margin-top: 24px;
            .img-item {
              display: inline-block;
              overflow: hidden;
              width: 138px;
              height: 138px;
              border-radius: 16px;
            }
          }
        }
      }
    }
  }
}
</style>
