<template>
  <div>
    <a-locale-provider :locale="locale">
    <a-layout>
      <div style="background-color: white;padding: 20px;margin-bottom:20px;">
        <a-breadcrumb>
          <!-- <a-icon type="arrow-left" style="margin-right:10px;" @click="() => $router.go(-1)" /> -->
          <a-breadcrumb-item>查询</a-breadcrumb-item>
          <a-breadcrumb-item>日志筛选</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div style="background-color: white;margin:10px 24px;padding:24px;text-align:center">
        <span>选择日期区间：</span>
        <a-range-picker
          @change="getSTime"
          :show-time="{
          hideDisabledOptions: true,
          defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
      }"
          format="YYYY-MM-DD HH:mm:ss"
        />
        <span>请输入应用ID：</span>
        <a-input style="width: 20%" v-model="codeId" placeholder="请输入应用ID"></a-input>
        <span>请输入响应码：</span>
        <a-input
          v-model="searchInput"
          placeholder="请输入响应码"
          style="width:15%;"
        />
        <a-button @click="doSearch">查询</a-button>
      </div>
      <div style="background-color: white;margin:0 24px;">
            <a-layout-content
              :style="{ margin:'10px 24px',backgroundColor:'white'}"
            >
              <span><a-icon type="info-circle" />已检索到{{ pagination.total }}条</span>
              <a-button v-if="flagMode" style="float: right;cursor: pointer;margin-top: -5px"><a @click="mobandaochu">批量导出</a></a-button>
              <a-spin :spinning="isLoading" :indicator="indicator">
              <a-table class="table" :columns="columns" :data-source="data" :pagination="pagination" bordered @change="handleTableChange">
                <span slot="time_stamp" slot-scope="text">
                  {{ text | dateFilter }}
                </span>
                <template slot="operation" slot-scope="text, record">
                  <div class="editable-row-operations">
                    <a @click="() => edit(record)">详情</a>
                  </div>
                </template>
              </a-table>
              </a-spin>>
            </a-layout-content>
      </div>
    </a-layout>
    </a-locale-provider>
    <a-modal v-model="visible" title="详情" cancel-text="关闭" ok-text="复制" width="80%" :mask-closable="maskClosable">
      <a-descriptions bordered>
        <a-descriptions-item label="业务流水号">
          {{ detail.transaction_order_number }}
        </a-descriptions-item>
        <a-descriptions-item label="IP地址">
          {{ detail.ip }}
        </a-descriptions-item>
        <a-descriptions-item label="认证模式">
          {{ detail.mode }}
        </a-descriptions-item>
        <a-descriptions-item label="认证耗时">
          {{ detail.business_time }}
        </a-descriptions-item>
        <a-descriptions-item label="日志写入时间">
          {{ detail.time_stamp | dateFilter }}
        </a-descriptions-item>
        <a-descriptions-item label="是否成功">
          {{ detail.status ? '是': '否' }}
        </a-descriptions-item>
        <a-descriptions-item label="业务响应码">
          {{ detail.code }}
        </a-descriptions-item>
        <a-descriptions-item label="业务响应说明">
          {{ detail.msg }}
        </a-descriptions-item>
        <a-descriptions-item label="应用ID">
          {{ detail.appid }}
        </a-descriptions-item>
      </a-descriptions>
      <!-- <div style="min-height:200px;border:1px solid #e8e8e8;color:#8f8f8f;border-radius: 5px;">
        {{ ModalText }}
      </div>-->
      <img style="width: 150px;height: auto;margin-top: 10px" v-if="detail.mode =='YTCR-BASIC'" :src=" 'data:image/png;base64,' + imageList" />
      <div  style="margin-top: 10px;display: flex" v-else >
        <a-row v-for="item in imageListArray">
          <img style="width: 150px;height:160px;margin-left: 10px;display: flex;align-items: center;" :src=" 'data:image/png;base64,' + item.Data" />
        </a-row>
      </div>
      <template slot="footer">
        <a-button key="back" @click="visible = false">
          关闭
        </a-button>
        <a-button key="submit" v-clipboard:copy="ModalText" v-clipboard:success="copySuccess" v-clipboard:error="copyError" type="primary">
          复制
        </a-button>
      </template>
    </a-modal>
  </div>

