<template>
  <div>
    <easy-data-list ref="EasyDataList" :data-source-name="dataSourceName" :action-props="{showExportBtn:false}" :tableProps="{operateFixed: 'right'}">
      <template v-slot:tableSlot="{row, $index}">
        <div class="operation" data-width="200">
          <el-button size="mini" type="text" @click="$refs.EasyDataList.handlerEdit(row, $index)">编辑</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button size="mini" type="text" @click="copyInterface(row)">复制</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-dropdown trigger="click">
          <span class="el-dropdown-link">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="isDepend(row)" @click.native="showDepend('接口依赖',row)">接口依赖
              </el-dropdown-item>
              <el-dropdown-item v-if="isRepeat(row)" @click.native="showRepeat('接口循环',row)">接口循环
              </el-dropdown-item>
              <el-dropdown-item v-if="isCustom(row)" @click.native="showMessage('报文配置',row)">报文配置
              </el-dropdown-item>
              <el-dropdown-item @click.native="showParam('接口参数配置',row)">接口参数配置</el-dropdown-item>
              <el-dropdown-item @click.native="showMock('Mock',row)">Mock</el-dropdown-item>
              <el-dropdown-item @click.native="showFee('计费配置',row)">计费配置</el-dropdown-item>
              <el-dropdown-item @click.native="exportConfig(row)">导出配置</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-divider direction="vertical"></el-divider>
          <el-popconfirm :title="apiName(row)" @confirm="deleteInterface(row)">
            <el-button slot="reference" size="small" style="color: red" type="text">删除</el-button>
          </el-popconfirm>
        </div>
      </template>
      <template v-slot:extra>
        <el-button plain size="small" type="primary" @click="showVariable">接口变量</el-button>
        <el-button plain size="small" type="primary" @click="showCell">接口调用</el-button>
        <el-upload :file-list="fileList" :http-request="importInterface" :limit="1" :multiple="false"
                   :show-file-list="false" action="" style="display: inline-block;margin: 0 10px">
          <el-button :loading="operLoading" icon="el-icon-upload2" plain size="small" type="primary">导入</el-button>
        </el-upload>
        <!--        <el-button plain size="small" type="primary">Token管理</el-button>-->
      </template>
      <!--      <template v-slot:rowKeySlot>-->
      <!--        <a @click="rowKeyClick()">哈哈</a>-->
      <!--      </template>-->
    </easy-data-list>
    <InterfaceMessage ref="InterfaceMessage"></InterfaceMessage>
    <InterfaceParam ref="InterfaceParam"></InterfaceParam>
    <InterfaceMock ref="InterfaceMock"></InterfaceMock>
    <InterfaceFee ref="InterfaceFee"></InterfaceFee>
    <InterfaceVariable ref="InterfaceVariable"></InterfaceVariable>
    <InterfaceCall ref="InterfaceCall"></InterfaceCall>
    <InterfaceDepend ref="InterfaceDepend"></InterfaceDepend>
    <InterfaceRepeat ref="InterfaceRepeat"></InterfaceRepeat>

  </div>
</template>

<script lang="jsx">
import InterfaceMessage from "./components/InterfaceMessage";
import InterfaceParam from "./components/InterfaceParam";
import InterfaceMock from "./components/InterfaceMock";
import InterfaceFee from "./components/InterfaceFee";
import InterfaceVariable from "./components/InterfaceVariable";
import InterfaceCall from "./components/InterfaceCall";
import InterfaceDepend from "./components/InterfaceDepend";
import InterfaceRepeat from "./components/InterfaceRepeat";
import {copyInterface, deleteInterface, exportFile, importInterface} from '../../../api/interface'

