<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="pagerDto._Eq_CustomerId" placeholder="客户名称" clearable filterable>
          <el-option
            v-for="item in customers"
            :key="item.Id"
            :label="item.CompanyName"
            :value="item.Id"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select v-model="pagerDto._Eq_IsLimit" placeholder="是否限额" clearable filterable>
          <el-option label="是" value="True" />
          <el-option label="否" value="False" />
        </el-select>
      </el-form-item>
      <el-button icon="el-icon-search" size="small" type="primary" :loading="ladding" @click="pagerSerach">搜索</el-button>
    </el-form>
    <el-table
      :data="sData"
      border
      height="660"
    >
      <el-table-column label="客户名称" prop="CompanyName" />

      <el-table-column label="额度" prop="Quota" scope="r">
        <template scope="r">
          {{ r.row.Quota }} {{ r.row.Currency }}
          <el-button size="mini" @click="adjustmentQuota(r.row)">
            调整
          </el-button>
          <el-button size="mini">
            <router-link :to="{name:'AdjustmentQuotaLogs',params:{CustomerId:r.row.Id,SourceTarget:0,CustomerName:r.row.CompanyName}}">调整记录</router-link>
          </el-button>
        </template>
      </el-table-column>

      <el-table-column label="余额" prop="Balance" scope="r">
        <template scope="r">
          {{ r.row.Balance }}
          <el-button size="mini" @click="recharge(r.row)">
            充值
          </el-button>
          <el-button size="mini">
            <router-link :to="{name:'CustomerBillCardDetail',params:{CustomerId:r.row.CustomerId,SourceTarget:0,CustomerName:r.row.CompanyName}}">充值记录</router-link>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template scope="r">

          <el-button v-if="r.row.IsLimit" size="mini" @click="setIsLimit(r.row.CustomerId,false)">
            关闭
          </el-button>
          <el-button v-if="!r.row.IsLimit" size="mini" @click="setIsLimit(r.row.CustomerId,true)">
            开启
          </el-button>
          <el-button size="mini">
            <router-link :to="{name:'CustomerBillCardDetail',params:{CustomerId:r.row.CustomerId,SourceTarget:1,CustomerName:r.row.CompanyName}}">消费记录</router-link>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :page-sizes="[100, 200, 300, 400]"
      :current-page="pagerDto.PageIndex"
      :page-size="pagerDto.PageSize"
      background
      layout="prev, pager, next ,total ,jumper,sizes,slot "
      :total="pagerDto.total"
      @current-change="pagerSerach"
    />
    <!--

      <el-dialog title="批量搜索" :visible.sync="dialogBatchSearch">
        <el-form :model="pagerDto" label-width="80px" @submit.native.prevent>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogBatchSearch = false">取 消</el-button>
          <el-button type="primary" @click="postBatchSearch">确 定</el-button>
        </div>
      </el-dialog> -->
  </div>

</template>
<script>
import { _adjustmentQuota, _queryPager, _setIsLimit, _recharge } from '@/api/customerBillCard'
import { _getCustomers } from '@/api/baseInfo'
export default {
  name: 'CustomerBillCard',
  data() {
    return {
      ladding: false,
      showAdjustmentQuota: false,
      sData: [],
      customers: [],
      row: {},
      pagerDto:
                {
                  PageIndex: 1,
                  PageSize: 100,
                  total: 0,
                  QuerySort: [{ Field: 'CustomerId', IsDesc: true }],
                  _Eq_CustomerId: ''
                }
    }
  },
  mounted() {
    this.pagerSerach()
    _getCustomers().then(response => {
      this.customers = response
    })
  },
  methods: {
    pagerSerach(pageIndex) {
      if (pageIndex && pageIndex > 0) { this.pagerDto.PageIndex = pageIndex } else { this.pagerDto.PageIndex = 1 }

      this.ladding = true
      _queryPager(this.pagerDto).then(response => {
        this.pagerDto.total = response.TotalCount
        this.sData = response.Result
        this.ladding = false
      }).catch(response => {
        this.ladding = false
      })
    },
    recharge(row) {
      this.showAdjustmentQuota = true
      this.$prompt('请输入充值金额(RMB)', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^(([1-9]{1}\d*)|([0]{1}))(\.(\d){0,2})?$/,
        inputErrorMessage: '充值金额格式不正确，充值金额小数位数必须小于等于2,充值金额必须大于0'
      }).then(response => {
        _recharge({ CustomerId: row.CustomerId, Balance: response.value, Currency: 'RMB' }).then(response => {
          this.$message('充值成功')
          this.pagerSerach()
        })
      })
    },
    adjustmentQuota(row) {
      this.showAdjustmentQuota = true
      this.$prompt('请输入金额(RMB)', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^(([1-9]{1}\d*)|([0]{1}))(\.(\d){0,2})?$/,
        inputErrorMessage: '限额格式不正确，限额小数位数必须小于等于2,限额必须大于0'
      }).then(response => {
        _adjustmentQuota({ CustomerId: row.CustomerId, Quota: response.value, Currency: 'RMB' }).then(response => {
          this.$message('调整成功')
          this.pagerSerach()
        })
      })
      this.row = row
    },
    setIsLimit(CustomerId, IsLimit) {
      _setIsLimit({ CustomerId: CustomerId, IsLimit: IsLimit }).then(response => {
        this.$message((IsLimit ? '启用' : '停用') + '成功')
        this.pagerSerach()
      })
    }
  }
}
</script>
