<template xmlns:el-col="http://www.w3.org/1999/html">
  <div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1">测试工具</el-menu-item>
      <el-submenu index="2">
        <template slot="title">常用链接</template>
        <el-menu-item index="2-1"><a class="link" href="http://192.168.8.216:8080/jenkins/" target="_blank">测试jenkins</a></el-menu-item>
        <el-menu-item index="2-2"><a class="link" href="http://192.168.8.211/www/index.php?m=project&f=task" target="_blank">禅道</a></el-menu-item>
        <el-menu-item index="2-3"><a class="link" href="http://192.168.8.206:803/copythat/" target="_blank">产品需求</a></el-menu-item>
        <el-menu-item index="2-4"><a class="link" href="http://qa.jxbrty.com/devops-web/#/signin" target="_blank">运营平台</a></el-menu-item>
        <el-menu-item index="2-5"><a class="link" href="http://192.168.8.207/login" target="_blank">统计平台</a></el-menu-item>
        <el-menu-item index="2-6"><a class="link" href="http://221.216.94.116:802/#group/5/" target="_blank">APP安装包下载</a></el-menu-item>
        <el-menu-item index="2-7"><a class="link" href="http://gitlab.jxbrty.com/" target="_blank">GitLab平台</a></el-menu-item>
        <el-menu-item index="2-8"><a class="link" href="http://192.168.8.211:8090/pages/viewpage.action?pageId=32513105" target="_blank">Confluence平台</a></el-menu-item>
      </el-submenu>
      <el-menu-item index="3" disabled>正在开发中</el-menu-item>
    </el-menu>
    <el-row>
      <el-col :span="8">
        <el-form ref="form" :model="deleteClues" label-width="0px">
          <el-card class="yellowgreen" shadow="always">
            <div slot="header" class="clearfix">
              <span>删除指定UID的线索</span>
            </div>
            <div class="text item">
              <el-form-item>
                <el-input placeholder="代理人UID" v-model="deleteClues.agentUid" clearable></el-input>
              </el-form-item>
              <div style="margin: 15px 0;"></div>
              <el-form-item>
                <el-input placeholder="该代理人名下的健康坊用户UID" v-model="deleteClues.customUid" clearable></el-input>
              </el-form-item>
              <div style="margin: 15px 0;"></div>
              <el-form-item>
                <el-button round @click="onSubmit">删除线索</el-button>
              </el-form-item>
            </div>
          </el-card>
        </el-form>
      </el-col>
      <el-col :span="8">
        <el-form ref="form" :model="bizData" label-width="0px">
          <el-card class="darkred" shadow="always">
            <div slot="header" class="clearfix">
              <span>加密biz_data</span>
            </div>
            <div class="text item">
              <el-form-item>
                <el-input placeholder="输入json格式的biz_data" v-model="bizData.myData" clearable></el-input>
              </el-form-item>
              <div style="margin: 15px 0;"></div>
              <el-form-item>
                <el-button round @click="bizDataSubmit">加密</el-button>
              </el-form-item>
            </div>
          </el-card>
        </el-form>
      </el-col>
      <el-col :span="8">
        <el-card class="blue" shadow="always">
          <div slot="header" class="clearfix">
            <span>卡片名称</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
          <div v-for="o in 4" :key="o" class="text item">
            {{'列表内容 ' + o }}
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-card class="aquamarine" shadow="always">
          <div slot="header" class="clearfix">
            <span>卡片名称</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
          <div v-for="o in 4" :key="o" class="text item">
            {{'列表内容 ' + o }}
          </div>
        </el-card>
      </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;
  }

  .aquamarine {
    width: calc(440px);
    padding: 0px;
    background-color: aquamarine;
  }
  .link{
    color: inherit;
  }
</style>

<script>
  export default {
    data() {
      return {
        deleteClues: {
          agentUid: '',
          customUid: ''
        },
        bizData: {
          myData: ''
        },
        activeIndex: '1'
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      onSubmit() {
        let config = {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        this.$http.get('/tool/money/delete?'+this.$qs.stringify({
          uid: this.deleteClues.agentUid,
          ref_id: this.deleteClues.customUid
        }),config).then((res)=>{
          console.log(res);
          if(res.data=='success') {
            this.$message({
              showClose: true,
              message: '删除线索成功',
              type: 'success'
            });
          } else {
            this.$message({
              showClose: true,
              message: '删除线索失败',
              type: 'error'
            });
          }
        }).catch(error=>{
          console.log(error);
          this.$message({
            showClose: true,
            message: '服务器抛出异常',
            type: 'error'
          });
        })
      },
      bizDataSubmit() {
        let config = {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        this.$http.get('/tool/bizData?'+this.$qs.stringify({
          biz_data: this.bizData.myData
        }),config).then((res)=>{
          console.log(res);

        }).catch(error=>{
          console.log(error);
          this.$message({
            showClose: true,
            message: '服务器抛出异常',
            type: 'error'
          });
        })
      }
    }
  }
</script>