<template>
  <!-- 选择航材 -->
  <el-dialog class="fittings-modal" title="选择航材" :visible="fittingsVisible" width="1200px" :before-close="closefittingsVisible">
    <div class="fittings-modal-box">
      <div class="fittings-modal-box-left">
        <el-radio-group v-model="radio" style="margin-bottom: 20px" v-if="toggle" @change="handleToggle">
          <el-radio-button label="1">航材</el-radio-button>
          <el-radio-button label="0">机务</el-radio-button>
        </el-radio-group>
        <MenuTree node-key="avmatCategoriesCode" :currentNodeKey="dialogCurrentNodeKey" :treedata="dialogMenuTreeData" @TreeNodeclick="dialogTreeNodeClick" v-bind="dialogTreeObj"> </MenuTree>
      </div>
      <div class="fittings-modal-box-right">
        <LTable ref="table" :defaultFetch="false" :columns="dialogColumns" :dataSource="dialogTableData" :options="dialogOptions" :fetch="dialogFetchTableData" :pagination="dialogTableRequset"></LTable>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { dialogTreeObj, dialogColumns, dialogOptions } from './index'
import { roleAvmatCategoriesTree, getAvmatCatalog } from '@/api/carrierStandard/carrierListMachineryPreparation'
export default {
  props: {
    avmatType: {
      type: String,
      default: '1'
    },
    // 允许切换 航材1/机务0
    toggle: {
      type: Boolean,
      default: false
    }
  },
  name: 'AviationMaterialsModal',
  components: {},
  data() {
    // 这里存放数据
    return {
      dialogCurrentNodeKey: '',
      fittingsVisible: false,
      dialogMenuTreeData: [],
      dialogTreeObj: dialogTreeObj,
      dialogColumns: dialogColumns(this),
      dialogTableData: [],
      dialogOptions: dialogOptions,
      dialogTableRequset: {
        total: 0,
        pageIndex: 1,
        pageSize: 10
      },
      radio: '1',
      avmatCategoriesId: ''
    }
  },
  mounted() {},
  methods: {
    handleToggle() {
      this.dialogFetchTableData()
    },
    closefittingsVisible() {
      this.fittingsVisible = false
      this.activeIndex = null
    },
    dialogTreeNodeClick(node) {
      this.dialogCurrentNodeKey = node.avmatCategoriesCode
      this.avmatCategoriesId = node.avmatCategoriesId || ''
      this.dialogFetchTableData()
    },
    openFittings() {
      this.getroleAvmatCategoriesTree()
      this.fittingsVisible = true
    },
    async getroleAvmatCategoriesTree() {
      const { code, data } = await roleAvmatCategoriesTree()
      if (code == 200) {
        this.dialogMenuTreeData = [
          {
            avmatCategoriesName: '全部',
            avmatCategoriesCode: '',
            children: data
          }
        ]
        this.dialogFetchTableData()
      }
    },
    async dialogFetchTableData() {
      let postData = {
        avmatCategoriesCode: this.dialogCurrentNodeKey,
        avmatType: this.toggle ? this.radio : this.avmatType,
        pageIndex: this.dialogTableRequset.pageIndex,
        pageSize: this.dialogTableRequset.pageSize,
        avmatCategoriesId: this.avmatCategoriesId
      }
      const { code, data } = await getAvmatCatalog(postData)
      if (code == 200) {
        this.dialogTableData = data.list
        this.dialogTableRequset.total = data.totalCount
      }
    },
    select(row) {
      this.$emit('select', row)
      this.fittingsVisible = false
      this.dialogCurrentNodeKey = ''
    }
  }
}
</script>

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