<template>
  <div class="view-sailingMaterial">
    <div class="view-sailingMaterial">
      <!-- 通用代码 左侧按钮 右侧输入框 下拉框 -->
      <MissionDetail :detail="detail" />

      <div class="view-common-header">
        <div class="view-common-header-left">
          <el-button type="primary">导出</el-button>
        </div>
        <div class="view-common-header-right">
          <el-input @keyup.enter.native="fetchTableData('search')" placeholder="请输入内容" v-model="searchValue" class="input-select">
            <el-button @click="fetchTableData('search')" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </div>

      <div class="view-dataType-table">
        <el-table :data="tableData" border style="width: 100%" height="calc(100vh - 420px)">
          <el-table-column prop="avmatCatalogName" label="航材名称" align="center"> </el-table-column>
          <el-table-column prop="avmatCatalogCode" label="航材编码" align="center"> </el-table-column>
          <el-table-column prop="specification" label="规格型号" align="center"> </el-table-column>
          <el-table-column prop="avmatCategoriesName" label="航材分类" align="center"> </el-table-column>
          <el-table-column prop="aircaftCatalogCode" label="指向飞机" align="center"> </el-table-column>
          <el-table-column prop="carryQuantity" label="携带总数量" align="center"> </el-table-column>
          <el-table-column prop="purchasePrice" label="单价（元）" align="center"> </el-table-column>
          <el-table-column prop="applyForNum" label="申请总数量" align="center"> </el-table-column>
          <el-table-column prop="stockRemovalNum" label="出库总数量" align="center"> </el-table-column>
        </el-table>
        <el-pagination
          background
          :total="pagination.total"
          :page-size="pagination.pageSize"
          :page-sizes="[10, 20, 30, 40, 50]"
          layout="sizes,total, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleIndexChange"
          style="padding: 20px; text-align: center"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { queryFlyTaskAircraft, queryCarryingMainteOrgan } from '@/api/carrierStandard/carrierListMachineryPreparation'

export default {
  name: 'SailingMaterial',
  components: {},
  data() {
    // 这里存放数据
    return {
      detail: null,
      searchValue: '',
      activeIndex: null,
      currentNodeKey: '',
      pagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 10,
        searchValue: ''
      },
      tableData: []
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      let postData = {
        taskId: this.$route.params.id
      }
      const { code, data } = await queryFlyTaskAircraft(postData)
      if (code == 200) {
        this.detail = data
        this.fetchTableData()
        this.$store.commit('app/updataTagsItemMetaTitle', { id: this.$route.params.id, otherTitle: '携行航材使用登记-航材', newTitle: `携行航材使用登记-航材-${this.detail.taskName}` })
      }
    },
    async fetchTableData(search) {
      let postData = {
        pageSize: this.pagination.pageSize,
        pageIndex: search ? 1 : this.pagination.pageIndex,
        taskId: this.$route.params.id,
        queryParam: this.searchValue
      }
      const { code, data } = await queryCarryingMainteOrgan(postData)
      if (code == 200) {
        data.list.forEach((item) => {
          item.applyForNum = item.applyForNum ? item.applyForNum : ''
          item.stockRemovalNum = item.stockRemovalNum ? item.stockRemovalNum : ''
        })
        this.tableData = data.list
        this.pagination.total = data.totalCount
      }
    },
    handleIndexChange(val) {
      this.pagination.pageIndex = val
      this.fetchTableData()
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.fetchTableData()
    }
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>
