<template>
  <a-card size="small" :bordered="false" class="inventoryQueryList-wrap">
    <!-- 搜索条件 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
        <a-row :gutter="15">
          <a-col :md="6" :sm="24">
            <a-form-item label="产品编码">
              <a-input id="inventoryQueryList-productCode" v-model="queryParam.dealerProduct.code" allowClear placeholder="请输入产品编码"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="原厂编码">
              <a-input id="inventoryQueryList-productOrigCode" v-model.trim="queryParam.dealerProduct.origCode" allowClear placeholder="请输入原厂编码"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="产品名称">
              <a-input id="inventoryQueryList-productName" v-model.trim="queryParam.dealerProduct.name" allowClear placeholder="请输入产品名称"/>
            </a-form-item>
          </a-col>
          <template v-if="advanced">
            <a-col :md="6" :sm="24">
              <a-form-item label="产品品牌">
                <a-select id="inventoryQueryList-productBrandSn" placeholder="请选择产品品牌" allowClear v-model="queryParam.productBrandSn">
                  <a-select-option v-for="item in brandData" :key="item.stationNo" :value="item.stationNo">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="产品分类">
                <a-cascader :options="typeData" placeholder="请选择产品分类" allowClear v-model="productTypeSn" @change="changeType" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="库存数量是否为0">
                <v-select code="FLAG" id="inventoryQueryList-zeroQtyFlag" v-model="queryParam.zeroQtyFlag" allowClear placeholder="请选择"></v-select>
              </a-form-item>
            </a-col>
          </template>
          <a-col :md="6" :sm="24">
            <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="inventoryQueryList-refresh">查询</a-button>
            <a-button style="margin-left: 8px" @click="resetSearchForm" :disabled="disabled" id="inventoryQueryList-reset">重置</a-button>
            <!-- <a-button
              style="margin-left: 8px"
              type="danger"
              @click="handleExport"
              :disabled="disabled"
              :loading="exportLoading"
              id="inventoryQueryList-export">导出</a-button> -->
            <a @click="advanced=!advanced" style="margin-left: 8px">
              {{ advanced ? '收起' : '展开' }}
              <a-icon :type="advanced ? 'up' : 'down'"/>
            </a>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 合计 -->
    <a-alert type="info" showIcon style="margin-bottom:15px">
      <div class="ftext" slot="message">现有库存总数量（个）：<strong>{{ currentStock.currentStockQty || 0 }}</strong>；现有库存总成本(￥)：<strong>{{ currentStock.currentStockCost || 0 }}</strong>。</div>
    </a-alert>
    <!-- 列表 -->
    <s-table
      class="sTable"
      ref="table"
      size="default"
      :rowKey="(record) => record.id"
      :columns="columns"
      :data="loadData"
      :scroll="{ x: 1430 }"
      bordered>
      <!-- 产品分类 -->
      <template slot="productTypeName" slot-scope="text, record">
        <span v-if="record.dealerProduct">{{ record.dealerProduct.productTypeName2 || '' }}</span> >
        <span v-if="record.dealerProduct">{{ record.dealerProduct.productTypeName3 || '' }}</span>
      </template>
      <!-- 操作 -->
      <template slot="action" slot-scope="text, record">
        <a-button size="small" type="link" @click="goDetail(record)" id="inventoryQueryList-detail-btn">库存详情</a-button>
        <a-divider type="vertical" style="margin: 0;" />
        <a-button size="small" type="link" style="margin-left: 8px" @click="goWarehouseDetail(record)" id="inventoryQueryList-warehouseDetail-btn">出入库明细</a-button>
      </template>
    </s-table>
    <!-- 库存详情 -->
    <inventory-query-detail-modal :openModal="openModal" :itemId="itemId" @close="closeModal" />
  </a-card>
</template>