</template>
<script>

import {logsearchfilter } from '@/api/user'
import { dateFormat } from '@/utils/index'
import moment from 'moment';
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
import baseURL from '@/api/global_variable'
const columns = [
  {
    title: '业务流水号',
    dataIndex: 'transaction_order_number',
    width: '21%',
    scopedSlots: { customRender: 'transaction_order_number' }
  },
  {
    title: '应用id',
    dataIndex: 'appid',
    width: '21%',
    scopedSlots: { customRender: 'appid' }
  },
  {
    title: '模式',
    dataIndex: 'mode',
    width: '16%',
    scopedSlots: { customRender: 'mode' }
  },
  {
    title: '响应码',
    dataIndex: 'code',
    width: '16%',
    scopedSlots: { customRender: 'code' }
  },
  {
    title: '时间',
    dataIndex: 'time_stamp',
    width: '16%',
    scopedSlots: { customRender: 'time_stamp' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]
export default {
  filters: {
    // 日期过滤器，将时间戳改为时间格式
    dateFilter: function(value) {
      return dateFormat(parseInt(value), 'Y-m-d H:i:s')
    }
  },
  data() {
    return {
      columns,
      indicator: <a-icon type="sync" style="font-size: 30px;color:rgb(24,144,255)" spin />,
      data: [],
      searchInput: '',
      locale: zhCN,
      maskClosable: false,
      flagMode:false,
      imageListArray:[],
      ModalText:'',
      isLoading:false,
      imageList:'',
      visible: false,
      detail: {},
      pagination: {
        current: 1,
        total: 0
      },
      codeId:'',
      lte:'',
      gte:''
    }
  },
  mounted() {
  this.doSearch()
  },
  methods: {
    moment,
    doSearch(){
      this.isLoading = true
      logsearchfilter(this.gte,this.lte,this.pagination.current,10,this.codeId,this.searchInput).then(res => {
        if (res.data.code ==200){
          this.pagination.total = res.data.data.total
         this.data  = res.data.data.list
          this.isLoading = false
          if (res.data.data.total>0){
            this.flagMode = true
          }
        }

      })
    },
    // 点击表格上的编辑，查看单条的详情信息
    edit(record) {
      debugger
      this.visible = true
      this.detail = record
      this.ModalText = record
      this.imageListArray=[]
      if (record.mode =='YTCR-BASIC'){
        this.imageList =JSON.parse(record.requestData).bdata.ImageData
        console.log(this.imageList)
      }else{
        console.log(record.requestData)
        this.imageListArray =JSON.parse(record.requestData).bdata.FaceImageList
        console.log(this.imageListArray)
      }
    },
    // 复制成功;
    copySuccess() {
      this.$message.success('复制成功')
    },
    // 复制失败
    copyError() {
      this.$message.error('复制失败')
    },
    mobandaochu(){
      var url = baseURL +'/log/search/v1/excelExport?code='+this.searchInput+'&page='+this.pagination.current+'&size='+this.pagination.total+'&appid='+this.codeId+'&gte='+this.gte+'&lte='+this.lte
      window.location.href = url
    },
    getSTime (val) {
      if (val.length<1){
        this.gte = ''
        this.lte = ''
      }else{
        var dategte = new Date(val[0]);
        this.gte = Date.parse(dategte);
        var datelte = new Date(val[1]);
        this.lte = Date.parse(datelte);
      }
    },
    // 页码变化后执行的操作
    handleTableChange(pagination) {
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager
      console.log(this.pagination)
      this.doSearch()
    },
  }
}
</script>
<style scoped>
.table {
margin: 10px 0;
}
</style>
