<template>
  <div>
    <p-card title="数据查询">
      <p-grid-form :label-col="{ span: 8 }" :span="8" :items="config.items" @submit="hanlderSubmit" />
      <p-table ref="table" row-key="id" bordered :columns="config.columns" :remoteParams="remoteParams"
        :remoteUrl="config.remoteUrl" :rowSelectType="false" :data-source="data">
        <template slot="operation" slot-scope="text, record">
          <!-- {{ text ? '禁用' : '启用' }} -->
          <a @click="showinterfacemodel(text)">接口日志</a>
        </template>
        <template slot="operation1" slot-scope="text, record">
          <!-- {{ text ? '禁用' : '启用' }} -->
          <a @click="showtransfermodel(text)">搬运日志</a>
        </template>
      </p-table>
    </p-card>
    <p-modal title="接口日志" width="80%" :visible="interfacevisible" :confirm-loading="confirmLoading" @ok="handleOk"
      @cancel="handleCancel">
      <p-grid-form :label-col="{ span: 4 }" :span="4" :items="config.childrenInterfaceItem" @submit="interfacedataSubmit" />
      
      <p-table ref="table" row-key="id" bordered :remoteUrl="config.remoteInterfaceUrl"
        :columns="config.modecolumns_interface" :rowSelectType="false" :data-source="interfacedata" 
        :remoteParams="remoteInterfaceParams"/>
    </p-modal>

    <p-modal title="搬运日志" width="80%" :visible="transfervisible" :confirm-loading="confirmLoading" @ok="handleOk"
      @cancel="handleCancel">
      <p-grid-form :label-col="{ span: 4 }" :span="4" :items="config.childrentransferItem" @submit="transferdataSubmit" />
      
      <p-table ref="table" row-key="id" bordered :columns="config.modecolumns_transfer" 
         :remoteUrl="config.remotetransferUrl"    :rowSelectType="false"
        :data-source="transferdata" :remoteParams="remotetransferParams"/>
    </p-modal>
  </div>
</template>

<script>
  import config from './config.js'
  import {
    queryinterface,
    querytransfer
  } from './api.js'



  export default {
    data() {
      return {
        config,
        data: [],
        interfacedata: [],
        transferdata: [],
        remoteParams: {
          containerNo: '',
          groupNo: '',
          startTime: '',
          endTime: '',
          stationNo: '',
          state: '',
        },
        remoteInterfaceParams: {
          startTime:'',
          createTime:''
        },
        remotetransferParams: {
          startTime:'',
          createTime:''
        },
        interfacevisible: false,
        transfervisible: false,
        confirmLoading: false
      }
    },
    mounted() {
      // this.getinfo()
    },
    created() {

    },
    methods: {
      hanlderSubmit(e, form) {
        e.preventDefault()
        form.validateFields((error, values) => {
          if (!error) {
            this.remoteParams = {
              ...this.remoteParams,
              ...values
            }
          }
        })
      },
      interfacedataSubmit(e, form) {
        e.preventDefault()
        form.validateFields((error, values) => {
          if (!error) {
            this.remoteInterfaceParams = {
              ...this.remoteInterfaceParams,
              ...values
            }
          }
        })
      },
      transferdataSubmit(e, form) {
        e.preventDefault()
        form.validateFields((error, values) => {
          if (!error) {
            this.remotetransferParams = {
              ...this.remotetransferParams,
              ...values
            }
          }
        })
      },

      handleOk(e) {
        this.confirmLoading = true
        setTimeout(() => {
          this.interfacevisible = false
          this.transfervisible = false
          this.confirmLoading = false
        }, 2000)
      },

      handleCancel(e) {
        console.log('Clicked cancel button')
        this.interfacevisible = false
        this.transfervisible = false
      },
      //点击弹窗
      async showinterfacemodel(text) {
        // console.log(text)
         this.interfacevisible = true
        // let res = await queryinterface({
        //   containerNo: text.containerNo
        // })
        // console.log(res)
        // if (res.success) {
        //   this.interfacedata = res.data.list
        //   this.interfacevisible = true
        // } else {
        //   this.$exception(res)
        // }
      },

      //点击弹窗
      async showtransfermodel(text) {
        console.log(text)
        this.transfervisible = true

        // let res = await querytransfer({
        //   containerNo: text.containerNo
        // })
        // console.log(res)
        // if (res.success) {
        //   this.transferdata = res.data.list
        //   this.transfervisible = true
        // } else {
        //   this.$exception(res)
        // }
      }

    }
  }
</script>

<style>
  
</style>
