<template>
  <div>
    <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">
        <a-input-search
          v-model="searchInput"
          placeholder="请输入业务流水号"
          enter-button="查询"
          style="width:30%;"
          @search="doSearch"
        />
      </div>
      <div style="background-color: white;margin:0 24px;">
        <a-tabs default-active-key="1" @change="changeTab">
          <a-tab-pane key="1" tab="接入服务">
            <a-layout-content
              :style="{ margin:'0 24px',backgroundColor:'white'}"
            >
              <a-spin :spinning="isLoading" :indicator="indicator">
              <a-table class="table" :columns="jierucolumnsYw" :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>
          </a-tab-pane>
          <a-tab-pane key="2" tab="核心业务">
            <a-layout-content
              :style="{ margin:'0 24px',backgroundColor:'white',}"
            >
              <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>
          </a-tab-pane>
          <a-tab-pane key="3" tab="自定义库">
            <a-layout-content
              :style="{ margin:'0 24px',backgroundColor:'white',}"
            >
              <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>
          </a-tab-pane>
          <a-tab-pane key="4" tab="云从算法">
            <a-layout-content
              :style="{ margin:'0 24px',backgroundColor:'white',}"
            >
              <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>
          </a-tab-pane>
          <a-tab-pane key="5" tab="依图业务">
            <a-layout-content
              :style="{ margin:'0 24px',backgroundColor:'white',}"
            >
              <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>
          </a-tab-pane>
          <a-tab-pane key="6" tab="商城算法">
            <a-layout-content
              :style="{ margin:'0 24px',backgroundColor:'white',}"
            >
              <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>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-layout>
    <!--弹窗-->
    <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 { getAccessData, getCoreData, getOceanData, getMultiAlgoData,shoppingLog,customLog } from '@/api/user'
