<template>
  <div class="receiptF">
    <!-- 头部信息 -->
    <header>
      <div class="total">
        <div class="total-left">
          “ 业财一体 ” - <span>{{ this.name }}</span>
        </div>
        <div class="total-right">
          <div>
            <el-radio-group v-model="timer" @change="dateChange(timer)">
              <el-radio-button label="day">本日</el-radio-button>
              <el-radio-button label="month">本月</el-radio-button>
              <el-radio-button label="quarter">本季</el-radio-button>
              <el-radio-button label="year">本年</el-radio-button>
              <el-radio-button label="all">开累</el-radio-button>
            </el-radio-group>
          </div>
          <div class="icon">
            <i @click="pushIndex" class="el-icon-s-home" :style="{ fontSize: '32px', color: 'rgb(64,158,225)' }"></i>
            <i class="el-icon-s-operation" :style="{
                fontSize: '32px',
                marginLeft: '15px',
                color: 'rgb(64,158,225)',
              }"></i>
          </div>
        </div>
      </div>
      <footer></footer>
    </header>
	<!-- 数字信息 -->
	<div class="num">
	  <div class="now">{{kuType}}金额&nbsp;<span>{{ this.numBox.price + "万元" }}</span></div>
	  <div class="before">{{kuType}}条数&nbsp;<span>{{ this.numBox.num + "条" }}</span></div>
	</div>
	<!-- 图标信息及表格 -->
	<div class="message">
	  <!-- 图标信息及表格 -->
	    <el-table :data="tableData" stripe border style="width: 100%" class="tab" v-loading="loading">
	    <el-table-column label="ID" prop="MainStockId" width="90"></el-table-column>
	    <el-table-column label="公司" prop="company"></el-table-column>
	    <el-table-column label="含税金额" prop="IncludedTaxValue"></el-table-column>
	    <el-table-column label="不含税金额" prop="Value"></el-table-column>
	    <el-table-column :label="kuType+'类型'" prop="stock_type_desp"></el-table-column>
	    <el-table-column :label="kuType+'单号'" prop="Code"></el-table-column>
	    <el-table-column label="入库日期" prop="StockDate"></el-table-column>
	  </el-table>
	  <!-- 分页 -->
	  <el-pagination class="bottom-pager" style="margin-top: 20px" background layout="prev,pager,next,total,->,jumper" @current-change="handlePageChange" :total="total">
	  </el-pagination>
	</div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-liquidfill"; //在这里引入
import { getBusinessDetailAPIlist } from "../../api";
export default {
  data () {
    return {
      severityEnum: ["", "轻度", "中度", "高度"],
      value: 0, // 预警级别
      value2: 0, // 预警类型
      loading: true,
      radio1: "0", // 单位
      id: '',
      name: '',
      tableData: [],
      chartsName: [],
      before: [],
      now: [],
      numBox: {
		price:'0',
		num:0
	  },
      total: 0,
      timer: 'day',
	  sinfo:{
        page: 1,
        org_id: '',
        onpage: 'day',
		type: 1
	  },
      info: localStorage.getItem("info"),
	  kuType:"入库",
      finish: null, // 完成率
    };
  },
  created () {
    const url = new URL(window.location.href);
    if (url.href.includes('?')) {
      this.id = localStorage.getItem("RSid");
      this.name = localStorage.getItem("RSname");
    } else {
      this.id = localStorage.getItem("id");
      this.name = localStorage.getItem("name");
    }
  },
  async mounted () {
	if(this.info==1 || this.info==3){
		this.kuType = "入库"
	}else{
		this.kuType = "出库"
	}
	this.sinfo = {
		page: this.page?this.page:1,
		org_id: this.id,
		onpage: this.timer?this.timer:'day',
		type: localStorage.getItem("info")
	},
    this.getBusinessDetail()
  },
  methods: {
    // 初始获取图表数据
    async getBusinessDetail () {
	  this.loading = true;
      const res = await getBusinessDetailAPIlist(this.sinfo);
      if (res.data.code === 0) {
        this.total = res.data.data.list.total;
        this.tableData = res.data.data.list.data;
		this.numBox.num = res.data.data.num
		this.numBox.price = res.data.data.price
      }
      this.loading = false;
    },
    // 时间发生改变
    async dateChange (value) {
      this.sinfo.onpage = value
      this.getBusinessDetail()
    },
    // 分页
    handlePageChange (page) {
      this.sinfo.page = page;
      this.getBusinessDetail();
    },
    // 回到首页
    pushIndex () {
      this.$router.push("/");
    }
  },
};
</script>
<style scoped lang="scss">
.receiptF {
  width: 100%;

  header {
    width: 100%;
    height: 130px;

    .total {
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: space-between;

      .total-left {
        margin-top: 20px;
        font-size: 32px;
        font-weight: 700;
        color: rgb(80, 139, 248);
      }

      .total-right {
        width: 900px;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        display: flex;
        overflow: hidden;
        margin-left: -100px;

        div:nth-child(2) {
          margin-left: -130px;

          ul {
            width: 200px;
            height: 35px;
            display: flex;
            border: 1px solid black;
            align-items: center;
            border-radius: 10px;

            li:last-child {
              border: none;
            }

            li {
              text-align: center;
              width: 50px;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              list-style: none;
              border-right: 1px solid black;
            }
          }
        }

        .icon {
          width: 80px;
          margin-left: -80px;
        }
      }
    }

    footer {
      width: 100%;
      height: 18px;
      background-color: rgb(216, 236, 255);
      color: blue;
      overflow: hidden;
    }
  }
  .num {
    width: 99%;
    height: 155px;
    margin: 15px auto;
    display: flex;
    justify-content: space-around;
  
    div {
      width: 31%;
      height: 90%;
      border: 2px solid gray;
    }
  
    .now {
      width: 31%;
      height: 100%;
      border-radius: 15px;
      font-size: 40px;
      text-align: center;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
  
      span {
        color: rgb(80, 139, 248);
      }
    }
  
    .before {
      width: 31%;
      height: 100%;
      border-radius: 15px;
      font-size: 40px;
      text-align: center;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
  
      span {
        color: rgb(80, 139, 248);
      }
    }
  
    .next {
      width: 31%;
      height: 100%;
      border-radius: 15px;
      font-size: 40px;
      text-align: center;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
  
      span {
        color: greenyellow;
      }
    }
  }
  .message {
    width: 97%;
	margin:0 auto;
  
    .charts {
      width: 40%;
      height: 100%;
  
      div {
        canvas {
          width: 800px;
        }
      }
    }
  
    .table {
      width: 58%;
      height: 100%;
    }
  }
  .elForm {
    .yujingType {
      margin-right: 20px;
    }
  }
}
.bottom-pager {
  margin-top: 20px;
  margin-left: 50px;
  width: 90vw;
  margin-bottom: 24px;
}
.el-select-dropdown__item {
  background: none !important;
}
</style>
