<template>
  <div class="app-container">
       <button-bar ref="btnbar" view-title="销售汇总日报表" :btndisabled="btndisabled" @btnhandle="btnHandle" />
    <el-row style="margin-left: 20px;margin-right: 20px;" >
      <el-col >
        <el-tabs v-model="tabActiveName">
          <el-tab-pane label="门店销售明细表" name="uplog">
            <div>
              <el-date-picker v-model="jmdListQuery.orderDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" size="small" />
              <el-button style="margin-left: 20px;" size="small" type="primary" @click="loadJmdList">搜索</el-button>
            </div>
            <div style="margin-top: 20px;">
              <el-table :data="logList" border style="width: 100%">
                <el-table-column prop="createTime"  label="序号" />
                <el-table-column prop="orderDate" label="销售渠道" />
                <el-table-column prop="allNum" label="销售额(元)" />
              </el-table>
            </div>
            <div class="pages">
              <!-- 翻页 -->
              <pagination
                v-show="logListTotal > 0"
                :total="logListTotal"
                :page.sync="logListQuery.current"
                :limit.sync="logListQuery.size"
                class="pagination"
                @pagination="loadLogList"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="门店商品销售明细表" name="k112">
           <div>
             <el-date-picker v-model="jmdListQuery.orderDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" size="small" />
             <el-button style="margin-left: 20px;" size="small" type="primary" @click="loadJmdList">搜索</el-button>
           </div>
           <div style="margin-top: 20px;">
              <el-table :data="in112List" border style="width: 100%">
                <el-table-column prop="supplierCodeUnified" label="销售渠道" />
                <el-table-column prop="colex" label="类型" />
                <el-table-column prop="colh7" label="销售订单号" />
                <el-table-column prop="colr17" label="商品编码" />
                <el-table-column prop="colr17" label="商品名称" />
                <el-table-column prop="colr17" label="数量" />
                <el-table-column prop="colr17" label="价格" />
                <el-table-column prop="colr17" label="小计" />
              </el-table>
            </div>
            <div class="pages">
              <!-- 翻页 -->
              <pagination
                v-show="in112ListTotal > 0"
                :total="in112ListTotal"
                :page.sync="in112ListQuery.current"
                :limit.sync="in112ListQuery.size"
                class="pagination"
                @pagination="loadIn112List"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="门店销售明细表（烟草）" name="all">
          <div>
            <el-date-picker v-model="jmdListQuery.orderDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" size="small" />
            <el-button style="margin-left: 20px;" size="small" type="primary" @click="loadJmdList">搜索</el-button>
          </div>
          <div style="margin-top: 20px;">
              <el-table :data="inallList" border style="width: 100%">
                <el-table-column prop="supplierCodeUnified" label="序号" />
                <el-table-column prop="colex" label="销售渠道" />
                <el-table-column prop="cole4" label="销售额(元)" :show-overflow-tooltip="true" />
              </el-table>
            </div>
            <div class="pages">
              <!-- 翻页 -->
              <pagination
                v-show="inallListTotal > 0"
                :total="inallListTotal"
                :page.sync="inallListQuery.current"
                :limit.sync="inallListQuery.size"
                class="pagination"
                @pagination="loadInallList"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="门店商品销售明细表（烟草）" name="hz">
              <div>
                <el-date-picker v-model="jmdListQuery.orderDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" size="small" />
                <el-button style="margin-left: 20px;" size="small" type="primary" @click="loadJmdList">搜索</el-button>
              </div>
              <div style="margin-top: 20px;">
                <el-table :data="countInfo.countList" height="350" border style="width: 100%">
                  <el-table-column prop="supplierCodeUnified" label="销售渠道" />
                  <el-table-column prop="supplierCode" label="类型" />
                  <el-table-column prop="supplierName" label="销售订单号" :show-overflow-tooltip="true" />
                  <el-table-column prop="prodCode" label="商品编码" />
                  <el-table-column prop="prodCode" label="商品名称" />
                  <el-table-column prop="prodCode" label="数量" />
                  <el-table-column prop="prodCode" label="价格" />
                  <el-table-column prop="prodCode" label="小计" />
                </el-table>
              </div>
              <div class="pages">
                <!-- 翻页 -->
                <pagination
                  v-show="in112ListTotal > 0"
                  :total="in112ListTotal"
                  :page.sync="in112ListQuery.current"
                  :limit.sync="in112ListQuery.size"
                  class="pagination"
                  @pagination="loadIn112List"
                />
              </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { recount, countinfo, in112PagerList, inallPagerList, logPagerList, jmdRkmxList, jmdRkmxListDownload, ztsjZhengli, buildExcelZaiTu } from '@/api/inventorySummary/inventorySummary'
