<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="exportHandle"><i class="Files"></i>导出</el-button>
          </el-col>
        </el-row>
        <el-row class="m-t-16">
          <el-col :span="24">
            <vxe-table
              border
              ref="xTable"
              show-overflow
              :cell-style="cellStyle"
              :filter-config="{showIcon: false}"
              :scroll-x="{enabled: false}"
              :data="tableData">
              <vxe-colgroup title="任务编码" fixed="left">
                <vxe-column field="task_code" width="150">
                  <template #header>
                    <el-input size="mini" v-model="filter.task_code" @keydown.enter.native="getDataList()"></el-input>
                  </template>
                </vxe-column>
              </vxe-colgroup>
              <vxe-colgroup title="任务类型" fixed="left">
                <vxe-column field="type_name" width="150">
                  <template #header>
                    <el-select v-model="filter.type" placeholder="" clearable filterable size="mini"
                      @clear="clear('type')">
                      <el-option v-for="(item, index) in taskTypeList" :key="index" :label="item.label" :value="item.value"
                        @click="getDataList()"></el-option>
                    </el-select>
                  </template>
                </vxe-column>
              </vxe-colgroup>
              <vxe-colgroup title="任务状态" fixed="left">
                <vxe-column field="status_name" width="150">
                  <template #header>
                    <el-select v-model="filter.status" placeholder="" clearable filterable size="mini"
                      @clear="clear('status')">
                      <el-option v-for="(item, index) in statusList" :key="index" :label="item.label" :value="item.value"
                        @click="getDataList()"></el-option>
                    </el-select>
                  </template>
                </vxe-column>
              </vxe-colgroup>
              <vxe-colgroup title="料车">
                <vxe-column field="cart_code_name" width="150">
                  <template #header>
                    <el-select v-model="filter.cart_code" placeholder="" clearable filterable size="mini"
                      @clear="clear('cart_code')">
                      <el-option v-for="(item, index) in hopperCarList" :key="index" :label="item.cart_title" :value="item.cart_code"
                        @click="getDataList()"></el-option>
                    </el-select>
                  </template>
                </vxe-column>
              </vxe-colgroup>
              <vxe-colgroup title="AGV">
                <vxe-column field="vehicle_code_name" width="150">
                  <template #header>
                    <el-select v-model="filter.vehicle_code" placeholder="" clearable filterable size="mini"
                      @clear="clear('vehicle_code')">
                      <el-option v-for="(item, index) in AGVList" :key="index" :label="item.agv_title" :value="item.agv_code"
                        @click="getDataList()"></el-option>
                    </el-select>
                  </template>
                </vxe-column>
              </vxe-colgroup>
              <vxe-colgroup title="运输起点">
                <vxe-column field="start_address_code_name" width="150">
                  <template #header>
                    <el-select v-model="filter.start_address_code" placeholder="" clearable filterable size="mini"
                      @clear="clear('start_address_code')">
                      <el-option v-for="(item, index) in addressList" :key="index" :label="item.address_title" :value="item.address_code"
                        @click="getDataList()"></el-option>
                    </el-select>
                  </template>
                </vxe-column>
              </vxe-colgroup>
              <vxe-colgroup title="运输终点">
                <vxe-column field="end_address_code_name" width="150">
                  <template #header>
                    <el-select v-model="filter.end_address_code" placeholder="" clearable filterable size="mini"
                      @clear="clear('end_address_code')">
                      <el-option v-for="(item, index) in addressList" :key="index" :label="item.address_title" :value="item.address_code"
                        @click="getDataList()"></el-option>
                    </el-select>
                  </template>
                </vxe-column>
              </vxe-colgroup>
              <vxe-colgroup title="出入库类型">
                <vxe-column field="chu_type_name" width="150">
                  <template #header>
                    <el-select v-model="filter.chu_type" placeholder="" clearable filterable size="mini"
                      @clear="clear('chu_type')">
                      <el-option v-for="(item, index) in warehouseList" :key="index" :label="item.label" :value="item.value"
                        @click="getDataList()"></el-option>
                    </el-select>
                  </template>
                </vxe-column>
              </vxe-colgroup>
              <vxe-colgroup title="出入库单号">
                <vxe-column field="product_sn" width="150">
                  <template #header>
                    <el-input size="mini" v-model="filter.product_sn" @keydown.enter.native="getDataList()"></el-input>
                  </template>
                </vxe-column>
              </vxe-colgroup>
              <vxe-colgroup title="物料信息">
                <vxe-column field="product_info" width="300">
                  <template #header>
                    <el-input size="mini" v-model="filter.sku" @keydown.enter.native="getDataList()"></el-input>
                  </template>
                </vxe-column>
              </vxe-colgroup>
              <vxe-column field="ys_num" width="120" title="运输数量"></vxe-column>
              <vxe-column field="amount" width="120" title="单位"></vxe-column>
              <vxe-column field="create_author" width="120" title="创建人"></vxe-column>
              <vxe-column field="addtime" width="150" title="创建时间"></vxe-column>
              <vxe-column field="finishtime" width="150" title="完成时间"></vxe-column>
            </vxe-table>
          </el-col>
        </el-row>
        <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>
      </div>
    </div>
  </main>
