<template>
  <div class="SalesReportRejectedNew" style="min-height:300px">
    <div v-if="!state.error && isShow">
      <div class="table-header" style="line-height:36px">万宇应收账款报表看板</div>
      <el-table
        :max-height="maxHeight"
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        :size="'mini'"
        row-key="id"
        border
        stripe
      >
        <el-table-column label="业务公司" fixed="left" width="80" prop="depart">
          <template slot-scope="scope">{{scope.row.depart.split('@')[1] || '总计'}}</template>
        </el-table-column>

        <el-table-column label="应收账款" prop="wpay_fee" align="center" >
          <template slot-scope="scope">
             {{ unit2TenThousand(scope.row.wpay_fee) }}
          </template>
        </el-table-column>
        
        <el-table-column label="已开票" prop="ainv_fee" align="center" >
          <template slot-scope="scope">
             {{ unit2TenThousand(scope.row.ainv_fee) }}
          </template>
        </el-table-column>
        
        <el-table-column label="已回款" prop="apay_fee" align="center">
          <template slot-scope="scope">
            {{ unit2TenThousand(scope.row.apay_fee) }}
          </template>
        </el-table-column>
        
        <el-table-column label="已开票-已回款" prop="ainv_apay_fee" align="center">
          <template slot-scope="scope">
            {{ unit2TenThousand(scope.row.ainv_apay_fee) }}
          </template>
        </el-table-column>
        
        <el-table-column label="未开票" prop="winv_fee" align="center">
          <template slot-scope="scope">
            {{ unit2TenThousand(scope.row.winv_fee) }}
          </template>
        </el-table-column>
        
        <el-table-column label="待开票" prop="inv_fee" align="center">
          <template slot-scope="scope">
            {{ unit2TenThousand(scope.row.inv_fee) }}
          </template>
        </el-table-column>
        
        <el-table-column label="已发货未开票" prop="winv_asend_fee" align="center">
          <template slot-scope="scope">
            {{ unit2TenThousand(scope.row.winv_asend_fee) }}
          </template>
        </el-table-column>
        
        <el-table-column label="未发货" prop="wpay_send_fee" align="center">
          <template slot-scope="scope">
            {{ unit2TenThousand(scope.row.wpay_send_fee) }}
          </template>
        </el-table-column>

        <el-table-column label="超60天已发货未开票" prop="winv_two_month" align="center">
          <template slot-scope="scope">
            {{ unit2TenThousand(scope.row.winv_two_month) }}
          </template>
        </el-table-column>

        <el-table-column label="超180天应收账款" prop="wpay_six_month" align="center">
          <template slot-scope="scope">
            {{ unit2TenThousand(scope.row.wpay_six_month) }}
          </template>
        </el-table-column>
      </el-table>
    </div>

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

<script>
import asyncRequest from "@/api/report";
import userRequest from "@/api/index"
import setHeight from "@/mixins/index";
import { getOpenid, getParameterByName, removeOpenid, setOpenid } from "../utils/auth";
import UnusualState from "@/components/unusual/index.vue"

import { 
  mapResponseCompletionCompanyName,
  unit2TenThousand,
  getCompanyLabel,
  addition
} from "@/components/reports/src/_utils";

export default {
  name: "WanyuTypeReport",
  props: ["date"],
  mixins: [setHeight],
  components:{UnusualState},
  watch: {
    date: function(val) {
      this.dataTime = val;
      if (val) {
        this.searchList();
      }
    }
  },
  data() {
    return {
      isShow:false,
      total:{
        day:0,
        month:0,
        total_tips: 0
      },
      state:{
        error:false,
        loading:false,
        message:'',
      },
      mapResponseCompletionCompanyName,
      dataTime: this.date,
      loading: false,
      maxHeight: "0",
      tableData: []
    };
  },
  async created() {
    document.title = "3.应收账款"
    window.onresize = () => {
      this.getHeight();
    };
  },
  mounted() {
    if(!getParameterByName('code')){
      this.login()
    }else{
      this.requestUserinfo()
    }
  },
  methods: {
    async requestUserinfo(){
       this.state.loading = true;
       const openid = getOpenid()
       const code = getParameterByName('code')
       const result = await userRequest.userinfo({ 
         ...( openid ? { openid } :  { code })
        })

        this.state.loading = false
        switch(Number(result.code)){
          case 0:
          this.isShow =  (result.data.is_show || []).includes(3) || (result.data.is_show || []).includes('3')
          this.$nextTick(() => this.getHeight());
          this.searchList();
          setOpenid(result.data.openid)
           break
          default:
           this.state.error = true
           this.state.message = result.message
           openid && removeOpenid()
           break
        }
      },
    getCompanyLabel,
    unit2TenThousand,
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    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
    },
    async searchList() {
      this.loading = true;
      this.tableData = [];
      const res = await asyncRequest.list({
        daytime: this.date
      });

      if (res.code === 0 && res.data && res.data.length > 0) {
        const tableData = res.data
        const totalItem = res.data.reduce((prev, current) => Object.keys(current).reduce((prev, currentKey) => ({
        ...prev,
        [currentKey]: currentKey !== 'depart' ? addition(current[currentKey] || 0, prev[currentKey] || 0) : '总计'
      }), prev), {})

        this.tableData = [...tableData,totalItem]
      } else {
        this.tableData = [];
      }
      this.getHeight();
      this.loading = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.SalesReportRejectedNew {
  padding: 10px;
}

.table-header {
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  border-bottom: none;
}

.table-sub__header {

  span{
    font-weight: bold !important;
  }
}
</style>

