<template>
  <view class="comManage" :style="{ height: contentHeight }">
    <view style="padding: 10px 0; background: #fff">
      <u-tabs
        :list="list"
        :is-scroll="false"
        :current="current"
        name="Name"
        @change="change"
        :active-color="mainColor"
        bg-color="#FFF"
        height="80"
        bar-width="100"
      ></u-tabs>
    </view>

    <view
      style="height: calc(100vh - 80px); background: #fff"
      v-if="dataList.length == 0"
    >
      <u-empty text="暂无相关数据" mode="order"></u-empty>
    </view>
    <view
      v-if="dataList.length > 0"
      style="
        height: calc(100vh - 80px);
        width: calc(100vw);
        overflow: hidden;
        padding: 25rpx;
        background-color: #f7f7f7;
      "
    >
      <scroll-view
        :scroll-y="true"
        :enable-back-to-top="true"
        :enable-flex="true"
        @scrolltolower="lowerTwo"
        :style="{ height: '100%' }"
      >
        <view
          class="commentList"
          v-for="(item, index) in dataList"
          :key="index"
        >
          <view class="commentTop">
            <view class="comment_Left">
              <img
                style="width: 100%; height: 100%"
                :src="item.CoverImage"
                alt=""
              />
            </view>
            <view class="comment_Right">
              <view class="comment_Nei">{{ item.Content }}</view>
              <view class="comment_Replay"> 来自用户 {{ item.UserName }} </view>
            </view>
          </view>
          <view
            class="commentTop"
            style="margin-top: 20rpx; justify-content: space-between"
          >
            <view style="display: flex; align-items: center; font-size: 22rpx">
              <img
                style="width: 48rpx; height: 48rpx; margin-right: 10rpx"
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/good.png"
              />
              {{ item.CommentGradeName }}
            </view>
            <view>
              <u-button
                size="mini"
                v-if="item.Is_Top == 1"
                @click="commonSet(item, 5)"
                class="ComStyle"
                shape="circle"
                >取消置顶</u-button
              >
              <u-button
                size="mini"
                v-if="item.Is_Top == 2"
                @click="commonSet(item, 4)"
                class="ComStyle"
                shape="circle"
                >置顶</u-button
              >
              <u-button
                size="mini"
                v-if="item.Is_Show == 1"
                class="ComStyle"
                @click="commonSet(item, 2)"
                shape="circle"
                >隐藏评论</u-button
              >
              <u-button
                size="mini"
                v-if="item.Is_Show == 2"
                class="ComStyle"
                @click="commonSet(item, 3)"
                shape="circle"
                >显示评论</u-button
              >
              <u-button
                size="mini"
                @click="getReplay(item)"
                class="ComStyle"
                shape="circle"
                >回复</u-button
              >
            </view>
          </view>
        </view>
        <u-loadmore
          :status="status"
          :load-text="loadText"
          :font-size="24"
          :margin-top="20"
          :margin-bottom="20"
          bg-color="#f3f4f6"
        />
      </scroll-view>
    </view>
    <u-modal
      v-model="showReplayBox"
      :show-cancel-button="true"
      title="回复"
      contentSlot
      @confirm="SaveReply"
    >
      <textarea
        style="height: 240rpx"
        class="replayRemark"
        v-model="hfMsg.Content"
      />
    </u-modal>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      pageTitle: "评论管理",
      current: 0,
      contentHeight: 0,
      mainColor: "",
      page_count: 1,
      dataList: [],
      msg: {
        pageIndex: 1,
        pageSize: 15,
        CommentGrade: 1,
        PlatformSource: 0,
        UserName: "",
        GoodsName: "",
        Content: "",
      }, //分销商msg
      list: [
        {
          name: "好评",
        },
        {
          name: "中评",
        },
        {
          name: "差评",
        },
      ],
      status: "loadmore",
      loadText: {
        loadmore: "轻轻上拉，加载更多",
        loading: "努力加载中",
        nomore: "没有更多了",
      },
      currentScore: 0,
      showReplayBox: false,
      hfMsg: {
        OrderDetailIds: "",
        Type: 1,
        Content: "",
      },
    };
  },
  created() {
    this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
    this.mainColor = this.$uiConfig.mainColor;
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: this.pageTitle,
    });
  },
  onLoad: function (option) {
    //this.current = option.status || -1;
    this.getList();
  },
  methods: {
    change(index) {
      this.current = index;
      if (index == 0) {
        this.msg.CommentGrade = 1;
      }
      if (index == 1) {
        this.msg.CommentGrade = 2;
      }
      if (index == 2) {
        this.msg.CommentGrade = 3;
      }
      this.dataList = [];
      this.msg.pageIndex = 1;
      this.getList();
    },
    getList() {
      uni.showLoading({
        title: "加载中",
      });
      this.requestAdmin(
        "/api/order/GetGoodsCommentPageList",
        this.msg,
        (res) => {
          uni.hideLoading();
          if (res.resultCode == 1) {
            this.dataList = res.data.pageData;
            this.page_count = res.data.pageCount;
          }
        }
      );
    },
    lower(e) {
      if (this.msg.pageIndex < this.page_count) {
        this.msg.pageIndex++;
        this.status = "loading";
        this.getList();
      } else {
        this.status = "nomore";
      }
    },
    //显示 隐藏评论
    commonSet(obj, type) {
      let msg = {
        OrderDetailIds: obj.OrderDetailId,
        Type: type,
      };
      this.requestAdmin(
        "/api/order/SetCommentBatchByOrderDetailId",
        msg,
        (res) => {
          if (res.resultCode == 1) {
            uni.showToast({
              title: res.message,
            });
            this.getList();
          } else {
            uni.showToast({
              title: res.message,
            });
          }
        }
      );
    },
    //点击回复
    getReplay(item) {
      this.hfMsg.OrderDetailIds = item.OrderDetailId;
      this.showReplayBox = true;
    },
    //保存回复
    SaveReply() {
      this.requestAdmin(
        "/api/order/SetCommentBatchByOrderDetailId",
        this.hfMsg,
        (res) => {
          if (res.resultCode == 1) {
            uni.showToast({
              title: res.message,
            });
            this.getList();
            this.showReplayBox = false;
          } else {
            uni.showToast({
              title: res.message,
            });
          }
        }
      );
    },
  },
};
</script>
<style>
.comManage {
  width: 100%;
  height: 100%;
}

.commentList {
  width: 100%;
  background-color: #e5e5e5;
  padding: 20rpx;
  margin-bottom: 25rpx;
  border-radius: 20rpx;
}

.commentTop {
  display: flex;
}
.replayRemark {
  border: 1px solid #d1d1d1;
  margin: 40rpx 0 40rpx 28rpx;
  padding: 20rpx;
  width: 500rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
}
.comment_Left {
  width: 150rpx;
  height: 150rpx;
  flex-shrink: 0;
}

.comment_Right {
  width: 560rpx;
  height: 160rpx;
  background-color: #dedede;
  border-radius: 10rpx;
  padding: 10rpx 10rpx 10rpx 20rpx;
  position: relative;
}

.comment_Nei {
  font-size: 24rpx;
  color: #000000;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.comment_Replay {
  color: #999999;
  font-size: 24rpx;
  position: absolute;
  bottom: 15rpx;
}

.ComStyle {
  margin-right: 20rpx;
}
.ComStyle:last-child {
  margin-right: 0;
}
.u-model {
  border-radius: 20rpx;
}
</style>
