<!--
 * @Author: zhp
 * @Date: 2024-04-15 10:49:13
 * @LastEditTime: 2024-06-27 14:56:20
 * @LastEditors: DY
 * @Description:
-->
<template>
  <div style="display: flex; flex-direction: column; min-height: calc(100vh - 200px - 31px)">
    <div class="app-container" style="padding: 16px 24px 0; height: auto; flex-grow: 1;">
      <el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
        <el-form-item label="时间维度" prop="type">
          <el-select v-model="listQuery.type" size="small" clearable placeholder="请选择">
            <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-show="listQuery.type === 0 || listQuery.type === ''" label="时间范围" prop="reportTime">
          <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="datetimerange" range-separator="至"
            start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item v-show="listQuery.type === 1" label="时间范围" prop="reportTime">
          <el-date-picker size="small" clearable v-model="listQuery.start" type="week" format="yyyy 第 WW 周" placeholder="选择周"
            style="width: 180px" @change="onValueChange">
          </el-date-picker>
          至
          <el-date-picker size="small" clearable v-model="listQuery.end" type="week" format="yyyy 第 WW 周" placeholder="选择周"
            style="width: 180px" @change="onValueChange">
          </el-date-picker>
          <!-- <span v-if="listQuery.start && listQuery.end" style="margin-left: 10px">
            {{ date1 }} 至 {{ date2 }}，共 {{ weekNum }} 周
          </span> -->
        </el-form-item>
        <el-form-item v-show="listQuery.type === 2" label="时间范围" prop="reportTime">
          <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="monthrange" value-format="yyyy-MM-dd" range-separator="至"
            start-placeholder="开始月份" end-placeholder="结束月份" @change="changeTime">
          </el-date-picker>
        </el-form-item>
        <el-form-item v-show="listQuery.type === 3" label="时间范围" prop="reportTime">
          <el-date-picker size="small" clearable v-model="listQuery.start" value-format="yyyy-MM-dd" type="year"
            placeholder="开始时间">
          </el-date-picker>
          ~
          <el-date-picker size="small" clearable v-model="listQuery.end" value-format="yyyy-MM-dd" type="year" placeholder="结束时间"
            @change="getYear">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="工厂名称" prop="factory">
          <el-select size="small" clearable v-model="listQuery.factory" placeholder="请选择工厂名称" multiple >
            <el-option v-for="item in factoryArray" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="玻璃类型" prop="type">
          <el-select v-model="listQuery.type" placeholder="请选择玻璃类型">
            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="玻璃类型" prop="glass">
          <el-select size="small" clearable v-model="listQuery.glass" multiple placeholder="请选择玻璃类型">
            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="getDataList">查询</el-button>
          <el-button type="primary" size="small" plain @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="app-container" style="margin-top: 8px;padding: 16px; height: auto; flex-grow: 1;">
      <!-- <el-row :gutter="24"> -->
      <!-- <el-col :span="12" v-for="item in  dataList" :key="item.id"> -->
      <search-bar :formConfigs="formConfig1" ref="searchBarForm1" style="margin-bottom: 0" />
      <line-chart ref="lineChart" class="yearChart" style="height: 45vh;width: 100%"></line-chart>
      <!-- </el-col> -->
      <!-- <el-col :span="12">
            <line-chart :id=" 'second' " class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart>
          </el-col> -->
    </div>
    <div class="app-container" style="margin-top: 8px;flex-grow: 1; height: auto; padding: 16px;">
      <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" style="margin-bottom: 0" />
      <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
        :table-data="tableData" :max-height="tableH">
        <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
          :method-list="tableBtn" @clickBtn="handleClick" />
      </base-table>
      <pagination
        :limit.sync="listQuery.pageSize"
        :page.sync="listQuery.pageNo"
        :total="listQuery.total"
        @pagination="getDataList"
      />
    </div>
    <add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" @refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" />
    <!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all"
      :type="listQuery.reportType" @refreshDataList="getDataList" /> -->
    <!-- <pagination
			:limit.sync="listQuery.pageSize"
			:page.sync="listQuery.pageNo"
			:total="listQuery.total"
			@pagination="getDataList" /> -->
  </div>
</template>

