<template>
  <div class="view-carrierListExecutionRegistrationCompile-missionPlane">
    <div class="view-dataSpecies-left">
      <MenuTree :currentNodeKey="currentNodeKey" :treedata="menuTreeData" @TreeNodeclick="treeNodeClick" v-bind="treeObj"> </MenuTree>
    </div>
    <div class="view-dataSpecies-right">
      <div class="view-dataType-table">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="aircraftNumber" label="飞机编号" align="center"> </el-table-column>
          <el-table-column prop="aircraftSpeciesName" label="所属机型" align="center"> </el-table-column>
          <el-table-column prop="flyingDuration" label="飞行时长" align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.flyingDuration.value || scope.row.flyingDuration.value == ''">
                <el-input @blur="cellBlue(scope.$index, scope.row, 'flyingDuration')" type="text" v-model="scope.row.flyingDuration.value" />
              </template>
              <template v-else>
                <i @click="editCell(scope.$index, scope.row, 'flyingDuration')" class="el-icon-edit cell-edit"></i>
                <span>{{ scope.row.flyingDuration }}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="goodCondition" label="飞机完好架日" align="center"> </el-table-column>
          <el-table-column prop="verily" label="飞机实有架日" align="center"> </el-table-column>
          <el-table-column prop="perfectRate" label="装备完好率" align="center"> </el-table-column>
          <el-table-column prop="stopRate" label="缺材停飞率" align="center"> </el-table-column>
          <el-table-column prop="guaranteedGood" 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 { defaultProps, mockTableData, tableData, columns, options } from './index'
import vue from 'vue'
export default {
  name: 'MissionPlane',
  components: {},
  data() {
    // 这里存放数据
    return {
      currentNodeKey: '',
      menuTreeData: mockTableData,

      treeObj: {
        title: '所属机种',
        activityheight: '275px',
        searchIcon: false,
        configure: defaultProps
      },
      pagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 10,
        searchValue: ''
      },
      columns: columns(this),
      options,
      tableData: tableData,
      activeRow: {}
    }
  },
  mounted() {},
  methods: {
    handleSizeChange() {},
    handleIndexChange() {},
    fetchTableData() {},
    updateRow(row, index, scope) {
      // console.log(row, index, scope)
    },
    edit(row) {
      this.activeRow = row
      this.dialogVisible = true
    },
    treeNodeClick(data) {
      this.$refs.table.clearSelection()
      // 点击树节点传值
      this.currentNodeKey = data.id
      this.currentNodeName = data.aircraftTypeName
      this.fetchTableData()
    },
    cellBlue(index, row, key) {
      row[key] = row[key].value
      this.tableData[index] = row
    },
    editCell(index, row, key) {
      let value = row[key]
      row[key] = {}
      vue.set(row[key], 'value', value)
      this.tableData[index] = row
    }
  }
}
</script>

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