<template>
  <div class="new-report" v-loading="state.loading" style="min-height:300px">
    <div v-if="!state.error && isShow">
      <!-- <div style="display:flex;justify-content:flex-end">
        <period-date-picker :start="date[0]" :end="date[1]" size="mini" width="150px" @timeReturned="time($event)" />
      </div> -->

      <el-row :gutter="20">
        <el-col :xs="24">
          <not-deliver-good :title="'1.无地址销售订单统计'" :date="date" />
        </el-col>

        <el-col :xs="24">
          <send-order :title="'2.发货工单未发货时效统计'" :date="date" />
        </el-col>

        <el-col :xs="24">
          <send-exp :title="'3.待采购备货时效统计'" :date="date" />
        </el-col>

        <el-col :xs="24">
          <the-sales :title="'4.当日库存销售统计'" :date="date" />
        </el-col>
        <el-col :xs="24">
          <the-stock :title="'5.当日库存发货统计'" :date="date" />
        </el-col>
      </el-row>
    </div>

    <template v-else-if="!state.loading">
      <unusual-state :hasPermission="isShow" :message="state.message" path="newReport" />
    </template>
  </div>
</template>

<script>
import NotDeliverGood from "../components/newReport/src/notDeliverGood.vue";
import PurchaseBack from "../components/newReport/src/PurchaseBack.vue";
import EmptyReturn from "../components/newReport/src/emptyReturn.vue";
import SendOrder from "../components/newReport/src/sendOrder.vue";
import TheSales from "../components/newReport/src/theSales.vue";
import Purchase from "../components/newReport/src/purchase.vue";
import PeriodDatePicker from "../components/period-date-picker";
import Consult from '../components/newReport/src/consult.vue';
import SendExp from "../components/newReport/src/sendExp.vue";
import Order from '../components/newReport/src/order.vue';
import Stock from "../components/newReport/src/Stock.vue";
import TheStock from "../components/newReport/src/theStock.vue";

import dayjs from "dayjs"
import UnusualState from "@/components/unusual/index.vue";
import { getOpenid, getParameterByName, removeOpenid, setOpenid } from "../utils/auth";
import userRequest from "@/api/index";

export default {
  name: "newReport",
  components: {
    PeriodDatePicker,
    NotDeliverGood,
    UnusualState,
    PurchaseBack,
    EmptyReturn,
    SendOrder,
    TheSales,
    Purchase,
    SendExp,
    Consult,
    TheStock,
    Stock,
    Order
  },
  data() {
    return {
      date: [],
      zxTotal: 0,
      isDisplay: false,
      state:{
        message: '',
        error: false,
        loading: false
      }
    };
  },
  mounted() {
    document.body.style.position = "static"
    document.title = "5.发货情况"
    if(!getParameterByName('code')){ this.login() }else{
      this.requestUserinfo()
    }
    const current = dayjs(new Date()).format("YYYY-MM-DD")
    this.date = [current + " 00:00:00", current + " 23:59:59"]
  },
  methods: {
    getZXTotal(zxTotal) {
      this.zxTotal = zxTotal;
    },
    async time(e) {
      const { startTime, endTime } = e;
      this.start = startTime || "";
      this.end = endTime || "";

      const { start, end } = this;
      if ((start !== "" && end === "") || (start === "" && end !== "")) {
        this.$message.warning("时间区间不完整！");
        this.date = []
        return;
      }

      if(this.start && this.end){
        this.date = [this.start + " 00:00:00", this.end + " 23:59:59"]
      }else{
        this.date = [this.start, this.end]
      }

    },
    async requestUserinfo(){
       this.state.loading = true;
       const openid = getOpenid()
       const code = getParameterByName('code')
       const result = await userRequest.userinfo({
          ...( openid ? { openid } :  { code })
        })

      // const result ={
      // "code": 0,
      // "message": "获取成功",
      // "data": {
		  //     "id": "1",
		  //     "openid": "oOpc26KiZFBKIm7SB8knFGvov1qg",
		  //     "mobile": "",
		  //     "gender": "0",
		  //     "nickname": "雪寒",
		  //     "avatar": "",
		  //     "subscribe_time": "2022-12-21 15:52:14",
		  //     "addr": "\/\/",
		  //     "status": "1",
		  //     "is_show": ["1", "2", "4", "5"],
		  //     "companyArr": [{
		  //     	"companyNo": "GS2302231125079621",
		  //     	"companyName": "北京百辰荣达国际科贸有限公司",
		  //     	"info": [1,2]
		  //     }, {
		  //     	"companyNo": "GS2302231323386950",
		  //     	"companyName": "北京泓源广诚国际商贸有限公司",
		  //     	"info": [1,2]
		  //     }, {
		  //     	"companyNo": "GS2304031312553746",
		  //     	"companyName": "北京锦兴弘昌科技有限公司",
		  //     	"info": [1, 2]
		  //     }, {
		  //     	"companyNo": "GS2302231124114965",
		  //     	"companyName": "北京普润心堂商贸有限公司",
		  //     	"info": [1, 2]
		  //     }, {
		  //     	"companyNo": "GS2203161855277894",
		  //     	"companyName": "北京万宇恒通国际科贸有限公司",
		  //     	"info": [1, 2]
		  //     }],
		  //     "addtime": "2023-04-10 18:11:07",
		  //     "updatetime": "2023-05-09 16:22:33"
      // 	}
      // }

        this.state.loading = false
        switch(Number(result.code)){
          case 0:
           this.isShow =  (result.data.is_show || []).includes(5) || (result.data.is_show || []).includes('5')
           setOpenid(result.data.openid)
           break
          default:
           this.state.error = true
           this.state.message = result.message
           openid && removeOpenid()
           break
        }
      },
    login(){
      const redirect_url = encodeURIComponent('http://stat.caixiao365.com/accountsReceivable')
      var state = 'wx_' + Math.random().toString(36).substr(2, 15)
      const scope = 'snsapi_userinfo'
      const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${config.appId}&redirect_uri=${redirect_url}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`
      window.location.href = url
    },
  }
}
</script>

<style lang="scss" scoped>
.new-report {
  padding: 10px;
  box-sizing: border-box;
  position: static;

  .title {
    padding-left: 5px;
  }
}
</style>
