<!-- 供应商---送货单 -->
<template>
  <div class="main-container order-mc-bg">
    <prtMoled :printData="{ tableData: multipleSelection, orderName: '送货单' }" :theadDate="theadDate" v-show="false">
    </prtMoled>
    <div class="sale-container">
      <!-- 顶部按钮组 -->
      <toolBtn :btnType="btnType" @actionhandel="actionhandel"></toolBtn>
      <!-- 列表 -->
      <div class="sale-page-body">
        <!-- 表头 -->
        <div class="sale-page-table-header" ref="getSaleTableHeader">
          <el-form :inline="true">
            <el-row class="form-row1">
              <el-col :span="20">
                <el-row :gutter="2">
                  <el-col :span="4">
                    <el-form-item class="Iisshow" label="采购订单号">
                      <el-input class="f-12" placeholder="请输入采购订单号" v-model.trim="search.billNo"></el-input>
                      <div :data-clipboard-text="search.billNo" @click="saleOrderCopy" class="copyBtn">
                        <i class="el-icon-document-copy" />
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item class="Iisshow" label="产品">
                      <el-input class="f-12" placeholder="请输入物料名称/编码/SKU" style="width:200px"
                        v-model.trim="search.productKey"></el-input>
                      <div :data-clipboard-text="search.productKey" @click="saleOrderCopy" class="copyBtn">
                        <i class="el-icon-document-copy" />
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4" v-if="userInfo.identity !== 2">
                    <el-form-item label="供应商">
                      <el-select clearable filterable placeholder="请选择" v-model="search.supplierId">
                        <el-option :key="item.code" :label="item.name" :value="item.id" class="f-12"
                          v-for="item in supplierlist"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="关闭状态">
                      <el-select clearable filterable placeholder="请选择" v-model="search.closeStatus">
                        <el-option label="正常" value="A" class="f-12"></el-option>
                        <el-option label="关闭" value="B" class="f-12"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="需求日期">
                      <el-date-picker @change="time1Chang" class="f-12" end-placeholder="结束时间" start-placeholder="开始时间"
                        type="daterange" v-model="Time1" value-format="YYYY-MM-DD"></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="4" class="form-row-lastcol">
                <el-row :gutter="2">
                  <el-col :span="24">
                    <el-form-item class="form-group1">
                      <el-button size="small" @click="resetSearch">重置</el-button>
                      <el-button @click="searchData" size="small" type="primary">搜索</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 列表 -->
        <div class="sale-page-table-body">
          <el-table :data="tableData" :header-cell-class-name="headerRigthMethod" :max-height="heightNum"
            @selection-change="handleSelectionChange" border class="table-box" element-loading-spinner="el-icon-loading"
            element-loading-text="加载中，请稍后..." ref="tableInfoRef" style="width: 100%;font-size:12px"
            v-loading="isLoading">
            <el-table-column align="center" type="selection" width="40" />
            <el-table-column align="left" label="采购组织" prop="purchaseOrgName" width="172"></el-table-column>
            <el-table-column align="left" label="供应商" prop="supplierName" width="172"></el-table-column>
            <el-table-column align="left" label="需求日期" prop="demandDate" width="83" />
            <el-table-column align="left" label="送货日期" prop="deliveryDate" width="83" />
            <el-table-column align="left" label="采购订单号" prop="purchaseBillNo" width="187"></el-table-column>
            <el-table-column align="left" label="送货单号" prop="billNo" width="172"></el-table-column>
            <el-table-column align="right" label="需求数量" prop="deliverableQty" width="100" />
            <el-table-column align="right" label="送货数量" prop="qty" width="100" />
            <el-table-column align="right" label="备品数量" prop="spareQty" width="100" />
            <el-table-column align="right" label="实收数量" prop="receivedQty" width="100" />
            <el-table-column align="right" label="实收备品" prop="receivedSpareQty" width="100" />
            <el-table-column align="left" label="物料编码" prop="materialNumber" width="172" />
            <el-table-column align="left" label="规格型号(SKU)" prop="specification" width="280" />
            <el-table-column align="left" label="物料名称" prop="materialName" width="150" />
            <el-table-column align="left" label="仓库" prop="stockName" width="120" />
            <el-table-column align="left" label="收货日期" prop="receiptDate" width="83" />
            <el-table-column align="center" label="关闭状态" prop="closeStatus" width="72" />
            <el-table-column align="center" label="打印次数" prop="printQty" width="72" />
            <el-table-column align="left" label="备注" prop="remark" width="280"></el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 底部 -->
      <div class="sale-page-footer">
        <div class="footer-left">
          <div>
            <span>送货数量:</span>
            <span class="sale-number-color">{{ qtyTotal }}</span>
          </div>
          <div>
            <span>实收数量:</span>
            <span class="sale-number-color">{{ receivedQtyTotal }}</span>
          </div>
        </div>
        <div class="footer-right">
          <el-pagination :currentPage="search.pageNo" :page-size="search.pageSize" :page-sizes="[50, 100, 150]"
            :total="orderTotal" @current-change="handleCurrentChange" @size-change="handleSizeChange"
            layout="slot,sizes,total, prev,pager, next,jumper" popper-class="每页显示">
            <span class="total-select-item">
              共选中
              <text style="text-align:center;color:#4178D5;padding:0 1px;">{{
                multipleSelection?
              multipleSelection.length : 0
              }}</text>行
            </span>
          </el-pagination>
        </div>
        <div class="footer-pagination-total-page">
          <span>共{{ Math.ceil(orderTotal / search.pageSize) }}页</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { orderCopy } from '@/utils/takeMethods'
