<template>
  <div v-loading="loading">
    <div class="white-box">
      <leo-filter :filter="handleFilter" :dateRangePickerDisplay="false" :dateMonthPickerDisplay="true"></leo-filter>
      <el-table class="withdraw-table" ref="multipleTable" :data="tableData" stripe style="width: 100%;">
        <el-table-column label="Member Code" width="120"><!-- 会员编号 -->
          <template slot-scope="scope">
            {{scope.row.USER_NAME}}
          </template>
        </el-table-column>
        <el-table-column label="Member Name" width="120"><!-- 会员姓名 -->
          <template slot-scope="scope">
            {{scope.row.REAL_NAME}}
          </template>
        </el-table-column>
       <!-- <el-table-column label="Withdrawal way" width="140"> 提现方式
          <template slot-scope="scope">
            {{scope.row.IS_AUTO_WITHDRAW==='1'?'Automatic withdrawal':'Manual withdrawal'}} 自动体现：手动体现
          </template>
        </el-table-column>-->
        <el-table-column label="Withdrawal Amount" prop="AMOUNT" width="200px"></el-table-column><!-- 提现金额 -->
       <!-- <el-table-column label="Service charge" prop="FEES" width="120"></el-table-column> --><!-- 手续费 -->
        <!-- <el-table-column label="Actual amount" prop="REAL_AMOUNT" width="120"></el-table-column> --><!-- 实际到账金额 -->
        <el-table-column label="Withdrawal time" width="120"><!-- 提现时间 -->
          <template slot-scope="scope">
            {{tool.formatDate(scope.row.CREATED_AT)}}
          </template>
        </el-table-column>
        <el-table-column label="Status" width="120"><!-- 提现状态 -->
          <template slot-scope="scope">
            <el-tag :type="tool.statusType(scope.row.AUDIT_STATUS)">{{scope.row.STATUS_NAME}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="Remark" width="120"><!-- 备注 -->
          <template slot-scope="scope">
            <el-tag :type="tool.statusType(scope.row.REMARK)">{{scope.row.REMARK}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="Remark Returned for withdrawal" width="220"><!-- 提现退回备注 -->

          <template slot-scope="scope">
            <el-tag :type="tool.statusType(scope.row.BACK_REMARK)">{{scope.row.BACK_REMARK}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="Payment time" width="180"><!-- 付款时间 -->
          <template slot-scope="scope">
            {{tool.formatDate(scope.row.PAID_AT)}}
          </template>
        </el-table-column>
        <!--<el-table-column label="付款类型">-->
          <!--<template slot-scope="scope">-->
            <!--{{scope.row.PAY_TYPE==='1'?'见票付款':'无票付款'}}-->
          <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column label="发票金额">-->
          <!--<template slot-scope="scope">-->
            <!--{{scope.row.INVOICE_AMOUNT}}-->
          <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column label="发票状态">-->
          <!--<template slot-scope="scope">-->
            <!--{{scope.row.INVOICE_STATUS_NAME}}-->
          <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column label="发票信息" width="200">-->
          <!--<template slot-scope="scope">-->
            <!--<el-button type="primary" size="small" @click="handleAddInvoiceShow(scope.row)"-->
                       <!--v-if="scope.row.AUDIT_STATUS==='0'" icon="el-icon-upload">上传发票-->
            <!--</el-button>-->
            <!--<el-button type="warning" size="small" @click="handleAddInvoiceShow(scope.row)"-->
                       <!--v-if="scope.row.AUDIT_STATUS==='1'" icon="el-icon-upload">重传发票-->
            <!--</el-button>-->
            <!--<el-button type="success" size="small" @click="handleInvoiceShow(scope.row)"-->
                       <!--v-if="scope.row.AUDIT_STATUS!=='0'&&scope.row.UPLOAD_ID" icon="el-icon-view">查看发票-->
            <!--</el-button>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column label="Reasons for payment failure" width="220"><!-- 付款失败原因 -->
          <template slot-scope="scope">
            {{scope.row.PAID_FAIL_REMARK}}
          </template>
        </el-table-column>
<!--        <el-table-column label="操作" width="120">-->
<!--          <template slot-scope="scope">-->
<!--            <el-button type="primary" size="small" @click="handleReturn(scope.row)"-->
<!--                       v-if="scope.row.AUDIT_STATUS==='0'||scope.row.AUDIT_STATUS==='1'" icon="el-icon-sold-out">提现退回-->
<!--            </el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
      <div class="white-box-footer">
        <el-button type="primary" size="small" @click="handleAdd">Withdraw</el-button><!-- 我要提现 -->
        <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></pagination>
      </div>
    </div>
    <el-dialog title="Upload invoice" :visible.sync="dialogAddInvoiceVisible"><!-- 上传发票 -->
      <div v-loading="dialogAddInvoiceLoading">
        <el-alert type="warning" :closable="false">
          <slot name="title">
            <pre v-html="addInvoiceTips"></pre>
          </slot>
        </el-alert>

        <leo-uploader :requestRoute.sync="requestRoute" :defaultImageUrl="defaultImageUrl" width="480px" height="320px"
                      :uploaderSuccessCanChange="false" @on-success="handleSuccess"></leo-uploader>
      </div>
    </el-dialog>

    <el-dialog title="View invoice" :visible.sync="dialogInvoiceVisible"><!-- 查看发票 -->
      <div v-loading="dialogInvoiceLoading">
        <a :href="invoiceUrl" target="_blank"><img :src="invoiceUrl" alt="" style="max-width: 100%"></a>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogInvoiceVisible = false">Confirm</el-button><!-- 确定 -->
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import Vue from 'vue'
  import network from './../../utils/network'
  import tool from '@/utils/tool'
  import store from '@/utils/vuexStore'
  import LeoFilter from '@/components/Filter'
  import LeoUploader from '@/components/Uploader'
  import Pagination from '@/components/Pagination'

  export default {
    name: 'finance_withdraw',
    components: {LeoFilter, LeoUploader,Pagination},
    mounted() {
      this.getData()
    },
    data() {
      return {
        tableData: null,
        loading: true,
        currentPage: 1,
        totalPages: 1,
        totalCount: 1,
        pageSize: 20,
        tool: tool,
        filterData: null,
        auditId: null,
        invoiceId: null,
        dialogAddInvoiceVisible: false,
        dialogAddInvoiceLoading: false,
        dialogInvoiceVisible: false,
        dialogInvoiceLoading: false,
        defaultImageUrl: null,
        addInvoiceTips: '',
        requestRoute: '',
        uploadId: null,
        invoiceUrl: '',
      }
    },
    methods: {
      handleCurrentChange(page) {
        this.getData(page, this.pageSize)
      },
      handleSizeChange(pageSize) {
        this.getData(this.currentPage, pageSize)
      },
      handleFilter(model) {
        this.filterData = model
        this.getData(1, this.pageSize)
      },
      handleAdd() {
        this.$router.push({path: `/finance/withdraw-add`})
      },
      getData(page, pageSize) {
        network.getPageData(this, 'finance/withdraw', page, pageSize, this.filterData, function (response) {

        })
      },
      handleAddInvoiceShow(row) {
        this.dialogAddInvoiceLoading = true
        this.auditId = row.ID
        this.requestRoute = 'finance/invoice-add/' + this.auditId
        this.dialogAddInvoiceVisible = true
        let vueObj = this
        network.getData('finance/invoice-before-add', {id: this.auditId}).then(response => {
          vueObj.dialogAddInvoiceLoading = false
          vueObj.addInvoiceTips = response.addInvoiceTips
        })
      },
      handleSuccess(response, file) {
        this.getData()
        this.$message({
          message: 'Invoice uploading completed.Please post the paper invoice as soon as possible!',//上传发票完成，请尽快邮寄纸质发票！
          type: 'success'
        })
        //this.form.image = imageUrl;
      },
      handleInvoiceShow(row) {
        this.dialogInvoiceLoading = true
        this.uploadId = row.UPLOAD_ID
        this.dialogInvoiceVisible = true
        let vueObj = this
        network.getData('finance/invoice-show', {id: this.uploadId}).then(response => {
          vueObj.dialogInvoiceLoading = false
          vueObj.invoiceUrl = response
        })
      },
      // handleReturn(row){
      //   this.$prompt('确定要提现退回？请填写退回备注', 'Hint', {
      /*    confirmButtonText: 'confirm', // 确定*/
      /*    cancelButtonText: 'cancel', // 取消*/
      /*    inputPlaceholder: '请填写退回备注',*/
      /*  }).then(({value}) => {*/
      /*    this.$message({*/
      /*      message: '正在提交',*/
      /*      type: 'info'*/
      /*    })*/
      /*    return network.postData(`finance/withdraw-back`, {*/
      //       id: row.ID,
      //       createRemark: value
      //     }).then(response => {
      //       this.$message({
      //         message: response,
      //         type: 'success'
      //       })
      //       this.getData()
      //     }).catch(() => {
      //     })
      //   }).catch((response) => {
      //   })
      // }
    }
  }
</script>

<style scoped>
  .el-button {
    margin: 3px;
  }
</style>
