<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="queryPhoneCode" :model="queryPhoneCode" 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="queryPhoneCode.phone" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-select v-model="queryPhoneCode.huanjing" placeholder="请选择执行环境">
                  <el-option
                    v-for="item in queryPhoneCodeOptions"
                    :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="queryPhoneCodeSubmit">查询验证码</el-button>
              </el-form-item>
            </div>
          </el-card>
        </el-form>
        <el-dialog
          title="短信验证码："
          :visible.sync="dialogQueryPhoneCode"
          width="30%">
          <span>{{myQueryPhoneCode}}</span>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" v-clipboard:copy="JSON.stringify(myQueryPhoneCode)" v-clipboard:success="onCopy" @click="dialogQueryPhoneCode = false">点击复制</el-button>
          </span>
        </el-dialog>
      </el-col>
      <el-col :span="8">
        <el-form ref="baomingWeijihuo" :model="baomingWeijihuo" 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="请输入活动ID" v-model="baomingWeijihuo.actid" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-input placeholder="请输入代理人手机号" v-model="baomingWeijihuo.agentPhone" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-input placeholder="请输入报名客户手机号" v-model="baomingWeijihuo.customPhone" clearable></el-input>
              </el-form-item>
              <div style="margin: 15px 0;"></div>
              <el-form-item>
                <el-button round @click="baomingWeijihuoSubmit">创建客户</el-button>
              </el-form-item>
            </div>
          </el-card>
        </el-form>
      </el-col>
    </el-row>
    <el-row style="margin-bottom: 15px;">
      <el-col :span="8">
        <el-form ref="apiTest" :model="apiTest" 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-select v-model="apiTest.path" placeholder="请选择接口服务">
                  <el-option
                    v-for="item in apiTestPathoptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-input placeholder="请输入method" v-model="apiTest.method" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-input placeholder="请输入biz_data" v-model="apiTest.biz_data" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-input placeholder="请输入手机号，如果token已失效，请在app进行登录" v-model="apiTest.phone" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-select v-model="apiTest.huanjing" placeholder="请选择执行环境">
                  <el-option
                    v-for="item in apiTestoptions"
                    :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="apiTestSubmit">调用接口</el-button>
              </el-form-item>
            </div>
          </el-card>
        </el-form>
      </el-col>
      <el-col :span="8">
        <el-form ref="chouJiang" :model="chouJiang" label-width="0px">
          <el-card class="darkred" shadow="always">
            <div slot="header" class="clearfix">
              <span>AI2.0抽奖</span>
            </div>
            <div class="text item">
              <el-form-item>
                <el-input placeholder="请输入活动ID" v-model="chouJiang.actid" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-input placeholder="请输入吼礼关键词,普通抽奖不需要输入" v-model="chouJiang.keyword" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-input placeholder="请输入手机号" v-model="chouJiang.phone" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-input placeholder="请输入手机登录验证码" v-model="chouJiang.code" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-select v-model="chouJiang.type" placeholder="请选择抽奖接口">
                  <el-option
                    v-for="item in chouJiangOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button round @click="chouJiangSubmit">抽奖</el-button>
              </el-form-item>
            </div>
          </el-card>
        </el-form>
      </el-col>
    </el-row>

      <el-row style="margin-bottom: 15px;">
      <el-col :span="8">
        <el-form ref="smsCode1" :model="smsCode222" 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="smsCode222.phone" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-input placeholder="请输入验证码" v-model="smsCode222.code" clearable></el-input>
              </el-form-item>
              <div style="margin: 15px 0;"></div>
              <el-form-item>
                <el-button round @click="smsCodeSubmit222">测试设置验证码</el-button>
              </el-form-item>
            </div>
          </el-card>
        </el-form>
      </el-col>
        <el-col :span="8">
          <el-form ref="queryPhoneCode" :model="queryPhoneCode" 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="queryPhoneCode222.phone" clearable></el-input>
                </el-form-item>
                <el-form-item>
                  <el-select v-model="queryPhoneCode222.huanjing" placeholder="请选择执行环境">
                    <el-option
                      v-for="item in queryPhoneCode222Options"
                      :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="queryPhoneCodeSubmit222">查询验证码</el-button>
                </el-form-item>
              </div>
            </el-card>
          </el-form>
          <el-dialog
            title="短信验证码："
            :visible.sync="dialogQueryPhoneCode"
            width="30%">
            <span>{{myQueryPhoneCode}}</span>
            <span slot="footer" class="dialog-footer">
            <el-button type="primary" v-clipboard:copy="JSON.stringify(myQueryPhoneCode)" v-clipboard:success="onCopy" @click="dialogQueryPhoneCode = false">点击复制</el-button>
          </span>
          </el-dialog>
        </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
  }
  .yellowgreen {
    width: calc(100% - 20px);
    padding: 0px;
    background-color: yellowgreen;
  }

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

  .blue {
    width: calc(100% - 20px);
    padding: 0px;
    background-color: deepskyblue;
  }

  .Orange {
    width: calc(100% - 20px);
    padding: 0px;
    background-color: Orange;
  }

  .chocolate {
    width: calc(100% - 20px);
    padding: 0px;
    background-color: chocolate;
  }

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

