<template>
  <div>
    <el-form ref="interfaceFormRef" :rules="rules" :model="interfaceForm">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1" title="基本信息">
          <el-row>
            <el-col :span="5">
              <el-form-item label="接口名称:" prop="name">
                <el-input v-model="interfaceForm.name" style="width:200px"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="所属模块:" prop="moduleId">
                <el-select v-model="interfaceForm.moduleId" placeholder="请选择模块">
                  <el-option v-for="item in modelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="请求方式:" prop="method">
                <el-select v-model="interfaceForm.method" placeholder="请选择">
                  <el-option v-for="item in optionMethod" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <el-form-item label="请求路径:" prop="url">
                <el-input v-model="interfaceForm.url" style="width:200px"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="参数类型:" prop="paramType">
                <el-select v-model="interfaceForm.paramType" placeholder="请选择参数类型">
                  <el-option v-for="item in optionReqType" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
        <!-- Headers添加 -->
        <el-collapse-item title="请求头" name="2">
          <!-- Header参数添加 -->
          <el-table :data="headersList" border style="width:100%;margin-top:15px;">
            <el-table-column label="参数名称" width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.paramsName">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="参数值" width="350">
              <template slot-scope="scope">
                <el-input v-model="scope.row.paramsValue">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="是否必填" width="150" style="text-align:center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.isRequired" active-color="#13ce66" inactive-color="#A9A9A9" active-text="是" inactive-text="否" @change="changeState($event,'1')"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="备注" width="250">
              <template slot-scope="scope">
                <el-input v-model="scope.row.remarks"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="headerDelete(scope.$index)" >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="primary" size="mini" plain class="el-icon-circle-plus" style="margin-top:10px" @click="AddHeaderListRow()">添加行</el-button>
        </el-collapse-item>
        <!-- 参数添加 -->
        <el-collapse-item title="请求参数" name="3">
          <el-table :data="paramList" border style="width:100%;margin-top: 15px;">
            <el-table-column label="参数名称" width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.paramsName">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="参数值" width="350">
              <template slot-scope="scope">
                <el-input v-model="scope.row.paramsValue">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="是否必填" width="150" style="text-align:center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.isRequired" active-color="#13ce66" inactive-color="#A9A9A9" active-text="是" inactive-text="否" @change="changeState($event,'2')"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="备注" width="250">
              <template slot-scope="scope">
                <el-input v-model="scope.row.remarks"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="paramsDelete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="primary" size="mini" plain class="el-icon-circle-plus" style="margin-top:10px" @click="AddParamsListRow()">添加行</el-button>
        </el-collapse-item>
        <!-- 响应参数添加 -->
        <el-collapse-item title="响应参数" name="4">
          <el-table :data="responseList" border style="width:100%;margin-top: 15px;">
            <el-table-column label="参数名称" width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.paramsName">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="参数值" width="350">
              <template slot-scope="scope">
                <el-input v-model="scope.row.paramsValue">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="是否必填" width="150" style="text-align:center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.isRequired" active-color="#13ce66" inactive-color="#A9A9A9" active-text="是" inactive-text="否" @change="changeState($event,'3')"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="备注" width="250">
              <template slot-scope="scope">
                <el-input v-model="scope.row.remarks"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="responseDelete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="primary" size="mini" plain class="el-icon-circle-plus" style="mragin-top:10px" @click="AddResponseListRow()">添加行</el-button>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <div style="margin-left:800px;margin-top:20px">
      <el-button @click="cancelInterfaceFrom">取 消</el-button>
      <el-button type="primary" @click="addInterfaceFrom">确 定</el-button>
    </div>

  </div>
</template>

