<template>
  <div class="collection">
    <p-spin v-show="!visible" size="small" :spinning="spinning">
      <p-html
        :items="items"
        :formTable="formTable"
        :columns="columns"
        :keys="keys"
        :remoteUrl="{ url: upcloud_base_wh_control+'/datarelationWhSupplier/page', method: 'post' }"
        @selectChange="selectChange"
        @changeClick="changeClick"
        @delClick="delClick"
        @delAll="delAll"
        @addName="addItem"
      ></p-html>
    </p-spin>
    <addHtml
      v-if="visible"
      :warehouseRecord="warehouseId"
      :cargoOwnerRecord="cargoOwnerId"
      :title="title"
      :remoteUrl="{ url: upcloud_base_wh_control+'/datarelationWhSupplier/unpage', method: 'post' }"
      @successRequest="successRequest"
      @requestUrl="requestUrl"
    />
  </div>
</template>

<script>
import { genWarehouseAuthSearchModal, genCargoownerAuthSearchModal } from '@/views/kzyWMS/SearchModal/index'
import { changecargoOwnerfun } from '@/views/kzyWMS/utils/setCargoOwner'
const span8 = { span: 8, labelCol: { span: 6 } }
import pHtml from './components/commonHtml.vue'
import addHtml from './components/add.vue'
import { columns } from './config/extrepot.js'
import { deleteList } from './api/api.js'
import { sorter } from '../../utils/sort'
import { upcloud_base_wh_control } from "@/config/serviceSettings";
var grid = {
  span: 6,
  labelCol: { span: 5 },
  wrapperCol: { span: 19 }
}
const items = function(that) {
  return [
    // form 表单
    {
      type: 'input',
      name: 'condition',
      label: '查询条件',
      span: 8,
      placeholder: '请输入名称/编码/助记码',
      labelCol: { span: 6 },
      //   wrapperCol: { span: 19 },
      value: ''
    },
    ...genWarehouseAuthSearchModal(1, true, false, null, changecargoOwnerfun, span8),
    ...genCargoownerAuthSearchModal(1, true, false, null, null, span8)
  ]
}
export default {
  name: 'Collection',
  data() {
    return {
      upcloud_base_wh_control,
      columns: null,
      items: items(this),
      confirmLoading: false,
      visible: false,
      keys: 'drId',
      title: '新增仓供应商',
      condition: '', // 名称
      warehouseId: {}, // 仓库id
      cargoOwnerId: {}, // 货主id
      resetData: {},
      spinning: false,
      selectedRowKeys: [],
      formTable: {
        // 表格头部按钮
        title: '仓供应商',
        options: [
          //   // button
          //   {
          //     name: '新增',
          //     icon: 'plus',
          //     action: 'addName'
          //   },
          //   {
          //     name: '批量删除',
          //     icon: 'delete',
          //     action: 'delAll'
          //   }
        ]
      },
      pagination: {
        total: 0,
        pageSize: 10, //每页中显示10条数据
        current: 1,
        showSizeChanger: true,
        pageSizeOptions: ['10', '15', '20'], //每页中显示的数据
        showTotal: total => `共有 ${total} 条数据` //分页中显示总的数据
      }
    }
  },
  components: {
    pHtml,
    addHtml
  },

  created() {
    this.columns = sorter(columns)
  },
  methods: {
    requestUrl(val) {
      this.visible = val
    },
    successRequest(val) {
      this.visible = val
      this.getQueryData()
    },
    selectChange(selectedRowKeys, selectedRows) {
      // 勾选框
      console.log(selectedRowKeys, selectedRows)
      this.selectedRowKeys = selectedRowKeys
    },
    getwarehouseId() {
      // 根据id查询数据
      let params = {
        id: this.resetData.warehouseId // 名称
      }
    },
    changeClick(values) {
      // 修改
      this.visible = true
      this.title = '修改仓库'
      this.resetData = values
      this.getwarehouseId()
    },
    delAll() {
      // 批量删除
      let that = this
      if (this.selectedRowKeys.length < 1) return this.$message.warn('请选择仓库！')
      this.$confirm({
        title: '是否删除?',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          return that.delAllAjax(that.selectedRowKeys.join(','))
        }
      })
    },
    delClick(record) {
      let that = this
      this.$confirm({
        title: '是否删除?',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          return that.delAllAjax(record.drId)
        }
      })
    },
    delAllAjax(val) {
      // 批量删除
      let params = {
        ids: val // 每页数量
      }
      return deleteList(params).then(res => {
        if (res.success) {
          console.log(res.success)
          this.$message.success('删除成功！')
          this.getQueryData()
        } else {
          this.$exception(res)
        }
      })
    },

    addItem() {
      // 新增
      this.visible = true
      this.title = '新增仓供应商'
    }
  }
}
</script>

<style lang="less" scoped></style>
