<template>
  <div>
    <p-grid-form
      :ref="tablecolumns.gridform.ref"
      :span="8"
      :label-col="{ span: 6 }"
      :items="tablecolumns.gridform.items"
      @submit="hanlderSubmit"
    />

    <!-- 策略 -->
    <!-- :active-tab-key="tablecolumns.MainTable.title" -->

    <p-table
      style="margin-top:20px"
      v-if="!tablecolumns.MainTable.edit"
      bordered
      dragle
      auto-width
      :hasRowSelectCheck="true"
      :selectedRowKeys.sync="MainTableselectedRowKeys"
      :remote-url="tablecolumns.MainTable.remoteUrl"
      :ref="tablecolumns.MainTable.ref"
      :row-key="tablecolumns.MainTable.rowkey"
      :columns="tablecolumns.MainTable.columns"
      :data-source.sync="data"
      :remoteParams="MainTableremoteParams"
      :rowSelectFixed="true"
      @selectChange="selectedRowsfun"
      :rowSelectType="2"
      :autoLoad="false"
      :scroll="{ x: 1500 }"
      @clickRow="clickRow"
    >
      <!-- destroyPic -->
      <template slot="destroyPic" slot-scope="text, record">
        <a v-if="text" @click.stop="viewImg(text, record)">查看图片</a>
        <span v-else>暂无图片</span>
        <!-- @change="e => onChange(e, record, index)" :value="text" :min="1" -->
      </template>
      <!-- <span slot="customTitle"><a-icon type="smile-o" />aaaName</span> -->
      <template slot="auditText1" slot-scope="text, record, index">
        <p-input style="width:80px;" @click.stop="() => {}" @change="e => onChange(e, record, index)" :value="text" />
        <!-- @change="e => onChange(e, record, index)" :value="text" :min="1" -->
      </template>
      <template slot="operation" slot-scope="text, record">
        <a @click.stop="details(record)">销毁详情</a>
      </template>
    </p-table>

    <!-- <p-table-edit
        v-if="tablecolumns.MainTable.edit"
        bordered
        :remote-url="tablecolumns.MainTable.remoteUrl"
        :ref="tablecolumns.MainTable.ref"
        :row-key="tablecolumns.MainTable.rowkey"
        :columns="tablecolumns.MainTable.columns"
        :data-source.sync="data"
        :remoteParams="MainTableremoteParams"
        :rowSelectType="2"
        :autoLoad="false"
        @clickRow="clickRow"
      >
      </p-table-edit> -->

    <!--规则表  -->

    <!-- <a-divider /> -->
    <!-- :title="tablecolumns.SubTable.title" -->
    <p-card
      :tab-list="tabList1"
      :active-tab-key="key1"
      :headStyle="{ border: 'none' }"
      :bordered="false"
      style="width: 100%;margin-top:20px"
    >
      <p-table-edit-pro
        bordered
        dragle
        :ref="tablecolumns.SubTable.ref"
        :row-key="tablecolumns.SubTable.rowkey"
        :columns="tablecolumns.SubTable.columns"
        :data-source.sync="SubTabledata"
        :remoteUrl="tablecolumns.SubTable.remoteUrl"
        :remoteParams="SubTableremoteParams"
        :autoLoad="false"
        :rowSelectType="false"
        :scroll="{ x: 1500 }"
      >
        <span slot="disabled" slot-scope="text, record">
          {{ text ? '禁用' : '启用' }}
        </span>
        <template slot="operation" slot-scope="text, record, index">
          <a @click.stop="split({ record, index })">拆分</a>
        </template>
      </p-table-edit-pro>
    </p-card>
  </div>
</template>

