<template>
  <div class="common">
    <div class="heads">
      <p-button type="link" @click="goUrl"><p-icon type="arrow-left" /> </p-button>
      <span>{{ title }}</span>
      <p-button type="primary" style="float: right" @click="saveClick">保存</p-button>
    </div>
    <div class="contents">
      <div class="gridFroms gridFroms1">
        <p-grid-form :span="8" ref="forms1" :label-col="{ span: 9 }" :items="items1" @submit="hanlderSubmit" />
      </div>
      <a-divider orientation="left">关联商品</a-divider>
      <div class="gridFroms">
        <p-grid-form :span="8" ref="forms" :label-col="{ span: 9 }" :items="items" @submit="hanlderSubmit" />
      </div>
      <div class="tabDiv">
        <p-table
          :columns="columns"
          :data-source="dataSource"
          bordered
          :hasRowCount="false"
          :loading="spinning"
          :pagination="pagination"
          @selectChange="selectChange"
          @change="changePagination"
          row-key="itemId"
        >
        </p-table>
      </div>
    </div>
  </div>
</template>

<script>
const columns = [
  {
    dataIndex: 'cargoOwnerName',
    title: '货主名称',
    align: 'center' // required: true, // type: 'edit',
  },
  {
    dataIndex: 'cargoOwnerCode',
    title: '货主编码',
    align: 'center' // required: true, // type: 'edit',
  },
  {
    dataIndex: 'itemName',
    title: '商品名称',
    align: 'center' // required: true, // type: 'edit',
  },
  {
    dataIndex: 'itemId',
    title: '商品id',
    align: 'center' // required: true, // type: 'edit'
  },
  {
    dataIndex: 'itemCode',
    title: '商品编码',
    align: 'center' // required: true, // type: 'edit'
  }
]
const items1 = function(that) {
  return [
    // form 表单
    {
      type: 'searchModal',
      name: 'cargoOwnerName',
      label: '关联货主',
      span: 6,
      required: true,
      targetValueKey: 'cargoOwnerName',
      toolBar: {
        items: [
          {
            type: 'input',
            name: 'cargoOwnerName',
            label: '货主名称',
            span: 6
          },

          {
            type: 'input',
            name: 'cargoOwnerType',
            label: '货主类型',
            span: 6
          },
          {
            type: 'input',
            name: 'cargoOwnerId',
            label: '货主ID',
            span: 6
          }
        ]
      },
      tableConfig: {
        rowKey: 'cargoOwnerId',
        rowSelectType: 1,
        hasRowSelectCheck: true,
        columns: [
          { dataIndex: 'cargoOwnerName', title: '货主名称' },
          { dataIndex: 'cargoOwnerType', title: '货主类型' },
          { dataIndex: 'cargoOwnerId', title: '货主ID' }
        ]
      },
      value: '',
      remoteUrl: API.CargoOwnerLicenseList,
      on: {
        ok(event, value, rowData, form) {
          that.cargoOwnerId = rowData[0].cargoOwnerId
        },
        change(event, value, rowData, form) {
          if (!value) {
            that.cargoOwnerId = ''
          }
        }
      }
    },
    {
      type: 'search',
      name: 'warehouseName',
      label: '关联仓库',
      span: 6,
      required: true,
      value: '',
      toolBar: {
        items: [
          {
            type: 'input',
            name: 'warehouseName',
            label: '仓库名称',
            span: 6,
            // placeholder: '请输入单位编号/单位名称/助记码',
            value: ''
          },

          {
            type: 'input',
            name: 'warehouseCode',
            label: '仓库编码',
            span: 6,
            // placeholder: '请输入单位编号/单位名称/助记码',
            value: ''
          },
          {
            type: 'input',
            name: 'warehouseId',
            label: '仓库ID',
            span: 6,
            // placeholder: '请输入单位编号/单位名称/助记码',
            value: ''
          }
        ]
      },
      tableConfig: {
        rowKey: 'warehouseName',
        rowSelectType: 1,
        hasRowSelectCheck: true,
        columns: [
          { dataIndex: 'warehouseName', title: '仓库名称', key: 'warehouseName' },
          { dataIndex: 'warehouseCode', title: '仓库编码', key: 'warehouseCode' },
          { dataIndex: 'warehouseId', title: '仓库ID', key: 'warehouseId' }
        ]
      },
      value: '',
      remoteUrl: API.warehouse,
      on: {
        ok(event, value, rowData, form) {
          that.warehouseId = rowData[0].warehouseId
        },
        change(event, value, rowData, form) {
          if (!value) {
            that.warehouseId = ''
          }
        }
      }
    }
  ]
}
const items = function(that) {
  return [
    // form 表单
    {
      type: 'input',
      name: 'condition',
      label: '查询条件',
      span: 6,
      placeholder: '请输入物料编号/物料名称/助记码',
      value: ''
    },
    {
      span: 6,
      type: 'buttonGroup',
      style: { textAlign: 'left' },
      options: [
        {
          value: '查询',
          icon: 'search',
          btnType: 'primary',
          style: 'margin-left:30px;margin-right:10px;',
          htmlType: 'submit'
        },
        {
          value: '重置',
          name: 'ccz',
          icon: 'redo',
          on: {
            click(event, form) {
              form.resetFields()
            }
          }
        }
      ]
    }
  ]
}
import API from '../api/default.js'
import { unpageWarehouseitem, addWarehouseitem } from '../api/api.js'
export default {
  name: 'Collection',
  data() {
    return {
      columns,
      dataSource: [],
      items: items(this),
      items1: items1(this),
      warehouseId: '',
      selectData: [],
      spinning: false,
      cargoOwnerId: '',
      pagination: {
        total: 0,
        pageSize: 10, //每页中显示10条数据
        current: 1,
        showSizeChanger: true,
        pageSizeOptions: ['10', '15', '20'], //每页中显示的数据
        showTotal: total => `共有 ${total} 条数据` //分页中显示总的数据
      }
    }
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    warehouseRecord: {
      type: Object,
      default: {}
    },
    cargoOwnerRecord: {
      type: Object,
      default: {}
    }
  },
  created() {
    this.$nextTick(() => {
      let that = this
      this.$refs.forms1.form.resetFields()
      this.$refs.forms1.form.setFieldsValue({
        warehouseName: that.warehouseRecord.warehouseName,
        cargoOwnerName: that.cargoOwnerRecord.cargoOwnerName
      })
    })
    this.cargoOwnerId = this.cargoOwnerRecord.cargoOwnerId ? this.cargoOwnerRecord.cargoOwnerId : ''
    this.warehouseId = this.warehouseRecord.warehouseId ? this.warehouseRecord.warehouseId : ''
    // this.queryData()
  },
  methods: {
    goUrl() {
      // 返回
      this.$emit('requestUrl', false)
      console.log('返回')
    },
    saveClick() {
      // 保存
      if (this.selectData.length < 1) {
        return this.$message.warn('请选择商品！')
      }
      let params = this.selectData
      console.log(this.selectData, 'this.selectDatathis.selectDatathis.selectData')
      this.spinning = true
      addWarehouseitem(params).then(res => {
        this.spinning = false
        if (res.success) {
          console.log(res.success)
          this.$emit('successRequest', false)
        } else {
          this.$exception(res)
        }
      })
    },
    queryData() {
      this.$refs.forms1.form.validateFields((error, values, selectData) => {
        if (!error) {
          this.queryAjaxData()
        }
      })
    },
    queryAjaxData() {
      // 查询
      let params = {
        warehouseId: this.warehouseId, // 仓库ID
        cargoOwnerId: this.cargoOwnerId, // 货主ID
        condition: this.$refs.forms.form.getFieldsValue().condition, // 查询条件
        pageNum: this.pagination.current, // 当前页码
        pageSize: this.pagination.pageSize // 每页数量
      }
      this.spinning = true
      unpageWarehouseitem(params).then(res => {
        this.spinning = false
        if (res.success) {
          console.log(res.success)
          this.dataSource = res.data.list
          this.pagination.total = Number(res.data.totalCount)
        } else {
          this.$exception(res)
        }
      })
    },
    hanlderSubmit(event, form) {
      event.preventDefault()
      this.queryData()
      // this.$emit('hanlderSubmit', event, form)
    },
    selectChange(selectedRowKeys, selectedRows) {
      selectedRows.map(item => {
        item.warehouseId = this.warehouseId
        item.cargoOwnerId = this.cargoOwnerId
      })
      this.selectData = selectedRows
      //
      console.log(selectedRowKeys, selectedRows)
      this.$emit('selectChange', selectedRowKeys, selectedRows)
    },
    changePagination(pagination, filters, sorter) {
      // 分页变化
      this.$emit('changePagination', pagination, filters, sorter)
      // console.log(pagination, filters, sorter, '分页变化分页变化')
      // this.pagination = pagination
      // this.pagination.pageNum = pagination.current
      // this.getlistCompanyByAuthId()
    }
  }
}
</script>

<style lang="less" scoped>
.heads {
  padding: 12px 20px 12px 10px;
  background: #fff;
  border-bottom: 1px solid #e9e9e9;
}
.contents {
  padding: 0 20px 20px 20px;
  background: #fff;
}
.gridFroms {
  padding: 12px 0;
}
.gridFroms1 {
  padding-top: 20px;
}
</style>
