<template>

  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="5">
        <div class="scroll scroll-tree">
          <el-scrollbar>
            <el-tree class="filter-tree" :data="treeData" :props="defaultProps" @node-click="getTreeData" default-expand-all ref="tree">
            </el-tree>
          </el-scrollbar>
        </div>
      </el-col>

      <el-col :span="19">
        <el-form :model="queryform"  label-width="88px" ref="queryform">
          <el-row class="search-bm-boder">
            <el-col :span="8">
              <div>
                <el-form-item label="日期" class="fourLabel" label-width="40px">
                  <el-date-picker v-model="queryform.data" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="7" :offset="1">
                <div class="search-button">
                  <span class="search-line"></span>
                  <el-button class="outButton" icon="el-icon-search" size="medium" type="primary" @click="allFun">查询
                  </el-button>
                  <el-button class="outButton" icon="el-icon-refresh" size="medium" type="primary">清空</el-button>
                </div>
            </el-col>
          </el-row>
          <!-- <el-row>
            <el-col :span="24">
                <div style="clear: both;border-top: 1px dashed rgb(90, 170, 250);margin-bottom: 10px;"></div> 
                <div class="addBtnBg">
                <el-button class="outButton" icon="el-icon-upload2"  @click="see" type="primary">导出
                </el-button>
              </div>
            </el-col>
          </el-row> -->
        </el-form>
        <div v-for="(item, i) in tabTit" :key="i">
          <div class="detail-tit">|&#12288;{{item.name}}</div>
          <el-table :data="item.tableData" ref="multipleTable" tooltip-effect="dark"
            style="width: 100%" stripe border class="table1">
            <el-table-column align="center" label="指标" :show-overflow-tooltip="true" prop="pzmc"></el-table-column>
            <el-table-column align="center" label="标准" :show-overflow-tooltip="true" prop="jlbz"></el-table-column>
            <el-table-column align="center" label="收购价" :show-overflow-tooltip="true" prop="sgj"></el-table-column>
            <el-table-column align="center" label="出库价" :show-overflow-tooltip="true" prop="ckj"></el-table-column>
            <el-table-column align="center" label="出厂价" :show-overflow-tooltip="true" prop="ccj"></el-table-column>
            <el-table-column align="center" label="批发价" :show-overflow-tooltip="true" prop="pfj"></el-table-column>
            <el-table-column align="center" label="零售价" :show-overflow-tooltip="true" prop="lsj"></el-table-column>
          </el-table>
          <!-- 分页开始 -->
          <!-- <div class="pag-right clearFix">
            <el-pagination
              class="right"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="limit.page"
              :page-sizes="[10,20,30,40]"
              :page-size="limit.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="limit.total"
            ></el-pagination>
          </div> -->
        </div>
        <el-row style="text-align: center; margin-top:40px;">
          <el-col>
            <el-button type="primary" @click="cancel">
                <i class="iconfont iconfanhui"></i>
                返回
            </el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { queryCountryDetails, queryPointDetails,treeOrg } from '@/api/grainCirculationPrice/grainPriceQuotation/weekQuotation/index'
  import { Message } from "element-ui";
  export default {
    name: "index",
    data() {
      return {
        queryform: {
          data: []
        },
        tabTit: [{name:"原粮本周行情", tableData:[]},{name:"成品粮本周行情", tableData:[]},{name:"食用油及油料本周行情", tableData:[]}],
        treeData: [],
        defaultProps: {
          label: 'orgName',
          value: 'orgCode',
          children: 'children'
        },
        limit: {
          page: 1,
          size: 10,
          total: 0
        },
        treeDataVal: [],
      };
    },
    created() {
      // this.getList();
    },
    beforeCreate() {
      treeOrg().then(response=> {
        this.treeData = [response.data];
        console.log(this.treeData,123)
        this.queryform.data[0] = this.$route.query.startTime;
        this.queryform.data[1] = this.$route.query.endTime
        this.treeDataVal = this.treeData[0];
        this.allFun()
      })
    },
    methods: {
      getTreeData(data){
        this.treeDataVal = data;
        this.allFun()
      },
      allFun(){
        this.ylList();
        this.cplList();
        this.syyList();
      },
      getList(orgName, pzlb, titIndex) {
        let countryData = {
          "startTime": this.queryform.data[0],
          "endTime": this.queryform.data[1],
          "pzlb": pzlb,
          "sbdq": orgName
        }
        const pageData = {
          page: this.limit.page,
          size: this.limit.size
        }
        if(this.treeDataVal.orgLevel === "10180009"){
          queryPointDetails(countryData, pageData).then(response => {
            this.tabTit[titIndex].tableData = response.data.resultList;
            this.limit.total = response.data.total
            this.isloading = false
          })
        }else{
          queryCountryDetails(countryData, pageData).then(response => {
            this.tabTit[titIndex].tableData = response.data.resultList;
            this.limit.total = response.data.total
            this.isloading = false
          })
        }
      },
      ylList(){
        this.getList(this.treeDataVal.orgName, "原粮", 0);
      },
      cplList(){
        this.getList(this.treeDataVal.orgName, "成品粮", 1);
      },
      syyList(){
        this.getList(this.treeDataVal.orgName, "食用油及油料", 2);
      },
      handleSizeChange(val) {
        this.limit.size = val;
        this.getDataTable();
      },
      handleCurrentChange(val) {
        this.limit.page = val;
        this.getDataTable();
      },
      typeIndex(index) {
        return index + (this.limit.page - 1) * this.limit.size + 1;
      },
      // 取消
      cancel() {
        this.$router.go(-1);
      }
    }
  };
</script>

<style>
  .navMenu {
    display: block;
    float: left;
  }

  .app-container {
    display: block;
    float: left;
  }

  .el-tree-node:focus>.el-tree-node__content,
  .el-tree-node__content:hover {
    background: #ffffff;
    color: #66b1ff;
  }
</style>
<style scoped>
  /* .scroll {
     background: black;
    background-size: 100%;
    height: 100%;} */
  .input-box {
    text-align: left;
    padding: 0 30px;
  }
  .scroll-tree{
    background: #ffffff;
    height: 100vh;
    height: calc(100vh - 140px);
  }
  .el-scrollbar{
    height: 100%;
  }
</style>
<style>
.el-scrollbar__wrap{overflow-x: hidden;}
</style>