<template>
  <view>
    <u-sticky bgColor="#fff" customNavHeight="0" offsetTop="0">
      <view class="flexCss">
        <view class="leftCss">
          <u-icon size="15" name="/static/images/icon/login-out.png"></u-icon>
          <view class="loginOutCss" @click="loginOutMethod">
            退出登录
          </view>
        </view>
        <u-search placeholder="搜索感兴趣的内容" v-model="keyword" :show-action="false" margin="30rpx 34rpx 15rpx 34rpx"
          borderColor="rgb(230, 230, 230)" height="74rpx" bgColor="#F5F6FA" @clear="clearInit" @search="search"></u-search>
      </view>
      <u-tabs :list="tabList" :activeStyle="{'color': '#cf000d','font-weight':'bold'}" lineWidth="30rpx"
        lineHeight="4rpx" lineColor="#cf000d" :current="current" @click="tabChange"></u-tabs>
    </u-sticky>
    <u-empty text="暂无资讯" icon="/static/images/icon/nodata.png" v-if="NewsList.length <= 0"></u-empty>
    <newsList v-for="(item,index) in NewsList" :key="index" :newItem="item" v-else></newsList>
    <u-loadmore :status="status" v-if="NewsList.length > 0" />
    <u-modal :show="loginOutShow" title="退出登录" showCancelButton confirmColor="red" @cancel="loginOutShow = false"
      @confirm="loginOut">
      <view class="slot-content">
        您当前确定要退出吗?
      </view>
    </u-modal>
  </view>
</template>

<script>
  import newsList from '@/components/news-list/news-list.vue'
  import {
    getInfoMarketInformationlist
  } from '@/api/infoMarketInformation.js'
  import {
    listSimpleDictDatas
  } from '@/api/dict.js'
  export default {
    components: {
      newsList
    },
    props: {

    },
    data() {
      return {
        keyword: "",
        current: 0,
        status: "loadmore",
        total: null,
        queryParameter: {
          pageNum: 1,
          pageSize: 10,
          publishStatusList:1,
          roleId:this.$store.state.user.roleId,
          organizeId:this.$store.state.user.entity,
        },
        tabList: [{
          name: "全部",
        }, {
          name: "宏观经济",
        }, {
          name: "产业政策",
        }, {
          name: "行业动态",
        }, {
          name: "友商动态",
        }, {
          name: "用户资讯",
        }, {
          name: "国际能源",
        }],
        NewsList: [],
        loginOutShow: false,
        loginOutTitle: "退出登录"
      }
    },
    computed: {

    },
    onLoad() {
      this.initData()
      console.log(this.$store.state.user);
    },
    onReachBottom() {
      let allTotal = this.queryParameter.pageNum * this.queryParameter.pageSize
      if (allTotal < this.total) {
        //当前条数小于总条数 则增加请求页数
        this.queryParameter.pageNum++;
        this.status = 'loading';
        this.updateList() //调用加载数据方法
      } else {
        this.status = "nomore"
        // console.log('已加载全部数据')
      }
    },
    onPullDownRefresh() {
      this.resetQuery();
      this.keyword = "";
      this.current = 0;
      this.initData();
      setTimeout(() => {
        //结束下拉刷新
        uni.stopPullDownRefresh();
      }, 500);
    },
    methods: {
      initData() {
        this.updateList()
      },
      resetQuery() {
        this.NewsList = [];
        this.queryParameter.pageNum = 1;
        this.queryParameter.pageSize = 10;
      },
      search() {
        this.resetQuery();
        this.updateList()
      },
      clearInit(){
        this.keyword = ""
        this.search()
      },
      checkTotal() {
        let allTotal = this.queryParameter.pageNum * this.queryParameter.pageSize
        if (this.total < allTotal) {
          this.status = "nomore"
        }
      },
      updateList() {
        let Params = {};
        if(this.keyword){
          Params.title = this.keyword
        }
        if(this.current !== -1 && this.current !== 0){
          Params.plateNameList = this.current - 1
        }
        Params = {
          ...this.queryParameter,
          ...Params
        };
        console.log(111111, Params);
        getInfoMarketInformationlist(Params).then(res => {
          // console.log(res);
          if (res.code === 200) {
            if (this.queryParameter.pageSize > 1) {
              this.NewsList = [...this.NewsList, ...res.rows]
            } else {
              this.NewsList = res.rows
            }
            this.total = res.total;
            console.log(this.NewsList);
          }
        })
        this.checkTotal();
      },
      tabChange(e) {
        console.log(e);
        this.resetQuery()
        this.current = e.index
        console.log(this.current);
        this.updateList()
      },
      loginOutMethod() {
        this.loginOutShow = true
      },
      loginOut() {
        // this.$modal.confirm('确定注销并退出系统吗？').then(() => {
        this.$store.dispatch('Logout').then((res) => {
          this.loginOutShow = false;
          uni.reLaunch({
            url:'/pages/login/mobile'
          })
        })
        // })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .flexCss {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .loginOutCss {
    background-color: rgba(255, 255, 255, 0);
    box-sizing: border-box;
    font-family: '苹方 粗体', '苹方 中等', '苹方', sans-serif;
    font-weight: 700;
    color: #cf000d;
    text-align: left;
    line-height: normal;
    font-size: 28rpx;
    margin-left: 10rpx;
  }

  .leftCss {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 20rpx;
  }

  .slot-content {
    background-color: rgba(255, 255, 255, 0);
    box-sizing: border-box;
    font-family: '苹方 中等', '苹方', sans-serif;
    color: #666666;
    text-align: left;
    line-height: normal;
    font-size: 28rpx
  }
</style>