<template>
  <div>
    <van-nav-bar title="强制报告" @click-left="$router.back()" left-arrow fixed placeholder safe-area-inset-top />
    <div class="box" v-if="roleIdStr==14||roleIdStr==15">
      <van-tabs v-model="active" @change="changetabs" sticky offset-top="46">
        <van-tab title="发起报告">
          <initiateConsultation  @changactive="changactive"></initiateConsultation>
        </van-tab>
        <van-tab title="历史报告">
          <div class="casebox">
            <van-list v-model="loading" :immediate-check="false" :finished="finished" finished-text="没有更多了" @load="onLoad">
              <div class="list" v-for="item in historyList" :key="item.id" @click="$router.push({path:'/reporting/details',query:{id:item.id}})">
                <div class="img">
                  <van-image fit="cover" :src="getpics(item.pics)" alt="" />
                </div>
                <div class="text">
                  <p class="title">报告事件：{{item.event}}</p>
                  <p class="mes">报告人：{{item.operator}}</p>
                  <p class="date">报告时间：{{item.mandatoryDate}}</p>
                  <p class="date">报告简介：{{item.content}}</p>
                </div>
              </div>
            </van-list>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div class="casebox" v-else>
      <van-list v-model="loading" :immediate-check="false" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="list" v-for="item in historyList" :key="item.id" @click="$router.push({path:'/reporting/details',query:{id:item.id}})">
          <div class="img">
            <van-image fit="cover" :src="getpics(item.appendFile)" alt="" />
          </div>
          <div class="text">
            <p class="title">报告事件：{{item.event}}</p>
            <p class="mes">报告人：{{item.operator}}</p>
            <p class="date">报告时间：{{item.mandatoryDate}}</p>
            <p class="date">报告简介：{{item.content}}</p>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>
<script>
import { mandatoryPage } from '../../api/index.js'
import initiateConsultation from './initiateConsultation.vue'
export default {
  components: { initiateConsultation },
  data() {
    return {
      bgimg: require('../../assets/newsbg.png'),
      roleIdStr: JSON.parse(sessionStorage.getItem('userInfo')).roleIdStr,
      active: 0,
      value: '',
      loading: false,
      finished: false,
      planform: {
        pageNum: 1,
        pageSuze: 10,
      },
      historyform: {
        pageNum: 1,
        pageSuze: 10,
      },
      planformList: [],
      historyList: [],
    }
  },
  activated() {
    this.mandatoryPage()
  },
  methods: {
    onLoad() {
      this.historyform.pageNum++
      this.mandatoryPage()
    },
    changactive(v) {
      this.active = 1
      this.historyform.pageNum = 1
      this.mandatoryPage()
    },
    changetabs() {},
    async mandatoryPage() {
      const res = await mandatoryPage(this.historyform)
      this.loading = false
      if (this.historyform.pageNum == 1) {
        this.historyList = res.data.records
      } else {
        this.historyList = this.historyList.concat(res.data.records)
      }
      if (this.historyList.length >= res.data.total) {
        this.finished = true
      } else {
        this.finished = false
      }
    },
    getpics(item) {
      if (!item) return this.bgimg
      var url = ''
      var arr = item.split(',')
      arr.forEach((item, index) => {
        if (item.indexOf('.jpg') || item.indexOf('.png')) {
          url = arr[index]
          return
        }
      })
      return url
    },
  },
}
</script>
<style lang="scss" scoped>
// .box {
//   position: fixed;
//   top: 80px;
//   width: 100%;
//   z-index: 9999;
// }
.mt {
  margin-top: 80px;
}
.casebox {
  height: calc(100vh - 220px);
  overflow: auto;
  padding: 0 30px;
}
.casebox2 {
  margin-top: 92px;
  height: calc(100vh - 92px);
  overflow: auto;
  padding: 0 30px;
}
.van-tabs {
  border-bottom: 0px solid #eee;
}
.list {
  display: flex;
  align-items: center;
  margin-top: 16px;
  border-bottom: 1px solid #eee;
  .img {
    /deep/.van-image {
      width: 260px;
      height: 160px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover !important;
      }
    }
  }
  .text {
    text-align: left;
    margin-left: 26px;
    width: calc(100% - 286px);
    .title {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 30px;
    }
    .mes {
      font-size: 26px;
    }
    p {
      margin: 0;
      margin-bottom: 16px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 26px;
    }
  }
}
</style>