<template>
  <div class="content-main fumigationRecordPage">
    <div class="fieldset">
      <el-form ref="form" inline :model="form" label-width="80px">
        <el-form-item label="统计时间:" prop="timeList">
          <el-date-picker
            v-model="form.timeList"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="库点名称:" prop="kdName">
          <!-- <el-select
            v-model="form.kdName"
            filterable
            clearable
            placeholder="请选择"
            style="width: 250px"
          >
            <el-option
              v-for="(item, index) in option"
              :value="item.value"
              :label="item.label"
              :key="index"
            >
            </el-option>
          </el-select> -->
          <el-input v-model="form.kdName" clearable style="width:180px;"></el-input>
        </el-form-item>
        <el-form-item label-width="0px">
			<div class="search-button">
			<span class="search-line"></span>
			<div
			  class="search-select"
			  @click="searchShowMoreBool = !searchShowMoreBool"
			>
			  更多条件
			  <i class="el-icon-arrow-up" v-show="searchShowMoreBool"></i>
			  <i class="el-icon-arrow-down" v-show="!searchShowMoreBool"></i>
			</div>
          <el-button
            type="primary"
            size="small"
            class="iconfont iconchaxun"
            @click="submitForm()"
            >查询</el-button
          >
          <el-button
            type="primary"
            size="small"
            class="iconfont iconzhongzhi"
            @click="resetForm()"
            >重置</el-button
          >
          <el-button
            type="primary"
            size="small"
            class="iconfont icondaochu11"
            @click="educe"
            >导出</el-button
          >
		  </div>
        </el-form-item>
		<el-row v-show="searchShowMoreBool">
			<el-form-item label="药剂种类:" label-width="80px">
			  <el-select
			    v-model="form.drugKind"
			    clearable
			    placeholder="请选择"
			    style="width: 180px"
			  >
			    <el-option
			      v-for="item in yjOption"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value"
			    ></el-option>
			  </el-select>
			</el-form-item>
		  <el-form-item label="药剂名称:" label-width="80px">
		    <el-input
		      v-model="form.drugName"
		      clearable
		      style="width: 180px"
		    ></el-input>
		  </el-form-item>
		</el-row>
      </el-form>
    </div>
    <div class="widget-grid">
      <div class="title-box">单位：kg</div>
      <el-table
        id="summaryData"
        style="width: 100%"
        align="center"
        header-align="center"
        border
        :data="tableData"
      >
        <el-table-column label="序号" width="60">
          <template slot-scope="{ $index }">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column width="300" label="库点名称">
          <template slot-scope="{ row }">
            <div class="title-name">
              <span @click="goDetail(row)">{{ row.orgName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="startAmount" label="期初库存"></el-table-column>
        <el-table-column prop="ruCount" label="收入总量"></el-table-column>
        <el-table-column prop="chuCount" label="支出总量"></el-table-column>
        <el-table-column prop="endAmount" label="期末库存"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { pageStatement, dictionary } from "@/api/grainReserves/zygl/index";
import XLSX from "xlsx";
import FileSaver from "file-saver";
export default {
  data() {
    return {
		searchShowMoreBool:false,
		yjOption: [
		  {
		    value: "3023",
		    label: "防护剂",
		  },
		  {
		    value: "3024",
		    label: "熏蒸剂",
		  },
		  {
		    value: "3025",
		    label: "空仓、器材杀虫器",
		  },
		],
      form: {
        kdName: "",
        timeList: [this.getNowYear(), this.getNowDate()],
		drugKind:'3024',
		drugName:'磷化铝',
      },
      tableData: [],
      total: 0,
      dictionary: {},
      option: [
        {
          value: "天津运东粮食储备有限公司",
          label: "天津运东粮食储备有限公司",
        },
        {
          value: "天津利达物流服务有限公司",
          label: "天津利达物流服务有限公司",
        },
        {
          value: "天津市北辰区粮食储备有限公司",
          label: "天津市北辰区粮食储备有限公司",
        },
        {
          value: "天津雍阳粮食储备有限公司",
          label: "天津雍阳粮食储备有限公司",
        },
        {
          value: "天津市粮食储备有限公司分公司",
          label: "天津市粮食储备有限公司分公司",
        },
        {
          value: "天津利达华鹰粮油储运有限公司",
          label: "天津利达华鹰粮油储运有限公司",
        },
        {
          value: "天津津东粮食储备有限责任公司",
          label: "天津津东粮食储备有限责任公司",
        },
        {
          value: "天津津武粮食储备有限公司",
          label: "天津津武粮食储备有限公司",
        },
        {
          value: "天津市滨海新区东风粮食购销有限公司",
          label: "天津市滨海新区东风粮食购销有限公司",
        },
        {
          value: "天津市蓟州区粮食购销有限公司（新库）",
          label: "天津市蓟州区粮食购销有限公司（新库）",
        },
      ],
    };
  },
  created() {
    this.getTable();
  },
  methods: {
    // 重置搜索条件
    resetForm() {
      this.form = {
        kdName: "",
        timeList: [this.getNowYear(), this.getNowDate()],
		drugKind:'3024',
		drugName:'磷化铝',
      }
      this.getTable();
    },
    // 提交搜索
    submitForm() {
      this.getTable();
    },
    // 跳转到详情
    goDetail(row) {
      this.$router.push({
        path: "statementDetail",
        query: {
          id: row.orgId,
          name: row.orgName,
        },
      });
    },
    // 分页
    handleCurrentChange(val) {
      this.getTable();
    },
    // 获取表格数据
    getTable() {
      let data = {
        kdName: this.form.kdName,
        startTime: this.form.timeList[0],
        endTime: this.form.timeList[1],
		drugKind: this.form.drugKind,
		drugName: this.form.drugName,
      }
      pageStatement(data).then((res) => {
        if (res.infoCode == 200 && res.success) {
          this.tableData = res.data.items || [];
        //   this.total = res.data.total;
        }else{
			this.$message.error(res.msg)
		}
      });
    },
    educe() {
      let dom = document.getElementById("summaryData");
    //   console.log(dom);
      let vb = XLSX.utils.table_to_book(dom);
      // console.log(vb);
      let vbout = XLSX.write(vb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([vbout], { type: "application/octet-stream" }),
          `药剂报表-库.xlsx`
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, vbout);
      }
      console.log(vbout);
      return vbout;
    },
    // 获取当天
    getNowDate() {
      let nowdays = new Date();
      let year = nowdays.getFullYear();
      let month = nowdays.getMonth() + 1;
      let date = nowdays.getDate();
      return year + "-" + month + "-" + date; //今天
    },
    // 获取当年一月一号
    getNowYear() {
      let nowdays = new Date();
      let year = nowdays.getFullYear();
      return year + "-01-01"; //今天
    },
  },
};
</script>
<style lang="scss" >
.label-title {
  display: inline-block;
  margin-bottom: 6px;
}

.fieldset,
fieldset {
  display: block;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  position: relative;
  padding: 25px 0 5px;
}

.el-table {
  td,
  th {
    text-align: center !important;
  }
}

.el-col {
  margin-bottom: 15px;
}

.widget-grid {
  .title-box {
    text-align: right;
  }

  .title-name {
    text-align: center;
    color: #48a1f9;

    span {
      cursor: pointer;
    }
  }
}
</style>