<template>
  <div>
    <el-form ref="interfaceFormRef" :rules="rules" :model="interfaceForm" style="margin-left:20px">
      <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>
        <el-button type="primary" @click="DialogVisible=true" style="margin-top:10px">导 入</el-button>
        <el-tooltip class="item" effect="light" content="将CURL中的请求头和请求参数解析，并自动填充到下方的请求头和请求参数" placement="right-start">
          <i class="iconfont icon-questionmarko" />
        </el-tooltip>

        <!-- Headers添加 -->
        <el-collapse-item title="请求头" name="2">
          <!-- Header参数添加 -->
          <el-table :data="headersList" border style="width:95%;margin-top:15px;">
            <el-table-column label="参数名称" width="350">
              <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="否" :active-value="true" :inactive-value="false"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="备注">
              <template slot-scope="scope">
                <el-input v-model="scope.row.remarks"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <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:95%;margin-top: 15px;">
            <el-table-column label="参数名称" width="350">
              <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="否" :active-value="true" :inactive-value="false"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="备注">
              <template slot-scope="scope">
                <el-input v-model="scope.row.remarks"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作"  width="150">
              <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:95%;margin-top: 15px;">
            <el-table-column label="参数名称" width="350">
              <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="否" :active-value="true" :inactive-value="false"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="备注" >
              <template slot-scope="scope">
                <el-input v-model="scope.row.remarks"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <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>

    <el-dialog title="解析curl" :visible.sync="DialogVisible" @close="closeDialog" width="40%">
      <el-form ref="culFormRef" :rules="rules" :model="curlForm">
        <el-form-item label="curl：" prop="interfaceCurl">
          <el-input v-model="curlForm.interfaceCurl" style="width:500px" type="textarea" :rows="8"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="DialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="importMsg">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {
  getModulList,
  addInterface,
  editInterface,
  getInterfaceUrl
} 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'
          }
        ],
        interfaceCurl: [
          {
            required: true,
            message: 'curl不能为空！',
            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
      },
      DialogVisible: false,
      curlForm: {
        interfaceCurl: ''
      }
    }
  },
  created() {
    this.$bus.$on('msg', (row) => {
      console.log(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
          if (row.headers === 'null') {
            this.headersList = []
          } else {
            this.headersList = JSON.parse(row.headers)
          }

          if (row.paramTemplate === 'null') {
            this.paramList = []
          } else {
            this.paramList = JSON.parse(row.paramTemplate)
          }
          if (row.responseTemplate === 'null') {
            this.responseList = []
          } else {
            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,
        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)
    },
    // 刷新列表
    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('interface')
                // 刷新列表页
                this.sendResh()
              } else {
                this.$message.error(resp.data.msg)
              }
            })
          } else {
            addInterface(this.interfaceForm).then((resp) => {
              if (resp.data.data === true) {
                this.$message.success('添加成功！')
                // 返回列表页
                this.$router.push('interface')
                // 刷新列表页
                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('interface')
    },
    // 导入heads和请求参数
    importMsg() {
      this.$refs.culFormRef.validate((valid) => {
        if (!valid) {
          return false
        } else {
          getInterfaceUrl({ code: this.curlForm.interfaceCurl }).then(
            (resp) => {
              var newHeaderList = resp.data.data.headersList
              newHeaderList.map((item) => {
                this.headersList.push(
                  Object.assign(
                    {},
                    {
                      paramsName: item.paramsName,
                      paramsValue: item.paramsValue,
                      isRequired: true,
                      remarks: item.remarks
                    }
                  )
                )
              })
              var newParamList = resp.data.data.parametersList
              newParamList.map((item) => {
                this.paramList.push(
                  Object.assign(
                    {},
                    {
                      paramsName: item.paramsName,
                      paramsValue: item.paramsValue,
                      isRequired: true,
                      remarks: item.remarks
                    }
                  )
                )
              })
              this.DialogVisible = false
            }
          )
        }
      })
    },
    // 清空文本框数据
    closeDialog() {
      this.$refs.culFormRef.resetFields()
    }
  }
}
</script>

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