<template>
  <div class="comment-release-con">
    <div class="comm-scroll">
      <div class="sku-comm common">
        <div class="sku-con flex-default">
          <img class="thumb" :src="skuData.thumb" />
          <div class="info">
            <div class="name">{{ skuData.name }}</div>
            <div class="sku" v-if="!isAdd">{{ skuLabel }}</div>
            <div class="score" v-else>
              已评价 &nbsp;&nbsp;&nbsp;
              {{ skuData.starLabel }}
              &nbsp;&nbsp;&nbsp;
              {{ skuData.evaluateLabel }}
            </div>
          </div>
        </div>
        <div class="star-con flex-default" v-if="!isAdd">
          <div class="label">商品评价</div>
          <m-star showLabel v-model="form.evaluate" />
        </div>
        <div class="line" />
        <textarea
          class="comm-input"
          v-model="form.content"
          placeholder="感觉怎么样，和大家分享一下吧~"
        />
        <m-upload v-model="fileMap" />
        <div
          class="anonymous flex-default"
          @click="anonymous = !anonymous"
          v-if="!isAdd"
        >
          <m-icon
            :icon="anonymous ? 'icon-radio-check' : 'icon-radio'"
            :size="16"
          />
          <span class="label">匿名评价</span>
        </div>
      </div>
      <div class="shop-comm common" v-if="!isAdd">
        <div class="title">{{ skuData.merchantName }}</div>
        <div class="star-item flex-default">
          <span class="label">服务态度</span>
          <m-star showLabel v-model="form.businessEvaluate" />
        </div>
        <div class="star-item flex-default">
          <span class="label">物流服务</span>
          <m-star showLabel v-model="form.expressEvaluate" />
        </div>
      </div>
      <div style="height: 104rpx" />
    </div>
    <div class="bottom">
      <van-button @click="handleSubmit" block round type="primary">
        提 交
      </van-button>
    </div>
  </div>
</template>

<script>
import { CommentStatus, CommentStatusObj } from "@/enums";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      anonymous: false,
      fileMap: {},
      skuData: {},
      commStatus: CommentStatus.NO,
      form: {
        anonymous: "",
        evaluate: 1,
        businessEvaluate: 1,
        expressEvaluate: 1,
        content: "",
        imagesJson: [],
        video: "",
        oid: "",
        skuId: "",
        commentId: "",
      },
      fromIndex: null,
    };
  },
  computed: {
    skuLabel() {
      if (!this.skuData.skuProps) {
        return "";
      }
      return this.skuData.skuProps
        .map((item) => `${item.propKey}：${item.propVal}`)
        .join("  ");
    },
    isAdd() {
      return this.commStatus == CommentStatus.YES;
    },
    statusObj() {
      return CommentStatusObj[this.commStatus];
    },
  },
  methods: {
    ...mapMutations(["updateUnCommentOrders"]),
    requestSku(skuId) {
      this.$showLoading();
      this.$api({
        apiName: "getSkuDetail",
        postData: skuId,
        success: (res) => {
          this.skuData = res;
          this.goodsId = res;
          this.merchantId = res;
        },
        complete: () => {
          this.$hideLoading();
        },
      });
    },
    requestDetail(commentId) {
      this.$showLoading();
      this.$api({
        apiName: "getcommentDetail",
        postData: { commentId },
        success: (res) => {
          let { goodsUrl: thumb, evaluate, goodsName: name } =
            res.list && res.list[0] && res.list[0].commentVo;
          let evaluateLabel = "";
          let starLabel = "";
          if (evaluate == 1) {
            evaluateLabel = "非常差";
            starLabel = "一星";
          } else if (evaluate == 2) {
            evaluateLabel = "差";
            starLabel = "二星";
          } else if (evaluate == 3) {
            evaluateLabel = "一般";
            starLabel = "三星";
          } else if (evaluate == 4) {
            evaluateLabel = "好";
            starLabel = "四星";
          } else if (evaluate == 5) {
            evaluateLabel = "非常好";
            starLabel = "五星";
          }
          this.skuData = { name, thumb, evaluate, evaluateLabel, starLabel };
        },
        complete: () => {
          this.$hideLoading();
        },
      });
    },
    checkForm() {
      if (!this.form.content || this.form.content.length == 0) {
        this.$toast("请填写评价内容~");
        return false;
      }
      this.form.anonymous = this.anonymous ? 1 : 0;
      let { image, video } = this.fileMap;
      // this.form.imagesJson = image.map((item) => item.url);
      // if (video && video.length != 0) {
      //   this.form.video = video[0].url;
      // }
      return true;
    },
    handleSubmit() {
      if (!this.checkForm()) {
        return;
      }
      this.$showLoading();
      this.$api({
        apiName: this.statusObj.api,
        postData: this.form,
        success: (res) => {
          if (this.fromIndex != null) {
            let val = this.isAdd ? CommentStatus.ADD : CommentStatus.YES;
            this.updateUnCommentOrders({ index: this.fromIndex, val });
          }
          let commentId = this.isAdd ? this.form.commentId : res;
          let params = { commentId };
          this.$router.replace({ name: "release-comment-result", params });
        },
        complete: () => {
          this.$hideLoading();
        },
      });
    },
  },
  mounted() {
    let { status, oid, skuId, commentId, from } = this.$route.query;
    this.commStatus = status;
    this.form.oid = oid;
    this.form.skuId = skuId;
    this.form.commentId = commentId;
    if (from || from == 0) {
      this.fromIndex = from;
    }
    if (this.isAdd) {
      this.requestDetail(commentId);
    } else {
      this.requestSku(skuId);
    }
  },
};
</script>

