<template>
  <main class="m-16">
    <div class="wrap bg_white">
      <div class="p-16">
        <el-row class="top-box">
          <el-col :span="4">
            <el-button type="primary" plain size="small" @click="exportClick"><i class="Files"></i>导出</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form ref="form" :model="filter" label-width="60px" label-position="left" class="m-t-20">
              <el-row :gutter="10">
                <el-col :span="4">
                  <el-form-item label="料车" prop="">
                    <el-select v-model="filter.cart_code" filterable placeholder="请输入/选择料车" @change="changeCart">
                      <el-option v-for="(item, index) in AGVlist" :key="index" :label="item.cart_title"
                        :value="item.cart_code"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="位置" prop="">
                    <el-select v-model="filter.end_address_code" filterable placeholder="请输入/选择位置"
                      @change="changeAddress">
                      <el-option v-for="(item, index) in siteList" :key="index" :label="item.address_title"
                        :value="item.address_code"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="物料" prop="">
                    <el-input v-model="filter.keyword" placeholder="请输入物料编码/名称/SKU"
                      v-on:keyup.enter="searchMaterail"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4" :offset='1'>
                  <el-button type="primary" size="small" class="m-r-16" plain @click="resetClick">重置</el-button>
                  <el-button type="primary" size="small" @click="searchClick">搜索</el-button>
                </el-col>
              </el-row>
            </el-form>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-table :data="tableData" style="width: auto;" border :header-cell-style="header_style">
              <el-table-column prop="FNumber" label="物料编码" width="240" align="center" />
              <el-table-column prop="sku" label="规格型号（sku）" width="320" align="center" />
              <el-table-column prop="product_info" label="物料名称" width="320" align="center" />
              <el-table-column prop="transport_num" label="库存数量" width="120" align="center"></el-table-column>
              <el-table-column prop="amount" label="库存单位" width="120" align="center" />
              <el-table-column prop="agv_address_name" label="位置" width="240" align="center" />
              <el-table-column prop="cart_code" label="料车" align="center" />
            </el-table>
            <el-pagination class="pagination m-t-16" :current-page="filter.page" :page-sizes="[10, 20, 30, 40]"
              :page-size="filter.size" layout="total, sizes, prev, pager, next, jumper" :total="total"
              @size-change="changePageSize" @current-change="changePage">
            </el-pagination>
          </el-col>
        </el-row>
      </div>
    </div>
  </main>
</template>

<script>
import { exportExcel } from '/src/utils/exportExcel.js'
import axios from 'axios'
export default {
  name: '',
  data () {
    return {
      header_style: {
        'background-color': '#F5F7FA',
        'color': '#606266',
        'fontSize': '14px',
        'fontWeight': '600',
        'textAlign': 'center',
      },
      filter: {
        size: 10,
        page: 1,
        export: 0,
        cart_code: '',
        end_address_code: '',
        keyword: ''
      },
      total: 0,
      currentPage: 1,
      AGVlist: [],
      siteList: [],
      tableData: [
        {
          id: 1,
          name: '潜伏式AGV001',
          code: 'WZ001',
          type: '生产入库上料点上料点',
          num: 1,
          unit: 'PCS',
          position: '半成品入库下料点2',
          hopper: '双层料车1.0x1.0米-01'
        },
        {
          id: 2,
          name: '潜伏式AGV001',
          code: 'WZ001',
          type: '生产入库上料点上料点',
          num: 1,
          unit: 'PCS',
          position: '半成品入库下料点2',
          hopper: '双层料车1.0x1.0米-01'
        },
        {
          id: 3,
          name: '潜伏式AGV001',
          code: 'WZ001',
          type: '生产入库上料点上料点',
          num: 1,
          unit: 'PCS',
          position: '半成品入库下料点2',
          hopper: '双层料车1.0x1.0米-01'
        }
      ],
    }
  },
  created () {
    this.getDataList()
    this.getAgvlist()
  },
  methods: {
    //列表数据
    getDataList () {
      this.$http.post('Agv/stockList', this.filter).then(res => {
        console.log(res)
        if (res.status == 200) {
          this.tableData = res.data.results
          this.total = res.data.count_limit
        }
      })
    },
    // 每页条数
    changePageSize (val) {
      this.filter.size = val
      this.getDataList()
    },
    // 翻页
    changePage (val) {
      this.filter.page = val
      this.getDataList()
    },
    //搜索
    searchClick () {
      this.getDataList()
    },
    //重置
    resetClick () {
      this.filter = {
        size: 10,
        page: 1,
        export: 0,
        cart_code: '',
        end_address_code: '',
        keyword: ''
      }
      this.getDataList()
    },
    //选择料车
    changeCart (val) {
      this.filter.cart_code = val
      this.getDataList()
    },
    //选择位置
    changeAddress (val) {
      this.filter.end_address_code = val
      this.getDataList()
    },
    //查询物料
    searchMaterail () {
      this.getDataList()
    },
    //料车列表数据
    getAgvlist () {
      this.$http.post('Agv/addressCart').then(res => {
        if (res.status == 200) {
          this.AGVlist = res.data.agv_cart
          this.siteList = res.data.agv_address
        }
      })
    },
    //导出
    exportClick () {
      this.filter.export = 1
      let url = '/Agv/stockList'
      exportExcel(url, this.filter)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/views/agv/agv.scss";
</style>