<template>
  <div>
    <Row :gutter="20">
      <i-col :xs="12" :md="6" :lg="6" v-for="infor in inforCardData" :key="infor.title" style="height: 150px;padding-bottom: 10px;color:#333;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36" style="border-radius: 10px;">
          <div style=" display: flex;justify-content: center;align-items: center;">
            <count-to :end="infor.count" style="font-size:36px;color:red;" count-class="count-style"/>
          </div>
          <p style="color:#999999">{{ infor.title }}</p>
        </infor-card>
      </i-col>
      <i-col :xs="12" :md="6" :lg="6" v-for="(infor, i) in inforCardData1" :key="infor.title" style="height: 150px;padding-bottom: 10px;color:#333;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36" style="border-radius: 10px;">
          <div style=" display: flex;justify-content: center;align-items: center;">
            <count-to v-if="i===0" :end="infor.count" style="font-size:36px;color:green;" count-class="count-style"/>
            <count-to v-else :end="infor.count" style="font-size:36px" count-class="count-style"/>
            <span class="content-outer" style="font-size:36px" v-if="i === 1"> % </span>
          </div>
          <p style="color:#999999">{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <div class="test">
      <p>{{ $t('test_1') }}</p>
      <Input class="test__input" clearable v-model="data.sample_name" :placeholder="$t('test_2')" style="width: 200px" />
      <p>{{ $t('test_3') }}</p>
      <Input class="test__input" clearable v-model="data.api_name" :placeholder="$t('test_4')" style="width: 200px" />
      <p>{{ $t('test_5') }}</p>
      <div>
        <Checkbox-group v-model='data.sample_status' @on-change="change">
          <Checkbox label="0">{{ $t('test_6') }}</Checkbox>
          <Checkbox label="2">{{ $t('test_7') }}</Checkbox>
          <Checkbox label="1">{{ $t('test_8') }}</Checkbox>
        </Checkbox-group>
      </div>
      <div class="test__allBtn">
        <Button type="primary" @click="search">{{ $t('search') }}</Button>
        <router-link :to="{name:'apitestAdd'}">
          <Button type="success" style="margin: 0 5px">{{ $t('add_new_example') }}</Button>
        </router-link>
        <Button type="error" v-if="total" @click="operationAllTest">{{ $t('test_10') }}</Button>
        <Modal
          v-model="modalTest"
          :title="$t('test_11')"
          @on-ok="asyncOK"
          @on-cancel="cancel">
          <div style="display: flex;justify-content: center;">
            <i-circle :percent="testData.successlv" stroke-color="#ffa000">
              <span class="demo-Circle-inner" style="font-size:24px;color:#ffa000">{{testData.successlv}}%</span>
            </i-circle>
          </div>
          <p v-if="testData.successlv !== 100">{{$t('test_12')}}{{ testData.all }}{{$t('test_13')}},{{$t('test_14')}}{{ testData.success }}{{$t('test_13')}},{{$t('test_15')}}</p>
          <p v-else>{{$t('test_12')}}{{ testData.all }}{{$t('test_13')}},{{$t('test_14')}}{{ testData.success }}{{$t('test_13')}}。</p>
          <br />
          <p>{{$t('test_16')}}</p>
          <p>*/1 * * * * php /path/to/phalapi-pro/bin/test/run_test_sample.php &gt; /dev/null</p>
        </Modal>
      </div>
    </div>
    <!-- 数据表 -->
    <Table border :columns="columnsList" :data="dataList" :loading="listLoad" class="ListTab">
        <template slot-scope="{ row,index }" slot="sample_name">
          <p>{{ row.sample_name }}</p>
        </template>
        <template slot-scope="{ row,index }" slot="api_name">
          <p>{{ row.api_name }}</p>
        </template>
        <template slot-scope="{ row,index }" slot="status">
          <p v-if="row.sample_status === 0" > {{ $t('test_6') }} </p>
          <p v-if="row.sample_status === 1" style="color: green"> {{ $t('test_18') }} </p>
          <p v-if="row.sample_status === 2" style="color: red"> {{ $t('test_19') }} </p>
          <p v-if="row.sample_status === 3"> {{ $t('test_20') }} </p>
          <p v-if="row.sample_status === 4"> {{ $t('test_21') }} </p>
        </template>
        <template slot-scope="{ row,index }" slot="last_time">
          <p v-if="row.last_time === null"> - </p>
          <p v-else> {{ row.last_time }} </p>
        </template>
        <template slot-scope="{ row,index }" slot="operation" class="operation">
            <Button type="primary" size="small" class="operation__btn" @click="testFun(row.id)" style="">{{ $t('test_22') }}</Button>
            <router-link :to="{name:'apitestLook',query:{id: row.id}}" >
              <Button size="small" class="operation__btn" style="">{{ $t('test_23') }}</Button>
            </router-link>
            <router-link :to="{name:'apitestAdd',query:{id: row.id}}" >
              <Button size="small" class="operation__btn" style="">{{ $t('copy') }}</Button>
            </router-link>
            <router-link :to="{name:'apitestCompile',query:{id: row.id}}" >
              <Button size="small" class="operation__btn" style="">{{ $t('edit') }}</Button>
            </router-link>
            <Button type="error" size="small" class="operation__btn" style="color:#fff" @click="remove(row.id)">{{ $t('delete') }}</Button>
        </template>
    </Table>
    <!-- 分页 -->
    <div class="pagination">
      <Page :total="total" show-elevator show-sizer @on-page-size-change='changeSize' @on-change='changePage'/>
    </div>
  </div>
</template>

<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import { ChartPie, ChartBar } from '_c/charts'
import { getToken } from '@/libs/util'
import { GetTestData, GetTestSampleList, CheckTestSample, DelTestSample, TestAllSample, GetAllTestDetail } from '@/api/techzones'
export default {
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar
  },
  data () {
    return {
      // testContent: '',
      modalTest: false,
      setItem: null,
      listLoad: false,
      token: getToken(),
      testData: {
        all: 0,
        success: 0,
        successlv: 0
      },
      data: {
        sample_name: '',
        sample_status: [],
        api_name: ''
      },
      inforCardData: [
        { title: this.$t('test_24'), icon: 'md-close-circle', count: 0, color: '#2d8cf0' }
      ],
      inforCardData1: [
        { title: this.$t('test_25'), icon: 'md-checkmark-circle', count: 0, color: '#19be6b' },
        { title: this.$t('test_26'), icon: 'ios-stats', count: 0, color: '#ff9900' },
        { title: this.$t('test_27'), icon: 'md-git-network', count: 0, color: '#ed3f14' }
      ],
      total: 0,
      page: 1, // 分页
      perpage: 10,
      columnsList: [
        {
          title: this.$t('test_28'),
          key: 'id',
          align: 'center',
          width: '100'
        },
        {
          title: this.$t('test_29'),
          key: 'sample_name',
          slot: 'sample_name',
          align: 'center'
        },
        {
          title: this.$t('test_30'),
          key: 'api_name',
          slot: 'api_name',
          align: 'center'
        },
        {
          title: this.$t('test_31'),
          key: 'access_token_name',
          align: 'center',
          width: '200'
        },
        {
          title: this.$t('test_32'),
          key: 'sample_status',
          slot: 'status',
          align: 'center'
        },
        {
          title: this.$t('test_33'),
          key: 'last_time',
          align: 'center',
          slot: 'last_time'
        },
        {
          title: this.$t('test_34'),
          key: 'uid',
          align: 'center'
        },
        {
          title: this.$t('operation'),
          slot: 'operation',
          align: 'center',
          width: '280'
        }
      ],
      dataList: []
    }
  },
  computed: {
    options () {
      return {
        radius: 100,
        text: function (value) {
          return this.htmlifyNumber(value) + '<span style="font-size: 0.6em;">%</span>'
        },
        textColor: '#ffa000',
        pathColors: ['#f1f1f1', '#ffa000']
      }
    }
  },
  created () {
    this.getTestData()
    this.queryList()
  },
  beforeDestroy () {
    clearInterval(this.setItem)
    this.setItem = null
  },
  methods: {
    search () {
      this.page = 1
      this.queryList()
    },
    /* 获取数据 */
    getTestData () {
      const data = new FormData()
      data.append('access_token', this.token)
      GetTestData(data).then(res => {
        if (res.ret === 200) {
          this.inforCardData[0].count = res.data.fail
          this.inforCardData1[0].count = res.data.success
          if (res.data.percent === 'NAN％') {
            this.inforCardData1[1].count = 0
          } else {
            this.inforCardData1[1].count = parseInt(res.data.percent)
          }
          this.inforCardData1[2].count = res.data.all
        }
      })
    },
    /* 获取状态 */
    change (data) {
      this.data.sample_status = data // 拿到的就是选中的数组。。默认是label的值，可以自定义
    },
    /* 搜索列表 */
    queryList () {
      this.listLoad = true
      const data = new FormData()
      data.append('access_token', this.token)
      if (this.data.sample_name) {
        data.append('sample_name', this.data.sample_name)
      }
      if (this.data.sample_status.length !== 0) {
        data.append('sample_status', this.data.sample_status)
      }
      if (this.data.api_name) {
        data.append('api_name', this.data.api_name)
      }
      data.append('page', this.page)
      data.append('perpage', this.perpage)
      GetTestSampleList(data).then(res => {
        if (res.ret === 200) {
          this.total = res.data.total
          this.dataList = res.data.items
        } else {
          this.$Message.warning(res.msg)
        }
        this.listLoad = false
      })
    },
    /* 立即测试 */
    testFun (id) {
      const data = new FormData()
      data.append('access_token', this.token)
      data.append('id', id)
      CheckTestSample(data).then(res => {
        if (res.ret === 200) {
          this.getTestData()
          this.queryList()
          if (res.data.state === 1) {
            this.$Message.success(this.$t('test_18'))
          } else if (res.data.state === 2) {
            this.$Message.warning(this.$t('test_19'))
          } else if (res.data.state === 3) {
            this.$Message.warning(this.$t('test_20'))
          } else if (res.data.state === 4) {
            this.$Message.warning(this.$t('test_21'))
          }
        } else {
          this.queryList()
          this.$Message.warning(res.msg)
        }
      })
    },
    /* 关闭测试结果 */
    asyncOK () {
      this.modalTest = false
      this.testData.successlv = 0
      clearInterval(this.setItem)
    },
    /* cancel */
    cancel () {
      this.testData.successlv = 0
      clearInterval(this.setItem)
    },
    /* 删除用例 */
    remove (id) {
      this.$Modal.confirm({
        title: this.$t('design_50'),
        content: this.$t('test_35'),
        onOk: () => {
          const data = new FormData()
          data.append('access_token', this.token)
          data.append('id', id)
          DelTestSample(data).then(res => {
            if (res.ret === 200 && res.data.code) {
              this.$Message.success(res.data.msg)
              this.getTestData()
              this.queryList()
            } else {
              this.$Message.warning(res.data.msg)
            }
          })
        },
        onCancel: () => {
          this.$Message.info(this.$t('design_53'))
        }
      })
    },
    /* 定时器 */
    setTimerFun () {
      if (this.setItem === null) {
        this.testData.successlv = 0
        this.setItem = setInterval(() => {
          const data = new FormData()
          data.append('access_token', this.token)
          GetAllTestDetail(data).then(res => {
            // this.testContent = res.data.content
            if (res.ret === 200 && res.data.total !== 0) {
              this.testData.all = res.data.total
              this.testData.success = res.data.test
              if (this.testData.all !== 0) {
                this.testData.successlv = parseInt(this.testData.success / this.testData.all * 100)
                if (this.testData.all !== 0 && (this.testData.all === this.testData.success)) {
                  this.testData.successlv = 100
                  this.queryList()
                  clearInterval(this.setItem)
                }
              }
            }
          })
        }, 2000)
      }
    },
    /* 测试全部示例function */
    testAllSample () {
      const data = new FormData()
      data.append('access_token', this.token)
      TestAllSample(data).then(res => {
        if (res.ret === 200 && res.data.code) {
          this.$Message.success(res.data.msg)
          this.setTimerFun()
        }
      })
    },
    /* 测试全部示例 */
    operationAllTest () {
      this.$Modal.confirm({
        title: this.$t('design_50'),
        content: this.$t('test_36'),
        onOk: () => {
          // this.testContent = ''
          this.testData.all = 0
          this.testData.success = 0
          this.testData.successlv = 0
          this.modalTest = true
          this.testAllSample()
          this.setItem = null
        },
        onCancel: () => {
          this.$Message.info(this.$t('design_53'))
        }
      })
    },
    changeSize (size) {
      this.perpage = size
      this.queryList()
    },
    changePage (page) {
      this.page = page
      this.queryList()
    }
  }
}
</script>

<style  lang='scss'>
.test{
  display: flex;
  align-items: center;
  height:72px;
  background:rgba(255,255,255,1);
  box-shadow:0px 0px 30px 0px rgba(0,0,0,0.05);
  border-radius:10px;
  margin: 10px 0 20px;
  padding: 0 30px;
  &__input{
    margin-right:40px;
  }
  &__allBtn {
    margin-right: 0;
  }
}
.ListTab{
  background: #fff;
  border-radius: 10px;
}
.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}

.operation{
  &__btn{
    margin:0 3px;
  }
}
</style>
