<template>
  <div class="purchaseOrderWarehousing-wrap">
    <a-page-header :ghost="false" :backIcon="false" @back="handleBack" >
      <!-- 自定义的二级文字标题 -->
      <template slot="subTitle">
        <a id="purchaseOrderWarehousing-back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" /> 返回列表</a>
        <span class="billno">单号：{{ detail&&detail.purchaseBillNo }}</span>
      </template>
    </a-page-header>
    <!-- 内容 -->
    <a-card size="small" :bordered="false" class="purchaseOrderWarehousing-cont">
      <!-- 搜索条件 -->
      <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="purchaseOrderWarehousing-bundleName" v-model.trim="queryParam.queryWord" allowClear placeholder="产品名称/产品编码/原厂编码"/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="产品品牌">
                <ProductBrand id="purchaseOrderWarehousing-productBrand" v-model="queryParam.productBrandSn"></ProductBrand>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="产品类别">
                <ProductType id="purchaseOrderWarehousing-productType" @change="changeProductType" v-model="productType"></ProductType>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-button style="margin-bottom: 18px;" type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="purchaseOrderWarehousing-refresh">查询</a-button>
              <a-button style="margin: 0 0 18px 8px" @click="resetSearchForm" :disabled="disabled" id="purchaseOrderWarehousing-reset">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 总计 -->
      <a-alert type="info" showIcon style="margin-bottom:15px">
        <div slot="message">产品款数 <strong>6</strong> ，采购数量合计 <strong>6</strong> ，采购金额合计￥<strong>6.33</strong></div>
      </a-alert>
      <!-- 列表 -->
      <s-table
        class="sTable"
        ref="table"
        size="default"
        :rowKey="(record) => record.id"
        :columns="columns"
        :data="loadData"
        :scroll="{ x: 1360 }"
        bordered>
        <!-- 仓库仓位 -->
        <template slot="warehousePosition" slot-scope="text, record, index">
          <a-cascader
            @change="e => changeWarehouseCascade(e, record, index)"
            v-model="record.warehouseCascade"
            expand-trigger="hover"
            :options="warehouseCascadeData"
            :fieldNames="{ label: 'name', value: 'id', children: 'warehouseLocationList' }"
            id="bulkWarehousingOrderEdit-warehouseCascade"
            placeholder="请选择仓库仓位"
            style="width: 100%;" />
        </template>
      </s-table>
    </a-card>
    <a-affix :offset-bottom="0">
      <div style="text-align: center;width: 100%;background-color: #fff;padding: 12px 0;box-shadow: 0 0 20px #dcdee2;">
        <a-button type="primary" id="purchaseOrderWarehousing-warehousing" size="large" @click="handleWarehousing" style="padding: 0 60px;">确认入库</a-button>
      </div>
    </a-affix>
  </div>
</template>

