<template>
  <div class="app-container">
    <div class="screen-container">
      <div class="top clearfix">
        <div class="title fl">条件筛选</div>
        <div class="fr">
          <el-button size="mini" type="primary" @click="handleSumSaleDetailExport">导出汇总采购明细</el-button>
          <!--          <el-button type="primary" size="mini" @click="isOpen = !isOpen">{{ isOpen ? '收起':'展开' }}<i class="el-icon&#45;&#45;right" :class="isOpen ? 'el-icon-arrow-up':'el-icon-arrow-down'" /></el-button>-->
        </div>
      </div>
      <el-form
        ref="screenForm"
        :model="screenForm"
        :rules="screenFormRules"
        label-width="80px"
        size="mini"
        label-position="left"
      >
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="网点" prop="websitId">
              <el-select v-model="screenForm.websitId" filterable placeholder="网点" size="small">
                <el-option label="全部" value="" />
                <el-option v-for="(item, index) in shopList" :key="index" :label="item.name" :value="item.websitId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="12">
            <el-form-item label="入库时间" prop="stockInDate">
              <el-date-picker
                v-model="screenForm.stockInDate"
                type="daterange"
                value-format="yyyy-MM-dd HH:mm:ss"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="mini"
                :default-time="['00:00:00', '23:59:59']"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="6" class="tr">
            <el-form-item label="">
              <el-button size="mini" @click="resetScreenForm">清空</el-button>
              <el-button size="mini" type="primary" @click="submitScreenForm">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="mymain-container">
      <div class="table">
        <el-table
          v-loading="listLoading"
          :data="dataList"
          element-loading-text="Loading"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          size="mini"
          border
          header-cell-class-name="headerRowColor"
          highlight-current-row
        >
          <el-table-column align="center" label="网点名称" prop="websitName" min-width="160" />
          <el-table-column align="center" label="供应商名称" prop="venderName" min-width="120" />
          <el-table-column align="center" label="辅材名称" prop="goodsName" min-width="140" />
          <el-table-column align="center" label="类别名称" prop="categoryName" />
          <!--          <el-table-column align="center" label="采购数量" prop="purchaseQty" />-->
          <el-table-column align="center" label="验收数量" prop="recQty" />
          <el-table-column align="center" label="验收赠品数量" prop="recGiftQty" min-width="110" />
          <el-table-column align="center" label="验收金额" prop="costValue" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getPurchaseGoodsSum } from '@/api/material-system/report'
import { downloadFiles } from '@/utils/util'
import { getWebsit } from '@/api/customerManagement.js'
export default {
  name: 'ShopPurchaseSum',
  data() {
    return {
      listLoading: false,
      dataList: [], // 列表
      shopList: [], // 网点列表
      screenForm: {
        // 筛选表单数据
        websitId: '', // 门店编号
        stockInDate: [] // 入库时间
      },
      screenFormRules: {
        stockInDate: [{ required: true, message: '请选择入库日期', trigger: 'change' }]
      },
      isOpen: false // 是否展开条件筛选
    }
  },
  created() {
    getWebsit({ status: true }).then(res => {
      this.shopList = res.data
      if (this.shopList && this.shopList.length === 1) {
        this.screenForm.websitId = this.shopList[0].websitId
      }
    })
  },
  methods: {
    // 查询列表
    getList() {
      this.$refs.screenForm.validate(valid => {
        if (valid) {
          this.listLoading = true
          const params = {
            websitId: this.screenForm.websitId, // 门店编号
            startTime: this.screenForm.stockInDate[0] ? this.screenForm.stockInDate[0] : '',
            endTime: this.screenForm.stockInDate[1] ? this.screenForm.stockInDate[1] : ''
          }
          getPurchaseGoodsSum(params).then(res => {
            this.dataList = res.data
            this.listLoading = false
          })
        }
      })
    },
    // 重置筛选表单
    resetScreenForm() {
      this.$refs.screenForm.resetFields()
      this.currentPage = 1
      this.getList()
    },
    // 提交筛选表单
    submitScreenForm() {
      this.currentPage = 1
      this.getList()
    },
    // 导出汇总销售明细
    handleSumSaleDetailExport() {
      this.$refs.screenForm.validate(valid => {
        if (valid) {
          const screenData = {
            websitId: this.screenForm.websitId, // 门店编号
            startTime: this.screenForm.stockInDate[0] ? this.screenForm.stockInDate[0] : '',
            endTime: this.screenForm.stockInDate[1] ? this.screenForm.stockInDate[1] : ''
          }
          downloadFiles('websit/report/export/purchase-goods-sum', screenData)
        }
      })
    }
  }
}
</script>

<style scoped></style>