<script>
import moment from 'moment'
import { stockList, stockCount } from '@/api/stock'
import { STable, VSelect } from '@/components'
import inventoryQueryDetailModal from './detailModal.vue'
export default {
  components: { STable, VSelect, inventoryQueryDetailModal },
  data () {
    return {
      advanced: false, // 高级搜索 展开/关闭
      queryParam: { //  查询条件
        dealerProduct: {
          code: '', //  产品编码
          name: '', //  产品名称
          origCode: '', //  原厂编码
          productBrandSn: '', //  产品品牌
          productTypeSn1: '', //  产品分类1
          productTypeSn2: '', //  产品分类2
          productTypeSn3: '' //  产品分类3
        },
        zeroQtyFlag: undefined //  库存数量是否为0
      },
      productTypeSn: [],
      exportLoading: false, // 导出loading
      disabled: false, //  查询、重置按钮是否可操作
      brandData: [], //  产品品牌下拉数据
      typeData: [], //  产品分类下拉数据
      columns: [
        { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
        { title: '产品编码', dataIndex: 'dealerProduct.code', width: 140, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '产品名称', dataIndex: 'dealerProduct.name', align: 'center', ellipsis: true, customRender: function (text) { return text || '--' } },
        { title: '原厂编码', dataIndex: 'dealerProduct.origCode', width: 140, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '产品品牌', dataIndex: 'dealerProduct.productBrandName', width: 140, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '产品分类', scopedSlots: { customRender: 'productTypeName' }, width: 200, align: 'center' },
        { title: '现有库存数量(个)', dataIndex: 'currentStockQty', width: 165, align: 'center', sorter: true, customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '现有库存成本(￥)', dataIndex: 'currentStockCost', width: 165, align: 'center', sorter: true, customRender: function (text) { return ((text || text == 0) ? text : '--') } }
        // { title: '操作', scopedSlots: { customRender: 'action' }, width: 200, align: 'center', fixed: 'right' }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        this.disabled = true
        return stockList(Object.assign(parameter, this.queryParam)).then(res => {
          const data = res.data
          const no = (data.pageNo - 1) * data.pageSize
          for (var i = 0; i < data.list.length; i++) {
            data.list[i].no = no + i + 1
          }
          this.disabled = false
          // 总计
          this.getTotal(Object.assign(parameter, this.queryParam))
          return data
        })
      },
      openModal: false, //  查看库存详情  弹框
      itemId: '', //  当前库存记录id
      currentStock: { // 合计信息
        currentStockQty: '',
        currentStockCost: ''
      }
    }
  },
  methods: {
    //  重置
    resetSearchForm () {
      this.queryParam.productCode = ''
      this.queryParam.productOrigCode = ''
      this.queryParam.productName = ''
      this.queryParam.brandName = undefined
      this.queryParam.productTypeName = undefined
      this.queryParam.currentStockQty = false
      this.$refs.table.refresh(true)
    },
    // 分类  changeType
    changeType (val) {
      console.log(val)
    },
    // 合计
    getTotal (param) {
      stockCount(param).then(res => {
        if (res.status == 200) {
          this.currentStock = res.data
        } else {
          this.currentStock = null
        }
      })
    },
    //  库存详情
    goDetail (row) {
      this.itemId = row.id
      this.openModal = true
    },
    //  关闭弹框
    closeModal () {
      this.itemId = ''
      this.openModal = false
    },
    //  出入库明细
    goWarehouseDetail (row) {
      this.$router.push({ path: `/inventoryManagement/inventoryQuery/warehouseDetail/${row.id}` })
    },
    //  导出
    handleExport () {
      const params = this.queryParam
      this.exportLoading = true
      // customerBundleExportDelay(params).then(res => {
      //   this.exportLoading = false
      //   this.download(res)
      // })
    },
    download (data) {
      if (!data) { return }
      const url = window.URL.createObjectURL(new Blob([data]))
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      const a = moment().format('YYYYMMDDHHmmss')
      const fname = '库存查询' + a
      link.setAttribute('download', fname + '.xlsx')
      document.body.appendChild(link)
      link.click()
    }
  }
}
</script>
