<template>
  <tf-page @keyup.enter="updateTable">
    <template v-slot:action>
      <el-row type="flex" justify="space-between" style="margin-bottom: 15px">
        <div style="display:flex;width:280px">
          <el-input size="small" v-model="formData.serchText" placeholder="请输入工程编号、工程名称" clearable />
          <el-button type="primary" size="small" @click="searchData" style="margin-left:10px;">搜索</el-button>
        </div>
        <div>
          <el-button type="primary" size="small" @click="addData">添加</el-button>
          <el-button
            type="primary"
            size="small"
            :disabled="!multipleSelection.length"
            @click="editData"
          >修改</el-button>
          <el-button
            type="danger"
            size="small"
            :disabled="!multipleSelection.length"
            @click="deleteData"
          >删除</el-button>
        </div>
      </el-row>
    </template>
    <tf-table
      ref="multipleTable"
      :columns="engineerCols"
      :data="tableData"
      :pagination="pagination"
      v-loading="loading"
      @row-click ="onClick"
      @row-dblclick="onDblClick"
      @selection-change="onSelectionChange"
      @page-change="onPageChange"
    >
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button type="text" style="padding:0" @click="showDetail(row)">详情</el-button>
        </template>
      </el-table-column>
    </tf-table>
    <!--  详情 -->
    <Detail ref="detail" @update="updateTable" width="800px" :title="title"></Detail>
    <!-- 删除项目 -->
    <tf-dialog title="提示" :visible.sync="deleteDialogVisible" :footer='false'>
      <div style="margin-bottom: 30px;">确认删除选中的{{ multipleSelection.length }}条工程项目吗?</div>
      <div style="text-align:right;">
        <el-button size="small" @click="deleteDialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="removeDatas">确 定</el-button>
      </div>
    </tf-dialog>
  </tf-page>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import { IPagination } from '@/api/common'
import { getDefaultPagination } from '@/utils/constant'
import { engineerCols } from '../../cols'
import Detail from './components/detail.vue'
import { deleteDatas, projectPagingQueryNew } from '../api/engineer'


const { Cesium, viewer,  } = (<any>window)

@Component({ name: 'Engineer', components: { Detail } })

export default class Engineer extends Vue {
  engineerCols = engineerCols
  loading: Boolean = false
  pagination: IPagination = getDefaultPagination()

  tableData = []
  formData = { serchText: '' }

  deleteDialogVisible = false

  multipleSelection = []

  title = '工程详情'

  mounted() {
    console.log(this.pagination)
    this.updateTable()
  }

  // 确认删除
  removeDatas() {
    let idArr = this.multipleSelection.map((v) => v.id)
    deleteDatas({ ids: idArr.join(',') }).then((res) => {
      if (res.code === 1) {
        this.$message.success('删除成功')
        this.updateTable()
        this.deleteDialogVisible = false
      } else {
        this.$message.error('删除失败')
      }
    })
  }
  // 搜索
  searchData () {
    this.updateTable()
  }
  // 添加数据
  addData(row) {
    let card: any = this.$refs['detail']
    this.title = '添加工程'
    card.addData(row)
  }

  // 修改数据
  editData(row) {
    let card: any = this.$refs['detail']
    this.title = '修改工程'
    let selected = this.multipleSelection
    if (selected.length === 1) {
      card.editData(selected[0])
    } else this.$message.error('请选择一条数据进行修改')
    
  }
  // 删除数据
  deleteData() {
    this.deleteDialogVisible = true
  }
  // 双击修改
  onDblClick(row) {
    let card: any = this.$refs['detail']
    this.title = '修改工程'
    card.editData(row)
  }
  onClick (row) {
    let dom : any = this.$refs.multipleTable
    dom && dom.$refs.table.toggleRowSelection(row)
  }
  // 详情
  showDetail(row) {
    let card: any = this.$refs['detail']
    this.title = '工程详情'
    card.showDetail(row)
  }

  onSelectionChange(val) {
    this.multipleSelection = val
  }

  onPageChange(e) {
    console.log('页面变化', e)
  }
  updateTable() {
    projectPagingQueryNew({ ...this.pagination, prjNo: this.formData.serchText }).then(res => {
      if (res.code === 1) {
        this.tableData = res.result.records
        this.pagination.total = res.result.total
      } else { this.$message.error('请求数据出错') }
    })
  }
}
</script>


<style>
</style>