<template xmlns:el-col="http://www.w3.org/1999/html">
  <div>
    <el-row style="margin-bottom: 15px; margin-top: 5px">
      <el-col :span="8">
        <el-form ref="smsCode" :model="smsCode" label-width="0px">
          <el-card class="darkred" shadow="always">
            <div slot="header" class="clearfix">
              <span>设置短信验证码</span>
            </div>
            <div class="text item">
              <el-form-item>
                <el-input placeholder="请输入手机号" v-model="smsCode.phone" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-input placeholder="请输入验证码" v-model="smsCode.code" clearable></el-input>
              </el-form-item>
              <div style="margin: 15px 0;"></div>
              <el-form-item>
                <el-button round @click="smsCodeSubmit">设置验证码</el-button>
              </el-form-item>
            </div>
          </el-card>
        </el-form>
      </el-col>
      <el-col :span="8">
        <el-form ref="nlpTestCase" :model="nlpTestCase" label-width="0px">
          <el-card class="darkred" shadow="always">
            <div slot="header" class="clearfix">
              <span>查询NLP测试用例</span>
            </div>
            <div class="text item">
              <el-form-item>
                <el-select v-model="nlpTestCase.myplatform" placeholder="请选择APP平台">
                  <el-option
                    v-for="item in nlpTestCaseMyplatformOptions"
                    :key="item.value"
                    :label="item.label"s
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select v-model="nlpTestCase.runtime" placeholder="请选择执行环境">
                  <el-option
                    v-for="item in nlpTestCaseRuntimeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <div style="margin: 15px 0;"></div>
              <el-form-item>
                <el-button round @click="nlpTestCaseSubmit">查询NLP测试用例</el-button>
              </el-form-item>
            </div>
          </el-card>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .darkred {
    width: calc(100% - 20px);
    padding: 0px;
    background-color: darkkhaki;
  }
</style>

<script>
  export default {
    data() {
      return {
        nlpTestCase: {
          myplatform: [],
          runtime: []
        },
        nlpTestCaseMyplatformOptions: [{
          value: '1',
          label: '国寿AI健康'
        }, {
          value: '2',
          label: 'AIME健康'
        }],
        nlpTestCaseRuntimeOptions: [{
          value: '1',
          label: '测试环境'
        }, {
          value: '2',
          label: '线上环境'
        }],
        smsCode: {
          phone: '',
          code: 1111
        }
      }
    },
    mounted() {
      this.openToolPage()
    },
    methods: {
      openToolPage() {
        let config = {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        this.$http.get('/tool/openToolPage',config).then((res)=>{
          console.log(res);
        }).catch(error=>{
          console.log(error);
        })
      },
      nlpTestCaseSubmit() {
        const {href} = this.$router.resolve({ name:'nlp', query:
            {myplatform: this.nlpTestCase.myplatform.toString(), runtime: this.nlpTestCase.runtime.toString()}})
        window.open(href, '_blank')
      },
      smsCodeSubmit() {
        let config = {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        this.$http.get('/aimeTool/smsCode?'+this.$qs.stringify({
          phone: this.smsCode.phone,
          code: this.smsCode.code
        }),config).then((res)=>{
          console.log(res);
          if(res.data=='OK') {
            this.$message({
              showClose: true,
              message: '设置短信验证码成功',
              type: 'success'
            });
          } else if(res.data=='phoneError') {
            this.$message({
              showClose: true,
              message: '手机号格式错误，必须是11位',
              type: 'error'
            });
          } else {
            this.$message({
              showClose: true,
              message: '设置短信验证码失败',
              type: 'error'
            });
          }
        }).catch(error=>{
          console.log(error);
          this.$message({
            showClose: true,
            message: '服务器处理失败，请核对参数！',
            type: 'error'
          });
        })
      }
    }
  }
</script>