<template>
  <div class="warehouseAllocationEdit-wrap">
    <a-page-header :ghost="false" @back="handleBack" class="warehouseAllocationEdit-back">
      <!-- 自定义的二级文字标题 -->
      <template slot="subTitle">
        <a id="warehouseAllocationEdit-back-btn" href="javascript:;" @click="handleBack">返回列表</a>
      </template>
      <!-- 操作区，位于 title 行的行尾 -->
      <template slot="extra">
        <a-button key="2" id="warehouseAllocationEdit-preview-btn">打印预览</a-button>
        <a-button key="1" type="primary" id="warehouseAllocationEdit-print-btn">快速打印</a-button>
      </template>
    </a-page-header>
    <!-- 基础信息 -->
    <a-card size="small" :bordered="false" class="warehouseAllocationEdit-cont">
      <a-collapse :activeKey="['1']">
        <a-collapse-panel key="1">
          <template slot="header">
            基础信息
            <!-- <a-button
              type="primary"
              shape="circle"
              size="small"
              icon="edit"
              class="edit-circle-btn"
              id="warehouseAllocationEdit-circle-btn"
              @click.stop="handleEditInfo" /> -->
          </template>
          <a-descriptions :column="3">
            <a-descriptions-item label="调出仓库">{{ warehouse?warehouse.outWarehouseName:'' }}</a-descriptions-item>
            <a-descriptions-item label="调入仓库">{{ warehouse?warehouse.putWarehouseName:'' }}</a-descriptions-item>
          </a-descriptions>
        </a-collapse-panel>
      </a-collapse>
    </a-card>
    <!-- 选择产品 -->
    <a-card size="small" :bordered="false" class="warehouseAllocationEdit-cont">
      <a-collapse :activeKey="['1']">
        <a-collapse-panel key="1" header="选择产品">
          <!-- 筛选条件 -->
          <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="产品编码" prop="productCode">
                    <a-input id="warehouseAllocationEdit-productCode" v-model="queryParam.productCode" placeholder="请输入产品编码" allowClear />
                  </a-form-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-form-item label="产品名称" prop="productName">
                    <a-input id="warehouseAllocationEdit-productName" v-model="queryParam.productName" placeholder="请输入产品名称" allowClear />
                  </a-form-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-form-item label="原厂编码" prop="productOrigCode">
                    <a-input id="warehouseAllocationEdit-productOrigCode" v-model="queryParam.productOrigCode" placeholder="请输入原厂编码" allowClear />
                  </a-form-item>
                </a-col>
                <template v-if="advanced">
                  <a-col :md="6" :sm="24">
                    <a-form-item label="产品品牌" prop="brandSn">
                      <a-select
                        placeholder="请选择"
                        id="warehouseAllocationEdit-state"
                        allowClear
                        v-model="queryParam.brandSn"
                        :showSearch="true"
                        option-filter-prop="children"
                        :filter-option="filterOption">
                        <a-select-option v-for="item in brandData" :key="item.brandSn" :value="item.brandSn">{{ item.brandName }}</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <a-col :md="6" :sm="24">
                    <a-form-item label="产品类别" prop="brandSn">
                      <a-cascader
                        :field-names="{ label: 'productTypeName', value: 'productTypeSn', children: 'children'}"
                        :options="typeData"
                        id="warehouseAllocationEdit-state"
                        placeholder="请选择产品类别"
                        allowClear
                        v-model="queryParam.brand" />
                    </a-form-item>
                  </a-col>
                  <a-col :md="6" :sm="24">
                    <a-form-item label="调出仓位" prop="brandSn">
                      <a-select id="warehouseAllocationEdit-warehouse" placeholder="请选择" allowClear v-model="queryParam.warehouse" style="width: 100%;">
                        <a-select-option v-for="item in warehouseOutLocData" :key="item.warehouseLocationSn" :value="item.warehouseLocationSn">{{ item.name }}</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                </template>
                <a-col :md="6" :sm="24" style="margin-bottom: 24px;">
                  <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="warehouseAllocationList-refresh">查询</a-button>
                  <a-button style="margin-left: 8px" @click="resetSearchForm" :disabled="disabled" id="warehouseAllocationList-reset">重置</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>
          <!-- 列表 -->
          <s-table
            class="sTable"
            ref="table"
            size="default"
            :rowKey="(record) => record.id"
            :columns="columns"
            :data="loadData"
            :scroll="{ x: 1560 }"
            bordered>
            <!-- 类别 -->
            <template slot="type" slot-scope="text, record">
              <span>{{ record.productTypeName2||'' }}</span><span v-if="record.productTypeName3"><strong>-</strong>{{ record.productTypeName3||'' }}</span>
              <!-- {{ record.productTypeName2+(record.productTypeName3?('-'+record.productTypeName3):'') }} -->
            </template>
            <!-- 调入仓位 -->
            <template slot="storageQuantity" slot-scope="text, record">
              <a-select id="warehouseAllocationEdit-warehouse" placeholder="请选择" allowClear v-model="record.putWarehouseLocationSn" style="width: 100%;">
                <a-select-option v-for="item in warehousePutLocData" :key="item.warehouseLocationSn" :value="item.warehouseLocationSn">{{ item.name }}</a-select-option>
              </a-select>
            </template>
            <!-- 调出数量 -->
            <template slot="transferOutQuantity" slot-scope="text, record">
              <a-input-number
                id="warehouseAllocationEdit-allocationQty"
                :value="record.allocationQty"
                :precision="0"
                :min="0"
                :max="999999"
                placeholder="请输入" />
            </template>
            <!-- 操作 -->
            <template slot="action" slot-scope="text, record">
              <a-button size="small" type="link" @click="handleAdd(record)" id="warehouseAllocationEdit-add-btn">添加</a-button>
            </template>
          </s-table>
        </a-collapse-panel>
      </a-collapse>
    </a-card>
    <!-- 已选产品 -->
    <a-card size="small" :bordered="false" class="warehouseAllocationEdit-cont">
      <a-collapse :activeKey="['1']">
        <a-collapse-panel key="1" header="已选产品">
          <!-- 总计 -->
          <a-alert type="info" showIcon style="margin-bottom:15px">
            <div slot="message">总成本：￥<strong>{{ productTotalCost }}</strong>，总数量： <strong>{{ productTotalQty }}</strong> ，总款数： <strong>{{ productTotalCategory }}</strong> </div>
          </a-alert>
          <!-- 筛选条件 -->
          <a-row :gutter="15" justify="space-between">
            <a-col :span="17">
              <div class="table-page-search-wrapper">
                <a-form layout="inline" @keyup.enter.native="$refs.chooseTable.refresh(true)">
                  <a-row :gutter="15">
                    <a-col :md="9" :sm="24">
                      <a-form-item label="产品编码" prop="productCode">
                        <a-input id="warehouseAllocationEdit-productCode" v-model="chooseParam.productCode" placeholder="请输入产品编码" allowClear />
                      </a-form-item>
                    </a-col>
                    <a-col :md="9" :sm="24">
                      <a-form-item label="产品名称" prop="productName">
                        <a-input id="warehouseAllocationEdit-productName" v-model="chooseParam.productName" placeholder="请输入产品名称" allowClear />
                      </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="24" style="margin-bottom: 24px;">
                      <a-button type="primary" @click="$refs.chooseTable.refresh(true)" :disabled="disabled" id="warehouseAllocationList-refresh">查询</a-button>
                      <a-button style="margin-left: 8px" @click="resetChooseSearchForm" :disabled="disabled" id="warehouseAllocationList-reset">重置</a-button>
                    </a-col>
                  </a-row>
                </a-form>
              </div>
            </a-col>
            <a-col :span="7">
              <!-- 暂不做 -->
              <!-- <a-button size="small" type="primary" id="warehouseAllocationEdit-pladd-btn" style="margin-bottom: 8px;">批量添加</a-button> -->
              <a-button size="small" id="warehouseAllocationEdit-import-btn" style="margin-left: 8px">导入明细</a-button>
              <a-button size="small" type="danger" id="warehouseAllocationEdit-del-all-btn" style="margin: 0 0 8px 8px;">整单删除</a-button>
            </a-col>
          </a-row>
          <!-- 列表 -->
          <s-table
            class="sTable"
            ref="chooseTable"
            size="default"
            :rowKey="(record) => record.id"
            :columns="chooseColumns"
            :data="chooseLoadData"
            :scroll="{ x: 1460 }"
            bordered>
            <!-- 类别 -->
            <template slot="type" slot-scope="text, record">
              {{ record.productTypeName2+(record.productTypeName3?('-'+record.productTypeName3):'') }}
            </template>
            <!-- 调入仓位 -->
            <template slot="storageQuantity" slot-scope="text, record">
              <a-select id="warehouseAllocationEdit-warehouse" placeholder="请选择" allowClear v-model="record.putWarehouseLocationSn" style="width: 100%;">
                <a-select-option v-for="item in warehousePutLocData" :key="item.warehouseLocationSn" :value="item.warehouseLocationSn">{{ item.name }}</a-select-option>
              </a-select>
            </template>
            <!-- 调出数量 -->
            <template slot="transferOutQuantity" slot-scope="text, record">
              <a-input-number
                id="warehouseAllocationEdit-allocationQty"
                :value="record.allocationQty"
                :precision="0"
                :min="0"
                :max="999999"
                placeholder="请输入" />
            </template>
            <!-- 操作 -->
            <template slot="action" slot-scope="text, record">
              <a-button size="small" type="link" @click="handleDel(record)" id="warehouseAllocationEdit-del-btn">删除</a-button>
            </template>
          </s-table>
        </a-collapse-panel>
      </a-collapse>
    </a-card>
    <a-affix :offset-bottom="0">
      <div style="text-align: center;width: 100%;background-color: #fff;padding: 30px 0;box-shadow: 0 0 20px #dcdee2;">
        <a-button type="primary" id="warehouseAllocationEdit-submit" size="large" @click="handleSubmit" style="padding: 0 60px;">提交</a-button>
      </div>
    </a-affix>
    <!-- 选择基本信息弹框 -->
    <basic-info-modal :openModal="openModal" @ok="handleOk" @close="openModal=false" />
  </div>
