<template>
  <view class="container">
    <view class="list">
      <tui-card :image="{url:'/static/images/dian.png'}"
                :title="{text:'轻度'}"
                :tag="{text: '2024-12-15 14:30:48'}">
        <template v-slot:body>
          <view class="tui-default">
            {{modelData.find_problem_person_name}}于{{changeDateToStyle(modelData.find_problem_time)}}在{{modelData.find_problem_address}}，风险描述为:{{modelData.find_problem_description}}
          </view>
          <view style="margin: 0 20rpx;">
            <video :src="modelData.find_problem_video.url"
                   controls
                   style="width: 100%;height: 350rpx;"></video>
          </view>
        </template>
      </tui-card>
      <tui-card :title="{text:'整改描述和视频'}"
                class="comment-card"
                v-if="modelData.the_problem_is_deal==2">
        <template v-slot:body>
          <view class="tui-default">
            {{modelData.deal_problem_person_name}}于{{changeDateToStyle(modelData.deal_problem_time)}}，整改描述为:{{modelData.deal_problem_description}}
          </view>
          <view style="margin: 0 20rpx;">
            <video :src="modelData.deal_problem_video.url"
                   controls
                   style="width: 100%;height: 350rpx;"></video>
          </view>
        </template>
        <template v-slot:footer>
          <view style="margin:30rpx 20rpx;
					display: flex;justify-content: space-between;">
            <text>整改结果</text>
            <tui-radio-group @change="changeRadioGroup">
              <tui-label v-for="(item,index) in radioItems"
                         :key="index"
                         margin="0 0 0 10rpx"
                         style="display: inline-block;">
                <view class="thorui-align__center">
                  <tui-radio :checked="item.checked"
                             :value="item.value"
                             color="#5179ef"
                             scaleRatio="0.8"
                             borderColor="#5179ef"
                             :disabled="modelData.the_problem_is_comment==2">
                  </tui-radio>
                  <text style="margin-left: 10rpx;">{{item.name}}</text>
                </view>
              </tui-label>
            </tui-radio-group>
          </view>
          <view style="margin:30rpx 20rpx;display: flex;justify-content: space-between;">
            <text>评价</text>
            <tui-grade :score="formData.score"
                       active="#5179ef"
                       :disabled="modelData.the_problem_is_comment==2"
                       @change="change"></tui-grade>
          </view>
        </template>
      </tui-card>
      <tui-card :title="{text:'无需整改'}"
                class="comment-card"
                v-if="modelData.the_problem_is_deal==3">
      </tui-card>
      <view style="padding:20rpx 20rpx;">
        <tui-button width="500rpx"
                    height="80rpx"
                    margin="auto"
                    disabled
                    v-if="modelData.the_problem_is_deal==1">还未整改 无法评价</tui-button>
        <tui-button width="500rpx"
                    height="80rpx"
                    margin="auto"
                    :disabled="modelData.the_problem_is_comment==2"
                    v-else
                    @click="submitComment">{{modelData.the_problem_is_comment==2?'已评价':'提交评价'}}</tui-button>
      </view>
    </view>
  </view>
</template>
<script>
import { changeDateToStyle } from "@/utils/util.js";
export default {
  props: {
    viewId: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      id: null,
      modelData: [],
      formData: {
        is_solve: "2",
        score: 1.5,
      },
      radioItems: [
        {
          name: "合格",
          value: "2",
          checked: true,
        },
        {
          name: "不合格",
          value: "1",
          checked: false,
        },
      ],
    };
  },
  onLoad() {
    let routes = getCurrentPages();
    this.id = routes[routes.length - 1]?.options?.id;
  },
  async mounted() {
    if (!!this.viewId) {
      this.id = this.viewId;
    }
    await this.getFirstPatrolProblem();
    if (this.modelData.the_problem_is_comment == 2) {
      this.formData.is_solve = this.modelData.comment_problem_is_solve;
      this.formData.score = this.modelData.comment_problem_score;
    }
  },
  methods: {
    changeDateToStyle(time) {
      return changeDateToStyle(time);
    },
    async getFirstPatrolProblem() {
      try {
        let res = await this.$request.get(
          "patrol/problem/getFirstPatrolProblem",
          {
            params: {
              id: this.id,
            },
          }
        );
        this.modelData = res.data;
      } catch (e) {
        uni.showToast({
          icon: "error",
          message: e,
          duration: 1500,
          mask: true,
        });
      }
    },
    change: function (e) {
      this.formData.score = e.score;
    },
    changeRadioGroup(e) {
      this.formData.is_solve = e.detail.value;
    },
    async submitComment() {
      uni.showLoading({
        title: "提交中!请等待!",
        mask: true,
      });
      try {
        let res = await this.$request.post("patrol/problem/submitComment", {
          body: {
            ...this.formData,
            id: this.id,
          },
        });
        uni.hideLoading();
        if (res.code == 0) {
          uni.showToast({
            icon: "success",
            title: "评价成功",
            duration: 1500,
            mask: true,
          });
        } else {
          uni.showToast({
            icon: "error",
            title: res.msg,
            duration: 1500,
            mask: true,
          });
          uni.navigateBack();
        }
      } catch (e) {
        uni.hideLoading();
        uni.showToast({
          icon: "error",
          message: e,
          duration: 1500,
          mask: true,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  .list {
    margin-top: 20rpx;
    border-radius: 5px;
    overflow: hidden;

    /deep/.tui-card {
      border-radius: 0 !important;
    }

    .comment-card {
      /deep/.tui-card-header {
        justify-content: center;
      }
    }
  }

  .tui-default {
    padding: 10rpx 30rpx;
  }
  .thorui-align__center {
    display: flex;
    align-items: center;
  }
  .tui-text {
    font-size: 30rpx;
    padding-left: 12rpx;
  }
}
</style>