<template>
  <el-dialog
   :close-on-click-modal="false"
    v-loading="loading"
    :title="title"
    :visible.sync="dialogVisible"
    :append-to-body="true"
  >
    <div class="module_content">
      <el-card shadow="never" class="commont-cart">
        <el-form>
          <div class="">
            <div class="search-header">
              <div class="tool-common-wrap">
                <div class="search-wrap">
                  <quick-query ref="quick" :placeholder="placeholder" :is-date="false" @quickSearch="projectSearch" />
                </div>
                <div class="btn-wrap">
                  <el-button type="primary" @click="reset()"> 刷新</el-button>
                </div>
              </div>
            </div>
            <div class="tableWrap">
              <el-table
                ref="singleTable"
                :data="tableList"
                v-loading="tableLoading"
                highlight-current-row
                @current-change="handleCurrentChange"
                style="width: 100%; margin: 15px 0"
                size="mini">
                <el-table-column type="index" label="序号" width="50" align="center">
                </el-table-column>
                <el-table-column prop="name" label="名称" align="center" show-overflow-tooltip>
                </el-table-column>
              </el-table>
              <el-pagination
                :page-size="page.pageSize"
                :current-page.sync="page.pageNum"
                background
                @current-change="getData()"
                :total="page.total"
              />
            </div>
          </div>
        </el-form>
      </el-card>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="closeDialog(false)">取 消</el-button>
    <el-button type="primary" @click="subName">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>

import QuickQuery from '@/components/quickquery/QuickQuery'
import { queryProjectList } from '@/api/project_list'

export default {
  components: {
    QuickQuery
  },
  data() {
    return {
      title: '项目列表',
      loading: false,
      dialogVisible: false,
      tableLoading: false,
      tableList: [],
      radio: '',
      rows: {},
      sort: {
        orderby: 'createon',
        sort: 'desc'
      },
      placeholder: '名称',
      logic: 'or',
      page: {
        pageSize: 5,
        pageNum: 1,
        total: 0
      }
    }
  },
  props: {
    value: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    value(val) {
      this.dialogVisible = val
      if (val) {
        this.getData('')
      }
    }
  },
  methods: {
    projectSearch(val) {
      this.page = {
        pageSize: 5,
        pageNum: 1,
        total: 0
      }
      this.getData(val.searchData)
    },
    getData(val) {
      this.tableLoading = true
      queryProjectList({
        logic: this.logic,
        filters: [
          {
            key: 'name',
            opt: 'LIKE',
            type: 'S',
            value: val
          }
        ],
        ...this.sort,
        ...this.page
      }).then(rt => {
        if (rt.status === '200') {
          this.tableLoading = false
          this.tableList = rt.data.list || []
          this.page.total = rt.data.total
        } else {
          this.tableLoading = false
        }
      }).catch(e => {
        this.tableLoading = false
        return Promise.reject(e)
      })
    },
    handleCurrentChange(row) {
      this.rows = row
    },
    reset() {
      this.getData('')
    },
    subName() {
      this.dialogVisible = false
      this.$emit('closeDialog', this.rows)
    },
    closeDialog() {
      this.dialogVisible = false
      this.$emit('closeDialog', ' ')
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
  .upload {
    /deep/ .uploader {
      .el-upload-list {
        display: none;
      }
    }
  }
</style>
