<template>
  <div>
    <el-card>
      <div>
        项目:
        <el-select v-model="selectProjectId" placeholder="请选择项目" @change="selectChange" clearable>
          <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        模块:
        <el-select v-model="selectModelId" placeholder="请选择模块" @change="selectChangeModel" clearable>
          <el-option v-for="item in modelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-input v-model="queryModuleInfo.interfaceName" clearable placeholder="请输入接口名称" style="width: 300px;"></el-input>
        <el-button type="primary" style="margin-left:10px" icon="el-icon-search" @click="queryData">查询</el-button>
        <el-button type="primary" style="margin-left:10px" icon="el-icon-circle-plus" @click="addPage" v-permission="('auto:interface:add')">新增</el-button>
      </div>
      <el-table :data="interfaceList" border style="width: 100%;margin-top:20px">
        <el-table-column type='index' width="50px">
          <template slot-scope="scope">
            <span>{{  (queryModuleInfo.pageNum -1 ) * queryModuleInfo.pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="接口名称" width="250px"></el-table-column>
        <el-table-column prop="url" label="接口路径" width="350px"></el-table-column>
        <el-table-column prop="moduleName" label="所属模块" width="150px"></el-table-column>
        <el-table-column prop="projectName" label="所属项目" width="150px"></el-table-column>
        <!-- <el-table-column prop="method" label="请求方式" width="100px"></el-table-column> -->
        <!-- <el-table-column prop="paramType" label="参数类型" width="80px"></el-table-column> -->
        <el-table-column prop="createTime" label="创建时间" width="200px"></el-table-column>
        <el-table-column label="操作">
          <slot slot-scope="scope">
            <el-button type="warning" icon="el-icon-edit" @click="editInterfaceFrom(scope.row)" v-permission="('auto:interface:edit')">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="delInterfaceFrom(scope.row)" v-permission="('auto:interface:del')">删除</el-button>
          </slot>
        </el-table-column>
      </el-table>
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryModuleInfo.pageNum" :page-size="queryModuleInfo.pageSize" layout="total, prev, pager, next" :total="totalNum"></el-pagination>
    </el-card>
  </div>
</template>

<script>
import {
  getModulList,
  getProjectList,
  interfaceDetailList,
  delInterface
} from '@/api/getAotoInterface'
// 引入组件
import bus from '@/utils/bus'
export default {
  data() {
    return {
      queryModuleInfo: {
        pageNum: 1,
        pageSize: 10,
        projectId: '',
        moduleId: '',
        interfaceName: ''
      },
      queryModuleList: {
        pageNum: 1,
        pageSize: 100,
        projectId: '',
        moduleId: ''
      },
      totalNum: 0,
      projectList: [],
      modelList: [],
      // 下来项目id
      selectProjectId: '',
      // 下拉模块id
      selectModelId: '',
      interfaceName: '',
      interfaceList: [],
      interfaceDetailForm: {},
      delInterfaceParam: {
        interfaceId: ''
      }
    }
  },
  created() {
    this.getProjectList()
    this.getInterfaceDetailList()
    bus.$on('refresh', () => {
      this.getInterfaceDetailList()
    })
  },
  methods: {
    // 项目列表
    getProjectList() {
      getProjectList(this.queryModuleInfo).then((resp) => {
        this.projectList = resp.data.data.list
      })
    },

    // 下来框选中改变事件
    selectChange() {
      this.queryModuleList.projectId = this.selectProjectId
      this.queryModuleInfo.projectId = this.selectProjectId
      getModulList(this.queryModuleList).then((resp) => {
        this.modelList = resp.data.data.list
        console.log(this.modelList, '9999')
      })
    },
    // 模块下拉框改变事件
    selectChangeModel() {
      this.queryModuleList.moduleId = this.selectModelId
      this.queryModuleInfo.moduleId = this.selectModelId
    },
    // 查询方法
    queryData() {
      this.getInterfaceDetailList()
    },
    // 添加跳转页面
    addPage() {
      this.$router.push('AddInterface')
      this.$nextTick(function () {
        // DOM 现在更新了
        var row = '新增'
        bus.$emit('msg', row)
      })
    },
    // 获取接口列表
    getInterfaceDetailList() {
      interfaceDetailList(this.queryModuleInfo).then((resp) => {
        this.interfaceList = resp.data.data.list
        this.totalNum = resp.data.data.total
        console.log(this.interfaceList, '列表信息')
      })
    },
    handleSizeChange(newSize) {
      this.queryModuleInfo.pageSize = newSize
      this.getInterfaceDetailList()
    },
    handleCurrentChange(newPage) {
      this.queryModuleInfo.pageNum = newPage
      this.getInterfaceDetailList()
    },
    // 编辑接口方法
    editInterfaceFrom(row) {
      this.$router.push({ path: 'AddInterface' })
      // bus使用
      this.$nextTick(function () {
        // DOM 现在更新了
        bus.$emit('msg', row)
      })
    },
    // 对话框方法
    openMessage(message, confirmText, doit) {
      this.$messageBox
        .confirm(message, '确定', {
          cancelButtonText: '取消',
          confirmButtonText: confirmText,
          type: 'warning'
        })
        .then(() => {
          doit()
        })
        .catch(() => {})
    },
    // 删除接口方法
    delInterfaceFrom(row) {
      this.delInterfaceParam.interfaceId = row.id
      this.openMessage('您确定要删除吗？', '删除', () => {
        delInterface(this.delInterfaceParam)
          .then((resp) => {
            if (resp.data.data === true) {
              this.$message.success('删除成功！')
              this.getInterfaceDetailList()
            } else if (resp.data.data === false) {
              this.$message.error(resp.data.msg)
            }
          })
          .catch((error) => {
            this.$message({ type: 'error', message: error })
          })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-select {
  margin: 0 10px 0 5px;
}
</style>
