<template>
  <view class="container">
    <tui-time-axis>
      <tui-timeaxis-item backgroundColor="transparent">
        <template v-slot:node>
          <view class="tui-node">
            <tui-icon name="check"
                      color="#fff"
                      :size="14"
                      bold></tui-icon>
          </view>
        </template>
        <template v-slot:content>
          <view>
            <view class="tui-order-title"
                  style="display: flex;justify-content: space-between;
						 align-items: center;">
              <text>问题发现</text>
              <text style="color: #848484;">{{problemDetail.find_problem_time}}</text>
            </view>
            <view class="tui-order-desc">
              {{problemDetail.find_problem_person_name}}于{{changeDateToStr1(problemDetail.find_problem_time)}}在{{problemDetail.find_problem_address
						}}，风险描述为:{{problemDetail.find_problem_description}}
            </view>
          </view>
        </template>
      </tui-timeaxis-item>
      <tui-timeaxis-item backgroundColor="transparent">
        <template v-slot:node>
          <view class="tui-node">
            <tui-icon name="check"
                      color="#fff"
                      :size="13"></tui-icon>
          </view>
        </template>
        <template v-slot:content>
          <view class="tui-order-title">
            <text>审核</text>
            <text style="color: #848484;">2019-05-01 18:48:26</text>
          </view>
          <view class="tui-order-desc">
            该问题于2019-05-01 16:29:07被xxx分配被给xxx
          </view>
        </template>
      </tui-timeaxis-item>
      <tui-timeaxis-item backgroundColor="transparent">
        <template v-slot:node>
          <view class="tui-node">
            <tui-icon name="check"
                      color="#fff"
                      :size="13"></tui-icon>
          </view>
        </template>
        <template v-slot:content>
          <view class="tui-order-title">
            <text>整改</text>
            <text style="color: #848484;">2019-05-01 18:48:26</text>
          </view>
          <view class="tui-order-desc">整改描述：实习不电池内部</view>
          <view class="video-list"
                style="margin: 10rpx 0;">
            <video src=""
                   style="width: 120px;height: 120px;"></video>
          </view>
        </template>
      </tui-timeaxis-item>
      <tui-timeaxis-item backgroundColor="transparent">
        <template v-slot:node>
          <view class="tui-node">
            <tui-icon name="check"
                      color="#fff"
                      :size="13"></tui-icon>
          </view>
        </template>
        <template v-slot:content>
          <view class="tui-order-title">
            <text>评价</text>
            <text style="color: #848484;">2019-05-01 18:48:26</text>
          </view>
          <view class="tui-order-desc">结果:通过</view>
          <view>评分：10</view>
        </template>
      </tui-timeaxis-item>
    </tui-time-axis>
  </view>
</template>

<script>
export default {
  data() {
    return {
      problemDetail: {},
    };
  },
  onLoad(option) {
    let id = option.id;
    this.getProblemDetail(id);
  },
  methods: {
    async getProblemDetail(id) {
      // let res=await this.$request.get('patrol/problem/problemDetail',{
      //   params:{id}
      // });
      // this.problemDetail=res.data;
    },
    changeDateToStr1(time) {
      let date = new Date(time);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      let second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      return (
        y +
        "年" +
        m +
        "月" +
        d +
        "日" +
        h +
        "时" +
        minute +
        "分" +
        second +
        "秒"
      );
    },
    navTo(url) {
      uni.navigateTo({
        url: "/pages/template/questionList/questionList",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  margin: 20rpx 10rpx 20rpx 40rpx;
}

.tui-node {
  height: 44rpx;
  width: 44rpx;
  border-radius: 50%;
  background-color: #5179ef;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.tui-order-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12rpx;
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}

.tui-order-desc {
  padding-bottom: 12rpx;
  font-size: 28rpx;
  color: #333;
}

.tui-order-time {
  font-size: 24rpx;
  font-weight: bold;
}

.tui-gray {
  color: #848484 !important;
}

.tui-light-gray {
  color: #888 !important;
}

.tui-primary {
  color: #5677fc;
}
</style>