<template>
  <view class="commit-detail">
    <u-top-tips ref="uTips"></u-top-tips>
    <view class="good-item">
      <image class="good-pic" :src="goodsPic" mode="aspectFit" />
      <view class="right-box">
        <view class="good-info">{{goodsName}}</view>
        <view class="op-box">
          <u-rate
            :current="msg.CommentScore"
            active-color="#FA3534"
            inactive-color="#b2b2b2"
            active-icon="star"
            inactive-icon="star-o"
            size="40"
			@change='change'
          ></u-rate>
        </view>
      </view>
    </view>
    <view class="content-box">
      <view class="title-box">输入评价内容</view>
      <view class="editor-box">
        <view class="editor-icon">
          <u-icon name="edit" size="36"></u-icon>
        </view>
        <view class="editor">
          <textarea placeholder="评价内容" v-model="msg.Content" maxlength="200"></textarea>
          <u-upload
            :action="action"
            :file-list="fileList"
            max-count="9"
            :custom-btn="true"
            @on-success="uploadSuccessHandler"
          >
            <view slot="addBtn" class="slot-btn">
              <u-icon name="photograph" size="40" color="#888"></u-icon>
              <view class="mian-title">上传图片</view>
            </view>
          </u-upload>
        </view>
      </view>
    </view>
    <view style="padding:10px 40px;background:#FFF">
      <u-button
        size="80"
        :ripple="true"
        @click="submitForm"
        shape="circle"
        :custom-style="{
						backgroundColor: mc,
						height: '80rpx',
						color: '#FFF',
						fontSize: '14px'
					}"
      >
        <u-loading mode="circle" style="margin-right: 5px;" v-if="submitStatus"></u-loading>提交评价
      </u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pageTitle: "发表评价",
      mc: "",
      secondary: "",
      msg: {
        CommentGrade: 1,
        GoodsId: 0,
        Content: "",
        OrderDetailId: 0,
        CommentImgList: [],
		CommentScore:5
      },
      submitStatus: false,
      goodsName: "",
      goodsPic: "",
      action: this.host2 + "/api/File/UploadTencent",
      fileList: [],
    };
  },
  onLoad(option) {
    if (option.param) {
      let param = JSON.parse(decodeURIComponent(option.param));
      this.msg.GoodsId = param.GoodsId;
      this.msg.OrderDetailId = param.OrderDetailId;
      this.goodsName = param.GoodsName;
      this.goodsPic = param.CoverImage;
    }
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: this.pageTitle,
    });
    this.mc = this.$uiConfig.mainColor;
    this.secondary = this.$uiConfig.secondary;
  },
  methods: {
    uploadSuccessHandler(data, index, lists) {
      console.log(JSON.parse(data));
      let r = JSON.parse(data);
      this.msg.CommentImgList.push(r.data);
    },
	change(val){
		this.msg.CommentScore = val
	},
    submitForm() {
      this.submitStatus = true;
      if (this.msg.CommentScore > 0) {
        this.request2(
          {
            url: "/api/AppletOrder/SetGoodsCommentInfo",
            data: this.msg,
          },
          (res) => {
            if (res.resultCode == 1) {
              uni.showModal({
                content: "评价成功，感谢您的反馈",
                showCancel: false,
                confirmText: "确认",
                success: function (res) {
                  if (res.confirm) {
                    uni.navigateBack({
                      delta: 1,
                    });
                  }
                  this.submitStatus = false;
                },
              });
            } else {
              this.submitStatus = false;
              this.$refs.uTips.show({
                title: res.msg,
                type: "error",
                duration: "2300",
              });
            }
          }
        );
      } else {
        this.$refs.uTips.show({
          title: "请您为商品打打分吧",
          type: "error",
          duration: "2300",
        });
      }
    },
  },
};
</script>

<style>
.commit-detail {
  background: #faf8f9;
  height: 100vh;
  position: relative;
}
.commit-detail .good-item {
  margin: 10px 0;
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  display: flex;
}
.commit-detail .good-item .good-pic {
  width: 120rpx;
  height: 120rpx;
  margin-right: 15px;
  border-radius: 5px;
}
.commit-detail .good-item .right-box {
  width: 1px;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 120rpx;
}
.commit-detail .good-item .right-box .good-info {
  flex: 1;
  width: 100%;
  height: 1px;
  font-size: 28rpx;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  margin-bottom: 5px;
}
.commit-detail .good-item .right-box .op-box {
  height: 25px;
}
.commit-detail .content-box {
  background: #fff;
  padding: 15px;
  border-radius: 5px;
}
.commit-detail .content-box .title-box {
  padding-bottom: 15px;
  border-bottom: 1px solid #e3e3e3;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #000;
}
.commit-detail .content-box .editor-box {
  display: flex;
}
.commit-detail .content-box .editor-box .editor-icon {
  width: 18px;
  margin-right: 5px;
}
.commit-detail .content-box .editor-box .editor {
  width: 1px;
  flex: 1;
}
.commit-detail .content-box .editor-box .editor textarea {
  width: 100%;
  height: 150px;
  font-size: 14px;
  color: #000;
  border: none;
  outline: none;
  margin-bottom: 10px;
}
.commit-detail .content-box .editor-box .editor .slot-btn {
  width: 140rpx;
  height: 140rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: rgb(244, 245, 246);
  border-radius: 10rpx;
}
.commit-detail .content-box .editor-box .editor .slot-btn .mian-title {
  font-size: 28rpx;
  color: #888;
  font-weight: 600;
  margin: 10rpx 0;
}
.commit-detail .content-box .editor-box .editor .slot-btn .sub-title {
  color: #999;
  font-size: 26rpx;
  font-family: "microsoft yahei" !important;
}
.commit-detail .u-list-item {
  width: 90px !important;
  height: 90px !important;
}
</style>