<template>
  <p-spin :spinning="spinning">
    <p-card
      style="margin-bottom: 20px"
      :tab-list="mainList.list"
      :active-tab-key="mainList.checkedKey"
      @tabChange="(key) => (mainList.checkedKey = key)"
    >
      <template v-for="subitem of mainList.list">
        <span slot="tabBarExtraContent" :key="subitem.key">
          <p-button
            v-for="(item, index) in subitem.btns"
            type="primary"
            style="margin-right: 10px"
            :icon="item.icon"
            @click="clickBtn(item, subitem.key)"
            :key="index"
            >{{ item.name }}</p-button
          >
        </span>
        <div
          v-show="mainList.checkedKey === subitem.key"
          :key="subitem.key"
          :style="{ height: mainList.height || 'auto' }"
          class="box-main"
        >
          <p-grid-form
            :ref="subitem.key"
            :span="6"
            :labelCol="{ span: 5 }"
            :wrapperCol="{ span: 19 }"
            :items="subitem.items"
            @submit="hanlderSubmit"
          />
        </div>
      </template>
    </p-card>
    <p-card :title="infoList.title">
      <span slot="extra">
        <template v-for="(item, index) in infoList.btns">
          <p-button type="primary" style="margin-right: 10px" :icon="item.icon" @click="clickBtn(item)" :key="index">{{
            item.name
          }}</p-button>
        </template>
      </span>
      <p-table-edit-pro
        :rowSelectType="infoList.rowSelectType"
        dragle
        size="small"
        ref="table"
        :bordered="true"
        :hasRepairDataSource="true"
        :hasRowSelectCheck="true"
        :rowKey="infoList.rowKey"
        auto-width
        :data-source="data"
        :colorTransformRow="false"
        :columns="aColumns"
        :scroll="{ x: true }"
        :remoteUrl="tableRemoteUrl"
        :remoteBefore="remoteBefore"
        :remoteData="remoteParams"
        :autoLoad="tableAutoLoad"
        @clickRow="clickRowHead"
        @search="clickRow"
        @colChange="colChange"
        @selectChange="selectChange"
      >
        <span slot="checkWay" slot-scope="text">
          <span>{{ remoteDataFun(text) }}</span>
        </span>
        <span slot="pieceQuantityAccount" slot-scope="text, record">
          {{ remoteDataFun(record.checkMethod) == "明盘" ? text : "一" }}
        </span>
      </p-table-edit-pro>
    </p-card>
  </p-spin>
</template>

<script>
import { sorter } from "../../utils/sort";
export default {
  name: "check",
  props: {
    spinning: {
      type: Boolean,
      default: false,
    },
    tableAutoLoad: {
      type: Boolean,
      default: true,
    },
    tableRemoteUrl: {
      type: String | Object | Function,
      default: "",
    },
    remoteDatas: {
      type: Array,
    },
    mainList: {
      // 主要信息
      type: Object,
    },
    infoList: {
      // 附加信息
      type: Object,
    },
    ajaxId: {
      // 接口id
      type: String,
      default: "",
    },
  },
  data() {
    return {
      remoteParams: {},
      aColumns: null,
      data: [],
      dataType: [],
      selectedRowKeys: [],
    };
  },
  watch: {
    remoteDatas(newVal) {
      this.dataType = newVal;
    },
  },
  created() {
    this.aColumns = sorter(this.infoList.columns);
    console.log(this.tableRemoteUrl, "tableRemoteUrltableRemoteUrl");
  },
  methods: {
    clickBtn(item, key) {
      // 按钮
      this.$emit(item.action, true);
      console.log(item.action, "item.actionitem.action");
      if (item.action == "reset") {
        // 重置
        console.log(key);
        this.$refs[key][0].form.resetFields();
      } else if (item.action == "hanlderSubmit") {
        // 查询
        console.log(8888888888888);
        this.hanlderSubmit(key);
      }
    },
    remoteDataFun(value) {
      if (!value) return "";
      let name = value;
      this.dataType.map((res) => {
        if (res.dictCode == value) {
          name = res.dictName;
        }
      });
      return name;
    },
    hanlderSubmit(key) {
      // 查询
      // event.preventDefault()
      // this.$emit('hanlderSubmit', event, form)
      this.$refs[key][0].form.validateFields((error, values) => {
        console.log(values);
        if (!error) {
          this.remoteParams = { ...this.tableRemoteParams };
          this.remoteParams.params = {
            ...values,
          };
        }
      });
    },
    remoteBefore(data, dataParams) {
      if (dataParams.data.params) {
        dataParams.data = { ...dataParams.data, num: this.ajaxId };
      } else {
        dataParams.data = { ...dataParams.data.data, num: this.ajaxId };
      }
      return dataParams;
    },
    selectChange(selectedRowKeys, selectedRows) {
      // 勾选框
      console.log(selectedRowKeys, selectedRows);
      this.selectedRowKeys = selectedRowKeys;
      this.$emit("selectChange", selectedRowKeys, selectedRows);
    },
    clickRowHead(event, activeID, rowRecord) {
      // console
      // 点击主表信息
      // this.remoteParams1 = { headerId: rowRecord.moveHeaderId }
      this.$emit("clickRowHead", rowRecord);
    },
    clickRow(selectedRowKeys, record) {
      // 获取当前编辑行数据
      console.log(selectedRowKeys, record, "clickRowclickRowclickRowclickRow");
    },
    colChange({ name, value, index, label, record, modalRowData, config, vNode, options, moment, event }) {
      console.log(name, value, index, label, record, modalRowData, config, vNode, options, moment, event, "5555555555");
      this.$emit("colChange", name, value, index, label, record, modalRowData, config, vNode, options, moment, event);
    },
  },
};
</script>

<style>
.gridClass {
  margin-bottom: 12px;
}
</style>
