<template>
  <el-dialog title="选择映射编码" class="C-MappingCoding" :visible.sync="dialogVisible" width="800px" :before-close="closeMappingCoding">
    <el-descriptions :column="3" v-if="sailingMaterial" class="MappingCoding-descriptions">
      <el-descriptions-item label="航材编码（机务）">{{ sailingMaterial.avmatCatalogCode }}</el-descriptions-item>
      <el-descriptions-item label="航材名称（机务）">{{ sailingMaterial.avmatCatalogName }}</el-descriptions-item>
      <el-descriptions-item label="航材型号（机务）">{{ sailingMaterial.specification }}</el-descriptions-item>
    </el-descriptions>
    <el-input style="margin: 10px 0" placeholder="请输入关键字" v-model="queryParam">
      <el-button slot="append" icon="el-icon-search" @click="queryByParamAPI"></el-button>
    </el-input>

    <LTable ref="table" @handleRowClick="rowClick" :defaultFetch="true" :columns="columns" :dataSource="tableData" :options="options" :fetch="fetchTableData" :pagination="pagination" />

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeMappingCoding">取 消</el-button>
      <el-button type="primary" @click="handleMappingCoding">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { queryByParam, getAvmatCatalog, mappingCode } from '@/api/basicData/dataSailingMaterialMaterialCoding'
import { columns, options } from './index'
export default {
  name: 'MappingCoding',
  props: ['currentNodeKey'],
  components: {},
  data() {
    // 这里存放数据
    return {
      queryParam: '',
      dialogVisible: false,
      sailingMaterial: null,
      columns: columns(this),
      tableData: [],
      options,
      pagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 20
      },
      activeRow: null
    }
  },
  mounted() {},
  methods: {
    async queryByParamAPI() {
      this.pagination.pageIndex = 1
      if (this.queryParam == '') {
        this.fetchTableData()
        return
      }
      const { pageSize, pageIndex } = this.pagination
      const {
        data: { list, totalPage }
      } = await queryByParam({ pageSize, pageIndex, queryParam: this.queryParam })
      this.tableData = list
      this.pagination.total = totalPage
    },

    async fetchTableData() {
      const { pageIndex, pageSize } = this.pagination
      const {
        data: { list, totalCount }
      } = await getAvmatCatalog({
        pageIndex,
        pageSize,
        avmatCategoriesId: this.currentNodeKey,
        avmatType: '1'
      })
      this.pagination.total = totalCount
      this.tableData = list
    },

    openMappingCoding(row) {
      this.sailingMaterial = row
      this.dialogVisible = true
      this.fetchTableData()
    },

    closeMappingCoding() {
      this.activeRow = null
      this.sailingMaterial = null
      this.dialogVisible = false
      this.pagination.pageIndex = 1
      this.pagination.pageSize = 20
      this.queryParam = ''
    },

    async handleMappingCoding() {
      if (this.activeRow == null) {
        this.$message({
          type: 'warning',
          message: '请选中一条数据'
        })
        return
      }
      this.dialogVisible = false
      const { success } = await mappingCode({
        avmatCatalogId: this.sailingMaterial.avmatCatalogId,
        mappingId: this.activeRow.avmatCatalogId
      })
      if (success) {
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
      }
      this.$emit('handleMappingCoding', this.activeRow, this.sailingMaterial)
    },

    rowClick(row) {
      this.activeRow = row
    }
  }
}
</script>

<style lang="scss">
@import './index.scss';
.MappingCoding-descriptions {
  .el-table__body tr.current-row > td.el-table__cell {
    background-color: #5f99ab !important;
  }
  .el-table--striped .el-table__body tr.el-table__row--striped.current-row td.el-table__cell {
    background-color: #5f99ab !important;
  }
  .el-table__body td.el-table__cell {
    cursor: pointer;
  }
}
</style>