import { dateFormat } from '@/utils/index'
const jierucolumnsYw = [
  {
    title: '业务流水号',
    dataIndex: 'transaction_order_number',
    width: '25%',
    scopedSlots: { customRender: 'transaction_order_number' }
  },
  {
    title: 'ip地址',
    dataIndex: 'ip',
    width: '15%',
    scopedSlots: { customRender: 'ip' }
  },
  {
    title: '时间',
    dataIndex: 'time_stamp',
    width: '30%',
    scopedSlots: { customRender: 'time_stamp' }
  },
  {
    title: '响应码',
    dataIndex: 'code',
    width: '10%',
    scopedSlots: { customRender: 'code' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]
const columns = [
  {
    title: '业务流水号',
    dataIndex: 'transaction_order_number',
    width: '25%',
    scopedSlots: { customRender: 'transaction_order_number' }
  },
  {
    title: 'ip地址',
    dataIndex: 'ip',
    width: '15%',
    scopedSlots: { customRender: 'ip' }
  },
  {
    title: '时间',
    dataIndex: 'time_stamp',
    width: '40%',
    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 {
      indicator: <a-icon type="sync" style="font-size: 30px;color:rgb(24,144,255)" spin />,
      isLoading:true,
      columns,
      jierucolumnsYw,
      data: [],
      ModalText: '',
      visible: false,
      maskClosable: false,
      currentTab: '1',
      // currentBtn: 'all',
      searchInput: '',
      imageList:'',
      imageListArray:[],
      detailAppid:'',
      pagination: {
        current: 1,
        total: 0
      },
      detail: {}
    }
  },
  mounted() {
    // 默认查询接入服务的日志查询
    this.getAccessLog()
  },
  methods: {
    // 页码变化后执行的操作
    handleTableChange(pagination) {
      debugger
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager
      console.log(this.pagination)
      switch (this.currentTab) {
        case '1': this.getAccessLog(); break
        case '2': this.getCoreLog(); break
        case '3': this.customLog(); break
        case '4': this.getOceanLog(); break
        case '5': this.getMultiAlgoLog(); break
        case '6': this.shoppingLog(); break
      }
    },
    // 点击查询按钮
    doSearch() {
      switch (this.currentTab) {
        case '1': this.getAccessLog(); break
        case '2': this.getCoreLog(); break
        case '3': this.customLog(); break
        case '4': this.getOceanLog(); break
        case '5': this.getMultiAlgoLog(); break
        case '6': this.shoppingLog(); break
      }
    },
    // 接入服务的日志查询
    getAccessLog() {
      getAccessData(this.searchInput, this.pagination.current, 10).then(res => {
        if (res.data.code === 200) {
          this.isLoading = false
          this.pagination.total = res.data.data.total
          this.data = res.data.data.list
          // this.imageList
          // JSON.stringify(res.data.data.list)
          console.log(this.searchInput, this.pagination.current, 10)
        } else {
          this.$message.warning(res.data.msg)
        }
      })
    },
    // 核心业务的日志查询
    getCoreLog() {
      getCoreData(this.searchInput, this.pagination.current, 10).then(res => {
        if (res.data.code === 200) {
          this.isLoading = false
          this.pagination.total = res.data.data.total
          this.data = res.data.data.list
        } else {
          this.$message.warning(res.data.msg)
        }
      })
    },
    // 云从算法的日志查询
    getOceanLog() {
      getOceanData(this.searchInput, this.pagination.current, 10).then(res => {
        if (res.data.code === 200) {
          this.isLoading = false
          this.pagination.total = res.data.data.total
          this.data = res.data.data.list
        } else {
          this.$message.warning(res.data.msg)
        }
      })
    },
    //自定义库
    customLog() {
      customLog(this.searchInput, this.pagination.current, 10).then(res => {
        if (res.data.code === 200) {
          this.isLoading = false
          this.pagination.total = res.data.data.total
          this.data = res.data.data.list
        } else {
          this.$message.warning(res.data.msg)
        }
      })
    },
    //商城算法
    shoppingLog() {
      shoppingLog(this.searchInput, this.pagination.current, 10).then(res => {
        if (res.data.code === 200) {
          this.isLoading = false
          this.pagination.total = res.data.data.total
          this.data = res.data.data.list
        } else {
          this.$message.warning(res.data.msg)
        }
      })
    },
    // 依图业务的日志查询
    getMultiAlgoLog() {
      getMultiAlgoData(this.searchInput, this.pagination.current, 10).then(res => {
        if (res.data.code === 200) {
          this.isLoading = false
          this.pagination.total = res.data.data.total
          this.data = res.data.data.list
        } else {
          this.$message.warning(res.data.msg)
        }
      })
    },
    // 切换tab
    changeTab(value) {
      console.log(value)
      this.currentTab = value
      this.pagination = {
        current: 1,
        total: 0
      }
      this.data = []
      switch (value) {
        case '1': this.getAccessLog(); break
        case '2': this.getCoreLog(); break
        case '3': this.customLog(); break
        case '4': this.getOceanLog(); break
        case '5': this.getMultiAlgoLog(); break
        case '6': this.shoppingLog(); break
      }
    },
    // 点击表格上的编辑，查看单条的详情信息
    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('复制失败')
    }
    // 点击时间按钮
    // clickTimeBtn(whichTimeBtn) {
    //   switch (whichTimeBtn) {
    //     case 'all':
    //       // 查询所有数据;
    //       this.currentBtn = 'all'
    //       break
    //     case 'today':
    //       // 查询今天的数据;
    //       this.currentBtn = 'today'
    //       break
    //     case 'recentThreeDay':
    //       // 查询近三天的数据
    //       this.currentBtn = 'recentThreeDay'
    //       break
    //     case 'recentSevenDay':
    //       // 查询近一个星期的数据
    //       this.currentBtn = 'recentSevenDay'
    //       break
    //     case 'recentOneMonth':
    //       // 查询近一个月的数据
    //       this.currentBtn = 'recentOneMonth'
    //       break
    //   }
    // },
  }
}
</script>
<style scoped>
  .table {
    margin-bottom: 50px;
  }
</style>
