<template>
  <div class="announcement">
    <div class="tap-part">
      <van-tabs
        v-model="active"
        title-active-color="#6600FF"
        color="#6600FF"
        line-width="175px"
      >
        <van-tab title="园区通知">
          <div class="info-list">
            <div
              class="info-item"
              v-for="item in list1"
              :key="item.name"
              @click="
                $router.push({
                  path: '/announcement/detail',
                  query: {
                    id: item.id,
                    readStatus: item.readStatus
                  },
                })
              "
            >
              <div class="left">
                <i class="iconfont icon-tongzhi"></i>
              </div>

              <div class="center">
                  <div  class="top"  v-if="item.readStatus==='0'">
                      {{ item.noticeTitle }}
                  </div>
                  <div style="color: #ACAAAA" class="top" v-else>
                      {{ item.noticeTitle }}
                  </div>
                <div class="bottom">
                  <span> {{ item.publishDate }}</span>
                </div>
              </div>

              <div
                class="icon-collect right"
                @click.stop="changeCollectorsNoticeParkStatus(item)"
              >
                <i
                  class="iconfont icon-xinaixin blue"
                  v-if="item.collectorsStatus === '2'"
                ></i>
                <i class="iconfont icon-xinaixin" v-else></i>
              </div>
            </div>
          </div>
        </van-tab>
<!--        <van-tab-->
<!--title="物业通知"-->
<!--          ><div class="info-list">-->
<!--            <div-->
<!--              class="info-item"-->
<!--              v-for="item in list2"-->
<!--              :key="item.name"-->
<!--              @click="-->
<!--                $router.push({-->
<!--                  path: '/announcement/detail',-->
<!--                  query: {-->
<!--                    type: '2',-->
<!--                    id: item.id,-->
<!--                  },-->
<!--                })-->
<!--              "-->
<!--            >-->
<!--              <div class="left">-->
<!--                <i class="iconfont icon-wuyetongzhi"></i>-->
<!--              </div>-->

<!--              <div class="center">-->
<!--                  <div  class="top"  v-if="item.readStatus==='1'">-->
<!--                      {{ item.title }}-->
<!--                  </div>-->
<!--                  <div style="color: #ACAAAA" class="top" v-else>-->
<!--                      {{ item.title }}-->
<!--                  </div>-->
<!--                <div class="bottom">-->
<!--                  <span> {{ item.releaseTime }}</span>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div-->
<!--                class="right"-->
<!--                @click.stop="changeCollectorsPropertyNoticStatus(item)"-->
<!--              >-->
<!--                <i-->
<!--                  class="iconfont icon-wujiaoxingxingxingshoucangdianji blue"-->
<!--                  v-if="item.collectorsStatus === '2'"-->
<!--                ></i>-->
<!--                <i-->
<!--                  class="iconfont icon-wujiaoxingxingxingshoucangdianji"-->
<!--                  v-else-->
<!--                ></i>-->
<!--              </div>-->
<!--            </div></div-->
<!--        ></van-tab>-->
      </van-tabs>
    </div>
  </div>
</template>

<script>
import {
    noticeList,
    clickCollectParkNotice
} from '../../service/api_park_notice'
import auth from '@/service/auth'
import { Toast } from 'vant'
export default {
    data() {
        return {
            active: 0,
            list1: [
                //     {
                //         title:
                // '关于组织2020年无锡市服务业提质增效资金项目申报的通知关于组织2020年无锡市服务业提质增效资金项目申报的通知',
                //         date: '2020-09-18',
                //         time: '19:34:06',
                //         collect: false
                //     },
            ],
            list2: [
                //     {
                //         title:
                // '关于组织2020年无锡市服务业提质增效资金项目申报的通知关于组织2020年无锡市服务业提质增效资金项目申报的通知',
                //         date: '2020-09-18',
                //         time: '19:34:06',
                //         collect: false
                //     },
            ],
            params: {
            },
            totalPage: 1
        }
    },
    created() {
        if (auth.currUser().id == null || auth.currUser().id === '') {
            Toast('请先登录后再试')
            return
        }
        this.initParkNotice()
        // this.initPropertyNotice()
    },
    methods: {
        initParkNotice() {
            const _this = this
            // _this.params.parks = '' //绑定园区
            _this.params.companyId = auth.currUser().id
            noticeList(_this.params).then((res) => {
                console.log(res)
                if (res) {
                    _this.list1 = []
                    res.forEach((item) => {
                        _this.list1.push(item)
                    })
                }
                if (!res || res.length < 1) {
                    Toast('暂无通知公告')
                }
            })
        },
        initPropertyNotice() {
            const _this = this
            // _this.params.parks = '' //绑定园区
            _this.params.type = '2'
            propertyNoticeList(_this.params).then((res) => {
                console.log(res)
                if (res) {
                    _this.list2 = []
                    res.forEach((item) => {
                        const jsons = this.getItemJson(item)
                        _this.list2.push(jsons)
                    })
                }
            })
        },
        getItemJson: function(item) {
            item.releaseTime = this.$common.transServDate(item.releaseTime)
            return item
        },
        changeCollectorsNoticeParkStatus(val) {
            if (val.collectorsStatus === '2') {
                const _this = this
                clickCollectParkNotice({
                    id: val.id,
                    userId: auth.currUser().id,
                    collectorsStatus: '1'
                }).then((res) => {
                    _this.initParkNotice()
                })
            } else {
                const _this = this
                clickCollectParkNotice({
                    id: val.id,
                    userId: auth.currUser().id,
                    collectorsStatus: '2'
                }).then((res) => {
                    _this.initParkNotice()
                })
            }
        },
        changeCollectorsPropertyNoticStatus(val) {
            if (val.collectorsStatus === '2') {
                const _this = this
                clickCollectPropertyNotice({
                    id: val.id,
                    userId: auth.currUser().id,
                    collectorsStatus: '1'
                }).then((res) => {
                    _this.initPropertyNotice()
                })
            } else {
                const _this = this
                clickCollectPropertyNotice({
                    id: val.id,
                    userId: auth.currUser().id,
                    collectorsStatus: '2'
                }).then((res) => {
                    _this.initPropertyNotice()
                })
            }
        }
    }
}
</script>

<style lang="scss" type="text/scss" scoped>
.announcement {
  box-sizing: border-box;
  .tap-part {
    margin-top: 10px;
    height: calc(100vh - 10px);

    .van-tabs {
      height: 100%;
    }

    .info-list {
      height: calc(100vh - 92px);
      background-color: #fff;
      padding: 0 20px;
      overflow-y: auto;
      .info-item {
        @include fj;
        padding: 30px 0;
        border-bottom: 1px solid $color3;
        .left {
          text-align: center;
          width: 160px;
          i {
            font-size: 48px;
            color: $main;
          }
        }

        .center {
          width: 508px;
          height: 100px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .top {
            width: 508px;
            @include line-clamp;
            font-size: 26px;
            font-weight: 700;
            color: $text3;
            line-height: 1.3;
          }
          .bottom {
            span {
              font-size: 20px;
              color: $color4;
              &:first-child {
                margin-right: 40px;
              }
            }
          }
        }

        .right {
          width: 160px;
          height: 100px;
          text-align: center;
          line-height: 100px;
          i {
            font-size: 32px;
            color: $color3;
            &.blue {
              color: $main;
            }
          }
          .collect {
            color: $color8;
          }
        }
      }
    }
  }
}
</style>
