<!--
  @description: 风险控制部-新增异议-选择项目标段弹框
  @Modifier: haofengxian
  @routerPath:
  @date: 2020-5-29-16:56
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    title="选择项目标段"
    width="860px"
    custom-class="el-dialog__body-p8 el-dialog_table"
  >
    <div>
      <!--搜索-->
      <div class="clearfix">
        <el-form ref="searchForm" :model="searchForm" inline>
          <el-form-item label="标段（包）编号" prop="packNo">
            <el-input v-model.trim="searchForm.packNo" placeholder="标段（包）编号" />
          </el-form-item>
          <el-form-item label="项目名称" prop="tenderName">
            <el-input v-model.trim="searchForm.tenderName" placeholder="项目名称" />
          </el-form-item>
          <el-form-item class="fr">
            <el-button type="primary" @click="onSearch('searchForm')">
              搜 索
            </el-button>
            <el-button plain type="info" @click="resetForm('searchForm')">
              重 置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <!--查询列表-->
      <div>
        <el-table
          ref="singleTable"
          :data="tableData"
          class="pointer"
          size="mini"
          highlight-current-row
          @current-change="currentChange"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="80"
          />
          <el-table-column
            label="项目编号"
            prop="tenderNo"
            align="center"
            width="200"
          />
          <el-table-column

            label="项目名称"
            prop="tenderName"
          />
          <el-table-column
            label="标段（包）编号"
            prop="packNo"
          />
          <el-table-column

            label="标段（包）名称"
            prop="packName"
          />
        </el-table>
        <!--分页组件-->
        <pagination :pagination-data="paginationData" @change="loadData" />
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="ensure">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
/* 接口*/
import { getAllProjectListByDepartId } from '@/api/bidding/biddingProject'
/* 公用方法*/
import { filterObj } from '@/assets/js/utils'// 常用方法
/* 混合开发方法-参数字段*/
import { ListMixin } from '@/mixins/ListMixin'// 分页
/* 组件*/
import pagination from '@comp/common/pagination/pagination'// 分页
export default {
  name: 'CategoryTreeDialog',
  components: {
    pagination// 分页
  },
  mixins: [ListMixin],
  data() {
    return {
      loading: true,
      dialogVisible: false, // 弹框是否打开状态
      tableData: [],
      // 搜索
      searchForm: {
        tenderName: '', // 项目名称
        tenderNo: '' // 项目编号
      },
      currentData: {}// 当前选择的信息
    }
  },
  methods: {
    // 打开弹框
    openDialogVisible() {
      this.dialogVisible = true
      this.loadData()
    },
    // 当前选择的信息
    currentChange(val) {
      this.currentData = val
    },
    // 加载数据
    loadData() {
      const params = this.getQueryParams()// 查询条件
      getAllProjectListByDepartId(params).then(response => {
        this.tableData = response.data.records
        this.paginationData.total = response.data.total
      }).catch(() => {

      })
    },
    // 查询条件
    getQueryParams() {
      const param = Object.assign({}, this.searchForm)
      param.pageNo = this.paginationData.pageNo
      param.pageSize = this.paginationData.pageSize
      return filterObj(param)
    },
    // 搜索
    onSearch() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      // 获取列表信息
      this.loadData()
    },
    // 重置
    resetForm(formName) {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.$refs[formName].resetFields()
      // 获取列表信息
      this.loadData()
    },
    // 选择信息-确定
    ensure() {
      if (this.currentData.tenderName) {
        this.$emit('projectInfo', this.currentData)
        this.dialogVisible = false// 关闭弹框
      } else {
        this.$message({
          message: '请选择项目',
          type: 'warning'
        })
      }
    },
    // 打开弹框
    openShowDialog() {
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped>

</style>