<script>
import { setwarehouse } from '../../mixin/warehousemixin.js'
import { setCargoOwner } from '@/views/kzyWMS/utils/setCargoOwner'
import pick from 'lodash.pick'
export default {
  mixins: [setwarehouse, setCargoOwner],
  name: 'MainTable',
  props: {
    tablecolumns: {
      type: Object,
      default: () => {}
    },
    title: {
      type: String,
      default: '不合格品申请'
    },
    visible: {
      type: Boolean,
      default: false
    },
    config: {
      type: Object,
      default: null
    }
  },
  model: {
    prop: 'visible',
    event: 'change'
  },
  data() {
    return {
      data: [],
      MainTableselectedRowKeys: [],
      selectedRow: [],
      MainTableremoteParams: {
        secondStatus: ''
      },
      SubTableremoteParams: {},
      rowkey: 'id',
      SubTabledata: [],
      ref: 'aaa'
    }
  },
  created() {},
  computed: {
    key() {
      return this.tablecolumns.MainTable.title
    },
    key1() {
      return this.tablecolumns.SubTable.title
    },
    tabList() {
      let that = this
      return [
        {
          key: that.tablecolumns.MainTable.title,
          tab: that.tablecolumns.MainTable.title
        }
      ]
    },
    tabList1() {
      let that = this
      return [
        {
          key: that.tablecolumns.SubTable.title,
          tab: that.tablecolumns.SubTable.title
        }
      ]
    }
  },
  methods: {
    //OMS拆分
    split(value) {
      this.$emit('splitOMS', value)
    },
    //获取明细表数据
    GetSubTabledata() {
      console.log(this.SubTabledata)
      return this.SubTabledata
    },
    //获取主表数据
    GetselectedRow() {
      console.log(this.selectedRow)
      return this.selectedRow
    },
    //查看图片
    viewImg(text, record) {
      console.log(text, record)
      this.$emit('viewImg', text)
    },
    selectedRowsfun(selectedRowKeys, selectedRow) {
      console.log(selectedRowKeys, selectedRow)
      //   this.MainTableselectedRowKeys = selectedRowKeys
      if (selectedRow.length > 0) {
        this.$emit('changecolumns', selectedRow[selectedRow.length - 1])
        this.SubTableremoteParams = {
          mstId: selectedRowKeys[selectedRowKeys.length - 1]
        }
      }

      //   console.log(selectedRowKeys[selectedRowKeys.length - 1])
      this.selectedRow = selectedRow
    },
    details(data) {
      this.$emit('details', data)
    },
    onChange(e, record, index) {
      this.data[index].auditText = e.target.value
      console.log(this.data[index])
    },
    Sub() {
      this.$refs[this.tablecolumns.gridform.ref].form.validateFields((err, value) => {
        if (!err) {
          console.log(value)
          this.MainTableremoteParams = { ...this.MainTableremoteParams, ...value }
        } else {
          //   this.$message.warning('请选择货主和仓库名称')
          this.MainTableremoteParams = { ...this.MainTableremoteParams }
        }
      })
    },
    SetgridformValue(data) {
      this.$refs[this.tablecolumns.gridform.ref].form.setFieldsValue(
        pick(data, 'warehouseId', 'warehouseCode', 'warehouseName', 'cargoOwnerCode', 'cargoOwnerId', 'cargoOwnerName')
      )

      console.log(
        pick(data, 'warehouseId', 'warehouseCode', 'warehouseName', 'cargoOwnerCode', 'cargoOwnerId', 'cargoOwnerName')
      )

      //   this.$res[this.tablecolumns.gridform.ref].form.setFieldsValue(
      //        pick(data, 'warehouseId', 'warehouseCode', 'warehouseName','cargoOwnerCode','cargoOwnerId','cargoOwnerName')
      //   )
    },
    hanlderSubmit(event, form) {
      event.preventDefault()
      this.$refs[this.tablecolumns.gridform.ref].form.validateFields((err, value) => {
        if (!err) {
          console.log(value)

          this.MainTableselectedRowKeys = []
          this.selectedRow = []
          this.MainTableremoteParams = { ...this.MainTableremoteParams, ...value }
          this.SubTabledata = []
          console.log(this.selectedRow)
        } else {
          this.$message.warning('请选择货主或仓库名称')
        }
      })
    },
    clear() {
      this.SubTabledata = []
    },
    clearMainTabledata() {
      this.data = []
    },
    //点击策略表 查询规则表
    clickRow(event, index, value) {
      console.log(index, value)
      this.$emit('changecolumns', value)
      this.strategy = value
      this.SubTableremoteParams = {
        mstId: value.id
      }
    },
    pushsubList(list, index) {
      console.log(index)
      this.SubTabledata.splice(index, 1, ...list)
    }
  }
}
</script>

<style>
.box-p20-bg {
  margin-bottom: 20px;
  background: #fff;
}
</style>
