<template>
  <div class="module_content">
    <el-card shadow="never" class="commont-cart">
      <!-- <div class="project-name">{{projectName}}</div> -->
      <div class="project-name">
        <!-- <p>{{ projectName }} - 资源文件 - {{ title }}</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="showAdd = true" >上传</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="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="type" label="类型" align="center" show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="操作" width="100" 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, 'resource')">
                   </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" />
      <!-- <div class="right-content">
        <resource-info :currentRow="currentRow" @confirm="handleSubmit()" />
      </div> -->

      <!-- <el-dialog title="资源文件信息" :visible.sync="dialogFormVisible" :destroy-on-close="true" width="72%"> -->
      <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="dialogFormVisible" :destroy-on-close="true" width="72%">
        <resource-info v-model="dialogFormVisible" :currentRow="currentRow" @confirm="handleSubmit()" />
      </el-dialog>
      <AddFile v-model="showAdd" @confirm="getData" />
    </el-card>
  </div>
</template>

<script>
import cloneSouce from '@/components/clone'
import ResourceInfo from './ResourceInfo'
import AddFile from './AddFile'
import { listFiles, deleteResource } 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: {
    ResourceInfo,
    AddFile,
    cloneSouce,
    QuickQuery
  },
  props: ['type'],
  data() {
    return {
      showAdd: false,
      quickQueryKeys: ['name'],
      sort: {
        orderby: 'createon',
        sort: 'desc'
      },
      title: '',
      placeholder: '名称'
    }
  },
  computed: {
    ...mapGetters(['projectID', 'projectName'])
  },
  watch: {
    $route: {
      handler: function() {
        this.getTitle()
      },
      immediate: true
    },
    type: {
      handler: function(val) {
        console.log(val)
        if (val) {
          this.logic = 'or'
          if (!this.$route.query.type) {
            this.$route.query.type = val.split('=')[1] || 'wsdl'
          } else {
            this.$route.query.type = val.split('=')[1] || this.$route.query.type
          }
          this.fullFilters = [{ logic: 'and', filters: [{ key: 'project_id', value: this.projectID }, { key: 'type', value: this.$route.query.type || val.split('=')[1] }] }, { logic: 'and', filters: [] }]
          this.getTitle()
          if (val.split('=')[1]) {
            this.getData()
          }
        }
      },
      immediate: true
    }
  },
  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 }, { key: 'type', value: this.$route.query.type || this.type.split('=')[1] }] }, { logic: 'and', filters: [] }]
    this.getTitle()
  },
  methods: {
    ...mapMutations(['setProjectID', 'setProjectName']),
    getTitle() {
      const that = this
      if (that.$route.query.type === 'wsdl') {
        that.title = 'WSDL文档'
      } else if (that.$route.query.type === 'xslt') {
        that.title = 'XSL转换'
      } else if (that.$route.query.type === 'jslt') {
        that.title = 'JSTL'
      } else if (that.$route.query.type === 'sql') {
        that.title = 'SQL脚本'
      } else if (that.$route.query.type === 'jsd') {
        that.title = 'JSON Schema'
      } else if (that.$route.query.type === 'xsd') {
        that.title = 'XML Schema'
      }
    },
    handleDelete(item) {
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableLoading = true
        deleteResource(item.id).then((rt) => {
          this.tableLoading = false
          if(rt.status=='200'){
            this.$message({
            message: '删除成功',
            type: 'success'
          })
          } else{
            this.$message({
            message: rt.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);
            this.$message({
              message: `删除失败,正被以下资源依赖：${arr}、${businessArr}、${flowArr}`,
              type: 'error'
            })
          }
        })
      }).catch(() => { })
    },
    async getData() {
      this.tableLoading = true
      this.fullFilters[1].filters = this.filters
      const rt = await listFiles({
        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
      listFiles({
        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 lang="css" scoped>
.module_content{
  padding: 10px 10px;
}
</style>

<style type="text/scss" lang="scss" scoped>
.upload {
  /deep/ .uploader {
    .el-upload-list {
      display: none;
    }
  }
}
</style>
