<template>
  <div>
    <van-nav-bar title="个案会商" @click-left="$router.back()" left-arrow fixed placeholder safe-area-inset-top />
    <div class="box" v-if="roleIdStr==22">
      <van-tabs v-model="active" @change="changetabs">
        <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:'/consultation/details',query:{id:item.id}})">
                <div class="img">
                  <van-image fit="scale-down" :src="getpics(item.pics)" alt="" />
                </div>
                <div class="text">
                  <p class="title">会商议题:{{item.name}}</p>
                  <p class="mes">会商时间:{{item.workDate}}</p>
                  <p class="date">发起单位:{{item.orgName}}</p>
                </div>
              </div>
            </van-list>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div class="casebox2" 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:'/consultation/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.name}}</p>
            <p class="mes">会商时间：{{item.workDate}}</p>
            <p class="date">发起单位：{{item.orgName}}</p>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>
<script>
import { consultationPage } 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.consultationPage()
  },
  methods: {
    onLoad() {
      this.consultationPage()
    },
    changactive(v) {
      console.log(v)
      this.active = 1
      this.historyform.pageNum = 1
      this.consultationPage()
    },
    changetabs() {},
    async consultationPage() {
      const res = await consultationPage(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.historyform.pageNum++
        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 {
  width: 100%;
  z-index: 9999;
}
.casebox {
  padding: 0 30px;
  height: calc(100vh - 220px);
  overflow: auto;
}
.casebox2 {
  padding: 0 30px;
  height: calc(100vh - 92px);
  overflow: auto;
}
.mt {
  margin-top: 80px;
}
.van-tabs {
  border-bottom: 0px solid #eee;
}
.list {
  display: flex;
  align-items: center;
  margin-top: 16px;
  .img {
    .van-image {
      width: 260px;
      height: 160px;
    }
  }
  .text {
    text-align: left;
    margin-left: 26px;
    width: calc(100% - 286px);
    .title {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 30px;
    }
    .mes,
    .date {
      font-size: 26px;
    }
    p {
      margin: 0;
      margin-bottom: 16px;
    }
  }
}
</style>