<template>
  <div class="content">
    <el-card shadow="never">
      <div class="project-name">
        <!-- <p>{{ $route.matched[1].meta.title }}</p> -->
        <div class="btn-wrap">
          <el-button type="primary" @click="publicAll">批量发布</el-button>
        </div>
      </div>
      <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="publicAll">批量发布</el-button>
          </div> -->
        </div>
      </div>
      <el-form
        ref="searchForm"
        class="power-search"
        :model="searchForm"
        label-width="120px"
        size="mini">
        <el-row>
          <el-col :span="6">
            <el-form-item label="名称">
              <el-input clearable @blur="queryG" v-model="searchForm.proxy_name" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="类型">
              <el-select @change="queryG" v-model="searchForm.connectorType" placeholder="请选择">
                <el-option
                  v-for="item in protocolList"
                  :key="item.type"
                  :label="item.type"
                  :value="item.type">
                </el-option>
              </el-select>
              <!-- <el-input clearable v-model="searchForm.connectorType" type="text" /> -->
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目">
              <el-input @blur="queryG" clearable v-model="searchForm.project_name" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发布状态">
              <el-select @change="queryG" v-model="searchForm.publish_status" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        :data="tableList"
        v-loading="tableLoading"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        style="width: 100%;"
        max-height="500"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column  label="名称" show-overflow-tooltip prop="proxyName" >
          <template slot-scope="scope">
              <el-link class="table-link"   @click="saves(scope.row)"
              :type="currentRow && currentRow.id && scope.row.id && currentRow.id === scope.row.id ? 'primary' : '' "  >{{scope.row.proxyName}}</el-link>
              </template>
          </el-table-column>
        <el-table-column label="类型" show-overflow-tooltip prop="connectortype" />
        <el-table-column label="项目" show-overflow-tooltip prop="projectName" />
        <el-table-column label="发布状态" show-overflow-tooltip prop="publishStatus" >
          <template slot-scope="scope">
            {{ scope.row.publishStatus === 1 ? '已发布' : scope.row.publishStatus === 0 ? '未发布' : '禁用'  }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="最后修改时间" show-overflow-tooltip prop="updateon" /> -->
      </el-table>
      <!-- <el-pagination
        style="margin-top: 15px"
        :page-size="page.pageSize"
        :current-page.sync="page.pageNum"
        background
        :total="page.total"
        @current-change="getData" /> -->
    </el-card>
  </div>
</template>

<script>
import { queryProxyService, publishByList, findAvailableConnectType, kongInfoQuery } from '@/api/esb_service'
import { getFormateDate } from '@/utils/common'
// import QuickQuery from '@/components/quickquery/QuickQuery'

export default {
  components: {
    // QuickQuery
  },
  data() {
    return {
      // 高级搜索框
      currentRow:'',
      searchForm: {},
      isPowerSearch: false,
      tableLoading: false,
      tableList: [],
      quickQueryKeys: ['name', 'connectorType'],
      sort: {
        orderby: 'createon',
        sort: 'desc'
      },
      options: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '未发布',
          value: '0'
        },
        {
          label: '已发布',
          value: '1'
        },
        {
          label: '禁用',
          value: '2'
        }
      ],
      page: {
        pageSize: 10000,
        pageNum: 1
      },
      filters: [],
      protocolList: [],
      checklist: [],
      placeholder: '名称、类型'
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.searchForm['connectorType'] = 'http'
    this.getData()
    findAvailableConnectType().then(rt => {
      if (rt.status === '200') {
        console.log('打印数据之一',rt.data)
        this.protocolList = rt.data
        this.protocolList.unshift({
          isSimple: false,
          name: '',
          type: '全部'
        })
      }
    }).catch(() => {
    })
  },
  methods: {
    rest() {
      this.filters = []
      this.searchForm = {}
      this.getData()
    },
    handleSelectionChange(list) {
      // console.log('list',list)
      this.checklist = []
      list.map(item => {
        {
          this.checklist.push(item)
        }
     
      })
    },
    publicAll() {
      if (this.checklist.length < 1) {
        this.$message.warning('请选择需要发布的数据')
        return
      }
        this.$confirm('是否将选中的发布', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        console.log('checklist12',this.checklist)
        publishByList(this.checklist.map(item => item.proxyId)).then(res => {
          // let sucT = 0
          // let sucF = 0
          // res.data.forEach(item => {
          //   if (item.success) {
          //     sucT++
          //   } else {
          //     sucF++
          //   }
          // })
          // this.$message.warning(`发布成功${sucT},发布失败${sucF}`)
          // console.log('checklist',this.checklist)
          let ind = true
          let inds = ''
          res.data.forEach(item => {
            if (!item.success) {
              ind = false
              inds += item.message
            }
          })
          if (ind) {
            this.$message({
              message: '发布成功',
              type: 'success'
            })
            this.$emit('confirm')
            this.getData()
          } else {
            this.$message({
              message: inds,
              type: 'warning'
            })
          }
        })
      })
   
 
    },
    queryG() {
      this.filters = []
      Object.keys(this.searchForm).forEach((key) => {
        let filter = {}
        if (key === 'publish_status' && this.searchForm[key] === '2') {
          filter = {
            key: 'disable',
            opt: 'EQ',
            type: 'S',
            // logic: 'or',
            value: 1
          }
        } else {
          if (key === 'connectorType' && this.searchForm[key] === '全部') {
            filter = {
              key,
              opt: 'LIKE',
              type: 'S',
              value: ''
            }
          } else {
            filter = {
              key,
              opt: 'LIKE',
              type: 'S',
              value: this.searchForm[key]
            }
          }
        }
        if (filter.value) {
          this.filters.push(filter)
        }
      })
      this.page = {
        pageSize: 10000,
        pageNum: 1
      }
      this.quickQueryData()
    },
    // quickSearch(data) {
    //   this.quickData = data
    //   this.page.pageNum = 1
    //   this.filters = []
    //   this.quickQueryKeys.forEach(key => {
    //     const filter = {
    //       key,
    //       opt: 'LIKE',
    //       type: 'S',
    //       logic: 'or',
    //       value: this.quickData.searchData
    //     }
    //     if (filter.value) {
    //       this.filters.push(filter)
    //     }
    //   })
    //   this.quickQueryData()
    // },
    async getData() {
      this.tableLoading = true
      kongInfoQuery({
        // logic: this.logic,
        filters: this.filters,
        ...this.sort,
        ...this.page
      }).then((rt) => {
        this.tableList = rt.data.list || []
        this.page.total = rt.data.total
        console.log('123',rt.data.list)
        this.tableList.forEach(item => {
          item.updateon = getFormateDate(item.updateon, 'yyyy-MM-dd hh:mm:ss')
        })
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    quickQueryData() {
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
  .content{
    padding: 10px 10px;
  }
  .project-name {
    position: relative;
    .btn-wrap {
      position: absolute;
      right: 0;
      top: 37px;
    }
  }
  .power-search {
    border: none;
    padding: 0;
    transform: translateX(-90px);
  }
</style>
