<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 }"
        :row-key="tableRowKey"
        :bordered="true"
        dragle
        :dataSource.sync="dataSource"
        auto-width
        :autoLoad="tableAutoLoad"
        :filterDropdownColum="false"
        :colorTransformRow="false"
        :columns="tableColumns"
        :rowSelectType="rowSelectType"
        :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>
        <template slot="inLocatorCode" slot-scope="text, record">
          <p-search-modal
            title="建筑物"
            :value="text"
            :width="50"
            :target-click="true"
            :remoteUrl="{
              url: '/wmsWhBldg/v1/page',
              method: 'get',
            }"
            rowSelectType="radio"
            targetValueKey="bldgName"
            rowKey="bldgId"
            :tableConfig="{
              columns: [
                { dataIndex: 'warehouseName', title: '仓库名称' },
                { dataIndex: 'bldgName', title: '建筑物名称' },
                { dataIndex: 'bldgCode', title: '建筑物编号' },
              ],
            }"
            :toolBar="{
              items: [
                { type: 'input', name: 'bldgName', label: '建筑物名称', value: '' },
                { type: 'input', name: 'bldgCode', label: '建筑物编号', value: '' },
              ],
            }"
          />
        </template>
      </p-table>
    </p-card>
  </div>
</template>

<script>
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: [],
    },
    items: {
      type: Array,
      default: [],
    },
    tableRemoteUrl: {
      type: String | Object | Function,
      default: "",
    },
    ajaxId: {
      // 接口id
      type: String,
      default: "",
    },
  },
  data() {
    return {
      dataSource: [],
      remoteParams: {},
      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",
            style: "margin-right:10px;",
            on: {
              click(event, form) {
                form.resetFields();
              },
            },
          },
        ],
      },
      itemDatas: [],
      selectedRowKeys: [],
    };
  },
  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) {
      console.log(dataParams, "dataParamsdataParamsdataParams");

      dataParams.params = {
        ...dataParams.params,
        ...this.tableRemoteUrl.params,
      };
      return dataParams;
    },
    selectChange(selectedRowKeys, selectedRows) {
      // 勾选框
      console.log(selectedRowKeys, selectedRows);
      this.selectedRowKeys = selectedRowKeys;
      this.$emit("selectChange", selectedRowKeys, selectedRows);
    },
    changeClick(record) {
      this.$emit("changeClick", record);
    },
  },
};
</script>

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