<template>
  <div class="app-container">
    <van-nav-bar
      title="三务公开"
      left-arrow
      @click-left="$router.back(-1)"
    />
    <van-tabs v-model="activeName" title-active-color="#1D6FE9" color="#1D6FE9" line-width="20px" swipeable @click="getList" @change="getList">
      <van-tab title="党务" name="1" >
        <van-list
        >
          <van-cell v-for="item in list1" :key="item.id" is-link :to="{path:'threeAffairsDetail',query:{id:item.id,type:'1'}}" style="margin:2%;width:96%;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
            <template #title>
              <p style="display:inline-block;background: #EC4B2C;height:20px;width: 20px;border-radius: 2px;margin-right: 10px;float: left"></p><p style="font-weight: bold;font-size: 18px;">{{item.title}}</p>
            </template>
            <template #label>
              <van-row>
                <van-col span="12"><p style="font-size: 12px">发布人/单位：{{item.issuedBy}}</p></van-col>
                <van-col span="12"><p style="font-size: 12px;text-align: right">发布时间：{{item.issuedDate}}</p></van-col>
              </van-row>
            </template>
          </van-cell>
        </van-list>
      </van-tab>
      <van-tab title="政务" name="2">
        <van-list
        >
          <van-cell v-for="item in list2" :key="item.id" is-link :to="{path:'threeAffairsDetail',query:{id:item.id,type:'2'}}" style="margin:2%;width:96%;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
            <template #title>
              <p style="display:inline-block;background: #FF4646;height:20px;width: 20px;border-radius: 2px;margin-right: 10px;float: left"></p><p style="font-weight: bold;font-size: 18px;">{{item.title}}</p>
            </template>
            <template #label>
              <van-row>
                <van-col span="12"><p style="font-size: 12px">发布人/单位：{{item.issuedBy}}</p></van-col>
                <van-col span="12"><p style="font-size: 12px;text-align: right">发布时间：{{item.issuedDate}}</p></van-col>
              </van-row>
            </template>
          </van-cell>
        </van-list>
      </van-tab>
      <van-tab title="村务" name="3">
        <van-list
        >
          <van-cell v-for="item in list3" :key="item.id" is-link :to="{path:'threeAffairsDetail',query:{id:item.id,type:'3'}}" style="margin:2%;width:96%;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
            <template #title>
              <p style="display:inline-block;background: #7DDA4F;height:20px;width: 20px;border-radius: 2px;margin-right: 10px;float: left"></p><p style="font-weight: bold;font-size: 18px;">{{item.title}}</p>
            </template>
            <template #label>
              <van-row>
                <van-col span="12"><p style="font-size: 12px">发布人/单位：{{item.issuedBy}}</p></van-col>
                <van-col span="12"><p style="font-size: 12px;text-align: right">发布时间：{{item.issuedDate}}</p></van-col>
              </van-row>
            </template>
          </van-cell>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
    import onlineHomeIndex from "../onlineHomeIndex";
    import {getAffairs, listAffairs} from "../../api/onlineHome/threeAffairs";

    export default {
      components: {
        onlineHomeIndex
      },
        name: "threeAffairs",
      data() {
        return {
          activeName: 1,
          list1: [],
          list2: [],
          list3: [],
          loading: false,
          finished: false,
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            title: null,
            openType: null,
            deptId: null,
            isWechat: null,
            status: null,
          },
        };
      },
      created() {
        /** 查询三务公开列表 默认先查第一个村务*/
        this.getList(1);
      },
      methods: {
        getList(name,title) {
          if(name==1&&this.list1.length>0){
            return false
          }else if(name==2&&this.list2.length>0){
            return false
          }else if(name==3&&this.list3.length>0){
            return false
          }
          this.loading = true;
          this.queryParams.openType = name
          listAffairs(this.queryParams).then(response => {
            if(name==1){
              this.list1 = response.rows;
            }else if(name==2){
              this.list2 = response.rows;
            }else if(name==3){
              this.list3 = response.rows;
            }
            this.total = response.total;
            this.loading = false;
          });
        },
      },
    }
</script>

<style scoped>

</style>
