<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-tabs v-model="filterStatus" @tab-click="handleFilterStatusClick">
        <el-tab-pane label="全部" name="-1" :lazy="true"></el-tab-pane>
        <el-tab-pane label="待审核" name="0" :lazy="true"></el-tab-pane>
<!--        <el-tab-pane label="已审核" name="2" :lazy="true"></el-tab-pane>-->
        <el-tab-pane label="待复核" name="3" :lazy="true"></el-tab-pane>
        <el-tab-pane label="已付款" name="6" :lazy="true"></el-tab-pane>
<!--        <el-tab-pane label="付款失败" name="4" :lazy="true"></el-tab-pane>-->
        <el-tab-pane label="已退回" name="7" :lazy="true"></el-tab-pane>
      </el-tabs>
      <div class="filter-box">
        <filter-user :filter-types.sync="filterTypes" @select-value="handleFilterUser"></filter-user>
      </div>
      <el-table :data="tableData" stripe style="width: 100%;" @selection-change="handleSelectionChange" :height="tool.getTableHeight()">
        <el-table-column type="selection" width="55" v-if="tableHeaders"></el-table-column>
        <el-table-column v-for="(tableHeader, key) in tableHeaders" :key="key" :label="tableHeader.header" :width="tableHeader.other.width ? tableHeader.other.width : ''">
          <template slot-scope="scope">
            <template v-if="scope.row[tableHeader.index].other.tag" >
              <el-tag :type="scope.row[tableHeader.index].other.tag.type ? scope.row[tableHeader.index].other.tag.type : null" :size="scope.row[tableHeader.index].other.tag.size ? scope.row[tableHeader.index].other.tag.size : null" :class="scope.row[tableHeader.index].other.tag.class ? scope.row[tableHeader.index].other.tag.class : null" >{{scope.row[tableHeader.index].value}}</el-tag>
            </template>
            <template v-else-if="scope.row[tableHeader.index].other.progress" >
              <el-progress type="circle" :percentage="Number.parseInt(percentList['MOVE_PERCENT'][scope.row.ID])"
                           :width="50"
                           :stroke-width="3"></el-progress>
            </template>
            <template v-else>
              <div v-html="scope.row[tableHeader.index].value"></div>
            </template>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-dropdown size="small" trigger="click"
                         v-if="scope.row.AUDIT_STATUS!=='6' && scope.row.AUDIT_STATUS!=='7' && (permission.hasPermission(`finance/withdraw-status`))">
              <el-button type="primary" size="small" @click.stop="">
                操作该数据<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <!--<el-dropdown-item command="add"-->
                <!--@click.native="handleAddInvoiceShow(scope.row)"-->
                <!--v-show="(scope.row.AUDIT_STATUS==='0'||scope.row.AUDIT_STATUS==='1') && (permission.hasPermission(`finance/invoice-audit-add`)||permission.hasPermission(`finance/invoice-audit-edit`))">-->
                <!--补录发票信息-->
                <!--</el-dropdown-item>-->
<!--                <el-dropdown-item command="status"-->
<!--                                  @click.native="handleStatusShow(scope.row, 3, '确定对当前提现进行审核通过操作？')"-->
<!--                                  v-show="scope.row.AUDIT_STATUS==='0' && permission.hasPermission(`finance/withdraw-status`)">-->
<!--                  审核通过-->
<!--                </el-dropdown-item>-->
<!--                <el-dropdown-item command="status"-->
<!--                                  @click.native="handleStatusShow(scope.row, 3, '确定对当前提现进行设为待复核操作？')"-->
<!--                                  v-show="scope.row.AUDIT_STATUS === '2' && permission.hasPermission(`finance/withdraw-status`)">-->
<!--                  设为待复核-->
<!--                </el-dropdown-item>-->
                <el-dropdown-item command="status"
                                  @click.native="handleStatusShow(scope.row, 6, '确定对当前提现进行设为已付款操作？')"
                                  v-show="scope.row.AUDIT_STATUS === '3' && permission.hasPermission(`finance/withdraw-status-pay`)">
                  付款
                </el-dropdown-item>
                <el-dropdown-item command="status"
                                  @click.native="handleStatusShow(scope.row, 3, '确定对当前提现进行设为待复核操作？')"
                                  v-show="scope.row.AUDIT_STATUS === '0' && permission.hasPermission(`finance/withdraw-status-audit`)">
                  审核通过
                </el-dropdown-item>
