<template>
  <view class="uni-container" style="height: 100%; overflow: auto">
    <view class="news_area">
      <view class="news_icon"></view>
      <view class="news_line">
        <view class="marquee_list" :class="{ anim: animate }">
          <view
            class="news_text"
            v-for="(item, index) in marqueeList"
            :key="index"
            @click="linkToNews(item)"
          >
            {{ item.title }}
          </view>
        </view>
      </view>
      <view class="red"></view>
      <view class="iconfont icon-you news_more_icon"></view>
    </view>
    <view style="padding-bottom: 15px">
      <!-- <view class="items_area"  v-for="(menuItem, index) in menus" :key="index">
				<view class="items_name">{{menuItem.text}}</view>
				<view class="items_container">
					<uni-grid :column="4"  :show-border="false" :square="false" :highlight="false"  >
						<uni-grid-item  v-for="(item, indey) in (menuItem.children||[])" :key="indey"  @click="linkTo(item)">
							<image :src="config.imgURL+'/'+item.iconUrl"  class="items_icon" mode="aspectFill" />
							<text class="items_text">{{ item.text }}</text>
						</uni-grid-item>
					</uni-grid>
				</view>
			</view> -->
      <view class="items_area" v-for="(menuItem, index) in menus" :key="index">
        <view class="items_name">{{ menuItem.text }}</view>
        <view class="items_container">
          <!-- <view class="items_out"  v-for="(item, indey) in (menuItem.children||[])" :key="Math.random()"  @click="linkTo(item.routePath)"> -->
          <view
            class="items_out"
            v-for="(item, indey) in menuItem.children || []"
            :key="indey"
            @click="linkTo(index, indey)"
          >
            <!-- :src="'../../static/' + item.iconUrl" -->
            <image
              class="items_icon"
             :src="'../../static/' + item.iconUrl"
              @load="onoff = '1'"
            ></image>
            <!-- 角标 -->
            <view class="grid-dot">
              <uni-badge :text="item.dealNum" type="error" />
            </view>
            <!-- <img :src="'../../static/'+item.iconUrl" alt=""> -->
            <!-- <image class="items_icon" :src="config.imgURL+item.iconUrl +'?t='+ new Date().getTime()"></image> -->
            <view class="items_text">{{ item.text }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { config } from "../../request/js/config.js";
var time = "";
var t = "";
import uniGrid from "@/components/uni-grid/uni-grid.vue";
import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue";
export default {
  components: {
    uniGrid,
    uniGridItem,
  },
  data() {
    return {
      config: config,
      menus: [],
      animate: false,
      marqueeList: [],
    };
  },
  //这里为什么不用onload,因为我发现，只有第一次调用了，后面没有调用。
  onShow() {
    var _this = this;
    console.log(config);
    var userInfo = uni.getStorageSync("userInfo");

    //针对自动登陆的用户，进行判断，判断当前用户的tokne是否过期，如果过期就
    const automatic_logon = uni.getStorageSync("automatic_logon");
    const loginInfo = uni.getStorageSync("admin_info");

    if (automatic_logon && loginInfo) {
      this.$http
        .request({
          url: "/apis/user/checkToken",
          params: {
            token: userInfo.token,
            username: loginInfo.username,
            password: loginInfo.password,
          },
        })
        .then((res) => {
          if (res.statusCode == "200") {
            if (res.data.isLate == "true") {
              //表示过期
              uni.setStorage({
                key: "userInfo",
                data: res.data.userInfo,
                success: function () {
                  //保存成功后，调用菜单接口和新闻金额口。
                  // _this.getNews();
                  _this.getMenu();
                },
              });
            } else {
              // this.getNews();
              this.getMenu();
            }
          }
        })
        .catch((err) => {
          //任何异常都跳转到登陆界面。
          uni.showModal({
            content: "您未登录，需要登录后才能继续",
            showCancel: false,
            success: (res) => {
              if (res.confirm) {
                uni.navigateTo({
                  url: "../login/login",
                });
              }
            },
          });
        });
    } else if (!userInfo) {
      uni.showModal({
        content: "您未登录，需要登录后才能继续",
        showCancel: false,
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: "../login/login",
            });
          }
        },
      });
    } else {
      //没有自动登陆，但是已经登陆的用户，正常。
      // this.getNews();
      this.getMenu();
    }
  },
  methods: {
    getNews() {
      //ajax 获取当前的新闻列表
      this.$http
        .request({
          url: "/apis/news/list",
          method: "GET",
          params: {
            pageno: 1,
            pagesize: 6,
          },
        })
        .then((res) => {
          if (res) {
            if (!res.data.data.datas || res.data.data.datas.length == 0) {
              //没有数据
              this.marqueeList = [];
              return;
            }
            if (res.data.code == 0) {
              this.marqueeList = res.data.data.datas;
              //开始轮播滚动
              clearInterval(time);
              time = setInterval(this.scroll, 2000);
            }
          }
        });
    },
    getMenu() {
      //调用ajax 获取当前目录的菜单。
      this.$http
        .request({
          url: "/apis/sys/getMenus",
          params: {
            terminal: 1,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data && res.data.menus) {
            this.menus = res.data.menus;
          }
        })
        .catch((err) => {
          uni.showModal({
            content: "您未登录，需要登录后才能继续",
            showCancel: false,
            success: (res) => {
              if (res.confirm) {
                uni.navigateTo({
                  url: "../login/login",
                });
              }
            },
          });
        });
    },
    scroll() {
      this.animate = true;
      clearTimeout(t);
      t = setTimeout(() => {
        this.marqueeList.push(this.marqueeList[0]);
        this.marqueeList.shift();
        this.animate = false;
      }, 500);
    },

    //点击跳转到相应页面
    linkTo(index, indey) {
      let urlLink = "/" + this.menus[index].children[indey].routePath;
      // //所有任务需要特殊处理，因为是toolbar 里面的页签
      // if(item.routePath == 'pages/task/task'){
      // 	var url = item.routePath.split('/');
      // 	this.switchTo('../'+url[1]+'/'+url[2]);
      // }else{
      //这边的url 这样处理好像也不太好。
      let item_routePath = this.menus[index].children[indey].routePath;
      var url = item_routePath.split("/");
      console.log(url, "urlLink");
      if (
        JSON.stringify(url) ==
        JSON.stringify(["pages", "startWorking", "startWorking"])
      ) {
        var filterRes = {};
        this.$http
          .request({
            url: "apis/mes/dispatch/getOneStartWorking",
            params: filterRes,
          })
          .then((res) => {
            if (res.data.data) {
              uni.navigateTo({
                url: urlLink,
                // url: '/pages/'+url[1]+'/'+url[2]
              });
            } else {
              uni.showToast({
                title: "不存在在制工单",
                duration: 2000,
                icon: "none",
              });
              return;
            }
          });
      } else {
        console.log(urlLink, "-----");
        uni.navigateTo({
          // url: item.routePath
          url: urlLink,
        });
      }

      // }
    },
    linkToNews(item) {
      //"../schedule/news"
      uni.navigateTo({
        url: "/pages/schedule/newsDetail?id=" + item.id,
      });
    },
  },
};
</script>
<style scoped>
.grid-dot {
  position: absolute;
  top: 0px;
  right: 15px;
}
.content {
  /* padding-bottom:  var(--window-bottom); */
  margin-bottom: 20upx;
  margin-top: var(--status-bar-height);
}
.news_area {
  position: relative;
  width: 90%;
  margin: auto;
  background-color: #fff;
  padding: 30upx 10upx;
  box-sizing: border-box;
  margin-top: 20upx;
  height: 150upx;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
.news_icon {
  position: absolute;
  width: 60upx;
  height: 60upx;
  left: 20upx;
  margin: auto;
  top: 0;
  bottom: 0;
  background-image: url(../../static/img/xw@3x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 60upx;
}
.news_line {
  position: absolute;
  left: 100upx;
  right: 90upx;
  height: 90upx;
  overflow: hidden;
}
.news_text {
  font-size: 28upx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.red {
  position: absolute;
  width: 12upx;
  height: 12upx;
  border-radius: 12upx;
  background-color: red;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 60upx;
}
.news_more_icon {
  position: absolute;
  right: 20upx;
  margin: auto;
  top: 0;
  bottom: 0;
  height: 32upx;
  font-size: 32upx;
}
.items_area {
  position: relative;
  width: 95%;
  margin: auto;
}
.items_name {
  font-size: 32upx;
  line-height: 90upx;
}
.items_container {
  position: relative;
  width: 100%;
  background-color: #fff;
  border-radius: 6upx;
  padding: 22upx 0px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);

  display: block;
  overflow: hidden;
}
.items_out {
  float: left;
  position: relative;
  width: 25%;
  box-sizing: border-box;
  overflow: hidden;
  margin: 18upx 0px;
}
.items_icon {
  width: 60upx;
  height: 60upx;
  margin: auto;
  display: block;
}
.items_text {
  width: 100%;
  text-align: center;
  font-size: 28upx;
  line-height: 40upx;
  color: #444;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marquee_list {
  width: 100%;
  transition: top 0.5s;
}
.anim {
  transition: all 0.5s;
  margin-top: -40upx; //高度等于行高
}
</style>
