<template>
  <div>
    <el-form ref="interfaceForm" :rules="rules" :model="interfaceForm" label-width="100px">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="基本信息" name="1">
          <el-row>
            <el-col :span="8">
              <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="8">
              <el-form-item label="所属模块:" prop="modelName" style="margin-left:-200px">
                <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="8">
              <el-form-item label="请求方式:" prop="method" style="margin-left:-350px">
                <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="8">
              <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="8">
              <el-form-item label="参数类型:" prop="reqType" style="margin-left:-200px">
                <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="请求头Headers" name="2">
          <el-button type="success" round @click="AddHeaderListRow()">添加行</el-button>
          <!-- Header参数添加 -->
          <el-table :data="headersList" border style="width:95%;margin-top: 15px;">
            <el-table-column label="参数名称" width="277">
              <template slot-scope="scope">
                <el-input v-model="scope.row.paramsName">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="参数值" width="300">
              <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="300">
              <template slot-scope="scope">
                <el-input v-model="scope.row.examples"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="备注" width="320">
              <template slot-scope="scope">
                <el-input v-model="scope.row.remarks"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="220">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="headerDelete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
        <!-- 参数添加 -->
        <el-collapse-item title="请求参数" name="3">
          <el-button type="success" round @click="AddParamsListRow()">添加行</el-button>
          <el-table :data="paramList" border style="width:95%;margin-top: 15px;">
            <el-table-column label="参数名称" width="277">
              <template slot-scope="scope">
                <el-input v-model="scope.row.paramsName">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="参数值" width="300">
              <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="300">
              <template slot-scope="scope">
                <el-input v-model="scope.row.examples"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="备注" width="320">
              <template slot-scope="scope">
                <el-input v-model="scope.row.remarks"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="220">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="paramsDelete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
        <!-- 响应参数添加 -->
        <el-collapse-item title="响应参数" name="4">
          <el-button type="success" round @click="AddResponseListRow()">添加行</el-button>
          <el-table :data="responseList" border style="width:95%;margin-top: 15px;">
            <el-table-column label="参数名称" width="277">
              <template slot-scope="scope">
                <el-input v-model="scope.row.paramsName">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="参数值" width="300">
              <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="300">
              <template slot-scope="scope">
                <el-input v-model="scope.row.examples"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="备注" width="320">
              <template slot-scope="scope">
                <el-input v-model="scope.row.remarks"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="220">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="responseDelete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <div style="margin-left:700px;margin-top:20px">
      <el-button type="primary" @click="addInterfaceFrom">确 定</el-button>
    </div>

  </div>
</template>

<script>
import { getModulList, addInterface } from '@/api/getAotoInterface'
export default {
  data() {
    return {
      queryModuleInfo: {
        pageNum: 1,
        pageSize: 10
      },
      activeNames: '1',
      interfaceForm: {
        name: '',
        moduleId: '',
        method: '',
        url: '',
        paramType: '',
        headers: '',
        paramTemplate: '',
        responseTemplate: ''
      },
      headersList: [],
      paramList: [],
      responseList: [],
      modelList: [],
      rules: {
        name: [
          {
            required: true,
            message: '接口名称不能为空！',
            trigger: 'blur'
          }
        ],
        modelName: [
          {
            required: true,
            message: '接口名称不能为空！',
            trigger: 'blur'
          }
        ],
        method: [
          {
            required: true,
            message: '接口名称不能为空！',
            trigger: 'blur'
          }
        ],
        url: [
          {
            required: true,
            message: '接口名称不能为空！',
            trigger: 'blur'
          }
        ],
        reqType: [
          {
            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'
        }
      ],
      new_header: ''
    }
  },
  watch: {
    $route(to, from) {
      console.log('参数信息', to)
      if (to.params !== '{}') {
        this.interfaceForm.name = to.params.row.name
        this.interfaceForm.moduleId = to.params.row.moduleName
        this.interfaceForm.method = to.params.row.method
        this.interfaceForm.url = to.params.row.url
        this.interfaceForm.paramType = to.params.row.paramType
        this.headersList = JSON.parse(to.params.row.headers)
        this.paramList = JSON.parse(to.params.row.paramTemplate)
        this.responseList = JSON.parse(to.params.row.responseTemplate)
        console.log('111', JSON.parse(to.params.row.headers))
        // for (var i in this.headersList) {
        //   console.log('555', i)
        //   console.log('666', this.headersList[i])
        // }
      }
    }
  },
  created() {
    this.getModelList()
  },
  methods: {
    // 接受参数信息
    getParamsMes() {},
    // 模块列表
    getModelList() {
      getModulList(this.queryModuleInfo).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
      }
    },
    // 保存接口信息
    addInterfaceFrom() {
      this.interfaceForm.headers = JSON.stringify(this.headersList)
      this.interfaceForm.paramTemplate = JSON.stringify(this.paramList)
      this.interfaceForm.responseTemplate = JSON.stringify(this.responseList)
      addInterface(this.interfaceForm).then((resp) => {
        console.log('信息', this.interfaceForm)
        if (resp.data.data === true) {
          this.$message.success('添加成功！')
          // 返回列表页
          this.$router.push('InterfaceDetail')
          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)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-collapse-item__header {
  padding-left: 5px;
  background: rgb(230, 235, 241);
  border-bottom: solid white 1px;
  font-weight: bolder;
}
</style>
