<template>
  <div class="content">
    <el-card shadow="never">
      <div class="project-name">
        <!-- <p>{{ $route.matched[1].meta.title }}</p> -->
      </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>
            <el-button type="primary" @click="publicAll">刷新</el-button>
          </div>
        </div>
      </div>
      <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="allowedPayloadSize" />
        <el-table-column label="限流次数" show-overflow-tooltip prop="rateLimitingNumber" />
        <el-table-column label="限流方式" show-overflow-tooltip prop="rateLimitingType" />
        <el-table-column label="单位" show-overflow-tooltip prop="sizeUnit" />
        <el-table-column label="启用报文大小限流" show-overflow-tooltip prop="isEnableRequestSizeLimiting" />
        <el-table-column label="启用调用次数限流" show-overflow-tooltip prop="isEnableRateLimiting" />
      </el-table>
    </el-card>
  </div>
</template>

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

export default {
  components: {
    QuickQuery
  },
  data() {
    return {
      // 高级搜索框
      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.getData()
    findAvailableConnectType().then(rt => {
      if (rt.status === '200') {
        this.protocolList = rt.data
      }
    }).catch(() => {
    })
  },
  methods: {
    rest() {
      this.filters = []
      this.searchForm = {}
      this.getData()
    },
    handleSelectionChange(list) {
      this.checklist = []
      list.map(item => {
        if (item.status === '未发布') {
          this.checklist.push(item)
        }
      })
    },
    publicAll() {
      if (this.checklist.length < 1) {
        this.$message.warning('请选择需要发布的数据')
        return
      }
      this.$confirm('是否将选中的发布', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        publishByList(this.checklist.map(item => item.id)).then(res => {
          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')
          } 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: 'LIKE',
            value: true
          }
        } else {
          filter = {
            key,
            opt: 'LIKE',
            type: 'S',
            logic: 'or',
            value: this.searchForm[key]
          }
        }
        if (filter.value) {
          this.filters.push(filter)
        }
      })
      this.page = {
        pageSize: 10,
        pageNum: 1
      }
      this.quickQueryData()
    },
    async getData() {
      this.tableLoading = true
      queryProxyService({
        filters: this.filters,
        ...this.sort,
        ...this.page
      }).then((rt) => {
        this.tableList = rt.data.list || []
        this.page.total = rt.data.total
        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: 0;
    }
  }
  .power-search {
    border: none;
    padding: 0;
  }
</style>
