<template>
    <div>
      <div class="app-container" v-if="isList">
        <div class="filter-container">
          <div class="container_item">
            <span class="item_text">{{$t('history.updateUser')}}：</span>
            <el-input v-model="query.userName"  class="filter-item input_item"  />
          </div>
          <div class="container_item">
            <span class="item_text">{{$t('history.taskNo')}}：</span>
            <el-input v-model="query.taskNo"  class="filter-item input_item" />
          </div>
          <el-button v-waves class="filter-item" type="primary" icon="el-icon-my-search" @click="handleSearch">
            {{ $t('table.search') }}
          </el-button>
          <el-button v-waves class="filter-item" type="primary" icon="el-icon-my-reset" @click="handleReset">
            {{ $t('table.reset') }}
          </el-button>
        </div>
        <div class="wrapper_table">
          <el-table
            :data="tableData"
            fit
            stripe
            highlight-current-row
            style="width: 100%;"
            :header-cell-class-name="headerStyle"
            :max-height="tableHeight"
          >
            <el-table-column prop="taskNo" :label="$t('history.taskNo')" show-overflow-tooltip  align="left"></el-table-column>
            <el-table-column prop="userName" :label="$t('history.updateUser')" show-overflow-tooltip align="left"> </el-table-column>
            <el-table-column prop="startDate" :label="$t('history.startDate')" show-overflow-tooltip align="left"> </el-table-column>
            <el-table-column prop="endDate" :label="$t('history.endDate')" show-overflow-tooltip align="left"></el-table-column>
            <el-table-column prop="status" :label="$t('history.status')" show-overflow-tooltip align="left">
              <template slot-scope="scope">
                <!-- <span>{{scope.row.totalQuantity==scope.row.auditQuantity?'全部吻合': '部分吻合'}}</span> -->
                 <!-- <span>{{scope.row.auditQuantity === 0 ? '盘点中': ''}}</span> -->
                 <span v-if="scope.row.auditQuantity === 0">盘点中</span>
                 <span v-else-if="scope.row.auditQuantity > 0">
                   {{scope.row.totalQuantity==scope.row.matchQuantity?'全部吻合': scope.row.matchQuantity==0 ? '全部不吻合' :'部分吻合'}}
                 </span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" :label="$t('history.createTime')" show-overflow-tooltip align="left"></el-table-column>
            <el-table-column :label="$t('table.actions')" align="left"  width="100">
              <template slot-scope="scope">
                <div class="but_list">
                    <el-button v-if="permission.includes('record_query_detail')" v-waves class="" type="text" icon="el-icon-my-xiangqing" @click="details(scope.row.taskNo)">
                      详情
                    </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getData" />
      </div>
      <div v-else>
        <hisdel :taskNo="taskNo" @back="isList = true"></hisdel>
      </div>
    </div>

</template>

<script>
import { mapGetters } from 'vuex'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import http from '@/api/http'
import hisdel from './inventory.vue'

export default {
  name: '',
  components: { Pagination ,hisdel},
  directives: { waves },
  computed: {
    ...mapGetters([
      'permission',
    ])
  },
  data() {
    return {
      tableData:[],
      pageNum:1,
      pageSize:20,
      total:0,
      tableHeight: 0,
      query:{},
      isList:true,
      taskNo:''
    }
  },
  created() {
    this.getData()
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 250
    })
  },
  methods: {
      getData(paging){
        if(paging){
          this.pageSize = paging.pageSize
          this.pageNum = paging.pageNum
        }
        http.post(`/colInventory/listBatch`,{cpage:this.pageNum,pageSize:this.pageSize,...this.query}).then((res)=>{
            this.tableData = res.data.list;
            this.total = res.data.total || 0;
            this.tableData.forEach(item=>{
              item.startDate = item.startDate.slice(0,10)
              item.endDate = item.endDate.slice(0,10)
            })
        }).catch(err=>{});
    },
    // 重置
    handleReset() {
      this.query = {}
      this.pageNum = 1
      this.getData()
    },
    handleSearch() {
      this.pageNum = 1
      this.getData()
    },
    details(id){
      this.isList = false
      this.taskNo = id
      console.log('this.taskNo', this.taskNo);
      // this.$router.push({
      //     name: 'inventory',
      //     query: {id}
      // })
    },
    headerStyle() {
      return 'tableStyle'
    }
  }
}
</script>
<style scoped>
  .el-table__header-wrapper{
    border-radius: 10px 10px 0 0;
  }
</style>