</template>

<script>
import { STable, VSelect } from '@/components'
import basicInfoModal from './basicInfoModal.vue'
import { dealerProductBrandQuery } from '@/api/dealerProductBrand.js'
import { dealerProductTypeList } from '@/api/dealerProductType.js'
import { warehouseLocAllList } from '@/api/warehouse.js'
import { productQuery, allocWarehouseFind, allocWarehouseDetailTotal, allocWarehouseDetailQuery, allocWarehouseDetailSave, allocWarehouseDetailDelete } from '@/api/allocWarehouse.js'
export default {
  components: { STable, VSelect, basicInfoModal },
  data () {
    return {
      id: '', // 单据id
      queryParam: {
        outWarehouseSn: '', // 调出仓库sn
        productCode: '', // 产品编码
        productName: '', // 产品名称
        productOrigCode: '', // 原厂编码
        brandName: '', // 品牌
        typeName: '' // 类别
      },
	  chooseParam: {
        allocationWarehouseSn: '', // 单据sn
	    productCode: '', // 产品编码
	    productName: '' // 产品名称
	  },
	  productTotalCost: 0, // 总成本
	  productTotalQty: 0, // 总数量
	  productTotalCategory: 0, // 总款项
	  warehouse: null, // 基础信息
      brandData: [], //  产品品牌  下拉数据
      typeData: [], //  产品类别  下拉数据
      warehousePutLocData: [], //  调入仓库仓位  下拉数据
      warehouseOutLocData: [], //  调出仓库仓位  下拉数据
      disabled: false, //  查询、重置按钮是否可操作
      advanced: false, // 高级搜索 展开/关闭
      // 表头
      columns: [
        { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
        { title: '产品编码', dataIndex: 'productCode', width: 140, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '产品名称', dataIndex: 'productName', width: 200, align: 'center', ellipsis: true },
        { title: '原厂编码', dataIndex: 'productOrigCode', width: 140, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '品牌', dataIndex: 'brandName', width: 160, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '类别', width: 160, align: 'center', scopedSlots: { customRender: 'type' } },
        { title: '调出仓位', dataIndex: 'outWarehouseLocationName', width: 140, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '调入仓位', scopedSlots: { customRender: 'storageQuantity' }, width: 140, align: 'center' },
        { title: '库存数量', dataIndex: 'currentQty', width: 100, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '单位', dataIndex: 'productUnit', width: 100, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '调出数量', scopedSlots: { customRender: 'transferOutQuantity' }, width: 140, align: 'center' },
        { title: '操作', scopedSlots: { customRender: 'action' }, width: 100, align: 'center', fixed: 'right' }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        this.disabled = true
        return productQuery(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
          return data
        })
      },
      // 表头
      chooseColumns: [
        { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
        { title: '产品编码', dataIndex: 'productCode', width: 140, align: 'center', sorter: true, customRender: function (text) { return text || '--' } },
        { title: '产品名称', dataIndex: 'productName', width: 200, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '原厂编码', dataIndex: 'productOrigCode', width: 140, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '品牌', dataIndex: 'brandName', width: 160, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '类别', width: 160, align: 'center', scopedSlots: { customRender: 'type' } },
        { title: '调出仓位', dataIndex: 'outWarehouseLocationName', width: 140, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '调入仓位', dataIndex: 'custsNakme', width: 140, align: 'center', scopedSlots: { customRender: 'storageQuantity' } },
        { title: '单位', dataIndex: 'productUnit', width: 100, align: 'center', customRender: function (text) { return text || '--' } },
        { title: '调出数量', scopedSlots: { customRender: 'transferOutQuantity' }, width: 140, align: 'center' },
        { title: '操作', scopedSlots: { customRender: 'action' }, width: 100, align: 'center', fixed: 'right' }
      ],
      // 加载数据方法 必须为 Promise 对象
      chooseLoadData: parameter => {
        this.disabled = true
        return allocWarehouseDetailQuery(Object.assign(parameter, this.chooseParam)).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.getProduceTotal()
          this.disabled = false
          return data
        })
      },
      openModal: false // 选择基本信息弹框是否显示
    }
  },
  methods: {
    //  重置
    resetSearchForm () {
      this.queryParam.orderBundleNo = ''
      this.queryParam.orderBundle.custMobile = ''
      this.queryParam.bundleName = ''
      this.queryParam.itemName = ''
      this.oldTime = undefined
      this.newTime = undefined
      this.$refs.table.refresh(true)
    },
    // 已选产品重置查询
    resetChooseSearchForm () {
      this.chooseParam.productCode = ''
      this.chooseParam.productName = ''
      this.$refs.chooseTable.refresh(true)
    },
    // 获取产品品牌
    getProductBrand () {
      dealerProductBrandQuery({}).then(res => {
        this.brandData = res.data || []
      })
    },
    // 获取产品分类
    getProductType () {
	  dealerProductTypeList({}).then(res => {
	    this.typeData = res.data || []
        console.log(res, this.typeData, '--------获取产品分类')
	  })
    },
    // 获取仓库仓位
    getWarehouseLoc (sn, type) {
      warehouseLocAllList({ warehouseSn: sn }).then(res => {
		  if (type == 'put') {
			  this.warehousePutLocData = res.data || []
		  } else {
			  this.warehouseOutLocData = res.data || []
		  }
        // return res.data || []
      })
    },
    // 查询基础信息
    getHouse () {
      allocWarehouseFind({ id: this.id }).then(res => {
        if (res.status == 200) {
          this.warehouse = res.data
		  this.getWarehouseLoc(this.warehouse.putWarehouseSn, 'put')
		  this.getWarehouseLoc(this.warehouse.outWarehouseSn, 'out')
        } else {
          this.warehouse = null
        }
      })
    },
    // 已选产品总计查询
    getProduceTotal () {
      allocWarehouseDetailTotal(this.chooseParam).then(res => {
		  console.log(res, '-----总计----')
		  if (res.status == 200) {
			  this.productTotalCost = this.data.productTotalCost
			  this.productTotalQty = this.data.productTotalQty
			  this.productTotalCategory = this.data.productTotalCategory
		  } else {
			  this.productTotalCost = 0
			  this.productTotalQty = 0
			  this.productTotalCategory = 0
		  }
	  })
    },
    //  添加
    handleAdd (row) {
      const params = {

      }
    },
    //  删除
    handleDel (row) {},
    //  编辑基本信息
    handleEditInfo () {
      this.openModal = true
    },
    //  基本信息  保存
    handleOk () {

    },
    //  提交
    handleSubmit () {},
    //  导入明细
    handleImport () {
      console.log(333)
    },
    //  返回列表
    handleBack () {
      this.$router.push({ path: '/allocationManagement/warehouseAllocation/list' })
    },
    filterOption (input, option) {
      	return (
      		option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      	)
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.openModal = false
	  vm.id = vm.$route.params.id
	  vm.chooseParam.allocationWarehouseSn = vm.$route.params.sn
	  vm.getProductBrand()
	  vm.getProductType()
	  vm.getHouse()
	  console.log(vm.id, vm.$route.params, 'vm.id')
    })
  }
}
</script>

<style lang="less">
  .warehouseAllocationEdit-wrap{
    .warehouseAllocationEdit-back{
      margin-bottom: 15px;
    }
    .warehouseAllocationEdit-cont{
      margin-bottom: 15px;
      .sub-title{
        font-size: 12px;
        color: #808695;
        margin-left: 10px;
      }
      .tag-txt{
        font-size: 12px;
        color: #ed1c24;
      }
      .edit-circle-btn{
        margin-left: 15px;
        i{
          vertical-align: text-bottom;
        }
      }
      .import-btn{
        margin-left: 15px;
      }
    }
  }
</style>
