<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label">任务号</label>
        <el-input v-model="query.taskCode" clearable placeholder="任务号" style="width: 185px;" class="filter-item"
                  @keyup.enter.native="crud.toQuery"/>
        <label class="el-form-item-label">物料号</label>
        <el-input v-model="query.materialCode" clearable placeholder="物料号" style="width: 185px;" class="filter-item"
                  @keyup.enter.native="crud.toQuery"/>
        <rrOperation :crud="crud"/>
      </div>

      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" :tableKey="this.$options.name">

      </crudOperation>
    </div>

    <!--表格渲染-->
    <el-table ref="table" height="68vh" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
              @selection-change="this.selectionChangeHandler" @row-click="this.clickRow"
    >
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="xh" type="index" :index="indexMethod" label="序号"/>
      <el-table-column prop="taskCode" label="任务号"/>
      <el-table-column prop="onlineNo" label="上线单号"/>
      <el-table-column
        prop="status"
        label="状态"
        width="100"
        :filters="[
          { text: '已创建', value: 'OPEN' },
          { text: '已到站', value: 'ARRIVED' },
          { text: '已完成', value: 'CLOSE' },
          ]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <el-tag
            :type="getStatusType(scope.row.status)"
            disable-transitions
          >
            {{ dict.label.asn_status[scope.row.status] }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="caseNum" label="数量"/>
      <el-table-column prop="materialCode" label="物料号"/>
      <el-table-column prop="boxNo" label="料箱号"/>
      <el-table-column prop="routeCode" label="编组/线路"/>
      <el-table-column prop="srcPositionCode" label="起点"/>
      <el-table-column prop="dstPositionCode" label="目标库位"/>
      <el-table-column prop="beatCode" label="停靠点"/>
      <el-table-column prop="repMessage" label="返回报文"/>
      <el-table-column prop="createTime" label="日期"/>
    </el-table>
    <!--分页组件-->

    <div style="float: right;">
      <pagination/>
    </div>

  </div>
</template>

<script>
import crudLes from '@/api/les'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import Treeselect from '@riophae/vue-treeselect'
import Search from '@/views/monitor/log/search.vue'
import DateRangePicker from '@/components/DateRangePicker/index.vue'
import {getToken} from '@/utils/auth'

const defaultForm = {
  id: null,
  taskCode: null,
  taskType: null,
  materialCode: null,
  routeCode: null,
  boxNo: null,
  onlineNo: null,
  srcPositionCode: null,
  dstPositionCode: null,
  createBy: null,
  updateBy: null,
  createTime: null,
  updateTime: null
}
export default {
  name: 'LES',
  components: {DateRangePicker, Search, Treeselect, pagination, crudOperation, rrOperation, udOperation},
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['asn_status'],
  cruds() {
    return CRUD({
      title: 'les任务', url: 'api/les', idField: 'id', sort: 'id,desc', crudMethod: {...crudLes},
      optShow: {
        add: false,
        edit: false,
        del: false,
        reset: true,
        download: false
      }
    })
  },
  data() {
    return {
      headers: {'Authorization': getToken()},
      permission: {
        add: ['admin', 'les:add'],
        edit: ['admin', 'les:edit'],
        del: ['admin', 'les:del']
      }
    }
  },
  mounted() {
  },
  methods: {

    indexMethod(index) {
      return index * 1 + 1
    },
    clickRow(row) {
      this.crud.getTable().clearSelection()
      this.crud.getTable().toggleRowSelection(row, true)

      this.selectSingleClick_()
    },
    selectionChangeHandler(val) {
      this.crud.selections = val
      this.selectSingleClick_()
    },
    resetQuery() {
      this.crud.resetQuery()
    },
    getStatusType(status) {
      switch (this.dict.label.asn_status[status]) {
        case '已创建':
          return 'warning'
        case '已到站':
          return 'primary'
        case '已关闭':
        case '已完成':
          return 'success'
      }
    },
    filterTag(value, row) {
      return row.status === value
    }
  }
}
</script>

<style scoped>

</style>