</template>

<script>
import { exportExcel } from '/src/utils/exportExcel.js'
import axios from 'axios'
export default {
  name: '',
  data() {
    return {
      filter: {
        size: 10,
        page: 1,
        task_code: '',
        type: '-1', //-1为全部，0为半成品入库，1为半成品出库，2为生产入库，3为成品出库，4为手工运输，5为运送空料车
        status: '-2', //-2为全部，-1为已取消，0为待装卸，1为运输中，2为排队中，3为已完成
        cart_code: '',
        vehicle_code: '',
        start_address_code: '',
        end_address_code: '',
        product_sn: '',
        sku: '',
        chu_type: '-1', //-1为全部，0为生产领料，1为采购入库，2为生产入库，3为直接调拨，4为分布式调出，5为销售出库，6为其他出库
        export: '0'
      },
      total: 0,
      currentPage: 1,
      tableData: [],
      taskTypeList: [
        {
          value: '-1',
          label: '全部'
        },
        {
          value: '0',
          label: '半成品入库'
        },
        {
          value: '1',
          label: '半成品出库'
        },
        {
          value: '2',
          label: '生产入库'
        },
        {
          value: '3',
          label: '成品出库'
        },
        {
          value: '4',
          label: '手工运输'
        },
        {
          value: '5',
          label: '运送空料车'
        }
      ],
      statusList: [
        { label: '全部', value: '-2' },
        { label: '待装卸', value: '0' },
        { label: '运输中', value: '1' },
        { label: '排队中', value: '2' },
        { label: '已完成', value: '3' },
        { label: '已取消', value: '-1' }
      ],
      hopperCarList: [],
      AGVList: [],
      warehouseList: [
        { label: '全部', value: '-1' },
        { label: '生产领料', value: '0' },
        { label: '采购入库', value: '1' },
        { label: '生产入库', value: '2' },
        { label: '直接调拨', value: '3' },
        { label: '分步式调出', value: '4' },
        { label: '销售出库', value: '5' },
        { label: '其他出库', value: '6' },
        { label: '手工任务', value: '7' }
      ],
      addressList: []
    }
  },
  created() {
    this.getDropList()
    this.getDataList()
  },
  methods: {
    //下拉列表数据
    getDropList() {
      this.$http.post('Agv/addressCart').then(res => {
        if (res.status == 200) {
          console.log(res.data)
          this.hopperCarList = res.data.agv_cart
          this.AGVList = res.data.agv_vehicle
          this.addressList = res.data.agv_address
          //下拉数据添加全部选项
          this.hopperCarList.unshift({ cart_title: '全部', cart_code: '' })
          this.AGVList.unshift({ agv_title: '全部', agv_code: '' })
          this.addressList.unshift({ address_title: '全部', address_code: '' })
        }
      })
    },
    getDataList() {
      console.log(this.filter, 1111111)
      this.$http.post('Agv/taskList', this.filter).then(res => {
        if (res.status == 200) {
          this.tableData = res.data.results
          this.total = res.data.count_limit
        }
      })
    },
    clear (item) {
      if (item == 'type') {
        this.filter.type = '-1'
      } else if (item == 'status') {
        this.filter.status = '-2'
      } else if (item == 'cart_code') {
        this.filter.cart_code = ''
      } else if (item == 'vehicle_code') {
        this.filter.vehicle_code = ''
      } else if (item == 'start_address_code') {
        this.filter.start_address_code = ''
      } else if (item == 'end_address_code') {
        this.filter.end_address_code = ''
      } else if (item == 'chu_type') {
        this.filter.chu_type = '-1'
      }
      this.getDataList()
    },
    // 每页条数
    changePageSize(val) {
      this.filter.size = val
      this.getDataList()
    },
    // 翻页
    changePage(val) {
      this.filter.page = val
      this.getDataList()
    },
    // 状态样式
    cellStyle ({ row, rowIndex, column }) {
      if (column.property === 'status') {
        if (row.status === 1) {
          return {
            color: '#4178D5'
          }
        } else if ( row.status === 2) {
          return {
            color: '#00AA5B'
          }
        } else if ( row.status === 3) {
          return {
            color: '#FFAB00'
          }
        } else {
          return {
            color: '#606266'
          }
        }
      }
    },
    //导出
    exportHandle() {
      this.filter.export = 1
      let url = '/Agv/taskList'
      exportExcel(url, this.filter)
    }
  }
}
</script>

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