<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="methodCount" :model="methodCount" 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-date-picker
                  v-model="methodCount.showdate"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-select v-model="methodCount.huanjing" placeholder="请选择执行环境">
                  <el-option
                    v-for="item in methodCountOptions"
                    :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="methodCountSubmit">查询概况</el-button>
              </el-form-item>
            </div>
          </el-card>
        </el-form>
      </el-col>
      <el-col :span="8">
        <el-form ref="bizDataCount" :model="bizDataCount" 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="请输入接口方法名method" v-model="bizDataCount.name" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-date-picker
                  v-model="bizDataCount.showdate"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-select v-model="bizDataCount.huanjing" placeholder="请选择执行环境">
                  <el-option
                    v-for="item in bizDataCountOptions"
                    :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="bizDataCountSubmit">查询参数</el-button>
              </el-form-item>
            </div>
          </el-card>
        </el-form>
      </el-col>
      <el-col :span="8">
        <el-form ref="bizDataResponse" :model="bizDataResponse" label-width="0px">
          <el-card class="darkred" shadow="always">
            <div slot="header" class="clearfix">
              <span>查询接口response</span>
            </div>
            <div class="text item">
              <el-form-item>
                <el-input placeholder="请输入接口方法名method" v-model="bizDataResponse.name" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-input placeholder="请输入接口请求参数biz_data" v-model="bizDataResponse.bizdata" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-date-picker
                  v-model="bizDataResponse.showdate"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-select v-model="bizDataResponse.huanjing" placeholder="请选择执行环境">
                  <el-option
                    v-for="item in bizDataResponseOptions"
                    :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="bizDataResponseSubmit">查询Response</el-button>
              </el-form-item>
            </div>
          </el-card>
        </el-form>
      </el-col>
    </el-row>
    <el-row style="margin-bottom: 15px; margin-top: 5px">
      <el-col :span="8">
        <el-form ref="bigdataReport" :model="bigdataReport" 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="bigdataReport.project" clearable filterable placeholder="请选择项目">
                  <el-option
                    v-for="item in projectOptions"
                    :key="item.project_value"
                    :label="item.project_name"
                    :value="item.project_value">
                  </el-option>
                </el-select>
              </el-form-item>
              <div style="margin: 15px 0;"></div>
              <el-form-item>
                <el-button round @click="bigdataReportSubmit">查询验证结果</el-button>
              </el-form-item>
            </div>
          </el-card>
        </el-form>
      </el-col>
      <el-col :span="8">
        <el-form ref="bizDataByUid" :model="bizDataByUid" label-width="0px">
          <el-card class="darkred" shadow="always">
            <div slot="header" class="clearfix">
              <span>根据UID查询接口response</span>
            </div>
            <div class="text item">
              <el-form-item>
                <el-input placeholder="请输入UID" v-model="bizDataByUid.uid" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-date-picker
                  v-model="bizDataByUid.showdate"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-select v-model="bizDataByUid.huanjing" placeholder="请选择执行环境">
                  <el-option
                    v-for="item in bizDataByUidOptions"
                    :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="bizDataByUidSubmit">查询参数</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
  }
  .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 {
        methodCount: {
          showdate: '',
          huanjing: []
        },
        methodCountOptions: [{
          value: '0',
          label: '测试环境'
        }, {
          value: '1',
          label: '线上环境'
        }],
        bizDataCount: {
          name: '',
          showdate: '',
          huanjing: []
        },
        bizDataCountOptions: [{
          value: '0',
          label: '测试环境'
        }, {
          value: '1',
          label: '线上环境'
        }],
        bizDataResponse: {
          name: '',
          bizdata: '',
          showdate: '',
          huanjing: []
        },
        bizDataResponseOptions: [{
          value: '0',
          label: '测试环境'
        }, {
          value: '1',
          label: '线上环境'
        }],
        bizDataByUid: {
          uid: '',
          showdate: '',
          huanjing: []
        },
        bizDataByUidOptions: [{
          value: '0',
          label: '测试环境'
        }, {
          value: '1',
          label: '线上环境'
        }],
        bigdataReport: {
          project: [{
            project_value: '',
            project_name: ''
          }]
        },
        projectOptions: []
      }
    },
    mounted() {
      this.openToolPage();
      this.loadProjectName();
    },
    methods: {
      openToolPage() {
        let config = {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        this.$http.get('/bigdata/openToolPage',config).then((res)=>{
          console.log(res);
        }).catch(error=>{
          console.log(error);
        })
      },
      onCopy (e) {
        this.$message({
          showClose: true,
          message: '内容已复制到剪切板！',
          type: 'success'
        });
      },
      methodCountSubmit() {
        const {href} = this.$router.resolve({ name:'methodCount', query:
            { beginDate: this.methodCount.showdate[0],
              endDate: this.methodCount.showdate[1],
              type: this.methodCount.huanjing.toString()}})
        window.open(href, '_blank')
      },
      bizDataCountSubmit() {
        const {href} = this.$router.resolve({ name:'bizDataCount', query:
            { name: this.bizDataCount.name,
              beginDate: this.bizDataCount.showdate[0],
              endDate: this.bizDataCount.showdate[1],
              type: this.bizDataCount.huanjing.toString()}})
        window.open(href, '_blank')
      },
      bizDataResponseSubmit() {
        const {href} = this.$router.resolve({ name:'bizDataResponse', query:
            { name: this.bizDataResponse.name,
              bizdata: this.bizDataResponse.bizdata,
              beginDate: this.bizDataResponse.showdate[0],
              endDate: this.bizDataResponse.showdate[1],
              type: this.bizDataResponse.huanjing.toString()}})
        window.open(href, '_blank')
      },
      bizDataByUidSubmit() {
        const {href} = this.$router.resolve({ name:'bizDataByUid', query:
            { uid: this.bizDataByUid.uid,
              beginDate: this.bizDataByUid.showdate[0],
              endDate: this.bizDataByUid.showdate[1],
              type: this.bizDataByUid.huanjing.toString()}})
        window.open(href, '_blank')
      },
      bigdataReportSubmit() {
        const {href} = this.$router.resolve({ name:'bigdataReport', query:
            { project: this.bigdataReport.project.toString()}})
        window.open(href, '_blank')
      },
      loadProjectName() {
        let config = {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        this.$http.get('/bigdata/loadProjectName',config).then((res)=>{
          console.log(res);
          this.projectOptions=res.data;
        }).catch(error=>{
          console.log(error);
        })
      }
    }
  }
</script>