<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>
              <el-table-column
                label="操作"
                width="120"
                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-document-copy" @click.native.prevent="userHandle('clone', scope.row, 'business')">
                   </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, 'business')">
                   </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>
      <el-dialog :close-on-click-modal="false" title="业务服务定义" :visible.sync="dialogFormVisible" :destroy-on-close="true" width="72%">
        <business-info v-model="dialogFormVisible" :currentRow="currentRow" ref="businessInfoBridge" @confirm="handleSubmit()" />
      </el-dialog>
      <debugSouce v-model="dialogDebug" :row="rows" @confirm="debugEnd" :type="cloneType" />
      <cloneSouce :type="cloneType" v-model="dialogClone" :row="rows" @confirm="cloneEnd" />
    </el-card>
  </div>
</template>

<script>
import BusinessInfo from './BusinessInfo'
import debugSouce from '@/components/debug'
import cloneSouce from '@/components/clone'
import { queryBusinessService, deleteBusinessService } 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: {
    BusinessInfo,
    cloneSouce,
    debugSouce,
    QuickQuery
  },
  data() {
    return {
      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']),
    handleDelete(item) {
      // var that = this
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableLoading = true
        deleteBusinessService(item.id).then((rt) => {
          this.tableLoading = false
          if (rt.status === '500') {
            this.$message.error(rt.message)
          } else {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 1000
            })
          }
          this.getDataCurrent()
          /*
              这个自动依赖检测在 2021/2/22 8f77183df86b8f289110018c51a57f693f2569b6 这个提交上被注释掉了，导致回报错，所以改写提示方式
            */
          // if (rt.status === '500') {
          //   this.$message({
          //     message: rt.message,
          //     type: 'error'
          //   })
          //   // 自动点击依赖检测，切只显示被依赖项
          //   that.$refs.businessInfoBridge.showDepend(false)
          // }
        }).catch(e => {
          this.tableLoading = false
          /*
                这个自动依赖检测在 2021/2/22 8f77183df86b8f289110018c51a57f693f2569b6 这个提交上被注释掉了，导致回报错，所以改写提示方式
              */
          // that.$refs.businessInfoBridge.showDepend(false)
          // const errData = e.data
          // this.$message({
          //   message: e.message,
          //   type: 'error'
          // })
          // -----------------
          console.log(e)
          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 (var l = 0; l < businessData.length; l++) {
              businessArr.push(businessData[l].name)
              // console.log(businessArr);
            }

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

            // console.log(arr);
            this.$message({
              message: `删除失败,正被以下资源依赖：${arr}、${businessArr}、${flowArr}`,
              type: 'error'
            })
          }
        })
      }).catch(() => {})
    },
    async getData() {
      this.tableLoading = true
      this.fullFilters[1].filters = this.filters
      const rt = await queryBusinessService({
        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
      queryBusinessService({
        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>