<script>
import {
  getModulList,
  addInterface,
  editInterface
} from '@/api/getAotoInterface'
export default {
  data() {
    return {
      queryModuleInfo: {
        pageNum: 1,
        pageSize: 10
      },
      activeNames: ['1', '2', '3', '4'],
      interfaceForm: {
        id: '',
        name: '',
        moduleId: '',
        method: '',
        url: '',
        paramType: '',
        headers: '',
        paramTemplate: '',
        responseTemplate: ''
      },
      headersList: [],
      paramList: [],
      responseList: [],
      modelList: [],
      rules: {
        name: [
          {
            required: true,
            message: '接口名称不能为空！',
            trigger: 'blur'
          }
        ],
        moduleId: [
          {
            required: true,
            message: '接口名称不能为空！',
            trigger: 'blur'
          }
        ],
        method: [
          {
            required: true,
            message: '接口名称不能为空！',
            trigger: 'blur'
          }
        ],
        url: [
          {
            required: true,
            message: '接口名称不能为空！',
            trigger: 'blur'
          }
        ],
        paramType: [
          {
            required: true,
            message: '接口名称不能为空！',
            trigger: 'blur'
          }
        ]
      },
      optionMethod: [
        {
          id: 'get',
          name: 'get'
        },
        {
          id: 'post',
          name: 'post'
        }
      ],
      optionReqType: [
        {
          id: 'params',
          name: 'params'
        },
        {
          id: 'json',
          name: 'json'
        },
        {
          id: 'form',
          name: 'form'
        }
      ],
      moduleInfo: {
        pageNum: 1,
        pageSize: 100
      }
    }
  },
  created() {
    this.$bus.$on('msg', (row) => {
      if (row !== null) {
        if (row === '新增') {
          this.interfaceForm.id = ''
          this.interfaceForm.name = ''
          this.interfaceForm.moduleId = ''
          this.interfaceForm.method = ''
          this.interfaceForm.url = ''
          this.interfaceForm.paramType = ''
          this.headersList = []
          this.paramList = []
          this.responseList = []
        } else {
          this.interfaceForm.id = row.id
          this.interfaceForm.name = row.name
          this.interfaceForm.moduleId = row.moduleId
          this.interfaceForm.method = row.method
          this.interfaceForm.url = row.url
          this.interfaceForm.paramType = row.paramType
          this.headersList = JSON.parse(row.headers)
          this.paramList = JSON.parse(row.paramTemplate)
          this.responseList = JSON.parse(row.responseTemplate)
        }
      }
    })
    this.getModelList()
  },
  methods: {
    // 接受参数信息
    getParamsMes() {},
    // 模块列表
    getModelList() {
      getModulList(this.moduleInfo).then((resp) => {
        this.modelList = resp.data.data.list
      })
    },
    // 添加行信息
    AddHeaderListRow() {
      this.headersList.push({
        paramsName: '',
        paramsValue: '',
        isRequired: true,
        examples: '',
        remarks: ''
      })
    },
    AddParamsListRow() {
      this.paramList.push({
        paramsName: '',
        paramsValue: '',
        isRequired: true,
        examples: '',
        remarks: ''
      })
    },
    AddResponseListRow() {
      this.responseList.push({
        paramsName: '',
        paramsValue: '',
        isRequired: true,
        examples: '',
        remarks: ''
      })
    },
    // 删除header行信息
    headerDelete(index) {
      this.headersList.splice(index, 1)
    },
    // 删除参数行
    paramsDelete(index) {
      this.paramList.splice(index, 1)
    },
    // 删除响应参数
    responseDelete(index) {
      this.responseList.splice(index, 1)
    },
    // 状态按钮
    changeState(e, str) {
      if (e === true && str === '1') {
        this.headersList.isRequired = e
      } else {
        this.headersList.isRequired = e
      }
      if (e === true && str === '2') {
        this.paramList.isRequired = e
      } else {
        this.paramList.isRequired = e
      }
      if (e === true && str === '3') {
        this.responseList.isRequired = e
      } else {
        this.responseList.isRequired = e
      }
    },
    // 刷新列表
    sendResh() {
      // bus使用
      this.$nextTick(function () {
        // DOM 现在更新了
        this.$bus.$emit('refresh')
      })
    },
    // 保存接口信息
    addInterfaceFrom() {
      this.interfaceForm.headers = JSON.stringify(this.headersList)
      this.interfaceForm.paramTemplate = JSON.stringify(this.paramList)
      this.interfaceForm.responseTemplate = JSON.stringify(this.responseList)
      this.$refs.interfaceFormRef.validate((valid) => {
        if (!valid) {
          return false
        } else {
          if (this.interfaceForm.id) {
            // 编辑接口
            editInterface(this.interfaceForm).then((resp) => {
              if (resp.data.data === true) {
                this.$message.success('修改成功！')
                this.$router.push('InterfaceList')
                // 刷新列表页
                this.sendResh()
              } else {
                this.$message.error(resp.data.msg)
              }
            })
          } else {
            console.log('接口参数', this.interfaceForm)
            addInterface(this.interfaceForm).then((resp) => {
              if (resp.data.data === true) {
                this.$message.success('添加成功！')
                // 返回列表页
                this.$router.push('InterfaceList')
                // 刷新列表页
                this.sendResh()
                this.interfaceForm.name = ''
                this.interfaceForm.moduleId = ''
                this.interfaceForm.method = ''
                this.interfaceForm.url = ''
                this.interfaceForm.paramType = ''
                this.interfaceForm.headers = ''
                this.interfaceForm.paramTemplate = ''
                this.interfaceForm.responseTemplate = ''
              } else {
                this.$message.error(resp.data.msg)
              }
            })
          }
        }
      })
    },
    // 取消按钮
    cancelInterfaceFrom() {
      // 返回列表页
      this.$router.push('InterfaceList')
    }
  }
}
</script>

<style lang="less" scoped>
</style>
