<template>
  <view class="ComCss">
    <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>
    <view class="listBodyCss">
      <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" />
    </view>
    <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'
  import * as dd from 'dingtalk-jsapi'
  
  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("查询参数", 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(() => {
          //钉钉直接退出微应用
        if (this.$isDing) {
          dd.biz.navigation.close({
            onSuccess: function(result) {
              console.log(result, 'result')
            },
            onFail: function(err) {
              console.log(err, 'err')
            }
          });
        } else {
          this.$store.dispatch('Logout').then((res) => {
            this.loginOutShow = false;
            uni.reLaunch({
              url: '/pages/login/mobile'
            })
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .ComCss {
    height: 100%;
  }

  .listBodyCss {
    position: relative;
    min-height: 65vh;
  }

  .u-empty {
    min-height: 65vh;
  }

  .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>