<template>
  <div class="user-assets-page">
    <Card>
      <div class="search-con">
        <Input placeholder="请输入用户编号" class="search-input" v-model="searchContent.uid" style="width: 200px"/>
        <Input placeholder="请输入用户登录账号" class="search-input" v-model="searchContent.account" style="width: 200px"/>
        <Select class="search-input"  v-model="searchContent.type" placeholder="请选择资产类型" style="width: 200px">
          <Option value="">全部</Option>
          <Option v-for="(item, index) in assetsData"
            :value="item"
            :key="'series-option-' + index"
          >
            {{item}}
          </Option>
        </Select>
        <ButtonGroup class="search-btngroup">
        <Button type="primary" style="margin-left: 20px" @click="handleSearch">查 找</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>
  <Modal
        :title="title"
        v-model="modalStatus"
        @on-cancel="handleCancel"
      >
        <div class="model-item">
          <label class="label">账户：</label>
          <Input
            v-model="account"
            readonly
          />
        </div>
        <div class="model-item">
          <label class="label">金额：</label>
          <Input
            v-model="amount"
          />
        </div>
        <div slot="footer">
          <Button
            type="primary"
            @click="handleSure"
          >
            确定
          </Button>
        </div>
      </Modal>
  </div>
</template>
<script>
import Tables from '_c/tables'
import { formatTime } from '@/libs/tools'
export default {
  inject: ['reload'],
  components: {
    Tables
  },
  data () {
    return {
      searchContent: {
        uid: null,
        account: null,
        type: null,
        pageNum: 1,
        pageSize: 10
      },
      assetsData: [
      ],
      tableData: [],
      columns: [
        { title: '用户编号', key: 'uid', align: 'left', minWidth: 180 },
        { title: '用户登录账号', key: 'loginAccount', align: 'center', width: 130 },
        { title: '用户昵称', key: 'nickName', align: 'center', width: 120 },
        { title: '账户', key: 'account', align: 'left', minWidth: 180 },
        { title: '资产类型', key: 'assetsType', align: 'center', width: 100 },
        { title: '可用余额', key: 'amount', align: 'center', width: 100 },
        { title: '冻结余额', key: 'frozen', align: 'center', width: 100 },
        { title: '更新时间',
          key: 'updateTime',
          align: 'center',
          width: 150,
          render: (h, params) => {
            return h('span', formatTime(params.row.updateTime))
          }
        },
        { title: '操作',
          key: 'index',
          align: 'center',
          minWidth: 160,
          render: (h, params) => {
            let rechargeBtn = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: this.handleRecharge(params.row)
                },
                style: {
                  marginRight: '5px'
                }
              },
              '充 值'
            )
            let deductionBtn = h(
              'Button',
              {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: this.handleDeduction(params.row)
                },
                style: {
                  marginRight: '5px'
                }
              },
              '扣 除'
            )
            return h('div', params.row.assetsType == 'BASE' ? [rechargeBtn, deductionBtn] : '--')
          }
        }
      ],
      loading: false,
      totalSize: 0,
      title: '',
      account: '',
      amount: '',
      uid: '',
      modalStatus: false
    }
  },
  methods: {
    requestData () {
      this.loading = true
      this.api({
        apiName: 'userAssetsPage',
        postdata: this.searchContent,
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          console.log(res)
          this.tableData = res.data.records
          this.totalSize = res.data.total
        }
      })
    },
    requestUserAssetsType () {
      this.api({
        apiName: 'userAssetsType',
        success: (res) => {
          this.assetsData = res.data
        }
      })
    },
    handleSearch () {
      this.searchContent.pageNum = 1
      this.requestData()
    },
    handleRefresh () {
      this.reload()
    },
    handleCurrentChange (pageNum) {
      this.searchContent.pageNum = pageNum
      this.requestData()
    },
    handleCancel () {
      this.amount = ''
      this.modalStatus = false
    },
    handleSure () {
      if (!this.amount) {
        return this.$Message.warning(`请输入${this.title}金额`)
      }
      if ((this.amount <= 0 || this.originalPrice > 999999)) {
        return this.$Message.warning(`金额格式输入有误！`)
      }
      this.originalPrice = parseFloat(this.amount)
      if (!/^[0-9]+(.[0-9]{1,2})?$/.test(this.amount)) {
        return this.$Message.warning(`金额格式最多至小数点后两位！`)
      }
      let apiName = this.title == '充值' ? 'rechargeUser' : 'deductionUser'
      let dto = {
        account: this.account,
        amount: this.amount,
        uid: this.uid
      }
      this.api({
        apiName,
        postdata: dto,
        success: (res) => {
          this.handleCancel()
          this.$Notice.success({ title: `${this.title}完成，稍后查询结果哦！` })
          // this.requestData()
        }
      })
    },
    handleRecharge (row) {
      return () => {
        this.title = '充值'
        let { uid, account } = row
        this.uid = uid
        this.account = account
        this.modalStatus = true
      }
    },
    handleDeduction (row) {
      return () => {
        this.title = '扣除'
        let { uid, account } = row
        this.uid = uid
        this.account = account
        this.modalStatus = true
      }
    }
  },
  created () {
    this.requestUserAssetsType()
    this.requestData()
  }
}
</script>
<style scoped lang="less">
.user-assets-page .search-con {
  display: flex;
  padding: 10px 0;
  .search-input {
    width: 300px;
    margin-right: 10px;
  }
}
 .model-item {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    .label {
      display: inline-block;
      width: 100px;
      text-align: right;
    }
  }
</style>
