<template>
  <div>
    <!-- 容器位置查询 -->
    <p-card title="容器位置查询">
      <p-grid-form ref="form" :label-col="{ span: 8 }" :span="8" :items="config.items" @submit="hanlderSubmit" />
      <div v-if="list.length > 0">
        <div class="list">
          <a-space>
            <span> 起点区域:{{ list[0].sourceArea || '暂无' }} </span>
            <span> 起始点位: {{ list[0].sourceLocation || '暂无' }} </span>
            <span> 位置类型: {{ locationTypeFun(list[0].locationType) }}</span>
          </a-space>
        </div>
        <div class="list">
          <a-space>
            <span> 当前区域: {{ list[1].currentArea || '暂无' }} </span>
            <span> 当前点位: {{ list[1].currentLocation || '暂无' }} </span>
            <span> 位置类型:{{ locationTypeFun(list[1].locationType) }} </span>
          </a-space>
        </div>
        <div class="list">
          <a-space>
            <span>下一个区域: {{ list[2].nextArea || '暂无' }} </span>
            <span>下一个点位: {{ list[2].nextLocation || '暂无' }} </span>
            <span> 位置类型:{{ locationTypeFun(list[2].locationType) }} </span>
          </a-space>
        </div>
        <div class="list">
          <a-space>
            <span> 当前终点区域: {{ list[3].taskTargetArea || '暂无' }} </span>
            <span> 当前终点点位: {{ list[3].taskTargetLocation || '暂无' }}</span>
            <span> 位置类型: {{ locationTypeFun(list[3].locationType) }} </span>
          </a-space>
        </div>
        <div class="list">
          <a-space>
            <span> 终点区域: {{ list[4].targetArea || '暂无' }}</span>
            <span> 终点货位: {{ list[4].targetLocation || '暂无' }} </span>
            <span> 位置类型:{{ locationTypeFun(list[4].locationType) }}</span>
          </a-space>
        </div>
      </div>
      <p-table
        ref="table"
        row-key="id"
        bordered
        :autoLoad="false"
        :doneBefore="doneBefore"
        :columns="config.columns"
        :remoteUrl="config.remoteUrl"
        :remoteParams="remoteParams"
        :rowSelectType="false"
        :data-source="data"
        :scroll="{ x: 1500 }"
      >
        <!-- <template slot="operation" slot-scope="text, record">
          <a @click="showmodel(text)">策略管理</a>
          <a-divider type="vertical" />
          <a v-if="!text.isAvailable" @click="del(text)">删除</a>
          <span v-else>删除</span>
        </template> -->
      </p-table>
    </p-card>

    <p-card title="历史搬运任务">
      <p-grid-form
        ref="formHis"
        :label-col="{ span: 8 }"
        :span="8"
        :items="config.his.items"
        @submit="hanlderSubmitHis"
      />

      <p-table
        ref="tableHis"
        row-key="id"
        bordered
        :autoLoad="false"
        :doneBefore="doneBeforeHis"
        :columns="config.his.columns"
        :remoteUrl="config.his.remoteUrl"
        :remoteParams="hisremoteParams"
        :rowSelectType="false"
        :data-source="dataHis"
        :scroll="{ x: 1500 }"
      >
        <!-- <template slot="operation" slot-scope="text, record">
          <a @click="showmodel(text)">策略管理</a>
          <a-divider type="vertical" />
          <a v-if="!text.isAvailable" @click="del(text)">删除</a>
          <span v-else>删除</span>
        </template> -->
      </p-table>
    </p-card>
  </div>
</template>

<script>
import config from './config.js'
import { diffOption } from '@/views/kzyWMS/utils/index.js'
import { add, deletes, update } from './api'

export default {
  data() {
    return {
      taskState: null,
      config: config(this),
      data: [],
      dataHis: [],
      remoteParams: {},
      hisremoteParams: {},
      list: [],
    }
  },
  mounted() {
    // this.getinfo()
  },
  created() {
    diffOption(this.config.columns).then((res) => {
      this.config.columns = res
    })
  },
  methods: {
    //     customRender(text) {
    //     text == 1 && (text = '存储位')
    //     text == 2 && (text = '工作位')
    //     text == 3 && (text = '输送线点位')
    //     return text
    //   },
    locationTypeFun(text) {
      text == 0 && (text = '暂无')
      text == 1 && (text = '存储位')
      text == 2 && (text = '工作位')
      text == 3 && (text = '输送线点位')
      return text
    },
    remoteBefore(vnode, data) {
      console.log(vnode, data)
      return data
    },
    doneBefore(res) {
      if (res.data) {
        this.list = res.data.locationVoList
        res.data.list = res.data.carryTaskList
        this.$refs.form.form.setFieldsValue({ taskState: res.data.taskState })
      }

      console.log(res)
      return res
    },
    doneBeforeHis(res) {
      //   if (res.data) {
      //     this.list = res.data.locationVoList
      //     res.data.list = res.data.carryTaskList
      //     this.$refs.form.form.setFieldsValue({ taskState: res.data.taskState })
      //   }

      console.log(res)
      return res
    },
    hanlderSubmit(e, form) {
      e.preventDefault()
      form.validateFields((error, values) => {
        console.log(error, values)
        // this.queryName = values.name
        // this.queryType = values.type
        // this.getlistCompanyByAuthId()
        if (!error) {
          console.log(111)
          this.remoteParams = { ...this.remoteParams, ...values }
          //   this.$refs.table.reload()
        }
      })
    },
    hanlderSubmitHis(e, form) {
      e.preventDefault()
      form.validateFields((error, values) => {
        console.log(error, values)
        // this.queryName = values.name
        // this.queryType = values.type
        // this.getlistCompanyByAuthId()
        if (!error) {
          this.hisremoteParams = { ...this.hisremoteParams, ...values }
          //   this.$refs.tableHis.reload()
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.list {
  padding: 10px;
}
</style>
