<template>
  <div class="good-list-con">
    <Card>
      <div class="search-con">
        <Input
          placeholder="请输入流水号"
          class="search-input"
          v-model="searchContent.flowId"
          style="width: 200px"
          clearable
        />
        <Input
          placeholder="请输入用户编号"
          class="search-input"
          v-model="searchContent.uid"
          style="width: 200px"
          clearable
        />
        <Select
          placeholder="请选择通证ID"
          class="search-input"
          v-model="searchContent.coin"
          filterable
          style="width: 200px"
        >
          <!-- <Option value>全部</Option> -->
          <Option
            v-for="(item, index) of assetType"
            :value="item.series_id"
            :key="'series-option-' + index"
            >{{ item.series_name }}</Option
          >
        </Select>
        <Select
          placeholder="请选择交易类型"
          class="search-input"
          v-model="searchContent.type"
          filterable
          style="width: 200px"
        >
          <Option value>全部</Option>
          <Option
            v-for="(item, index) of FinancialState"
            :value="item"
            :key="'series-option-' + index"
            >{{FinancialStateObj[item].label}}</Option
          >
        </Select>
        <ButtonGroup class="search-btngroup">
          <Button @click="handleSearch" type="primary">搜索</Button>
          <Button type="primary" @click="handleRefresh">
            <Icon type="md-refresh" />
          </Button>
        </ButtonGroup>
      </div>
      <tables
        ref="tables"
        editable
        pagable
        v-model="tableData"
        :columns="columns"
        :currentPage="searchContent.pageNum"
        :pageSize="searchContent.pageSize"
        :totalSize="totalSize"
        :loading="loading"
        @on-change="handleCurrentChange"
      />
    </Card>
  </div>
</template>

<script>
import Tables from '_c/tables'
import { formatTime } from '@/libs/tools'
import { FinancialState, FinancialStateObj, TransferStatus, TransferStateObj } from '@/enums'
import config from '@/config'
const HOST = config.chainExploreUrl
export default {
  inject: ['reload'],
  components: {
    Tables
  },
  computed: {
  },
  data () {
    return {
      FinancialState,
      FinancialStateObj,
      searchContent: {
        flowId: '',
        uid: '',
        coin: '',
        pageNum: 1,
        pageSize: 10,
        type: ''
      },
      createTime: [],
      assetType: [],
      columns: [
        { title: '流水号', key: 'flowId', minWidth: 180, align: 'left' },
        { title: '用户编号', key: 'uid', minWidth: 180, align: 'left' },
        { title: '用户登录账号', key: 'loginAccount', minWidth: 160, align: 'center' },
        { title: '通证ID',
          key: 'assetsType',
          minWidth: 150,
          align: 'left'
        },
        { title: '数量', key: 'amount', minWidth: 80, align: 'center' },
        { title: '对方地址', key: 'otherSide', minWidth: 180, align: 'left' },
        { title: '交易类型',
          key: 'type',
          minWidth: 160,
          align: 'center',
          render: (h, params) => {
            let obj = FinancialStateObj[params.row.type]
            return h(
              'Tag',
              {
                props: {
                  color: obj.color
                }
              },
              obj.label
            )
          } },
        { title: '交易状态',
          key: 'status',
          minWidth: 160,
          align: 'center',
          render: (h, params) => {
            let obj = TransferStateObj[params.row.status]
            return h(
              'Tag',
              {
                props: {
                  color: obj.color
                }
              },
              obj.label
            )
          } },
        {
          title: '交易时间',
          align: 'center',
          width: 180,
          render: (h, params) => {
            return h('span', formatTime(params.row.createTime))
          }
        },
        { title: '操作',
          key: 'index',
          align: 'center',
          minWidth: 150,
          render: (h, params) => {
            let flowDetailBtn = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  margin: '5px'
                },
                on: {
                  click: this.handleDetaild(params.row)
                }
              },
              '查看详情'
            )
            return h('div', [flowDetailBtn])
          }
        }
      ],
      tableData: [],
      totalSize: 0,
      loading: false
    }
  },
  methods: {
    // 获取资产类型
    getAssetsType () {
      let type = {}
      this.assetType = []
      this.api({
        apiName: 'userType',
        success: (res) => {
          // console.log('res', res)
          // this.assetType = res.data
          res.data.forEach(item => {
            type = {
              series_name: item,
              series_id: item
            }
            this.assetType.push(type)
          })
        }
      })
    },
    getUserList () {
      this.loading = true
      this.searchContent.flowId = this.searchContent.flowId.replace(/\s+/g, '')
      this.searchContent.uid = this.searchContent.uid.replace(/\s+/g, '')
      this.api({
        apiName: 'userAssetRecordList',
        postdata: this.searchContent,
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.tableData = res.data.records
          this.totalSize = res.data.total
        }
      })
    },
    handleDetaild (row) {
      return () => {
        let id = row.hash
        let url = `${HOST}/#/tx-detail?hash=${id}`
        window.location.href = url
      }
    },
    handleSearch () {
      this.searchContent.pageNum = 1
      this.getUserList()
    },
    handleRefresh () {
      this.reload()
    },
    handleCurrentChange (pageNum) {
      this.searchContent.pageNum = pageNum
      this.getUserList()
    }
  },
  created () {
    console.log(this.type)
    this.getUserList()
    this.getAssetsType()
  }
}
</script>

<style lang="less">
.good-list-con .search-con {
  padding: 10px 0;
  .search {
    &-col {
      display: inline-block;
      width: 150px;
      margin-right: 5px;
    }
    &-input {
      display: inline-block;
      width: 150px;
      margin-right: 5px;
    }
    &-date {
      margin-right: 5px;
    }
    &-btngroup {
      margin-right: 5px;
    }
  }
}
</style>
