<template>
  <div>
    <Row class="look__box">
      <!-- 接口设计 -->
        <Col span="12" class="look__box__left">
          <div class="look__box__left-p" >
            <h4 style="font-size: 14px;">{{ $t('look_1') }}</h4>
          </div>
          <div class="look__box__left-look">
            <div style="padding: 30px">
              <div class="look__box__left-look-content" style="display:flex;">
                <p style="width:120px;text-align: left;">{{ $t('look_2') }}</p>{{ lookData.id }}
              </div>
              <div class="look__box__left-look-content" style="display:flex;">
                <p style="width:120px;text-align: left;">{{ $t('look_3') }}</p>{{ lookData.sample_name }}
              </div>
              <div class="look__box__left-look-content" style="display:flex;">
                <p style="width:120px;text-align: left;">{{ $t('look_4') }}</p>{{ lookData.sample_host }}?s={{ lookData.api_name }}
              </div>
              <div class="look__box__left-look-content" style="display:flex;">
                <p style="width:120px;text-align: left;">{{ $t('look_5') }}</p>{{ lookData.access_token_name }}
              </div>
              <div class="look__box__left-look-content">
                <p>{{ $t('look_6') }}</p>
                <Table border :columns="columns" :data="formItemData">
                  <template slot="name" slot-scope="{ row }" >
                    <p> {{ row.name }} </p>
                  </template>
                  <template slot="val" slot-scope="{ row,index }" >
                    <p>{{ row.value }}</p>
                  </template>
                </Table>
              </div>
              <div class="look__box__left-look-content">
                <p>{{ $t('look_7') }}</p>
                <Table border :columns="columnsRes" style="width: 100%" :data="formItemResData">
                </Table>
              </div>
              <div class="look__box__left-look-content">
                <p>{{ $t('look_8') }}{{ lookData.uid }}</p>
              </div>
            </div>
          </div>
        </Col>

        <!-- 测试结果 -->
        <Col span="12" class="look__box__right">
          <div class="look__box__right-p">
            <h4 style="font-size: 14px">{{ $t('look_9') }}</h4>
            <div>
              <router-link :to="{path: '/techzones/apitest/compile', query:{id:lookId}}">
                <Button style="margin-right:20px;" type="primary">{{ $t('look_10') }}</Button>
              </router-link>
              <router-link :to="{path: '/techzones/apitest/test'}">
                <Button>{{ $t('look_11') }}</Button>
              </router-link>
            </div>
          </div>
          <div class="look__box__right-generate">
            <div style="padding: 30px">
              <div class="look__box__right-generate-content">
                <div v-if="lookData.sample_status === 0" style="display: flex">
                  <p style="width: 90px;text-align:left">{{ $t('look_12') }}</p><span>{{ statusArr[lookData.sample_status] }}</span>
                </div>
                <div v-if="lookData.sample_status === 1" style="display: flex">
                  <p  style="width: 90px;text-align:left">{{ $t('look_12') }}</p><span style="color: green">{{ statusArr[lookData.sample_status] }}</span>
                </div>
                <div v-if="lookData.sample_status === 2" style="display: flex">
                  <p  style="width: 90px;text-align:left">{{ $t('look_12') }}</p><span style="color: red">{{ statusArr[lookData.sample_status] }}</span>
                </div>
              </div>
              <div class="look__box__right-generate-content" style="display: flex">
                <p style="width: 90px;text-align:left">{{ $t('look_13') }}</p>{{ lookData.last_time }}
              </div>
              <div>
                <div ref="myChart" id="my_chart"  :style="{width: '100%', height: '250px', margin: '20px 0px'}"></div>
                <div class="testAll">
                  <div class="testAll__box">
                    <p>{{ lookData.success + lookData.fail}}</p>
                    <p>{{ $t('look_14') }}</p>
                  </div>
                  <div class="testAll__box">
                    <p style="color: green">{{ lookData.success }}</p>
                    <p>{{ $t('look_15') }}</p>
                  </div>
                  <div class="testAll__box">
                    <p>{{ lookData.percent }}</p>
                    <p>{{ $t('look_16') }}</p>
                  </div>
                </div>
              </div>
              <div class="look__box__right-generate-content">
                <p>{{ $t('look_17') }}</p>
                <!-- <codemirror ref="myCopyCode"  id="copyGenerateCode"  v-model="lookData.last_test_res" :options="cmOptions"></codemirror> -->
                <Input clearable v-model="lookData.last_test_res" type="textarea"/>
              </div>
              <div class="look__box__right-generate-content">
                <p>{{ $t('look_18') }}</p>
                <Table border :columns="testReport" :data="testReportData" style="max-height:185px;overflow-y: auto;">
                  <template slot="indexId" slot-scope="{ row,index }" >
                    <p> {{ index + 1 }} </p>
                  </template>
                  <template slot="test_detail" slot-scope="{ row,index }" >
                    <div v-if="row.test_status === 2" v-for="item in row.test_detail" :key="item.field">
                      <p style="color: red"> {{ item.field }} </p>
                      <p style="color: red"> {{ item.err }} </p>
                    </div>
                    <p v-if="row.test_status === 1" style="color: green"> - </p>
                  </template>
                  <template slot="test_status" slot-scope="{ row,index }" >
                    <p v-if="row.test_status === 0">{{ $t('test_6') }}</p>
                    <p v-if="row.test_status === 1" style="color: green">{{ $t('test_18') }}</p>
                    <p v-if="row.test_status === 2" style="color: red">{{ $t('test_19') }}</p>
                  </template>
                </Table>
              </div>
            </div>
          </div>

        </Col>
    </Row>
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import { GetTestSample } from '@/api/techzones'
import { getToken } from '@/libs/util'
import echarts from 'echarts'
require('codemirror/mode/javascript/javascript.js')
require('codemirror/theme/eclipse.css')
export default {
  components: {
    codemirror
  },
  data () {
    return {
      token: getToken(),
      lookId: 0,
      statusArr: [this.$t('test_6'), this.$t('test_18'), this.$t('test_7')],
      lookData: {
        id: 0,
        sample_name: '',
        sample_host: '',
        api_name: '',
        access_token_name: '',
        uid: '',
        sample_status: '',
        last_time: '',
        last_test_res: '',
        success: 0,
        fail: 0
      },
      columns: [
        {
          title: this.$t('design_27'),
          key: 'name',
          align: 'center'
        },
        {
          title: this.$t('look_19'),
          key: 'value',
          align: 'center'
        }
      ],
      columnsRes: [
        {
          title: this.$t('look_20'),
          key: 'name',
          align: 'center'
        },
        {
          title: this.$t('look_21'),
          key: 'operate',
          align: 'center'
        },
        {
          title: this.$t('look_22'),
          key: 'expect',
          align: 'center'
        }
      ],
      testReport: [
        {
          title: this.$t('index'),
          // key: 'id',
          slot: 'indexId',
          width: '80',
          align: 'center'
        },
        {
          title: this.$t('look_9'),
          key: 'test_status',
          slot: 'test_status',
          align: 'center'
        },
        {
          title: this.$t('look_23'),
          key: 'test_detail',
          slot: 'test_detail',
          align: 'center'
        },
        {
          title: this.$t('look_24'),
          key: 'test_time',
          align: 'center'
        }
      ],
      cmOptions: {
        mode: 'application/json', // 代码类型
        lineNumbers: true, // 行号
        readOnly: true, // 只读
        theme: 'eclipse' // 主题
      },
      formItemData: [],
      formItemResData: [],
      testReportData: []
    }
  },
  created () {
    this.lookId = this.$route.query.id
    this.getTestSample()
    /* this.$nextTick(() => {
      this.createEchars()
    }) */
  },
  methods: {
    /* 获取当前用例信息 */
    getTestSample () {
      const data = new FormData()
      console.log('this.',this.token)
      data.append('access_token', this.token)
      data.append('id', this.lookId)
      // GetTestSample(data).then(res => {
      //   if (res.ret === 200) {
      //     this.lookData = res.data
      //     if (res.data.sample_request === '{}') {
      //       this.formItemData = []
      //     } else {
      //       this.formItemData = JSON.parse(res.data.sample_request)
      //     }
      //     this.formItemResData = JSON.parse(res.data.sample_response)
      //     this.testReportData = res.data.log
      //     this.createEchars()
      //   }
      // })
    },
    /* echarts */
    createEchars () {
      let myChartData = echarts.init(this.$refs.myChart)
      let option = {
        // 标题
        title: {
          text: this.$t('look_16'),
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        series: [
          {
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            data: [
              { value: this.lookData.success, name: this.$t('look_25') + '(' + this.lookData.success + ')', itemStyle: { color: 'green' } },
              { value: this.lookData.fail, name: this.$t('look_26') + '(' + this.lookData.fail + ')', itemStyle: { color: 'red' } }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChartData.setOption(option)
      // 建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener('resize', function () { myChartData.resize() })
    }
  }
}
</script>

<style  lang='scss'>
.look{
  &__h{
    margin-bottom: 30px;
  }
  &__steps{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  &__box{
    &__left{
      &-p{
        height:72px;
        margin-right: 40px;
        background:rgba(255,255,255,1);
        box-shadow:0px 0px 30px 0px rgba(0,0,0,0.05);
        border-radius:10px;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        padding:0 30px;
      }
      &-look{
        min-height: 664px;
        margin-right: 40px;
        background: #fff;
        border-radius: 10px;
        &-content{
          margin-bottom: 10px;
        }
        &-form{
          display: flex
        }
      }
    }
    &__right{
      &-p{
        height:72px;
        background:rgba(255,255,255,1);
        box-shadow:0px 0px 30px 0px rgba(0,0,0,0.05);
        border-radius:10px;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        justify-content: space-between;
        padding:0 30px;
        h3{
          font-size: 18px;
          margin-right: 5px;
        }
      }
      &-generate{
        min-height: 664px;
        background: #fff;
        border-radius: 10px;
        &-content{
          margin-bottom: 10px;
        }
      }
    }
  }
}
.testAll{
  display: flex;
  margin-bottom: 20px;
  &__box{
    width: 33%;
    text-align: center;
  }
}
</style>
