<template>
  <div>
    <!-- 合托计划管理 -->
    <p-card title="合托计划管理">
      <template slot="extra">
        <a-space>
          <p-button type="primary" style="margin-right: 10px" @click="mergeContainerReqFun">合托发起</p-button>
        </a-space>
      </template>
      <p-grid-form :label-col="{ span: 8 }" :span="8" :items="config.items" @submit="hanlderSubmit" />
      <p-table
        ref="table"
        row-key="id"
        bordered
        hasRowSelectCheck
        :columns="config.columns"
        :remoteUrl="config.remoteUrl"
        :remoteParams="remoteParams"
        :rowSelectType="2"
        @clickRow="clickRow"
        @selectChange="selectChange"
        :data-source="List"
      />

      <p-table
        ref="table"
        row-key="id"
        bordered
        :columns="config.Subcolumns"
        :rowSelectType="false"
        :data-source="SubList"
      />
    </p-card>
  </div>
</template>

<script>
// import TableSheet from '@/views/kzyWMS/components/table-sheet/index.vue'
import config from './config.js'
// import { diffOption } from '@/views/kzyWMS/utils'
import { mergeContainerDetail, mergeContainerReq } from './api'
const token = sessionStorage.getItem('token')
import { QN_BASEURL } from '../serviceSettings'
const baseUrl = QN_BASEURL

export default {
  components: {
    // 'p-table-sheet': TableSheet,
  },
  data() {
    return {
      SubList: [],

      config,
      data: [],
      List: [],
      detailData: {},
      type: true,
      remoteParams: {},
      visible: false,
      visiblesetTemplate: false,
      errinfo: {},
      text: {},
      confirmLoading: false,
      items: [
        {
          type: 'input',
          name: 'modeType',
          required: true,
          label: '模板货架名称',
          value: '',
        },
      ],
      selectedRows: [],
    }
  },
  mounted() {
    // this.getinfo()
  },
  created() {
    // diffOption(this.config.columns).then((res) => {
    //   this.config.columns = res
    // })
  },
  methods: {
    async mergeContainerReqFun() {
      if (this.selectedRows.length == 2) {
        let data = this.selectedRows.map((i) => i.id).join(',')
        try {
          let res = await mergeContainerReq({ ids: data })
          if (res.success) {
            this.$message.success(res.message)
            this.remoteParams = { ...this.remoteParams }
          } else {
            this.$exception(res)
          }
        } catch (error) {
          this.$exception(error)
        }
      } else {
        this.$message.error('必须选择两条数据!')
        return
      }
    },
    async mergeContainerDetailFun(id) {
      console.log(id, '===')
      try {
        let res = await mergeContainerDetail({ id })
        if (res.success) {
          console.log(res, '===')
          this.SubList=res.data
        } else {
          this.$exception(res)
        }
      } catch (error) {
        this.$exception(error)
      }
    },
    selectChange(selectedRowKeys, selectedRows) {
      console.log(selectedRows)
      this.selectedRows = selectedRows
    },
    clickRow(event, activeID, rowRecord) {
      this.mergeContainerDetailFun(rowRecord.id)
    },

    doneBefore(res) {
      //   console.log(res)
      return res
    },
    hanlderSubmit(e, form) {
      e.preventDefault()
      form.validateFields((error, values) => {
        console.log(error, values, 'valuesvaluesvaluesvaluesvalues')
        // this.queryName = values.name
        // this.queryType = values.type
        // this.getlistCompanyByAuthId()
        if (!error) {
          this.remoteParams = { ...this.remoteParams, ...values }
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.errinfo {
  padding: 10px;
  width: 100%;
  height: 200px;
  line-height: 50px;
  font-size: 20px;
  color: #fff;
  font-weight: bolder;
  text-align: center;
  background: rgb(145, 143, 144);
}
</style>