<style lang="less">
.comment-release-con {
  height: 100%;
  background: #f5f7fb;
  > .comm-scroll {
    height: 100%;
    overflow-y: auto;
  }
  .common {
    background: #ffffff;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 12px 16px;
  }
  .sku-comm {
    margin-top: 5px;
    > .sku-con {
      align-items: center;
      margin-bottom: 14px;
    }
    > .sku-con .thumb {
      width: 50px;
      height: 50px;
      border-radius: 6px;
      margin-right: 12px;
      background-color: #d8d8d8;
      object-fit: cover;
    }
    > .sku-con .info .name {
      color: #140603;
      font-size: 14px;
      line-height: 16px;
      margin-bottom: 5px;
    }
    > .sku-con .info .sku {
      color: #aeaeae;
      font-size: 12px;
      line-height: 14px;
    }
    > .sku-con .info .score {
      font-size: 12px;
      line-height: 14px;
      color: #dd2e41;
    }
    > .star-con {
      align-items: center;
      margin-bottom: 18px;
    }
    > .star-con .label {
      color: #140603;
      font-size: 14px;
      margin-right: 9px;
    }
    > .star-con .rate-label {
      color: #aeaeae;
      font-size: 12px;
    }
    > .line {
      height: 1px;
      background: #f1f1f1;
      margin-bottom: 20px;
    }
    > .comm-input {
      width: 100%;
      height: 80px;
      font-size: 12px;
      color: #140603;
      margin-bottom: 10px;
      resize: none;
      &::-webkit-input-placeholder {
        color: #aeaeae;
      }
    }
    > .m-upload {
      margin-bottom: 10px;
    }
    > .anonymous {
      align-items: center;
    }
    > .anonymous .label {
      color: #140603;
      font-size: 14px;
      margin-left: 8px;
    }
  }

  .shop-comm {
    color: #140603;
    > .title {
      font-size: 15px;
      margin-bottom: 15px;
    }
    > .star-item {
      align-items: center;
      margin-top: 9px;
      &:nth-of-type(1) {
        margin-top: 0;
      }
    }
    > .star-item .label {
      font-size: 14px;
      margin-right: 8px;
      margin-top: 1px;
    }
  }

  > .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    padding: 8px 16px;
    > button {
      height: 36px;
    }
  }
}
</style>

