<template>
  <view class="container">
    <infiniteScroll ref="infiniteScroll"
                    :fetchItems="getDatelist"
                    :hasMore="hasMore">
      <tui-card v-for="(item,index) in dataList"
                :key="index"
                :image="{url:'/static/images/dian.png'}"
                :title="{text:levelArr[item.find_problem_level]}"
                :tag="{text:item.find_problem_time}">
        <template v-slot:body>
          <view class="tui-default">
            {{item.find_problem_description}}
          </view>
        </template>
        <template v-slot:footer>
          <view>
            <CardMainValue :videoUrl="item.find_problem_video.url"
                           :taskId="item.id" />
            <view style="margin:20rpx;">
              <view v-if='item.the_problem_is_comment==2'>
                <text>
                  处理结果：
                  <text style="font-weight:bold;">{{solveArr[item.comment_problem_is_solve]}}</text>
                </text>
                <text style="margin-left:20rpx;">
                  评分：
                  <text style="font-weight:bold;">{{item.comment_problem_score}}</text>
                </text>
              </view>
              <tui-button v-else
                          height="60rpx"
                          @click="setRectification(item.id)">评价</tui-button>
            </view>
          </view>

        </template>
      </tui-card>
    </infiniteScroll>
    <tui-bottom-popup :zIndex="1002"
                      :maskZIndex="1001"
                      :show="personShow"
                      @close="hiddenPerson">
      <view class="person-tit">整改问题</view>
      <view class="person-close"
            @click="hiddenPerson"><tui-icon name="close"
                  :size="26"></tui-icon></view>
      <view class="person-list">
        <view class="person-list-box">
          <tui-form ref="form"
                    :show-message="false">
            <tui-card :title="{text:'整改结果'}"
                      style="margin-top:0;">
              <template v-slot:body>
                <tui-radio-group style="display:flex;padding:20rpx;"
                                 @change="changeQualified">
                  <tui-label v-for="(item,index) in radioItems"
                             :key="index"
                             margin="0 20rpx 0 0"
                             style="display: flex;align-items: center;">
                    <tui-radio :checked="item.checked"
                               :value="item.value"
                               color="#5179ef"
                               scaleRatio="0.8"
                               borderColor="#5179ef">
                    </tui-radio>
                    <text style="margin-left:10rpx;">{{item.name}}</text>
                  </tui-label>
                </tui-radio-group>
              </template>
            </tui-card>
            <tui-card :title="{text:'评分'}"
                      style="margin-top:0;">
              <template v-slot:body>
                <tui-grade style="padding:20rpx;"
                           :score="form.score"
                           active="#5179ef"
                           @change="changeScore"></tui-grade>
              </template>
            </tui-card>
            <view class="tui-btn__box">
              <tui-button width="400rpx"
                          height="84rpx"
                          bold
                          @click="submit">提交</tui-button>
            </view>
          </tui-form>
        </view>
      </view>
    </tui-bottom-popup>
  </view>
</template>

<script>
import infiniteScroll from "@/components/infiniteScroll/infiniteScroll.vue";
import CardMainValue from "@/pages/template/bomb/common/cardMainValue.vue";
import { mapState } from "vuex";
export default {
  components: {
    infiniteScroll,
    CardMainValue,
  },
  data() {
    return {
      hasMore: true,
      pageSize: 20,
      searchForm: {
        userId: "",
        the_problem_is_comment: 1,
      },
      dataList: [],
      levelArr: ["", "轻度", "中度", "重度"],
      personShow: false,
      tid: "",
      form: { isSolve: "2", score: 1.5 },
      solveArr: ["", "未解决", "已解决"],
      radioItems: [
        {
          name: "合格",
          value: "2",
          checked: true,
        },
        {
          name: "不合格",
          value: "1",
          checked: false,
        },
      ],
    };
  },
  computed: {
    ...mapState(["userinfo"]),
  },
  onLoad(options) {
    if (options?.commentProblemHas == 2) {
      uni.setNavigationBarTitle({
        title: "得分",
      });
    }
    this.searchForm.userId = this.userinfo.userId;
    this.searchForm.the_problem_is_comment = options.commentProblemHas ?? 1;
    this.getDatelist();
  },
  methods: {
    async getDatelist() {
      const { data } = await this.$request.get(
        "risk/DistributionProblem/myCommentProblem",
        {
          params: {
            ...this.searchForm,
            page: Math.ceil(this.dataList.length / this.pageSize) + 1,
            limit: this.pageSize,
          },
        }
      );
      this.dataList = [...this.dataList, ...data.data];
      if (data.data.length < this.pageSize) {
        this.hasMore = false;
      }
    },
    changeQualified(e) {
      this.form.isSolve = e.detail.value;
    },
    changeScore(e) {
      this.form.score = e.score;
    },
    hiddenPerson() {
      this.personShow = false;
    },
    setRectification(id) {
      this.tid = id;
      this.form = {
        isSolve: "2",
        score: 1.5,
      };
      this.personShow = true;
    },
    async submit() {
      const data = {
        tid: this.tid,
        comment_problem_is_solve: this.form.isSolve,
        comment_problem_score: this.form.score,
        userId: this.userinfo.userId,
        name: this.userinfo.userInfo.nickname,
      };
      uni.showLoading({
        title: "提交中!请等待!",
        mask: true,
      });
      let res = await this.$request.post(
        "risk/DistributionProblem/setMyCommentProblem",
        {
          body: data,
        }
      );
      uni.hideLoading();
      if (res.code == 0) {
        uni.showToast({
          title: res.msg,
        });
        this.dataList = [];
        this.getDatelist();
        this.personShow = false;
      } else {
        uni.showToast({
          icon: "error",
          title: res.msg,
          duration: 1500,
          mask: true,
        });
      }
    },
  },
  onReachBottom: function () {
    // this.$refs.infiniteScroll.reachBottom();
    if (!this.hasMore) return;
    this.fetchItems();
  },
  onPullDownRefresh() {
    this.dataList = [];
    this.getDatelist();
  },
};
</script>

<style lang="scss" scoped>
.tui-card {
  margin-top: 20px;
}
.tui-default {
  padding: 20rpx 30rpx;
}
.person-tit {
  text-align: center;
  font-size: 30rpx;
  padding: 20rpx 0;
}
.person-close {
  position: absolute;
  right: 10rpx;
  top: 10rpx;
}
.person-list-box {
  padding: 10rpx;
}
.cherbut {
  color: blue;
  font-size: 26rpx;
}
.tui-title {
  width: 100%;
  font-size: 28rpx;
  color: #888;
  padding: 0rpx;
  box-sizing: border-box;
}
.tui-btn__box {
  width: 100%;
  padding: 60rpx 0;
  display: flex;
  justify-content: center;
}
.tui-text {
  font-size: 30rpx;
  padding-left: 12rpx;
}
</style>