<script>
  export default {
    data() {
      return {
        smsCode: {
          phone: '',
          code: 1111
        },
        smsCode222: {
          phone: '15910793402',
          code: 6666
        },
        baomingWeijihuo: {
          actid: '',
          agentPhone: '',
          customPhone: ''
        },
        queryPhoneCode: {
          phone: '',
          huanjing: []
        },
        queryPhoneCode222: {
          phone: '15910793402',
          huanjing: []
        },
        queryPhoneCode222Options: [{
          value: '0',
          label: '测试环境'
        }, {
          value: '1',
          label: '线上环境'
        }],
        queryPhoneCodeOptions: [{
          value: '0',
          label: '测试环境'
        }, {
          value: '1',
          label: '线上环境'
        }],
        dialogQueryPhoneCode: false,
        myQueryPhoneCode: '',
        apiTest: {
          path: [],
          method: '',
          biz_data: '',
          phone: '',
          huanjing: []
        },
        apiTestoptions: [{
          value: '0',
          label: '测试环境'
        }],
        apiTestPathoptions: [{
          value: 'business',
          label: 'business'
        }, {
          value: 'insurance',
          label: 'insurance'
        }, {
          value: 'activity',
          label: 'activity'
        }, {
          value: 'uc',
          label: 'ucenter'
        }, {
          value: 'peripheral',
          label: 'peripheral'
        }, {
          value: 'recommend',
          label: 'recommend'
        }],
        chouJiang: {
          actid: '',
          keyword: '',
          phone: '',
          code: '',
          type: []
        },
        chouJiangOptions: [{
          value: '1',
          label: '普通抽奖接口'
        },{
          value: '2',
          label: '吼礼抽奖接口'
        }]
      }
    },
    mounted() {
      this.openToolPage();
    },
    methods: {
      openToolPage() {
        let config = {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        this.$http.get('/tool2/openToolPage',config).then((res)=>{
          console.log(res);
        }).catch(error=>{
          console.log(error);
        })
      },
      onCopy (e) {
        this.$message({
          showClose: true,
          message: '内容已复制到剪切板！',
          type: 'success'
        });
      },
      apiTestSubmit() {
        const {href} = this.$router.resolve({ name:'apiTest2', query:
            {method: this.apiTest.method, biz_data: this.apiTest.biz_data, phone: this.apiTest.phone, path: this.apiTest.path.toString(), type: this.apiTest.huanjing.toString()}})
        window.open(href, '_blank')
      },
      smsCodeSubmit() {
        let config = {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        this.$http.get('/tool2/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'
          });
        })
      },
      //-----------------------------------------------------------测试----------------------------------

      smsCodeSubmit222() {
        let config = {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        this.$http.get('/tool2/smsCode222?'+this.$qs.stringify({
          phone: this.smsCode222.phone,
          code: this.smsCode222.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'
          });
        })
      },
      queryPhoneCodeSubmit222() {
        const loading = this.$loading({
          lock: true,
          text: '加载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        let config = {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        this.$http.get('/tool2/queryPhoneCode222?'+this.$qs.stringify({
          phone: this.queryPhoneCode222.phone,
          type: this.queryPhoneCode222.huanjing.toString()
        }),config).then((res)=>{
          console.log(res);
          if(res.data=='codenull') {
            this.$message({
              showClose: true,
              message: '该手机号验证码为空',
              type: 'error'
            });
          } else if(res.data=='typeError') {
            this.$message({
              showClose: true,
              message: '执行环境参数错误',
              type: 'error'
            });
          } else {
            this.myQueryPhoneCode = res.data
            this.dialogQueryPhoneCode = true
          }
          loading.close();
        }).catch(error=>{
          console.log(error);
          loading.close();
          this.$message({
            showClose: true,
            message: '服务器处理失败，请核对参数！',
            type: 'error'
          });
        })
      },
      //-----------------------------------------------------------测试----------------------------------
      baomingWeijihuoSubmit() {
        const loading = this.$loading({
          lock: true,
          text: '加载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        let config = {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        this.$http.get('/tool2/baomingWeijihuo?'+this.$qs.stringify({
          actid: this.baomingWeijihuo.actid,
          agentPhone: this.baomingWeijihuo.agentPhone,
          customPhone: this.baomingWeijihuo.customPhone
        }),config).then((res)=>{
          console.log(res);
          loading.close();
          if(res.data=='success') {
            this.$message({
              showClose: true,
              message: '创建报名未激活客户成功',
              type: 'success'
            });
          } else {
            this.$message({
              showClose: true,
              message: res.data,
              type: 'error'
            });
          }
        }).catch(error=>{
          console.log(error);
          loading.close();
          this.$message({
            showClose: true,
            message: '服务器处理失败，请核对参数！',
            type: 'error'
          });
        })
      },
      queryPhoneCodeSubmit() {
        const loading = this.$loading({
          lock: true,
          text: '加载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        let config = {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        this.$http.get('/tool2/queryPhoneCode?'+this.$qs.stringify({
          phone: this.queryPhoneCode.phone,
          type: this.queryPhoneCode.huanjing.toString()
        }),config).then((res)=>{
          console.log(res);
          if(res.data=='codenull') {
            this.$message({
              showClose: true,
              message: '该手机号验证码为空',
              type: 'error'
            });
          } else if(res.data=='typeError') {
            this.$message({
              showClose: true,
              message: '执行环境参数错误',
              type: 'error'
            });
          } else {
            this.myQueryPhoneCode = res.data
            this.dialogQueryPhoneCode = true
          }
          loading.close();
        }).catch(error=>{
          console.log(error);
          loading.close();
          this.$message({
            showClose: true,
            message: '服务器处理失败，请核对参数！',
            type: 'error'
          });
        })
      },
      chouJiangSubmit() {
        const {href} = this.$router.resolve({ name:'chouJiang', query:
            {actid: this.chouJiang.actid, keyword: this.chouJiang.keyword, phone: this.chouJiang.phone, code: this.chouJiang.code, type: this.chouJiang.type.toString()}})
        window.open(href, '_blank')
      },
    }
  }
</script>