<template>
  <div class="module_content">
    <el-card class="commont-cart">
      <div class="project-name">
        <!-- <p>{{ $route.matched[1].meta.title }}</p> -->
      </div>
      <el-form>
        <div class="search-header">
          <div class="tool-common-wrap">
            <!-- <div class="search-wrap">
              <quick-query ref="quick" :placeholder="placeholder" :is-date="false" @quickSearch="quickSearch" />
            </div> -->
            <div class="btn-wrap">
              <el-button type="primary" @click="addcode()">查找</el-button>
              <el-button type="primary" @click="rest()"> 刷新</el-button>
            </div>
          </div>
        </div>
        <div class="tableWrap">
          <!-- 表格主体 -->
          <el-table
            ref="singleTable"
            :data="tableList"
            v-loading="tableLoading"
            highlight-current-row
            style="width: 100%">
            <el-table-column
             type="index"
             label="序号"
             width="50">
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称"
              width="200">
              <template slot-scope="scope">
                <el-link class="table-link"  @click="edit(scope.row)"
                     :type="currentRow && currentRow.id && scope.row.id && currentRow.id === scope.row.id ? 'primary' : ''">
                 {{ scope.row.name }}
                </el-link>
         
              </template>
            </el-table-column>
            <el-table-column
              prop="projectName"
              label="项目"
              width="200">
            </el-table-column>
            <el-table-column
              prop="serviceType"
              label="类型">
            </el-table-column>
            <el-table-column
              prop="variableType"
              label="变量类型">
            </el-table-column>
            <el-table-column
              prop="variable"
              label="环境值">
            </el-table-column>
            <!-- <el-table-column
              prop="operate"
              label="操作"
              width="300">
              <template slot-scope="scope">
                <el-tooltip effect="dark" content="编辑" :enterable="false" placement="top">  <el-button class="icon-button" type="text" icon="el-icon-edit" @click="edit(scope.row)"></el-button></el-tooltip>
                <el-tooltip effect="dark" content="删除" :enterable="false" placement="top">  <el-button class="icon-button" type="text" icon="el-icon-delete" @click="del(scope.row)" style="margin-left:20px"></el-button></el-tooltip>
              </template>
            </el-table-column> -->
          </el-table>
        </div>
      </el-form>
      <div class="block">
        <el-pagination
          :page-size="page.pageSize"
          :current-page.sync="page.pageNum"
          background
          @current-change="getDataCurrent()"
          :total="page.total">
        </el-pagination>
      </div>
      <!-- <div class="right-content">
        <variable-details
          ref="child"
          :dialogFormVisible="dialogFormVisible"
          @confirm="handleSubmit()"
          :currentRow="currentRow"
          :content="content"
          :flag="flag"
          @closedialog="closedialog"
          @closepop="closepop" />
      </div> -->
    </el-card>
    <FindDialog  :itemList= "itemList" :typeList="typeList" v-model="dialogFormVisible"  @confirm="getData"/>
  </div>
</template>

<script>
import QuickQuery from '@/components/quickquery/QuickQuery'
import { queryGlobalVariable, deleteVariable } from '@/api/esb_global_management'
import EsbServiceListMixins from '@/mixins/esb_service_list_mixins'
import FindDialog from './findDialog.vue'
import { findQuery,getVariables } from '@/api/system_manage'
import { queryProjectList, getProjectListDetail, deleteProjectList } from '@/api/project_list'

export default {
  mixins: [EsbServiceListMixins],
  components: {
    QuickQuery,
    FindDialog
},
  data() {
    return {
      dialogFormVisible: false,
      flag: '',
      content: '',
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      tableLoading: false,
      tableList: [],
      typeList:[],
      itemList:[],
      quickQueryKeys: ['name', 'attribute_name', 'variable_value'],
      sort: {
        orderby: 'createon',
        sort: 'desc'
      },
      placeholder: '名称、属性、变量值'
    }
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    closedialog() {
      this.dialogFormVisible = false
    },
    closepop() {
      this.flag = ''
    },
    edit(item) {
      console.log(item)
      this.currentRow = item
      this.dialogFormVisible = true
      this.content = '修改'
    },
    lookFlowNode() {
      this.dialogVisible = true
    },
   getData(val) {
      // this.tableLoading = true
      // const rt = await findQuery({
      //   logic: this.logic,
      //   filters: this.filters,
      //   ...this.sort,
      //   ...this.page
      // }).catch(e => {
      //   this.tableLoading = false
      //   return Promise.reject(e)
      // })
      // if (rt.status === '200') {
      //   this.tableLoading = false
      //   // this.tableList = rt.data.list || []
      //   return Promise.resolve(rt)
      // } else {
      //   this.tableLoading = false
      // }
          this.page.total = val.length
      
      this.tableList = val
      console.log(val,'vallllll1ll1l1l')
      // this.$emit('confirm',this.tableLists)
    },
    addcode(type, item) {
      this.flag = 'none'
      this.currentRow = {}
      this.dialogFormVisible = true
      this.content = '确定'
      this.finds()
      this.quickQueryData()
    },
    // 详情
    rowChange(val) {
      this.currentRow = val || {}
      this.dialogFormVisible = true
    },
    quickQueryData() {
      this.tableLoading = true
      queryProjectList({
        logic: this.logic,
        filters: this.filters,
        ...this.sort,
        ...this.page
      }).then(rt => {
        if (rt.status === '200') {
          this.tableLoading = false
          this.itemList = rt.data.list || []
          // this.page.total = rt.data.total
          // return Promise.resolve(rt)
          console.log(this.tableList,'this.tableList')
        } else {
          this.tableLoading = false
        }
      }).catch(e => {
        this.tableLoading = false
        // return Promise.reject(e)
      })
    },

    finds(){
    console.log(12312312314)
    getVariables()
    .then(res=>{
      console.log(123123,this.typeList,)
      if(res.status=='200'){
        this.typeList =res.data
       }
       console.log(123123,this.typeList)
    })
  }
  },


  

  // mounted() {
  //   this.getData()
  // }
}
</script>

<style lang="css" scoped>
.module_content{
  padding: 10px 10px;
}
.tableWrap{
  height: 470px;
  overflow-y: auto;

}
.left-content {
  width: 401px !important;
}
</style>