import { transformTimestamp, exporthandel, dateData, newprintPreview } from '@/utils/pubulic.js'
import { sendOrderPrint } from '@/utils/printPagekey.js'
export default {
  name: 'SupplierCoordinationSendOrder',
  data () {
    return {
      theadDate: JSON.parse(JSON.stringify(sendOrderPrint)), // 打印要的字段表
      supplierlist: [], // 供应商下拉数据
      multipleSelection: [], // 列表选中
      actionType: '', //判断点击的顶部那个按钮
      isLoading: false, //表格加载数据
      btnType: [], // 不需要显示的顶部按钮类型
      Time1: [],
      dialogVisible: false, // 操作弹框显示
      // 搜索条件
      search: {
        orgId: '', // 组织ID
        billNo: '', // 采购订单号
        productKey: '', //产品 物料名称/编码/SKU
        beginDate: '', // 下单开始日期
        endDate: '', //下单结束日期
        closeStatus: '',//关闭状态
        pageNo: 1, // 页码
        pageSize: 50 // 页数
      },
      qtyTotal: 0, //送货数量
      receivedQtyTotal: 0, //实收数量
      orderTotal: 0, // 统计
      tableData: [],
      selectItem: 0,
      rowShow: false,
      heightNum: 0,
      windowHeight: 0,
      isDown: true
    }
  },
  computed: {
    ...mapState({
      userInfo: state => (state && state.user && state.user.userInfo ? state.user.userInfo : {}),
      orgId: state => (state && state.org && state.org.orgId ? state.org.orgId : null)
    }),
    transformTime: function () {
      return function (value) {
        return transformTimestamp(value)
      }
    }
  },
  created () {
    this.windowHeight = document.documentElement.clientHeight
    this.heightNum = this.windowHeight - (40 + 30 + 54 + 34 + 34 + 34 + 16 + 16)
    this.btnType = [
      's-p-t-g1',
      's-p-t-g2',
      's-p-t-g12',
      'audit',
      'de-approval',
      'de-approval',
      this.userInfo.identity !== 2 ? 'Receiving' : null,
      's-p-t-g4',
      's-p-t-g12'
    ]
    this.search.orgId = this.userInfo.identity === 2 ? 0 : this.orgId
    this.Init()
  },
  activated () {
    // 键盘监听事件
    document.addEventListener('keyup', this.keyupFn, false)
  },
  deactivated () {
    document.removeEventListener('keyup', this.keyupFn, false)
  },
  watch: {
    orgId (val) {
      if (val) {
        this.search.orgId = this.userInfo.identity === 2 ? 0 : val
        this.getSendOrderlist()
      }
    }
  },
  methods: {
    keyupFn (e) {
      if (e.keyCode === 13) {
        // enter见搜索
        this.searchData()
      }
    },
    // 初始
    Init () {
      this.getSendOrderlist()
      this.getsupplierList()
    },
    handleSelectionChange (value) {
      this.multipleSelection = value
    },
    handleSizeChange (val) {
      this.search.pageNo = 1
      this.search.pageSize = val
      this.Init()
    },
    handleCurrentChange (val) {
      this.search.pageNo = val
      this.Init()
    },
    resetSearch () {
      // 搜索条件
      this.search = {
        orgId: this.search.orgId = this.userInfo.identity === 2 ? 0 : this.orgId, // 组织ID
        billNo: '', // 采购订单号
        productKey: '', //产品 物料名称/编码/SKU
        beginDate: '', // 下单开始日期
        endDate: '', //下单结束日期
        pageNo: 1, // 页码
        closeStatus: '',
        pageSize: 50 // 页数
      }
      this.Time1 = []
      this.getSendOrderlist()
    },
    // 获取供应商-下拉列表
    getsupplierList () {
      this.$http.get('SysConfig/supplier/select').then(r => {
        if (r.status === 200) {
          this.supplierlist = r.data
        }
      })
    },
    // 订单号 复制按钮
    saleOrderCopy () {
      orderCopy()
    },
    // 搜索切换高度
    openRow () {
      this.isDown = !this.isDown
      this.rowShow = !this.rowShow
      if (this.rowShow) {
        this.heightNum = this.heightNum - 80
      } else {
        this.heightNum = this.heightNum + 80
      }
    },
    // 获取订单数据
    getSendOrderlist () {
      this.isLoading = true
      this.$http.post('SupplierDelivery/list', this.search).then(res => {
        if (res.status === 200) {
          this.isLoading = false
          this.tableData = res.data.list
          this.tableData.forEach(it => {
            it.spareQty = it.spareQty ? it.spareQty : 0
          })
          this.orderTotal = res.data.totalCount
          this.qtyTotal = res.data.qtyTotal
          this.receivedQtyTotal = res.data.receivedQtyTotal
        }
      })
    },
    // 顶部公共按钮操作
    actionhandel (type) {
      this.actionType = type
      if (this.multipleSelection && this.multipleSelection.length > 0) {
        // 后台对接查询列表接口
        let tables = []
        this.multipleSelection.forEach(it => {
          tables.push(it.id)
        })
        //点击删除
        if (type === 'delet') {
          if (tables.length > 0) {
            this.$http.post('SupplierDelivery/delete', { ids: tables }).then(res => {
              if (res.status === 200) {
                this.getSendOrderlist()
                this.$message.success({ message: '删除成功', showClose: true })
              }
            })
          } else {
            this.$message.error({ message: '已有收货信息， 不可删除', showClose: true })
          }
        }
        // 点击送货
        if (type === 'Receiving') {
          this.$http.post('SupplierDelivery/Receiving', { ids: tables }).then(res => {
            if (res.status === 200) {
              this.$router.push({
                path: '/warehouse/purchase/activeWareHouse',
                query: { type: 'pushDown', pushDownData: JSON.stringify(res.data) }
              })
            }
          })
        }
        if (type === 'dayin') {
          this.multipleSelection = this.multipleSelection.sort(dateData('deliveryDate', false))
          const newList = []
          for (const t of this.multipleSelection) {
            if (newList.find(c => c.purchaseOrgName === t.purchaseOrgName)) {
              continue
            }
            newList.push(t)
          }
          if (newList.length == 1) {
            setTimeout(() => {
              newprintPreview('送货单')
              this.$http.post('SupplierDelivery/print', { ids: tables })
            }, 200)
          } else {
            this.$message.error({ message: '只能选择同一组织的单据明细打印！', showClose: true })
          }
        }
      } else {
        //按列表字段导出,点击全部导出
        if (type !== 'add' && type !== 'refresh' && type !== 'daochu') {
          this.$message.error({ message: '请先勾选', showClose: true })
        }
      }
      if (type === 'daochu') {
        exporthandel('SupplierDelivery/Export', this.search)
      }
      // 点击刷新
      if (type === 'refresh') {
        this.getSendOrderlist()
      }
    },
    // 下单日期改变
    time1Chang (value) {
      if (value && value.length > 0) {
        this.search.beginDate = value[0]
        this.search.endDate = value[1]
      } else {
        this.search.beginDate = ''
        this.search.endDate = ''
      }
    },
    // 搜索事件
    searchData () {
      this.search.pageNo = 1
      this.getSendOrderlist()
    },

    headerRigthMethod ({ row, column, rowIndex, columnIndex }) {
      return 'headerRight'
    },
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/saleOrder/saleOrderCommon.scss';
@import '@/assets/style/saleOrder/orderList.scss';
@import '@/assets/style/saleOrder/common.scss';
</style>