<!--                <el-dropdown-item command="status"-->
<!--                                  @click.native="handleStatusShow(scope.row, 4, '确定对当前提现进行设为付款失败操作？', '付款失败备注')"-->
<!--                                  v-show="scope.row.AUDIT_STATUS === '6' && permission.hasPermission(`finance/withdraw-status`)">-->
<!--                  设为付款失败-->
<!--                </el-dropdown-item>-->
                <el-dropdown-item command="status"
                                  @click.native="handleStatusShow(scope.row, 7, '确定对当前提现进行设为提现退回操作？', '提现退回备注')"
                                  v-show="scope.row.AUDIT_STATUS === '0' && permission.hasPermission(`finance/withdraw-status-return`)">
                  退回
                </el-dropdown-item>
                <el-dropdown-item command="status"
                                  @click.native="handleStatusShow(scope.row, 7, '该会员已提供发票，请确认是否处理提现退回？', '提现退回备注')"
                                  v-show="(scope.row.AUDIT_STATUS === '1'||scope.row.AUDIT_STATUS === '2') && permission.hasPermission(`finance/withdraw-status-return`)">
                  退回
                </el-dropdown-item>
                <el-dropdown-item command="status"
                                  @click.native="handleStatusShow(scope.row, 0, '确定对当前提现取消审核，并设为“待审核”？', '取消审核备注')"
                                  v-show="scope.row.AUDIT_STATUS === '3' && permission.hasPermission(`finance/withdraw-status-cancel`)">
                  取消审核
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="white-box-footer">

        <el-dropdown size="small" trigger="click" @command="handleMuli"
                     v-if="filterStatus!=='-1' && filterStatus!=='6' && filterStatus!=='7' && (permission.hasPermission(`finance/withdraw-status`))">
          <el-button type="primary" size="small">
            所选数据<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu v-if="filterStatus==='0'" slot="dropdown">
            <el-dropdown-item command="3" v-show="permission.hasPermission(`finance/withdraw-status-audit`)">批量审核通过</el-dropdown-item>
            <el-dropdown-item command="7" v-show="permission.hasPermission(`finance/withdraw-status-return`)">批量退回</el-dropdown-item>
          </el-dropdown-menu>
<!--          <el-dropdown-menu v-else-if="filterStatus==='2'" slot="dropdown">-->
<!--            <el-dropdown-item command="3">批量设为待复核</el-dropdown-item>-->
<!--          </el-dropdown-menu>-->
          <el-dropdown-menu v-else-if="filterStatus==='3'" slot="dropdown">
            <el-dropdown-item command="6" v-show="permission.hasPermission(`finance/withdraw-status-pay`)">批量设为已付款</el-dropdown-item>
            <el-dropdown-item command="0" v-show="permission.hasPermission(`finance/withdraw-status-cancel`)">批量取消审核</el-dropdown-item>
          </el-dropdown-menu>
<!--          <el-dropdown-menu v-else-if="filterStatus==='6'" slot="dropdown">-->
<!--            <el-dropdown-item command="4">批量设为付款失败</el-dropdown-item>-->
<!--          </el-dropdown-menu>-->
<!--          <el-dropdown-menu v-else-if="filterStatus==='4'" slot="dropdown">-->
<!--            <el-dropdown-item command="3">批量设为待复核</el-dropdown-item>-->
<!--          </el-dropdown-menu>-->
        </el-dropdown>

        <el-button type="success" size="small" @click="handleExport"
                   v-show="permission.hasPermission(`finance/transfer-list-export`)">导出Excel
        </el-button>
        <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"></pagination>
        <el-dialog title="修改提现信息" :visible.sync="dialogEditFormVisible">
          <el-form :model="form" label-width="150px" style="width:500px;" v-loading="dialogEditLoading">
            <el-form-item label="会员编号">
              <el-input v-model="form.baseInfo.USER_NAME" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="会员姓名">
              <el-input v-model="form.baseInfo.REAL_NAME" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
              <el-input v-model="form.baseInfo.ID_CARD" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="注册类型">
              <el-select v-model="form.baseInfo.REG_TYPE" placeholder="请选择注册类型" :disabled="true">
                <el-option v-for="(item, key) in regTypes" :label="item.TYPE_NAME" :value="item.ID"
                           :key="item.ID"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="提现金额">
              <el-input v-model="form.amount" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="预计付款日期">
              <el-date-picker
                      v-model="form.planPaidAt"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                      :picker-options="pickerOptions0"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="form.createRemark"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogEditFormVisible = false">取 消</el-button>
            <el-button type="primary" @click.native="handleEdit">修 改</el-button>
          </div>
        </el-dialog>
        <el-dialog title="审核提现信息" :visible.sync="dialogAuditFormVisible">
          <el-alert
                  :title="auditForm.auditTips"
                  type="warning" :closable="false">
          </el-alert>
          <el-form :model="auditForm" label-width="150px" style="width:500px;" v-loading="dialogAuditLoading">
            <el-form-item label="预计付款日期" v-show="planPayDateVisible">
              <el-date-picker
                      v-model="auditForm.planPaidAt"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                      :picker-options="pickerOptions0"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="付款日期" v-show="filterStatus==='3'">
              <el-date-picker
                      v-model="auditForm.paidAt"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                      :picker-options="pickerOptions1"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item :label="auditRemark">
              <el-input v-model="auditForm.createRemark"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogAuditFormVisible = false">取 消</el-button>
            <el-button type="primary" @click.native="handleStatus">提 交</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import permission from '@/utils/permission'
