<template>
  <div class="module_content">
    <el-card shadow="never" class="commont-cart">
      <!-- <div class="project-name">{{projectName}}</div> -->
      <div class="project-name">
        <!-- <p>{{projectName}} - 代理服务</p> -->
      </div>
      <el-form ref="searchForm" :model="searchForm" @submit.native.prevent>
        <div class="left-contents">
          <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="userHandle('add')" >添加</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
              @current-change="handleCurrentChange"
              style="width: 100%; margin: 15px 0">
              <el-table-column
                type="index"
                label="序号"
                width="50"
                align="center">
              </el-table-column>
              <el-table-column
                prop="name"
                label="名称"
                align="center"
                show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-link class="table-link" @click.native.prevent="userHandle('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="connectorType"
                label="类型"
                align="center"
                
                show-overflow-tooltip>
              </el-table-column>
              <!-- //publishStatus -->
              <el-table-column
                prop="publishStatus"
                label="状态"
                align="center"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>
                      {{scope.row.status}}
                    </span>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="150"
                align="center"
                show-overflow-tooltip>
                <template slot-scope="scope">
                  <!-- <el-tooltip class="item" effect="dark" content="历史" placement="top">
                    <el-button class="icon-button" type="text" icon="el-icon-tickets" @click="querys(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-document-copy" @click.native.prevent="userHandle('clone', scope.row, 'agency')">
                   </el-button>
                 </el-tooltip>
                 <el-tooltip effect="dark" content="debug" :enterable="false" placement="top" >
                   <el-button class="icon-button" type="text" icon="el-icon-more" @click.native.prevent="userHandle('debug', scope.row, 'proxy')">
                   </el-button>
                  </el-tooltip>
                 <el-tooltip effect="dark" content="编辑" :enterable="false" placement="top">
                   <el-button class="icon-button" type="text" icon="el-icon-edit-outline" @click.native.prevent="userHandle('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.native.prevent="handleDelete(scope.row)">
                    </el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              :page-size="page.pageSize"
              :current-page.sync="page.pageNum"
              background
              @current-change="getDataCurrent()"
              :total="page.total"
            />
          </div>
        </div>
      </el-form>
      <cloneSouce :type="cloneType" v-model="dialogClone" :row="rows" @confirm="cloneEnd" />
      <debugSouce v-model="dialogDebug" :row="rows" @confirm="debugEnd" :type="cloneType" />
      <oldDialog :visibles="oldDialog" :rowData="oldData" @confirm="closeOld" />
      <el-dialog :close-on-click-modal="false" title="代理服务定义" :visible.sync="dialogFormVisible" :destroy-on-close="true" width="72%">
        <agency-info v-model="dialogFormVisible" :currentRow="currentRow" @confirm="handleSubmit()" />
      </el-dialog>
    </el-card>

  </div>
</template>

<script>
import oldDialog from '@/components/clone/versionOld.vue'
import cloneSouce from '@/components/clone'
import debugSouce from '@/components/debug'
import AgencyInfo from './AgencyInfo'
import { getFormateDate } from '@/utils/common'
import { versionSave, versionBackup, versionQuery } from '@/api/system_manage'
import { queryProxyService, deleteProxyService } from '@/api/esb_service'
import EsbServiceListMixins from '@/mixins/esb_service_list_mixins'// 列表操作需要依赖
import { createNamespacedHelpers } from 'vuex'
import QuickQuery from '@/components/quickquery/QuickQuery'
const { mapGetters, mapMutations } = createNamespacedHelpers('app')

export default {
  mixins: [EsbServiceListMixins],
  components: {
    AgencyInfo,
    cloneSouce,
    oldDialog,
    debugSouce,
    QuickQuery
  },
  data() {
    return {
      oldDialog: false,
      oldData: [],
      quickQueryKeys: ['name', 'connectorType'],
      sort: {
        orderby: 'createon',
        sort: 'desc'
      },
      placeholder: '名称、类型'
    }
  },
  computed: {
    ...mapGetters(['projectID', 'projectName'])
  },
  created() {
    this.setProjectID(localStorage.getItem('projectID'))
    this.setProjectName(localStorage.getItem('projectName'))
    this.logic = 'or'
    this.fullFilters = [{ logic: 'and', filters: [{ key: 'project_id', value: this.projectID }] }, { logic: 'and', filters: [] }]
  },
  methods: {
    ...mapMutations(['setProjectID', 'setProjectName']),
    closeOld() {
      this.oldDialog = false
    },
    querys(data){
      console.log(data,'1111199999')
      this.oldDialog=true
      const filters = [
        {
          key: 'proxy_service_id',
          opt: "LIKE",
          type: "S",
          value: data.id,
        }
      ]
      versionQuery({
        filters: filters,
        orderby: "updateon",
        pageNum: 1,
        pageSize: 1000,
        sort: "desc"
      }).then(res => {
        res.data.list.forEach((item) => {
            item.updateon = getFormateDate(item.updateon, 'yyyy-MM-dd hh:mm:ss')
          })
        this.oldData = res.data.list
        
      })
    },
    handleDelete(item) {
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableLoading = true
        deleteProxyService(item.id).then((rt) => {
          if(rt.status==200){
            this.tableLoading = false
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          }
          if(rt.status!=200){
            this.$message({
              message: `删除失败,资源依被赖。`,
              type: 'error'
            })
          }
          this.getDataCurrent()
        }).catch(e => {
          this.tableLoading = false
          if (e.status === '500') {
            const errData = e
            // console.log(errData.data[0].PROXY[0].name);
            const proxyData = errData.data[0].PROXY || []
            const arr = []
            for (var i = 0; i < proxyData.length; i++) {
              arr.push(proxyData[i].name)
              // console.log(arr);
            }
            const businessData = errData.data[0].BUSINESS || []
            const businessArr = []
            for (let i = 0; i < businessData.length; i++) {
              businessArr.push(businessData[i].name)
              // console.log(businessArr);
            }

            const flowData = errData.data[0].FLOW || []
            const flowArr = []
            for (let i = 0; i < flowData.length; i++) {
              flowArr.push(flowData[i].name)
              // console.log(flowArr);
            }

            // console.log(arr);
          
          }
        })
      }).catch(() => {})
    },
    async getData() {
      this.tableLoading = true
      this.fullFilters[1].filters = this.filters
      const rt = await queryProxyService({
        logic: this.logic,
        fullFilters: this.fullFilters,
        ...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 || []
        this.page.total = rt.data.total
        return Promise.resolve(rt)
      } else {
        this.tableLoading = false
      }
    },
    quickQueryData() {
      this.tableLoading = true
      this.fullFilters[1].filters = this.filters
      queryProxyService({
        logic: this.logic,
        fullFilters: this.fullFilters,
        ...this.sort,
        ...this.page
      }).then(rt => {
        if (rt.status === '200') {
          this.tableLoading = false
          this.tableList = rt.data.list || []
          this.page.total = rt.data.total
          return Promise.resolve(rt)
        } else {
          this.tableLoading = false
        }
      }).catch(e => {
        this.tableLoading = false
        return Promise.reject(e)
      })
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
.module_content{
  padding: 10px 10px;
}
</style>
