<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.sync="dataSource"
                 bordered
                 :filterDropdownColum="false"
                 :colorTransformRow="false"
                 :autoLoad="false"
                 :remoteUrl="remoteUrl"
                 :remoteParams="remoteParams"
                 :remoteData="remoteParams"
                 @selectChange="selectChange"
                 row-key="supplierId">
        </p-table>
      </div>
    </div>
  </div>
</template>

<script>
import { columns } from '../config/extrepot.js'
import { addItem } from '../api/api.js'
import { upcloud_base_wh, upcloud_base_chain } from "@/config/serviceSettings";

const items1 = function (that) {
  return [
    // form 表单
    { type: 'input', name: 'warehouseId', label: 'ID', value: '', hidden: true },
    { type: 'input', name: 'warehouseCode', label: '编码', value: '', hidden: true },
    {
      type: 'searchModal',
      name: 'warehouseName',
      label: '仓库名称',
      value: '',
      title: '仓库',
      rowKey: 'warehouseId',
      targetValueKey: 'warehouseName',
      modalWidth: 850,
      required: true,
      targetClick: true,
      remoteUrl: upcloud_base_wh+'/warehouse/page',
      remoteData: {},
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
      toolBar: {
        items: [
          { type: 'input', name: 'warehouseName', label: '仓库名称', span: 8 },
          { type: 'input', name: 'warehouseCode', label: '仓库编码', span: 8 }
        ]
      },
      tableConfig: {
        columns: [
          { dataIndex: 'warehouseId', title: '仓库ID', key: 'warehouseId' },
          { dataIndex: 'warehouseCode', title: '仓库编码', key: 'warehouseCode' },
          { dataIndex: 'warehouseName', title: '仓库名称', key: 'warehouseName' }
        ]
      },
      destroyOnClose: true,
      on: {
        ok(event, value, rowData, form) {
          that.warehouseId = rowData[0].warehouseId

          form.setFieldsValue({
            warehouseName: rowData[0].warehouseName,
            warehouseCode: rowData[0].warehouseCode,
            warehouseId: rowData[0].warehouseId
          })
        },
        change(event, value, rowData, form) {
          if (!value) {
            that.warehouseId = null

            form.setFieldsValue({
              warehouseName: null,
              warehouseCode: null,
              warehouseId: null
            })
          }
        }
      }
    },

    { type: 'input', name: 'cargoOwnerId', label: '货主ID', value: '', hidden: true },
    { type: 'input', name: 'cargoOwnerCode', label: '货主编码', value: '', hidden: true },
    {
      type: 'searchModal',
      name: 'cargoOwnerName',
      label: '货主名称',
      value: '',
      title: '货主',
      rowKey: 'cargoOwnerId',
      targetValueKey: 'cargoOwnerName',
      modalWidth: 850,
      required: true,
      targetClick: true,
      remoteUrl: { url: upcloud_base_chain+'/baseCargoOwnerMst/v1.0/pageList', method: 'post' },
      remoteData: {},
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
      toolBar: {
        items: [
          { type: 'input', name: 'cargoOwnerName', label: '货主名称', span: 8 },
          { type: 'input', name: 'cargoOwnerType', label: '货主类型', span: 8 }
        ]
      },
      tableConfig: {
        columns: [
          { dataIndex: 'cargoOwnerId', title: '货主ID' },
          { dataIndex: 'cargoOwnerType', title: '货主类型' },
          { dataIndex: 'cargoOwnerName', title: '货主名称' }
        ]
      },
      destroyOnClose: true,
      on: {
        ok(event, value, rowData, form) {
          that.cargoOwnerId = rowData[0].cargoOwnerId
          form.setFieldsValue({
            cargoOwnerName: rowData[0].cargoOwnerName,
            cargoOwnerCode: rowData[0].cargoOwnerCode,
            cargoOwnerId: rowData[0].cargoOwnerId
          })
        },
        change(event, value, rowData, form) {
          if (!value) {
            that.cargoOwnerId = null
            form.setFieldsValue({
              cargoOwnerName: null,
              cargoOwnerCode: null,
              cargoOwnerId: null
            })
          }
        }
      }
    }
  ]
}
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()
            }
          }
        }
      ]
    }
  ]
}

export default {
  name: 'Collection',
  data() {
    return {
      columns: columns.filter(t => t.dataIndex != 'action'),
      dataSource: [],
      items: items(this),
      items1: items1(this),
      warehouseId: '',
      selectData: [],
      cargoOwnerId: '',
      remoteParams: {}
    }
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    warehouseRecord: {
      type: Object,
      default: {}
    },
    cargoOwnerRecord: {
      type: Object,
      default: {}
    },
    remoteUrl: {
      type: Object,
      default: {}
    },
  },
  created() {
    this.$nextTick(() => {

      this.$refs.forms1.form.resetFields()
      this.$refs.forms1.form.setFieldsValue({
        warehouseId: this.warehouseRecord.warehouseId,
        warehouseCode: this.warehouseRecord.warehouseCode,
        warehouseName: this.warehouseRecord.warehouseName,
        cargoOwnerId: this.cargoOwnerRecord.cargoOwnerId,
        cargoOwnerCode: this.cargoOwnerRecord.cargoOwnerCode,
        cargoOwnerName: this.cargoOwnerRecord.cargoOwnerName
      })
    })
    this.cargoOwnerId = this.cargoOwnerRecord.cargoOwnerId || '';
    this.warehouseId = this.warehouseRecord.warehouseId || '';
    // this.queryData()
  },
  methods: {
    goUrl() {
      // 返回
      this.$emit('requestUrl', false)
    },
    saveClick() {
      // 保存
      this.$refs.forms1.form.validateFields((err, value) => {
        if (err) {
          return;
        }
        if (this.selectData.length < 1) {
          return this.$message.warn('请选择商品！')
        }
        let params = this.selectData
        console.log(this.selectData, 'this.selectDatathis.selectDatathis.selectData')
        this.spinning = true
        addItem(params).then(res => {
          this.spinning = false
          if (res.success) {
            console.log(res.success)
            this.$emit('successRequest', false)
          } else {
            this.$exception(res)
          }
        })
      });
    },
    queryData() {
      console.log(this.cargoOwnerId, this.warehouseId)
      // 查询
      if (!this.cargoOwnerId) {
        return this.$message.warn('请选择货主')
      }
      if (!this.warehouseId) {
        return this.$message.warn('请选择仓库')
      }
      let params = {
        warehouseId: this.warehouseId, // 仓库ID
        cargoOwnerId: this.cargoOwnerId, // 货主ID
        condition: this.$refs.forms.form.getFieldsValue().condition, // 查询条件
      }
      this.remoteParams = params;
    },
    hanlderSubmit(event, form) {
      event.preventDefault()
      this.queryData()
    },
    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)
    },

  }
}
</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>
