<template>
  <div class="module_content">
    <el-card shadow="never" class="commont-cart">
      <!-- <div class="project-name">{{projectName}}</div> -->
      <div class="project-name">
        <!-- {{projectName}} -  -->
        <!-- <p>适配器</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"
              size="mini">
              <el-table-column type="index" label="序号" width="50" align="center">
              </el-table-column>
              <el-table-column prop="name" label="名称" align="left" 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>
              <el-table-column label="操作" width="60" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <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>
      <!-- <div class="right-content">
        <connector-info :currentRow="currentRow" @confirm="handleSubmit()" />
      </div> -->
      <el-dialog :close-on-click-modal="false" title="适配器定义" :visible.sync="dialogFormVisible" :destroy-on-close="true" width="72%">
        <connector-info v-model="dialogFormVisible" :currentRow="currentRow" @confirm="handleSubmit()" />
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import ConnectorInfo from './ConnectorInfo'
// import Upload from '@/components/upload/Upload'
import { queryConnector, deleteConnector } from '@/api/esb_service'
import EsbServiceListMixins from '@/mixins/esb_service_list_mixins'
import { checkFormData } from '@/utils/common'
import { createNamespacedHelpers } from 'vuex'
import QuickQuery from '@/components/quickquery/QuickQuery'

const { mapGetters, mapMutations } = createNamespacedHelpers('app')
export default {
  mixins: [EsbServiceListMixins],
  components: {
    ConnectorInfo,
    QuickQuery
  },
  data() {
    return {
      uploadOptions: {
        name: 'file',
        type: 'icon',
        limit: 100000000
      },
      fileList: [],
      quickQueryKeys: ['name', 'connectorType'],
      sort: {
        orderby: 'createon',
        sort: 'desc'
      },
      placeholder: '名称、类型'
    }
  },
  computed: {
    ...mapGetters(['projectID', 'projectName'])
  },
  watch: {},
  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']),
    handleSuccess(res, fileList) {
      this.getDataCurrent()
    },
    handleDelete(item) {
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableLoading = true
        deleteConnector(item.id).then((rt) => {
          this.tableLoading = false
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getDataCurrent()
        }).catch(e => {
          this.tableLoading = false
          console.log('eeeee', e)
          const data = e.data || []
          const hint = [
            { fieName: '名称', field: 'name' },
            { fieName: '说明', field: 'description' },
            { fieName: 'Connector类型', field: 'connectorType' },
            { fieName: 'wsdl', field: 'wsdl' }
          ]
          checkFormData(data, hint)
          if (e.status === '500') {
            const errData = e.data
            const businessData = errData[0].BUSINESS
            const businessDataArr = []
            const proxyData = errData[0].PROXY
            const proxyDataArr = []
            if (errData[0].BUSINESS) {
              // 删除时依赖 业务服务
              for (let i = 0; i < businessData.length; i++) {
                businessDataArr.push(businessData[i].name)
              }
            }
            if (errData[0].PROXY) {
              // 删除时依赖 代理服务
              for (let j = 0; j < proxyData.length; j++) {
                proxyDataArr.push(proxyData[j].name)
              }
            }
            this.$message({
              message: `删除失败,正被以下资源依赖${businessDataArr}、${proxyDataArr}`,
              type: 'error'
            })
          }
        })
      }).catch(() => {
      })
    },
    async getData() {
      this.tableLoading = true
      if (this.$route.fullPath === '/system_manage/global_configuration/connector') {
        this.fullFilters[0] = { logic: 'and', filters: [] }
      }
      this.fullFilters[1].filters = this.filters
      const rt = await queryConnector({
        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
      }
    },
    getDataCurrent() {
      this.getData().then((rt) => {
        if (this.tableList.length > 0) {
          this.handleCurrentChange(this.tableList[0])
        }
      })
    },
    quickQueryData() {
      this.tableLoading = true
      this.fullFilters[1].filters = this.filters
      if (this.$route.fullPath === '/system_manage/global_configuration/connector') {
        this.fullFilters[0] = { logic: 'and', filters: [] }
      }
      queryConnector({
        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;
}
  .upload {
    /deep/ .uploader {
      .el-upload-list {
        display: none;
      }
    }
  }
</style>