export default {
  name: "Interface",
  components: {
    InterfaceMessage,
    InterfaceParam,
    InterfaceMock,
    InterfaceFee,
    InterfaceVariable,
    InterfaceCall,
    InterfaceDepend,
    InterfaceRepeat
  },
  data() {
    return {
      dataSourceName: 'interface_info',
      title: '',
      row: {},
      fileList: [],
      operLoading: false,
    }
  },
  computed: {
    isDepend() {
      return ({key, keyInfo, keyInfoObject}) => {
        let data = keyInfoObject ? keyInfoObject : keyInfo ? keyInfo : key
        return data.hasOwnProperty('is_depend') && data.is_depend.value === '1'
      }
    },
    isRepeat() {
      return ({key, keyInfo, keyInfoObject}) => {
        let data = keyInfoObject ? keyInfoObject : keyInfo ? keyInfo : key
        return data.hasOwnProperty('is_repeat') && data.is_repeat.value === 'true'
      }
    },
    isCustom() {
      return ({key, keyInfo, keyInfoObject}) => {
        let data = keyInfoObject ? keyInfoObject : keyInfo ? keyInfo : key
        return data.hasOwnProperty('is_custom') && data.is_custom !== 'customize'
      }
    }
  },
  methods: {
    importInterface(param) {
      let reader = new FileReader(); //新建一个FileReader
      reader.readAsText(param.file, "UTF-8"); //读取文件
      reader.onload = (evt) => { //读取完文件之后会回来这里
        this.operLoading = true;
        let fileString = evt.target.result; // 读取文件内容
        importInterface(fileString).then((resp) => {
          this.$message.success(resp.data || "操作成功!")
          this.fileList = []
          this.loadData()
        }).finally(() => {
          this.operLoading = false;
        })
      }
    },
    copyInterface(row) {
      this.$refs.EasyDataList.initLoading = true
      const param = {apiId: row.id, apiName: row.keyInfoObject.api_name}
      copyInterface(param).then((resp) => {
        if (resp.success) {
          this.$message.success(resp.msg || "操作成功!")
          this.loadData()
        }
      }).finally(() => {
        this.$refs.EasyDataList.initLoading = false
      })
    },
    deleteInterface(row) {
      this.$refs.EasyDataList.initLoading = true
      const param = {apiId: row.id, apiName: row.keyInfoObject.api_name}
      deleteInterface(param).then((resp) => {
        if (resp.success) {
          this.$message.success(resp.msg || "操作成功!")
          this.loadData()
        }
      }).finally(() => {
        this.$refs.EasyDataList.initLoading = false
      })
    },
    loadData() {
      this.$refs.EasyDataList.loadTableData()
    },
    showDepend(title, row) {
      this.$refs.InterfaceDepend.show(row, title)
    },
    showRepeat(title, row) {
      this.$refs.InterfaceRepeat.show(row, title)
    },
    showMessage(title, row) {
      this.$refs.InterfaceMessage.show(row, title)
    },
    showParam(title, row) {
      this.$refs.InterfaceParam.show(row, title)
    },
    showFee(title, row) {
      this.$refs.InterfaceFee.show(row, title)
    },
    showMock(title, row) {
      this.$refs.InterfaceMock.show(row, title)
    },
    showVariable() {
      this.$refs.InterfaceVariable.show()
    },
    showCell() {
      this.$refs.InterfaceCall.show()
    },
    exportConfig(record) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
      });
      let apiIds = []
      apiIds.push(record.id)
      let fileName = "接口_" + record.keyInfo.api_name
      exportFile(apiIds).then((res) => {
        if (res.success) {
          let url = window.URL.createObjectURL(new Blob([res.data], {type: 'application/json'}))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName + '.tex')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link); //下载完成移除元素
          window.URL.revokeObjectURL(url); //释放掉blob对象
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      }).finally(() => {
        loading.close()
      })
    },
    apiName({key, keyInfo, keyInfoObject}) {
      let data = keyInfoObject ? keyInfoObject : keyInfo ? keyInfo : key
      let name = data.hasOwnProperty('api_name') ? data.api_name : ""
      return `确定删除[ ${name} ]该接口吗？`
    }
  }
}
</script>

<style scoped>

</style>
