<template>
  <div class="view-carrierListExecutionRegistrationCompile-aerospaceSpareParts">
    <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-title">
        <div class="view-dataType-title-btn">
          <el-button type="success" @click="addRow()">新增</el-button>
        </div>
      </div>
      <div class="view-dataType-table">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="sparePartsName" label="航材名称" align="center">
            <template slot-scope="scope">
              <i class="el-icon-edit cell-edit" @click="sparePartsNameCodingClick(scope.$index, scope.row)"></i>
              <span>{{ scope.row.sparePartsName }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="sparePartsCoding" label="航材编码" align="center"> </el-table-column>
          <el-table-column prop="classification" label="所属分类" align="center"> </el-table-column>

          <el-table-column prop="carryQuantity" label="携带数量" align="center">
            <!-- <template slot-scope="scope">
              <template v-if="scope.row.carryQuantity.value || scope.row.carryQuantity.value == ''">
                <el-input @blur="cellBlue(scope.$index, scope.row, 'carryQuantity')" type="text" v-model="scope.row.carryQuantity.value" />
              </template>
              <template v-else>
                <i @click="editCell(scope.$index, scope.row, 'carryQuantity')" class="el-icon-edit cell-edit"></i>
                <span>{{ scope.row.carryQuantity }}</span>
              </template>
            </template> -->
          </el-table-column>

          <el-table-column prop="unitPrice" label="单价" align="center"> </el-table-column>
          <el-table-column prop="carryingAmount" label="携带金额(元)" align="center"> </el-table-column>

          <el-table-column prop="applicationQuantity" label="申请数量" align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.applicationQuantity.value || scope.row.applicationQuantity.value == ''">
                <el-input @blur="cellBlue(scope.$index, scope.row, 'applicationQuantity')" type="text" v-model="scope.row.applicationQuantity.value" />
              </template>
              <template v-else>
                <i @click="editCell(scope.$index, scope.row, 'applicationQuantity')" class="el-icon-edit cell-edit"></i>
                <span>{{ scope.row.applicationQuantity }}</span>
              </template>
            </template>
          </el-table-column>

          <el-table-column prop="outNumber" label="出库数量" align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.outNumber.value || scope.row.outNumber.value == ''">
                <el-input @blur="cellBlue(scope.$index, scope.row, 'outNumber')" type="text" v-model="scope.row.outNumber.value" />
              </template>
              <template v-else>
                <i @click="editCell(scope.$index, scope.row, 'outNumber')" class="el-icon-edit cell-edit"></i>
                <span>{{ scope.row.outNumber }}</span>
              </template>
            </template>
          </el-table-column>

          <el-table-column prop="usageQuantity" label="使用数量" align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.usageQuantity.value || scope.row.usageQuantity.value == ''">
                <el-input @blur="cellBlue(scope.$index, scope.row, 'usageQuantity')" type="text" v-model="scope.row.usageQuantity.value" />
              </template>
              <template v-else>
                <i @click="editCell(scope.$index, scope.row, 'usageQuantity')" class="el-icon-edit cell-edit"></i>
                <span>{{ scope.row.usageQuantity }}</span>
              </template>
            </template>
          </el-table-column>

          <el-table-column prop="amountUse" label="使用金额/元" align="center"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button :disabled="scope.row.original" @click="handleRemoveClick(scope.$index, scope.row)" type="text" size="small">删除</el-button>
            </template>
          </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>

    <el-dialog class="fittings-modal" title="选择航材" :visible="fittingsVisible" width="1200px" :before-close="closefittingsVisible">
      <div class="fittings-modal-box">
        <div class="fittings-modal-box-left">
          <MenuTree :currentNodeKey="modalCurrentNodeKey" :treedata="modalMenuTreeData" @TreeNodeclick="modalTreeNodeClick" v-bind="modalTreeObj"> </MenuTree>
        </div>
        <div class="fittings-modal-box-right">
          <LTable ref="table" :defaultFetch="false" :columns="modalColumns" :dataSource="modalTableData" :options="modalOptions" :fetch="modalFetchTableData" :pagination="modalTableRequset"></LTable>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { tableData, modalColumns, modalOptions, modalTableData, mockTableData, columns, options, modalMenuTreeData, modalTreeObj, treeObj } from './index'
import vue from 'vue'
export default {
  name: 'AerospaceSpareParts',
  components: {},
  data() {
    // 这里存放数据
    return {
      fittingsVisible: false,
      modalMenuTreeData,
      modalCurrentNodeKey: '',
      modalTreeObj,
      modalColumns: modalColumns(this),
      modalTableData,
      modalOptions,
      modalTableRequset: {
        total: 0,
        pageIndex: 1,
        pageSize: 10,
        searchValue: ''
      },
      activeIndex: null,
      currentNodeKey: '',
      menuTreeData: mockTableData,
      treeObj,
      pagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 10,
        searchValue: ''
      },
      columns: columns(this),
      options,
      tableData: tableData
    }
  },
  mounted() {},
  methods: {
    modalFetchTableData() {},
    closefittingsVisible() {
      this.fittingsVisible = false
      this.activeIndex = null
    },
    select(row) {
      for (const key in this.tableData[this.activeIndex]) {
        if (key && row[key]) {
          vue.set(this.tableData[this.activeIndex], key, row[key])
        }
      }
      this.fittingsVisible = false
      this.activeIndex = null
    },
    modalTreeNodeClick() {},
    handleSizeChange() {},
    handleIndexChange() {},
    sparePartsNameCodingClick(index, row) {
      this.activeIndex = index
      this.fittingsVisible = true
    },

    addRow() {
      let obj = {
        sparePartsName: '',
        sparePartsCoding: '',
        classification: '',
        carryQuantity: '0',
        unitPrice: '',
        carryingAmount: '',
        applicationQuantity: {
          value: ''
        },
        outNumber: {
          value: ''
        },
        usageQuantity: {
          value: ''
        },
        amountUse: ''
      }
      this.tableData.unshift(obj)
    },

    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
    },

    handleRemoveClick(index, row) {
      this.$confirm('是否删除该航材', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.tableData.splice(index, 1)
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
        .catch(() => {})
    },
    fetchTableData() {},

    treeNodeClick(data) {
      this.$refs.table.clearSelection()
      // 点击树节点传值
      this.currentNodeKey = data.id
      this.currentNodeName = data.aircraftTypeName

      this.fetchTableData()
    }
  }
}
</script>

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