import Pagination from '@/components/pagination'
import { parseTime } from '@/utils/index'
import ButtonBar from '@/components/ButtonBar'
export default {
  name: 'KucunRkmxIndex',
  components: {
     ButtonBar,Pagination },
  data() {
    return {
      btnList: [ // 右上角按钮
        {
          type: 'success',
          size: 'small',
          icon: 'export',
          btnKey: 'build',
          btnLabel: '导出'
        },
        {
          type: 'info',
          size: 'small',
          icon: 'cross',
          btnKey: 'doClose',
          btnLabel: '关闭'
        }
      ],
      updateAction: "",
      name: '入库明细',
      tabActiveName: 'uplog',
      fileList: [],
      uploadResultMesssage: '',
      fullscreenloading: null,
      logList: [],
      logListQuery: {
        current: 1,
        size: 5
      },
      logListTotal: 1,
      in112List: [],
      in112ListQuery: {
        current: 1,
        size: 5
      },
      in112ListTotal: 1,
      inallList: [],
      inallListQuery: {
        current: 1,
        size: 5
      },
      inallListTotal: 1,
      countInfo: {
        countLog: null,
        countList: []
      },
      countInfoMessage: '无汇总信息',
      jmdList: [],
      jmdListQuery: {
        orderDate: ''
      }
    }
  },
  mounted() {
    // 初始化按钮
    this.$refs['btnbar'].setButtonList(this.btnList)
  },
  created() {
    // 初始化变量
    this.init()
  },
  methods: {
    // 右上角点击事件
    btnHandle(btnKey) {
      switch (btnKey) {
        case 'build': // 导出
          this.doBuild()
          break
        case 'doClose': // 关闭
          this.doClose()
          break
        default:
          break
      }
    },
    init() {
      this.loadLogList()
      this.loadIn112List()
      this.loadInallList()
      this.loadCountInfo()
      this.jmdListQuery.orderDate = parseTime(new Date(), '{y}-{m}-{d}')
      this.loadJmdList()
    },
    loadLogList() {
      logPagerList({
        current: this.logListQuery.current,
        size: this.logListQuery.size,
        params: {
          orderDate: ''
        }
      }).then(response => {
        if (response.code === '200' && response.data && response.data.total > 0) {
          this.logList = response.data.records
          this.logListTotal = response.data.total
          this.logListQuery.current = response.data.current
          this.logListQuery.size = response.data.size
        } else {
          this.logList = []
          this.logListTotal = 0
        }
      })
    },
    loadIn112List() {
      in112PagerList({
        current: this.in112ListQuery.current,
        size: this.in112ListQuery.size,
        params: {
          orderDate: ''
        }
      }).then(response => {
        if (response.code === '200' && response.data && response.data.total > 0) {
          this.in112List = response.data.records
          this.in112ListTotal = response.data.total
          this.in112ListQuery.current = response.data.current
          this.in112ListQuery.size = response.data.size
        } else {
          this.in112List = []
          this.in112ListTotal = 0
        }
      })
    },
    loadInallList() {
      inallPagerList({
        current: this.inallListQuery.current,
        size: this.inallListQuery.size,
        params: {
          orderDate: ''
        }
      }).then(response => {
        if (response.code === '200' && response.data && response.data.total > 0) {
          this.inallList = response.data.records
          this.inallListTotal = response.data.total
          this.inallListQuery.current = response.data.current
          this.inallListQuery.size = response.data.size
        } else {
          this.inallList = []
          this.inallListTotal = 0
        }
      })
    },
    loadCountInfo() {
      countinfo()
        .then(res => {
          if (res.msg === '没有统计入库明细！') {
            this.countInfoMessage = res.msg
          } else {
            this.countInfo = res.data
            this.countInfoMessage = '最新统计时间：' + res.data.countLog.createTime + ', 统计用时：' + res.data.countLog.durations + ' 毫秒！'
          }
        })
        .catch(e => {
          console.log(e)
        })
    },
    loadJmdList() {
      jmdRkmxList(this.jmdListQuery)
        .then(res => {
          this.jmdList = res.data
        })
        .catch(e => {
          console.log(e)
        })
    },
    downJmdList() {
      jmdRkmxListDownload(this.jmdListQuery)
        .then(res => {
          console.log('mmmm', res)
          if (res.msg == '数据为空') {
            this.$message({
              message: '无数据，不能导出！',
              type: 'error'
            })
          } else {
            window.open(res.data, '_blank')
          }
        })
        .catch(e => {
          console.log(e)
        })
    },
    recountRk() {
      recount()
        .then(res => {
          this.$message({
            message: '入库信息已经重新汇总完成！',
            type: 'success'
          })
          this.loadCountInfo()
          this.tabActiveName = 'hz'
        })
        .catch(e => {
          console.log(e)
        })
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    handleProgress(event, file, fileList) {
      const _this = this
      this.fullscreenloading = this.$loading({
        lock: true,
        text: '文件正在上传',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      if (event.percent >= 100) {
        _this.fullscreenloading.text = '上传完成，正在导入数据库'
      }
    },
    handleSuccess(resp, file, fileList) {
      console.log('222', resp)
      if (this.fullscreenloading) this.fullscreenloading.close()
      this.fullscreenloading = null
      if (resp.success) {
        const rdata = resp.data
        this.uploadResultMesssage = '共导入数据：' + rdata.allNum + ' 条，【112】仓库记录数：' + rdata.validNum + ' 条；用时：' + rdata.durations + ' 毫秒。'

        this.loadLogList()
        this.tabActiveName = 'uplog'
      } else {
        this.uploadResultMesssage = resp.msg
      }
    },
    downloadZtsj() {
      ztsjZhengli()
        .then(res => {
          console.log('2222', res)
          buildExcelZaiTu()
            .then(resp => {
              console.log('3333', resp)
              window.open(resp.data, '_blank')
            })
            .catch(ee => {
              console.log(ee)
            })
        })
        .catch(e => {
          console.log(e)
        })
    }
  }
}
</script>
<style scoped>
.wenjiantit {
  font-size: 16px;
  font-weight: bold;
  margin: 25px 0 10px 0;
}
.forminfo {
  margin: 0;
  padding: 0;
}
.listcon {
  height: calc(100vh - 250px);
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
