<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="quickQuerySettings" >批量设置</el-button>
          </div>
        </div>
      </div>
      <el-form
        ref="searchForm"
        class="power-search"
        :model="searchForm"
        v-if="isPowerSearch"
        label-width="100px"
        size="mini">
        <el-row>
          <el-col :span="6">
            <el-form-item label="是否启用">
              <el-radio-group v-model="searchForm.isEnableWhiteList" >
                <el-radio label="true">是</el-radio>
                <el-radio label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-radio-group v-model="searchForm.whiteListType" class="wihteBlack" >
              <el-radio label="allow">白名单</el-radio>
              <el-radio label="deny">黑名单</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="6">
            <el-form-item label="IP信息">
              <el-input clearable v-model="searchForm.whiteList" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="">
              <el-button type="primary" @click="setRows()">应用</el-button>
            </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="projectName" />

        <el-table-column label="是否启用" show-overflow-tooltip prop="isEnableWhiteList">
            <template slot-scope="scope">
                <span v-if="scope.row.isEnableWhiteList==='true'">是</span><span v-else>否</span>
            </template>
        </el-table-column>

        <el-table-column label="黑白名单" show-overflow-tooltip prop="whiteListType">
            <template slot-scope="scope">
                <span v-if="scope.row.whiteListType === 'allow'">白名单</span><span v-else>黑名单</span>
            </template>
        </el-table-column>
        <el-table-column label="IP信息" show-overflow-tooltip prop="whiteList" />
        <el-table-column label="操作" show-overflow-tooltip prop="type">
            <template slot-scope="scope">
                <el-button type="text" @click="saves(scope.row)">设置</el-button>
            </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-dialog :close-on-click-modal="false" title="修改黑白名单" :visible.sync="dialogVisible" width="800px" append-to-body @close="cancel">
        <el-form :model="httpLL" label-width="130px">
          <el-row :gutter="20">
            <el-form-item label="名单类型：">
              <el-radio-group v-model="httpLL.whiteListType">
                <el-radio label="allow">白名单</el-radio>
                <el-radio label="deny">黑名单</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否开启：">
              <el-radio-group v-model="httpLL.isEnableWhiteList">
                <el-radio label="true">是</el-radio>
                <el-radio label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="ip地址清单：">
              <el-input v-model="httpLL.whiteList"></el-input>
              <p style="color:red">多个请用','(英文逗号)隔开</p>
            </el-form-item>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

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

export default {
  components: {
    QuickQuery
  },
  data() {
    return {
      // 高级搜索框
      currentRow:{},
      httpLL: {},
      dialogVisible: false,
      searchForm: {isEnableWhiteList:'true',whiteListType:'deny'},
      isEnableWhiteList:'',
      whiteListTyp:'',
      isPowerSearch:false,
      tableLoading: false,
      tableList: [],
      quickQueryKeys: ['proxy_name', 'project_name','white_list'],
      settings:['white_list_type','publish_status','white_list'],
      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()
  },
  methods: {
    rest() {
      this.filters = []
      this.searchForm = {}
      this.getData()
    },
    handleSelectionChange(list) {
      this.checklist = list
    },
    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 sucT = 0
          // let sucF = 0
          // res.data.forEach(item => {
          //   if (item.success) {
          //     sucT++
          //   } else {
          //     sucF++
          //   }
          // })
          // this.$message.warning(`发布成功${sucT},发布失败${sucF}`)
          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',
            // type: 'S',
            // logic: 'or',
            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()
    },
    cancel() {
      this.dialogVisible = false
    },
    submit() {
      kongInfoSave(this.httpLL).then(res => {
        console.log(this.httpLL,'打印一下数据')
        this.dialogVisible = false
        this.getData()
      })
    },
    saves(data) {
      this.httpLL = Object.assign({},data)
      this.dialogVisible = true
    
     if(!data.whiteListType){
       this.httpLL.whiteListType = 'deny'
     }
     },
    setRows() {
      const than = this
      if (than.checklist.length > 0) {
        let str = ''
        than.checklist.map(item => { str += item.proxyName })
        than.$confirm(`是否${str}这些代理服务设置`, '提示', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning'
        }).then(() => {
          kongInfoAllQuery(than.checklist).then(res => {
               if(res.status =='200'){
                than.checklist.map(item => {
            console.log(item,'123123')
            item = Object.assign(item, than.searchForm)
           
          })
                than.getData()
               }
        
          })
        }).catch(() => {
        })
      } else {
        than.$confirm(`请先选择应用的目标`, '提示', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning'
        }).then(() => {
          if (this.searchForm.whiteList) {
            var reg = /^(?:(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:1[0-9][0-9]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:2[0-4][0-9])|(?:25[0-5])|(?:1[0-9][0-9])|(?:[1-9][0-9])|(?:[0-9]))$/
            let regI = 0
            this.httpLL.whiteList.split(',').forEach(item => {
              if (item.split('.').length !== 4 && !reg.test(item.split('/')[0])) {
                regI = 1
              }
            })
            if (regI === 1) {
              this.$message.warning('你的IP不符合规格')
              return
            }
          }
          console.log(2, than.checklist)
          than.checklist.map(item => {
            item = Object.assign(item, than.searchForm)
            console.log(item,'12')
          //  this.tableList.isEnableWhiteList=item.isEnableWhiteList
          })
        }).catch(() => {
        })
      }
      // console.log('1231231ggg',this.tableList)
    },
    quickSearch(data) {
      this.quickData = data
      this.page.pageNum = 1
      this.filters = []
      this.quickQueryKeys.forEach(key => {
        console.log(key)
        const filter = {
          key,
          opt: 'LIKE',
          type: 'S',
          logic: 'or',
          value: this.quickData.searchData
        }
        if (filter.value) {
          this.filters.push(filter)
        }
      })
      this.quickQueryData()
    },
    quickQuerySettings(data) {
      this.isPowerSearch = !this.isPowerSearch
      if(!this.isPowerSearch){
        this.searchForm.whiteList=null
      }
      this.quickData = data
      // this.page.pageNum = 1
      // this.filters = []
      // this.settings.forEach(key => {
      //   console.log(key)
      //   const filter = {
      //     key,
      //     opt: 'LIKE',
      //     type: 'S',
      //     logic: 'and',
      //     value: this.quickData.searchData
      //   }
       
      //     this.filters.push(filter)
    
      // })
      // kongInfoSave(this.httpLL).then(res => {
      //   this.dialogVisible = false
      //   this.getData()
      // })
      // 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
        this.tableList.forEach(item => {
          item.updateon = getFormateDate(item.updateon, 'yyyy-MM-dd hh:mm:ss')
          this.tableList.isEnableWhiteList = item.isEnableWhiteList
        })
        console.log(this.tableList)
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
      // this.tableList.isEnableWhiteList=item.isEnableWhiteList
    },
    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;
  }
  .wihteBlack{
    margin-top: 8px;
  }
</style>
