<template>
  <div class="CMD">
    <table class="cmdTable">
      <thead>
        <tr>
          <td colspan="2">
            &nbsp;&nbsp;请求参数
          </td>
        </tr>
        <tr>
          <td class="tdLeft">
            命令：
          </td>
          <td class="tdRight">
            <textarea :rows="1" :cols="50" v-model="ActionStr" placeholder="请输入命令"></textarea>
          </td>
        </tr>
        <tr>
          <td class="tdLeft">
            参数列表：
          </td>
          <td class="tdRight">
            <table class="parameterList">
              <tr v-for="(item,index) in parameterList">
                <td>
                  参数名:
                </td>
                <td>
                  <input type="text" v-model="item.Name" />
                </td>
                <td>
                  参数值:
                </td>
                <td>
                  <input type="text" v-model="item.Value" />
                </td>
                <td>
                  <a style="cursor:pointer;color:blue;" @click="AddParameter()">新增</a>&nbsp;
                  <a v-if="index!=0" style="cursor:pointer;color:red;" @click="DeleteParameter(index)">删除</a>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td colspan="2" style="text-align:center;">
            <input type="button" @click="Test()" value="执行" />
          </td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td colspan="2">
            &nbsp;
          </td>
        </tr>
        <tr>
          <td colspan="2">
            &nbsp;&nbsp;返回结果
          </td>
        </tr>
        <tr>
          <td class="tdLeft">
            请求命令：
          </td>
          <td class="tdRight">
            {{ActionStr}}
          </td>
        </tr>
        <tr>
          <td class="tdLeft">
            请求参数：
          </td>
          <td class="tdRight">
            {{ShowMsg}}
          </td>
        </tr>
        <tr>
          <td class="tdLeft">
            返回结果：
          </td>
          <td class="tdRight">
            {{Result}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
  import {
    TestApi
  } from '../api/testapi'
  export default {
    meta: {
      title: '测试 - 麦子教育系统',
    },
    data() {
      return {
        ActionStr: "",
        parameterList: [{
          Name: "",
          Value: ""
        }],
        ShowMsg: "",
        Result: "",
      };
    },
    created() {

    },
    mounted() {

    },
    watch: {
      $route: {
        handler: function (route) {
          this.redirect = route.query && route.query.redirect
        },
        immediate: true
      }
    },
    methods: {
      //新增参数
      AddParameter() {
        this.parameterList.push({
          Name: "",
          Value: ""
        });
      },
      //删除参数
      DeleteParameter(index) {
        this.parameterList.splice(index, 1);
      },
      ClearMsg(str) {
        //去掉空格
        var result = str.replace(/\ +/g, "");
        //去掉回车
        result = result.replace(/[\r\n]/g, "");
        return result;
      },
      Test() {
        this.Result = "";
        this.ShowMsg = "";
        if (this.ActionStr && this.ActionStr != '') {
          var data = {};
          var tempStr = "";
          if (this.parameterList && this.parameterList.length > 0) {
            this.parameterList.forEach(item => {
              if (item.Name && item.Name != '') {
                tempStr += ',' + '"' + item.Name + '":"' + item.Value + '"';
              }
            })
          }
          if (tempStr && tempStr != '') {
            tempStr = "{" + tempStr.substring(1, tempStr.length) + "}";
            data = JSON.parse(tempStr);
          }
          var tempMsg = {
            Msg: data
          };
          this.ShowMsg = JSON.parse(JSON.stringify(tempMsg));
          TestApi(this.ActionStr, data).then(res => {
            this.Result = JSON.stringify(res);
          })
        }
      }
    },
  };

</script>

<style scoped>
  .CMD {
    background: #f5f6f7;
  }

  .CMD .cmdTable {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }

  .CMD .cmdTable tr td {
    border: 1px solid rgba(0, 0, 0, 0.12);
    line-height: 35px;
    min-height: 35px;
  }

  .CMD .tdLeft {
    width: 15%;
    font-size: 14px;
    font-weight: 400;
    text-align: right;
    padding-right: 20px;
  }

  .CMD .tdRight {
    width: 70%;
    font-size: 14px;
    font-weight: 400;
  }

  .CMD .parameterList {
    border: none;
    border-collapse: collapse;
  }

  .CMD .parameterList tr td {
    border: none;
    border-collapse: collapse;
  }

</style>
