<template>
  <div class="mod-config">
    <el-form style="display: flex; align-items: center; justify-content: right;" :inline="true">
      <el-form-item>
        <el-button
          size="small"
          type="success"
          @click="$router.push({ name: 'order-current-order' })"
          >返回当前订单列表</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      :stripe="true"
      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}"
      v-loading="dataListLoading"
      style="width: 100%;"
    >
      <el-table-column
        type="index"
        header-align="center"
        align="center"
        label="序号"
        width="50"
      >
      </el-table-column>
      <el-table-column
        prop="taskCode"
        label="任务编码"
      >
      </el-table-column
      ><el-table-column
        prop="abeginTime"
        label="发起时间"
      >
        <template slot-scope="scope">
          {{ scope.row.abeginTime ? scope.row.abeginTime.replace('T', ' ') : '' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="aendTime"
        label="完成时间"
      >
        <template slot-scope="scope">
          {{ scope.row.aendTime ? scope.row.aendTime.replace('T', ' ') : '' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="taskType"
        label="任务类型"
      >
        <template slot-scope="scope">
          {{ scope.row.taskType === 0 ? '初始加工' : '复加工' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="remark"
        label="当前工序"
      >
      </el-table-column>
      <el-table-column
        prop="startPosition"
        label="开始位置"
      >
      </el-table-column>
      <el-table-column
        prop="targetPosition"
        label="目标位置"
      >
      </el-table-column>
      <el-table-column
        prop="kilnName"
        label="加工炉"
      >
      </el-table-column>
      <el-table-column
        prop="quantity"
        label="加工数量"
      >
      </el-table-column>
      <el-table-column
        prop="weight"
        label="重量"
      >
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false
    }
  },
  activated () {
    this.getDataList()
  },
  created () {
    this.orderNo = this.$route.query.orderNo
    this.idenCardNum = this.$route.query.idenCardNum
  },
  methods: {
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/orderInfo/getTaskInfo'),
        method: 'post',
        data: this.$http.adornData({
          current: this.pageIndex,
          size: this.pageSize,
          idenCardNum: this.idenCardNum,
          orderNo: this.orderNo
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.data.records
          this.totalPage = data.data.total
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    }
  }
}
</script>