<script>
// import { parseTime } from "@/utils/ruoyi";
import tableHeightMixin from "@/mixins/tableHeightMixin";
import { getProduceDataPage, getproddata, exportOutPutExcel } from '@/api/produceData';
// import inputTable from './inputTable.vue';
import lineChart from './lineChart';
import moment from 'moment'
import ButtonNav from '@/components/ButtonNav'
import basicPage from '@/mixins/basic-page'
import AddOrUpdate from './add-or-updata'
import { factoryList, factoryArray, factoryArray1 } from "@/utils/constants";

export default {
  components: { lineChart, ButtonNav, AddOrUpdate },
  mixins: [basicPage, tableHeightMixin],
	data() {
    return {
      factoryList,
      factoryArray,
      factoryArray1,
      listQuery: {
        pageSize: 20,
        pageNo: 1,
        factory: undefined,
        total: 0,
        type: 0, // 时间维度
        glass: undefined, // 玻璃类型
        // reportType: 2,
        startDate: undefined,
        endDate:undefined,
        reportTime: null,
        start: null,
        end: null
      },
      detailOrUpdateVisible:false,
      date1: undefined,
      date2: undefined,
      tableBtn: [
          {
            type: 'detail',
            btnName: '详情',
        },
        // {
        //     type: 'delete',
        //     btnName: '删除',
        //   },
      ].filter((v) => v),
      typeList: [
        {
          name: '玻璃芯片',
          id: 0,
        },
        {
          name: '标准组件',
          id: 1,
        },
        {
          name: 'BIPV产品',
          id: 2,
        },
        // {
        //   name: '定制组件',
        //   id: 3,
        // },
      ],
      formConfig: [
        {
          type: 'title',
          label: '工厂信息',
        },
      ],
      formConfig1: [
        {
          type: 'title',
          label: '良品数量',
        },
      ],
      timeList: [
        {
          value: 0,
          label: '日'
        },
        {
          value: 1,
          label: '周'
        },
        {
          value: 2,
          label:'月'
        },
        {
          value: 3,
          label: '年'
        }
      ],
      tableProps: [
        {
          prop: 'datestr',
          label: '日期',
          minWidth: 120,
          showOverflowtooltip: true
        },
        {
          prop: 'factory',
          label: '工厂名称',
          filter: (val) =>  factoryList[val],
          minWidth: 180,
          showOverflowtooltip: true
        },
        {
          prop: 'glassType',
          label: '玻璃类型',
          filter: (val) => ['玻璃芯片', '标准组件', 'BIPV', '定制组件'][val]
        },
        {
          prop: 'inputNum',
          label: '投入数量',
        },
        {
          prop: 'outputNum',
          label: '产出数量',
        },
        {
          prop: 'goodNum',
          label: '良品数量',
        },
        {
          prop: 'goodRatio',
          label: '良品率%',
          filter: (val) => val + '%'
        },
      ],
      tableData: [],
      lineData: [],
      chart: null,
      seriesList: [],
      colorList: ['#7164FF',  '#63BDFF', '#8EF0AB', '#FFCE6A']
			// proLineList: [],
			// all: {}
		};
  },
  // computed: {
  //   weekNum() {
  //     return Math.round((this.listQuery.end - this.listQuery.start) / (24 * 60 * 60 * 1000 * 7)) + 1
  //   },
  // },
  created() {
    const today = new Date()
    const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000))
    this.listQuery.startDate = moment(sevenDaysAgo).format('yyyy-MM-DD')
    this.listQuery.endDate = moment(today).format('yyyy-MM-DD')
    this.listQuery.reportTime = [this.listQuery.startDate, this.listQuery.endDate]
	},
	mounted() {
	},
  methods: {
    otherMethods(val) {
      this.detailOrUpdateVisible = true;
      this.addOrEditTitle = "详情";
      this.$nextTick(() => {
        this.$refs.detailOrUpdate.init(val.data.id, this.listQuery.type, val.data.glassType);
      });
    },
    getYear(e) {
      if (this.listQuery.end - this.listQuery.start > 10*365*24*60*60*1000) {
        this.$message({
          message: '年份起止时间不能超过十年',
          type: 'warning'
        });
        this.listQuery.reportTime = []
        this.listQuery.start = undefined
        this.listQuery.end = undefined
        // console.log();
      } else {
        this.listQuery.startDate = this.listQuery.start
        this.listQuery.endDate = this.listQuery.end
      }
      if (!this.listQuery.start && !this.listQuery.end) {
        this.listQuery.startDate = undefined
        this.listQuery.endDate = undefined
      }
      // console.log(e);
    },
    onValueChange(picker, k) { // 选中近k周后触发的操作
      if (this.listQuery.start && this.listQuery.end) {
        console.log(this.listQuery.reportTime)
        this.date1 = moment(this.listQuery.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
        this.date2 = moment(this.listQuery.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
        const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000);
        if (numDays > 168) {
          console.log(numDays)
          this.$message({
            message: '周范围不能超过24周',
            type: 'warning'
          });
        } else {
          this.listQuery.startDate = moment(this.listQuery.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
          this.listQuery.endDate = moment(this.listQuery.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
        }
      }
      if (!this.listQuery.start && !this.listQuery.end) {
        this.listQuery.startDate = undefined
        this.listQuery.endDate = undefined
      }
    },
    changeDayTime() {
      if (this.listQuery.reportTime) {
        // this.createStartDate = moment(new Date(this.listQuery.reportTime[0]), 'yyyy-MM-dd hh:mm:ss');
        // this.createEndDate = moment(new Date(this.listQuery.reportTime[1]), 'yyyy-MM-dd hh:mm:ss');
        console.log(this.listQuery.reportTime[1])
        const numDays = (this.listQuery.reportTime[1] - this.listQuery.reportTime[0]) / (24 * 3600 * 1000);
        if (numDays > 30) {
          this.$message({
            message: '时间范围不能超过30天',
            type: 'warning'
          });
          this.listQuery.reportTime = [];
        } else {
          this.listQuery.startDate = this.listQuery.reportTime[0]
          this.listQuery.endDate = this.listQuery.reportTime[1]
        }
      } else {
        this.listQuery.startDate = undefined
        this.listQuery.endDate = undefined
      }
    },
    changeTime(value) {
      if (this.listQuery.reportTime) {
        const numDays = this.listQuery.reportTime[1] - this.listQuery.reportTime[0];
        if (numDays > 2*365*24*60*60*1000) {
          this.$message({
            message: '时间范围不能超过24个月',
            type: 'warning'
          });
          this.listQuery.reportTime = [];
        } else {
          this.listQuery.startDate = this.listQuery.reportTime[0]
          this.listQuery.endDate = this.listQuery.reportTime[1]
        }
      } else {
        this.listQuery.startDate = undefined
        this.listQuery.endDate = undefined
      }
    },
    async getDataList() {
      if (this.listQuery.type === '') {
        this.$message.warning('请选择时间维度！')
        return
      }
      if (this.listQuery.startDate === undefined) {
        this.$message.warning('请选择时间范围！')
      } else {
        await getProduceDataPage(this.listQuery).then(res => {
          console.log(res)
          if (res.code === 0) {
            this.tableData = res.data.records
            this.listQuery.total = res.data.total
          }
        })

        // 图表
        await getproddata(this.listQuery).then(resp => {
          if (resp.data?.length > 0) {
            const chartData = Object.groupBy(resp.data, (member) => member.datestr)
            this.buildChart(chartData, resp.data)
          } else {
            this.$refs.lineChart.initChart([], [])
          }
        })
      }
    },
    buildChart(data, dataList) {
      let xAxisData = []
      this.seriesList = []
      // x轴数据
      xAxisData = Object.keys(data)

      // y轴数据
      this.factoryArray.forEach(fac => {
        let i =  0
        while ( i < 3) {
          // 下标
          const index1 = ['chipYield', 'componentYield', 'bipvProductOutput'][i]
          // let oneChart = {}
          xAxisData.forEach((x, index) => {
            if (this.listQuery.glass.length === 0 || this.listQuery.glass.length === 3) {
              let series = {
                name: ['玻璃芯片', '标准组件', 'BIPV'][i] + '-' + fac.id,
                type: 'bar',
                stack: String(fac.id),
                data: Array(xAxisData.length).fill(0),
                barWidth: 20,
                itemStyle: {
                  color: this.colorList[i]
                },
                label: {
                  show: i === 2 ? true : false,
                  position: 'top',
                  formatter(params) {
                    return fac.name.substring(0, 2)
                  }
                }
              }
              dataList.forEach(item => {
                if (fac.id === item.factory && item.datestr === x) {
                  series.data[index] = item[index1]
                }
              })
              this.seriesList.push(series)
            } else {
              this.listQuery.glass.forEach(gl => {
                if (gl === i) {
                  let series = {
                    name: ['玻璃芯片', '标准组件', 'BIPV'][i] + '-' + fac.id,
                    type: 'bar',
                    stack: String(fac.id),
                    data: Array(xAxisData.length).fill(0),
                    barWidth: 20,
                    itemStyle: {
                      color: this.colorList[i]
                    },
                    label: {
                      show: true,
                      position: 'top',
                      formatter(params) {
                        if (params.value === 0) {
                          return ''
                        } else {
                          // return ['瑞昌', '邯郸'][params.seriesName.split('-')[1]]
                          return fac.name.substring(0, 2)
                        }
                      }
                    }
                  }
                  dataList.forEach(item => {
                    if (fac.id === item.factory && item.datestr === x) {
                      series.data[index] = item[index1]
                    }
                  })
                  this.seriesList.push(series)
                }
              })
            }
            // let series = {
            //   name: ['玻璃芯片', '标准组件', 'BIPV'][i] + '-' + fac.id,
            //   type: 'bar',
            //   stack: String(fac.id),
            //   data: Array(xAxisData.length).fill(0),
            //   barWidth: 20,
            //   itemStyle: {
            //     color: this.colorList[i]
            //   }
            // }
            // dataList.forEach(item => {
            //   if (fac.id === item.factory && item.datestr === x) {
            //     series.data[index] = item[index1]
            //   }
            // })
            // this.seriesList.push(series)
          })
          i ++
        }
      })
      console.log('你好', this.seriesList)
      this.$refs.lineChart.initChart(xAxisData, this.seriesList)
    },
		buttonClick(val) {
			this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
			switch (val.btnName) {
				case 'search':
					this.listQuery.pageNo = 1;
					this.listQuery.pageSize = 20;
					this.getDataList();
					break;
				case 'export':
					this.handleExport();
					break;
				default:
					console.log(val);
			}
		},
		/** 导出按钮操作 */
    handleExport() {
      this.$modal.confirm('是否确认导出生产数据?').then(() => {
        // 处理查询参数
        let params = {...this.listQuery};
        params.pageNo = 1;
        params.pageSize = 999;
        this.exportLoading = true;
        return exportOutPutExcel(params);
      }).then(response => {
        this.$download.excel(response, '生产数据.xls');
        this.exportLoading = false;
      }).catch(() => {});
      // 处理查询参数
      // var xlsxParam = { raw: true };
      // /* 从表生成工作簿对象 */
      // import('xlsx').then(excel => {
      //   var wb = excel.utils.table_to_book(
      //     document.querySelector("#exportTable"),
      //     xlsxParam
      //   );
      //   /* 获取二进制字符串作为输出 */
      //   var wbout = excel.write(wb, {
      //     bookType: "xlsx",
      //     bookSST: true,
      //     type: "array",
      //   });
      //   try {
      //     FileSaver.saveAs(
      //       //Blob 对象表示一个不可变、原始数据的类文件对象。
      //       //Blob 表示的不一定是JavaScript原生格式的数据。
      //       //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
      //       //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
      //       new Blob([wbout], { type: "application/octet-stream" }),
      //       //设置导出文件名称
      //       "许昌安彩日原片生产汇总.xlsx"
      //     );
      //   } catch (e) {
      //     if (typeof console !== "undefined") console.log(e, wbout);
      //   }
      //   return wbout;
      //   //do something......
      // })

    },
	},
};
</script>

<style scoped>
/* .blueTip { */
	/* padding-bottom: 10px; */
/* } */
/* .blueTi */
.blueTip::before{
  display: inline-block;
  content: '';
  width: 4px;
  height: 18px;
  background: #0B58FF;
  border-radius: 1px;
  margin-right: 8PX;
  margin-top: 8px;
}
.app-container {
  margin: 0 0px 0;
  background-color: #fff;
  border-radius: 4px;
  padding: 16px 16px 0;
  height: calc(100vh - 134px);
  overflow: auto;
}
</style>
