<template>
  <div>
    <p-card :title="title">
      <span slot="extra">
        <template v-for="(item, index) in btnOptions">
          <p-button type="primary" style="margin-right: 10px" :icon="item.icon" @click="clickBtn(item)" :key="index">{{
            item.name
          }}</p-button>
        </template>
      </span>
      <div class="gridClass">
        <p-grid-form
          :span="8"
          ref="forms"
          :labelCol="{ span: 8 }"
          :items="itemDatas"
          @submit="hanlderSubmit"
        ></p-grid-form>
      </div>
      <p-table
        ref="table"
        :scroll="{ x: true, y: 200 }"
        :row-key="tableRowKey"
        :bordered="true"
        :autoLoad="tableAutoLoad"
        :filterDropdownColum="false"
        :colorTransformRow="false"
        :hasRowSelectCheck="true"
        :columns="tableColumns"
        @clickRow="clickRowHead"
        :rowSelectType="1"
        :selectedRowKeys.sync="selectedRowKeys"
        :remoteUrl="tableRemoteUrl"
        :remoteBefore="remoteBefore"
        :remoteData="remoteParams"
        :remoteParams="remoteParams"
        @selectChange="selectChange"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="changeClick(record)" style="margin-right: 10px" href="javascript:;">损溢管理编辑</a>
        </span>
      </p-table>
      <p-table
        ref="table"
        :scroll="{ x: true }"
        row-key="moveLineId"
        :bordered="true"
        :autoLoad="false"
        :filterDropdownColum="false"
        :colorTransformRow="false"
        :columns="tableColumnsDetail"
        :rowSelectType="2"
        :selectedRowKeys.sync="selectedRowKeys1"
        :remoteUrl="tableRemoteUrl1"
        :remoteBefore="remoteBefore1"
        :remoteData="remoteParams1"
        :remoteParams="remoteParams1"
        @selectChange="selectChange1"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="changeClick(record)" style="margin-right: 10px" href="javascript:;">损溢管理编辑</a>
        </span>
      </p-table>
    </p-card>
  </div>
</template>

<script>
import { upcloud_base_wh_operate } from "@/config/serviceSettings";
export default {
  name: 'check',
  props: {
    btnOptions: {
      // 按钮集合
      type: Array,
      default: []
    },
    queryStatus: {
      // 查询按钮
      type: Boolean,
      default: true
    },
    tableRowKey: {
      type: String,
      default: ''
    },
    tableAutoLoad: {
      type: Boolean,
      default: true
    },
    rowSelectType: {
      // 行选择类型
      type: Number,
      default: 2
    },
    title: {
      // 标题
      type: String,
      default: ''
    },
    tableColumns: {
      type: Array,
      default: []
    },
    tableColumnsDetail: {
      type: Array,
      default: []
    },
    items: {
      type: Array,
      default: []
    },
    tableRemoteUrl: {
      type: String | Object | Function,
      default: ''
    },
    ajaxId: {
      // 接口id
      type: String,
      default: ''
    }
  },
  data() {
    return {
      remoteParams: {},
      remoteParams1: {},
      tableRemoteUrl1: {
        url: upcloud_base_wh_operate+'/move/v1/detail-list',
        method: 'get',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      },
      itemOption: {
        span: 6,
        type: 'buttonGroup',
        style: { textAlign: 'left' },
        options: [
          {
            value: '查询',
            icon: 'search',
            btnType: 'primary',
            style: 'margin-left:30px;margin-right:10px;',
            htmlType: 'submit',
            on: {
              click: (event, form) => {
                form.validateFields((error, values) => {
                  if (!error) {
                    this.remoteParams = values
                  }
                })
              }
            }
          },
          {
            value: '重置',
            name: 'ccz',
            icon: 'redo',
            on: {
              click(event, form) {
                form.resetFields()
              }
            }
          }
        ]
      },
      itemDatas: [],
      selectedRowKeys: [],
      selectedRowKeys1: []
    }
  },
  created() {
    if (this.queryStatus) {
      this.items.push(this.itemOption)
      this.itemDatas = this.items
    } else {
      this.itemDatas = this.items
    }
  },
  methods: {
    clickBtn(item) {
      // 按钮
      this.$emit(item.action, true)
    },
    hanlderSubmit(event, form) {
      // 查询
      console.log(form)
      event.preventDefault()
      this.$emit('hanlderSubmit', event, form)
    },
    remoteBefore(data, dataParams) {
      // 主表
      dataParams.params = { ...dataParams.params, ...this.tableRemoteUrl.params }
      console.log(dataParams, 'dataParamsdataParamsdataParams')
      return dataParams
    },
    remoteBefore1(data, dataParams) {
      // 子表
      dataParams.params = { ...dataParams.params, ...this.remoteParams1 }
      return dataParams
    },
    clickRowHead(event, activeID, rowRecord) {
      // console
      // 点击主表信息
      this.remoteParams1 = { headerId: rowRecord.moveHeaderId }
    },
    selectChange(selectedRowKeys, selectedRows) {
      // 主表 勾选框
      this.selectedRowKeys = selectedRowKeys
      this.$emit('selectChange', selectedRowKeys, selectedRows)
    },
    selectChange1(selectedRowKeys, selectedRows) {
      // 子表 勾选框
      this.selectedRowKeys1 = selectedRowKeys
      this.$emit('selectChange1', selectedRowKeys, selectedRows)
    },
    changeClick(record) {
      this.$emit('changeClick', record)
    }
  }
}
</script>

<style>
.gridClass {
  margin-bottom: 12px;
}
.ant-tabletd {
  white-space: nowrap;
}
</style>