<script>
import { STable, VSelect } from '@/components'
import { purchaseDetailBySn } from '@/api/purchase'
import { purchaseDetailList, updateWarehouse } from '@/api/purchaseDetail'
import ProductType from '../../common/productType.js'
import ProductBrand from '../../common/productBrand.js'
import { warehouseCascadeList } from '@/api/warehouse'
export default {
  components: { STable, VSelect, ProductType, ProductBrand },
  data () {
    return {
      detail: null, //  详情数据
      productType: [],
      queryParam: {
        productBrandSn: undefined,
        queryWord: '',
        brand: '',
        productTypeSn1: '', //  产品一级分类
        productTypeSn2: '', //  产品二级分类
        productTypeSn3: '' //  产品三级分类
      },
      disabled: false, //  查询、重置按钮是否可操作
      warehouseCascadeData: [], //  仓库仓位
      // 表头
      columns: [
        { title: '序号', dataIndex: 'no', width: 80, align: 'center', fixed: 'left' },
        { title: '产品编码', dataIndex: 'dealerProductEntity.code', width: 140, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '产品名称', dataIndex: 'dealerProductEntity.name', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '原厂编码', dataIndex: 'dealerProductEntity.origCode', width: 140, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '采购单价', dataIndex: 'price', width: 100, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '采购数量', dataIndex: 'qty', width: 100, align: 'center', customRender: function (text) { return text || 0 } },
        { title: '缺货数量', dataIndex: 'oosQty', width: 100, align: 'center', customRender: function (text) { return text || 0 } },
        { title: '单位', dataIndex: 'unit', width: 100, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '采购金额', dataIndex: 'totalAmount', width: 100, align: 'center', customRender: function (text) { return '￥' + (text || 0) } },
        { title: '入库数量', dataIndex: 'putQty', width: 100, align: 'center' },
        { title: '仓库仓位', scopedSlots: { customRender: 'warehousePosition' }, width: 300, align: 'center' }
      ],
      chooseLoadData: [],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        this.disabled = true
        return purchaseDetailList(Object.assign(parameter, { purchaseBillSn: this.$route.params.sn })).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
            const warehouseSn = data.list[i].warehouseSn || undefined
            const warehouseLocationSn = data.list[i].warehouseLocationSn || undefined
            if (warehouseSn || warehouseLocationSn) {
              data.list[i].warehouseSnBackups = warehouseSn
              data.list[i].warehouseLocationSnBackups = warehouseLocationSn
              data.list[i].warehouseCascade = [warehouseSn, warehouseLocationSn]
            } else {
              data.list[i].warehouseCascade = undefined
            }
          }
          this.disabled = false
          this.chooseLoadData = data.list
          return data
        })
      }
    }
  },
  methods: {
    //  产品分类  change
    changeProductType (val, opt) {
      this.queryParam.productTypeSn1 = val[0] ? val[0] : ''
      this.queryParam.productTypeSn2 = val[1] ? val[1] : ''
      this.queryParam.productTypeSn3 = val[2] ? val[2] : ''
    },
    //  重置产品库
    resetSearchForm () {
      this.queryParam = {
        productBrandSn: undefined,
        productTypeSn1: '', //  产品一级分类
        productTypeSn2: '', //  产品二级分类
        productTypeSn3: '', //  产品三级分类
        queryWord: '',
        brand: ''
      }
      this.productType = []
      this.$refs.table.refresh(true)
    },
    //  确认入库
    handleWarehousing () {

    },
    //  返回列表
    handleBack () {
      this.$router.push({ path: '/purchasingManagement/purchaseOrder/list' })
    },
    filterOption (input, option) {
      	return (
      		option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      	)
    },
    //  详情
    getDetail () {
      purchaseDetailBySn({ sn: this.$route.params.sn }).then(res => {
        if (res.status == 200) {
          this.detail = res.data
        } else {
          this.detail = null
        }
      })
    },
    //  仓库仓位  级联  列表
    getWarehouseCascade () {
      warehouseCascadeList({}).then(res => {
        if (res.status == 200) {
          this.warehouseCascadeData = res.data
        } else {
          this.warehouseCascadeData = []
        }
      })
    },
    // 修改仓库仓位
    changeWarehouseCascade (val, opt, ind) {
      console.log(val, opt, ind)
      let loadData = this.chooseLoadData[ind]
      if (val.length < 2) {
        this.$message.warning('当前仓库无仓位，请选择其他仓库')
        const warehouseSnBackups = loadData.warehouseSnBackups || undefined
        const warehouseLocationSnBackups = loadData.warehouseLocationSnBackups || undefined
        loadData.warehouseSn = warehouseSnBackups
        loadData.warehouseLocationSn = warehouseLocationSnBackups
        if (warehouseSnBackups || warehouseLocationSnBackups) {
          loadData.warehouseCascade = [warehouseSnBackups, warehouseLocationSnBackups]
        } else {
          loadData.warehouseCascade = undefined
        }
      } else {
        loadData.warehouseSn = val[0] ? val[0] : ''
        loadData.warehouseLocationSn = val[1] ? val[1] : ''
        loadData.warehouseSnBackups = val[0] ? val[0] : ''
        loadData.warehouseLocationSnBackups = val[1] ? val[1] : ''
        loadData = this.chooseLoadData[ind]
        this.updateWarehouse(loadData)
      }
    },
    // 修改库存
    updateWarehouse (row) {
      updateWarehouse({ warehouseSn: row.warehouseSn, warehouseLocationSn: row.warehouseLocationSn }).then(res => {

      })
    }
  },
  mounted () {
    this.getDetail()
    this.getWarehouseCascade()
  }
}
</script>

<style lang="less">
  .purchaseOrderWarehousing-wrap{
    .btn-cont {
    	text-align: center;
    	margin: 35px 0 10px;
    }
    .billno{
      font-size: 14px;
      font-weight: bold;
      margin: 0 15px;
    }
  }
</style>
