<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" :key="index">
                                <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>
    export default {
        meta: {
            title: '测试 - CRM',
        },
        data() {
            return {
                ActionStr: "/Api/ClueStatic/CreateClue",
                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(type) {
                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);
                    }
                    data = {

                    };
                    this.ShowMsg = JSON.parse(JSON.stringify(data));
                    if (this.ActionStr && this.ActionStr != '') {
                        this.apipost(this.ActionStr, data, (res) => {
                            this.Result = JSON.stringify(res.data);
                        });
                    }
                }
            }
        },
    };
</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>