import network from '@/utils/network'
import tool from '@/utils/tool'
import FilterUser from '@/components/FilterUser'
import baseInfo from '@/utils/baseInfo'
import Pagination from '@/components/Pagination'
import filterHelper from '../../utils/filterHelper'
export default {
  name: 'finance_withdraw',
  components: {FilterUser, Pagination},

  data () {
    return {
      activeName: 'all',
      tableHeaders: null,
      baseDecLevels: baseInfo.decLevels(),

      allData: null,
      tableData: null,
      loading: true,
      multipleSelection: [],
      currentPage: 1,
      totalPages: 1,
      totalCount: 1,
      pageSize: 20,
      tool: tool,
      permission: permission,
      regTypes: baseInfo.regTypes(),
      dialogEditFormVisible: false,
      dialogEditLoading: false,
      dialogAuditFormVisible: false,
      dialogAuditLoading: false,
      dialogAddInvoiceVisible: false,
      dialogAddInvoiceLoading: false,
      planPayDateVisible: false,
      auditId: null,
      form: {
        id: null,
        baseInfo: {USER_NAME: null, REG_TYPE: null},
        amount: null,
        planPaidAt: null,
        paidAt: new Date(),
        createRemark: null
      },
      invoiceForm: {
        id: null,
        withdrawId: null,
        withdrawSn: null,
        invoiceCode: null,
        invoiceNum: null,
        invoiceDate: null,
        amount: null,
        taxRate: null,
        purchaserName: null,
        purchaserRegisterNum: null,
        purchaserAddress: null,
        purchaserBank: null,
        sellerName: null,
        sellerRegisterNum: null,
        sellerAddress: null,
        sellerBank: null,
        itemName: null,
        invoiceRemark: null,
        createRemark: null
      },
      pickerOptions0: {
        disabledDate (time) {
          return time.getTime() < Date.now()
        }
      },
      pickerOptions1: {
        disabledDate (time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      auditRemark: '',
      auditForm: {
        auditTips: '',
        auditStatus: null,
        selectedIds: [],
        planPaidAt: null,
        createRemark: null,
        withdrawAudit: ''
      },
      auditTips: '',
      filterTypes: {},
      filterModel: {},
      excelForm: {
        rowCount: ''
      },
      filterStatus: '0'
    }
  },
  mounted () {
    this.getData()
  /* if (permission.hasPermission(`finance/withdraw-7`)) {
      this.activeName = 'seven'
    }
    if (permission.hasPermission(`finance/withdraw-4`)) {
      this.activeName = 'four'
    }
    if (permission.hasPermission(`finance/withdraw-6`)) {
      this.activeName = 'six'
    }
    if (permission.hasPermission(`finance/withdraw-3`)) {
      this.activeName = 'three'
    }
    if (permission.hasPermission(`finance/withdraw-2`)) {
      this.activeName = 'two'
    }
    if (permission.hasPermission(`finance/withdraw-1`)) {
      this.activeName = 'one'
    }
    if (permission.hasPermission(`finance/withdraw-0`)) {
      this.activeName = 'zero'
    }
    if (permission.hasPermission(`finance/withdraw-0`) && permission.hasPermission(`finance/withdraw-1`) && permission.hasPermission(`finance/withdraw-2`) && permission.hasPermission(`finance/withdraw-3`) && permission.hasPermission(`finance/withdraw-6`) && permission.hasPermission(`finance/withdraw-4`) && permission.hasPermission(`finance/withdraw-7`)) {
      this.activeName = 'all'
} */
  },

  methods: {
    handleMuli (command) {
      if (this.multipleSelection.length < 1) {
        this.$message({
          message: '请选择要操作的记录',
          type: 'warning'
        })
        return
      }
      this.handleAudit(null, command)
    },
    handleAudit (row = null, status) {
      let title = ''
      if (status === '2') {
        title = '确定要通过审核？备注：'
      } else if (status === '3') {
        title = '确定要设为待复核？备注：'
      } else if (status === '4') {
        title = '确定要设为付款失败？备注：'
      } else if (status === '6') {
        title = '确定要设为已付款？备注：'
      } else if (status === '7') {
        title = '确定要设为已退回？备注：'
      }
      this.handleStatusShow(row, status, title)
    },
    handleExpand (row, event, column) {
      this.$refs.multipleTable.toggleRowExpansion(row)
    },
    handleExport () {
      this.$confirm('确定要导出当前表格中的提现数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return network.getData('finance/withdraw-export', this.filterModel)
      }).then(response => {
        this.$message({
          message: response,
          type: 'success'
        })
      }).catch(response => {
      })
    },
    handleAdd () {
      this.$router.push({path: `/finance/withdraw-add`})
    },
    handleExcel () {
    },
    handleExcelPaidFalse () {
      window.open(CDN_BASE_URL + `/files/bonus_withdraw_paid_false.xlsx`)
    },
    handleEditShow (row) {
      this.dialogEditLoading = true
      this.auditId = row.ID
      this.dialogEditFormVisible = true
      let vueObj = this
      network.getData('finance/withdraw-get', {id: this.auditId}).then(response => {
        vueObj.dialogEditLoading = false
        vueObj.form = response
      })
    },
    handleEdit () {
      this.dialogEditFormVisible = false
      this.$message({
        message: '正在修改数据',
        type: 'info'
      })
      this.loading = true
      let path = 'finance/withdraw-edit'
      network.postData(path, this.form).then(response => {
        this.$message({
          message: response,
          type: 'success'
        })
        this.getData(this.currentPage, this.pageSize)
      }).catch(response => {
      })
    },
    handleStatusShow (row, status, title, remark = '备注') {
      this.auditForm = {
        auditTips: '',
        auditStatus: null,
        selectedIds: [],
        planPaidAt: null,
        paidAt: new Date(),
        remark: null
      }
      if (row === null) {
        for (let val of this.multipleSelection) {
          this.auditForm.selectedIds.push(val.ID)
        }
      } else {
        this.auditForm.selectedIds.push(row.ID)
      }
      if (this.auditForm.selectedIds.length === 0) {
        this.$message({
          message: '请选择数据',
          type: 'warning'
        })
        return
      }
      this.auditRemark = remark
      this.dialogAuditFormVisible = true
      this.auditForm.auditTips = title
      this.auditForm.auditStatus = status
      if (status == '3') {
        this.planPayDateVisible = true
      } else {
        this.planPayDateVisible = false
      }
    },
    handleStatus () {
      network.postData('finance/mult-point', {opType: 2}).then(response => {
        this.auditForm.withdrawAudit = response.withdrawAudit
        this.$confirm('确定要对所选数据修改状态吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return network.postData('finance/withdraw-status', this.auditForm)
        }).then(response => {
          this.dialogAuditFormVisible = false
          this.$message({
            message: response,
            type: 'success'
          })
          this.getData(this.currentPage, this.pageSize)
        }).catch(response => {
          this.dialogAuditFormVisible = false
        })
      })
    },
    handleAddInvoiceShow (row) {
      this.dialogAddInvoiceVisible = true
      this.auditId = row.INVOICE_ID
      this.dialogAddInvoiceLoading = true
      let vueObj = this
      network.getData('finance/invoice-audit-get', {id: this.auditId}).then(response => {
        vueObj.dialogAddInvoiceLoading = false
        vueObj.invoiceForm = response
        this.invoiceForm.withdrawSn = row.SN
        this.invoiceForm.withdrawId = row.ID
      })
    },
    handleAddInvoice () {
      let path = 'finance/invoice-audit-add'
      if (this.invoiceForm.id) path = 'finance/invoice-audit-edit'
      network.postData(path, this.invoiceForm).then(response => {
        this.$message({
          message: response,
          type: 'success'
        })
        this.dialogAddInvoiceVisible = false
        this.getData(this.currentPage, this.pageSize)
      }).catch(response => {
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleCurrentChange (page) {
      this.getData(page, this.pageSize)
    },
    handleSizeChange (pageSize) {
      this.getData(this.currentPage, pageSize)
    },
    handleFilterStatusClick (tab, event) {
      filterHelper.clearFilterOption(this)
      this.getData()
    },
    handleFilterUser (filterData) {
      filterHelper.handleFilterUser(this, filterData)
    },
    handleFilter () {
      this.getData()
    },
    getData (page, pageSize) {
      let filterData = this.filterModel
      filterData.filterStatus = this.filterStatus != '-1' ? `=,${this.filterStatus}` : ''
      let vueObj = this
      network.getPageData(this, 'finance/withdraw', page, pageSize, filterData, function (response) {
        vueObj.allData = response
        vueObj.filterTypes = response.filterTypes
      })
    },
    onMessageCallback () {
      this.getData(this.currentPage, this.pageSize)
    }
  }
}
</script>

<style scoped>

</style>
