<template>
  <div class="electro">
    <div class="reply" :style="{color: color}">全场用料情况</div>
    <x-form :formItems="formItems" :day="day" @setDay="setDay" @onClickType="onClickType"></x-form>
    <div class="echarts">
      <div class="echarts-l">
        <chart-stark :starkCount="starkAllCount"></chart-stark>
      </div>
      <div class="echarts-r">
        <chart-stark-bar :starkList="starkAllList"></chart-stark-bar>
      </div>
    </div>
    <br>
    <div class="reply" :style="{color: color}">用料量详情</div>
    <x-form :formItems="selectItems" :day="day1" @setDay="setDay1" @onClickType="onClickType1"></x-form>
    <div class="echarts">
      <div class="echarts-l">
        <chart-stark :id="'1'" :starkCount="starkCount"></chart-stark>
      </div>
      <div class="echarts-r">
        <chart-stark-bar-one :id="'1'" :starkList="starkList"></chart-stark-bar-one>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import XForm from "@/components/XForm";
import ChartStark from "./chart/ChartStark";
import ChartStarkBar from "./chart/ChartStarkBar";
import ChartStarkBarOne from "./chart/ChartStarkBarOne";
import { getAllFodder, getFodder, getSchool } from "../../utils/api";
import { timeDate } from "../../utils";

export default {
  name: "Stark",
  components: {
    XForm,
    ChartStark,
    ChartStarkBar,
    ChartStarkBarOne
  },
  data() {
    return {
      formItems: [
        {
          id: 2,
          type: 'text',
          text: '本周',
          value: 1,
          col: 1
        },
        {
          id: 3,
          type: 'text',
          text: '本月',
          value: 2,
          col: 1
        },
        {
          id: 4,
          type: 'datepicker',
          placeholder: [],
          field: 'value1',
          col: 6
        },
        {
          id: 8,
          type: 'button',
          text: '查询',
          col: 2,
          click: 'search'
        },
        {
          id: 5,
          type: 'button',
          text: '导出数据',
          col: 2,
          click: 'derive'
        },
      ],
      day: 1,
      selectItems: [
        {
          id: 1,
          type: 'select',
          label: '栋舍：',
          placeholder: '请选择栋舍',
          field: 'floorId',
          options: [],
          col: 4
        },
        {
          id: 4,
          type: 'text',
          text: '本周',
          value: 1,
          col: 1
        },
        {
          id: 5,
          type: 'text',
          text: '本月',
          value: 2,
          col: 1
        },
        {
          id: 6,
          type: 'datepicker',
          placeholder: [],
          field: 'value1',
          col: 6
        },
        {
          id: 8,
          type: 'button',
          text: '查询',
          col: 2,
          click: 'search'
        },
        // {
        //   id: 7,
        //   type: 'button',
        //   text: '导出数据',
        //   col: 2,
        //   click: 'derive'
        // }
      ],
      day1: 1,
      starkCount: 0,
      starkAllCount: 0,
      starkList: [],
      starkAllList: [],
    };
  },
  computed: {
    ...mapState(['color'])
  },
  methods: {
    // 获取全部用料
    init() {
      getAllFodder({}).then(res => {
        if(res.code === 10000) {
          this.starkAllCount = res.data.value;
          this.starkAllList = res.data.fodderList;
        }
      })
      getFodder({}).then(res => {
        if(res.code === 10000) {
          this.starkCount = res.data.value;
          this.starkList = res.data.fodderList;
        }
      })
    },
    getSchool() {
      getSchool({}).then(res => {
        if(res.code === 10000) {
          res.data.forEach(item => {
            item.value = item.id;
            item.label = item.floorName;
          })
          this.selectItems[0].options = res.data;
        }
      })
    },
    setDay(data) {
      this.day = data.type;
      let params = {
        endDate: timeDate(new Date().getTime()),
        type: this.day
      }
      getAllFodder(params).then(res => {
        if(res.code === 10000) {
          this.starkAllCount = res.data.value;
          this.starkAllList = res.data.fodderList;
        }
      })
    },
    onClickType(data) {
      if(data.type === 'search') {
        let params = {};
        if(data.data.value1) {
          params = {
            startDate: data.data.value1[0],
            endDate: data.data.value1[1],
            type: 3
          }
        } else {
          params = {
            endDate: timeDate(new Date().getTime()),
            type: this.day
          }
        }
        getAllFodder(params).then(res => {
          if(res.code === 10000) {
            this.starkAllCount = res.data.value;
            this.starkAllList = res.data.fodderList;
          }
        })
      }
    },
    setDay1(data) {
      this.day1 = data.type;
      let data1 = data.data;
      if (data1.floorId) {
        let end = timeDate(new Date().getTime())
        let params = {
          floorId: data1.floorId,
          endDate: end,
          type: this.day1
        }
        getFodder(params).then(res => {
          if(res.code === 10000) {
            this.starkCount = res.data.value;
            this.starkList = res.data.fodderList;
          }
        })
      } else {
        this.$message.error('请选择栋舍查询');
      }
    },
    onClickType1(data) {
      if(data.type === 'search') {
        let data1 = data.data;
        if (data1.floorId) {
          let params;
          if(data1.value1) {
            params = {
              floorId: data1.floorId,
              startDate: data1.value1[0],
              endDate: data1.value1[1],
              type: 4,
            }
          } else {
            let end = timeDate(new Date().getTime())
            params = {
              floorId: data1.floorId,
              endDate: end,
              type: this.day1
            }
          }
          getFodder(params).then(res => {
            if(res.code === 10000) {
              this.starkCount = res.data.value;
              this.starkList = res.data.fodderList;
            }
          })
        } else {
          this.$message.error('请选择栋舍查询');
        }
      }
    },

  },
  mounted() {
    this.getSchool()
    this.init()
  }
}
</script>

<style scoped>
.electro {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 20px 0 20px;
}
.reply {
  width: 100%;
  border: 1px solid #ddd;
  border-bottom: 0;
  height: 50px;
  background-color: #F3F3F3;
  line-height: 50px;
  font-size: 18px;
  box-sizing: border-box;
  padding-left: 20px;
}
.echarts {
  width: 100%;
  height: 401px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-top: 0;
  display: flex;
}
.echarts-l {
  width: 30%;
  height: 100%;
}
.echarts-r {
  width: 70%;
  height: 100%;
}
</style>
