<template>
  <view class="content">
    <view class="header">
      <view class="headernei" @click="isTop = true">
        <img src="@/assets/images/search.png" alt="" />
      </view>
    </view>
    <view class="kuang" v-for="(item, index) in tableData" :key="index">
      <table class="tftable" border="1">
        
        <tr   v-if="showData.memberCode">
          <td align="right">{{ '会员编号' }}</td>
          <td align="left">{{ item.memberCode }}</td>
        </tr>
        <tr  v-if="showData.memberName">
          <td align="right">{{ '会员姓名' }}</td>
          <td align="left">{{ item.memberName }}</td>
        </tr>
        <tr  v-if="showData.pkAccountVal">
          <td align="right">{{ '钱包类型' }}</td>
          <td align="left">{{ item.pkAccountVal }}</td>
        </tr>
        <tr  v-if="showData.availableAmount">
          <td align="right">{{ '可提金额' + `(${isLocalSymbol()})` }}</td>
          <td align="left">
            {{ item.availableAmount | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr  v-if="showData.cashAmount">
          <td align="right">{{ '本次提现' + `(${isLocalSymbol()})` }}</td>
          <td align="left">
            {{ item.cashAmount | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr   v-if="showData.availableBalance">
          <td align="right">{{ '可提余额' + `(${isLocalSymbol()})` }}</td>
          <td align="left">
            {{ item.availableBalance | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr  v-if="showData.serviceCharge">
          <td align="right">{{ '手续费' + `(${isLocalSymbol()})` }}</td>
          <td align="left">
            {{ item.serviceCharge | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr v-if="showData.incomeTax">
          <td align="right">{{ '个税' + `(${isLocalSymbol()})` }}</td>
          <td align="left">
            {{ item.incomeTax | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr  v-if="showData.issuedAmount">
          <td align="right">{{ '实发金额' + `(${isLocalSymbol()})` }}</td>
          <td align="left">
            {{ item.issuedAmount | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr   v-if="showData.exchangeRate">
          <td align="right">{{ '汇率' }}</td>
          <td align="left">{{ item.exchangeRate }}</td>
        </tr>
        <tr  v-if="showData.creationTime">
          <td align="right">{{ '申请日期' }}</td>
          <td align="left">{{ item.creationTime }}</td>
        </tr>
        <tr v-if="showData.bankName">
          <td align="right">{{ '银行名称' }}</td>
          <td align="left">{{ item.bankName }}</td>
        </tr>
        <tr   v-if="showData.subBankName">
          <td align="right">{{ '支行名称' }}</td>
          <td align="left">{{ item.subBankName }}</td>
        </tr>
        <tr   v-if="showData.cardNumber">
          <td align="right">{{ '银行账户' }}</td>
          <td align="left">{{ item.cardNumber }}</td>
        </tr>
        <tr   v-if="showData.accountName">
          <td align="right">{{ '开户姓名' }}</td>
          <td align="left">{{ item.accountName }}</td>
        </tr>
        <tr  v-if="showData.phone">
          <td align="right">{{ '预留电话' }}</td>
          <td align="left">{{ item.phone }}</td>
        </tr>
        <tr  v-if="showData.idCard">
          <td align="right">{{ '身份证号码' }}</td>
          <td align="left">{{ item.idCard }}</td>
        </tr>
        <tr v-if="showData.remarks">
          <td align="right">{{ '提现备注' }}</td>
          <td align="left">{{ item.remarks }}</td>
        </tr>
        <tr  v-if="showData.approveName">
          <td align="right">{{ '审核人' }}</td>
          <td align="left">{{ item.approveName }}</td>
        </tr>
        <tr   v-if="showData.approveTime">
          <td align="right">{{ '审核日期' }}</td>
          <td align="left">{{ item.approveTime }}</td>
        </tr>
        <tr  v-if="showData.approveRemarks">
          <td align="right">{{ '审核备注' }}</td>
          <td align="left">{{ item.approveRemarks }}</td>
        </tr>
        <tr v-if="showData.paymentName">
          <td align="right">{{ '打款人' }}</td>
          <td align="left">{{ item.paymentName }}</td>
        </tr>
        <tr v-if="showData.statusVal">
          <td align="right">{{ '打款状态' }}</td>
          <td align="left">{{ item.statusVal }}</td>
        </tr>
        <tr v-if="showData.paymentTime">
          <td align="right">{{ '打款时间' }}</td>
          <td align="left">{{ item.paymentTime }}</td>
        </tr>
        <tr  v-if="showData.payerRemarks">
          <td align="right">{{ '打款备注' }}</td>
          <td align="left">{{ item.payerRemarks }}</td>
        </tr>
        <tr v-if="showData.approveStateVal">
          <td align="right">审核状态</td>
          <td align="left">{{ item.approveStateVal }}</td>
        </tr>
        <tr v-if="showData.withdrawCode">
          <td align="right">{{ '单据编号' }}</td>
          <td align="left">{{ item.withdrawCode }}</td>
        </tr>
      </table>
      <view class="flex_btn">
        <u-button
          @click="toQc(item)"
          class="thebtn"
          style="border: 2rpx solid #f69d40; color: #f69d40"
          color="#FFFFFF"
          :text="'审核'"
          v-hasButtons="['CashDetailsApprove']"
        ></u-button>
        <u-button
          @click="openDig(0, item)"
          class="thebtn"
          color="#EC6C00"
          :text="'打款'"
          v-hasButtons="['CashDetailsPay']"
        ></u-button>
        <u-button
          @click="openDig(1, item)"
          class="thebtn"
          color="#6962F6"
          :text="'充正'"
          v-hasButtons="['CashDetailsRecharge']"
        ></u-button>

        <u-button
          @click="exportRow(item.memberName, item.pkId)"
          class="thebtn"
          color="rgba(243, 169, 0, 1)"
          :text="'导出'"
          v-hasButtons="['CashDetailsExport']"
        ></u-button>
      </view>
    </view>

    <!-- 顶部搜索 -->
    <u-popup :show="isTop" mode="top" @close="isTop = false">
      <view class="tt">
        <u--form
          labelPosition="left"
          labelWidth="auto"
          :model="select"
          ref="uForm"
        >
          <u-row gutter="10">
            <u-col span="6">
              <u-form-item :label="'会员编号'">
                <u--input fontSize="12" v-model="select.memberCode"></u--input>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item :label="'会员姓名'">
                <u--input fontSize="12" v-model="select.memberName"></u--input>
              </u-form-item>
            </u-col>
          </u-row>

          <u-row gutter="10">
            <u-col span="6">
              <u-form-item :label="'打款状态'">
                <picker
                  :range="statusList"
                  range-key="label"
                  @change="bindPickerChange1"
                >
                  <u--input
                    disabled
                    fontSize="12"
                    disabledColor="#ffffff"
                    v-model="select.statusVal"
                    suffixIcon="arrow-down"
                    suffixIconStyle="font-size: 12px;"
                  ></u--input>
                </picker>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item :label="'钱包类型'">
                <picker
                  :range="accountList"
                  range-key="accountName"
                  @change="bindPickerChange2"
                >
                  <u--input
                    disabled
                    fontSize="12"
                    disabledColor="#ffffff"
                    v-model="select.theaccountName"
                    suffixIcon="arrow-down"
                    suffixIconStyle="font-size: 12px;"
                  ></u--input>
                </picker>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="6">
              <u-form-item :label="'审核状态'">
                <picker
                  :range="shStateList"
                  range-key="label"
                  @change="bindPickerChange3"
                >
                  <u--input
                    disabled
                    fontSize="12"
                    disabledColor="#ffffff"
                    v-model="select.shStateVal"
                    suffixIcon="arrow-down"
                    suffixIconStyle="font-size: 12px;"
                  ></u--input>
                </picker>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item :label="'银行名称'">
                <u--input fontSize="12" v-model="select.bankName"></u--input>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="6">
              <u-form-item :label="'本次提现'">
                <u--input fontSize="12" v-model="select.cashAmount"></u--input>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item :label="'支行名称'">
                <u--input fontSize="12" v-model="select.subBankName"></u--input>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="6">
              <u-form-item :label="'银行账户'">
                <u--input fontSize="12" v-model="select.cardNumber"></u--input>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item :label="'开户姓名'">
                <u--input fontSize="12" v-model="select.accountName"></u--input>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="6">
              <u-form-item :label="'预留电话'">
                <u--input fontSize="12" v-model="select.phone"></u--input>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item :label="'提现备注'">
                <u--input fontSize="12" v-model="select.remarks"></u--input>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="6">
              <u-form-item :label="'实发金额'">
                <u--input
                  fontSize="12"
                  v-model="select.issuedAmount"
                ></u--input>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item :label="'打款人'">
                <u--input fontSize="12" v-model="select.paymentName"></u--input>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="6">
              <u-form-item :label="'打款备注'">
                <u--input
                  fontSize="12"
                  v-model="select.payerRemarks"
                ></u--input>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item :label="'单据编号'">
                <u--input
                  fontSize="12"
                  v-model="select.withdrawCode"
                ></u--input>
              </u-form-item>
            </u-col>
          </u-row>

          <u-row gutter="10">
            <u-col span="12">
              <u-form-item
                :label="'申请日期'"
                @click="(isData = true), (setTime = 0)"
              >
                <u--input
                  disabled
                  fontSize="12"
                  disabledColor="#ffffff"
                  v-model="select.creationTimeVal"
                  suffixIcon="arrow-down"
                  suffixIconStyle="font-size: 12px;"
                ></u--input>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="12">
              <u-form-item
                :label="'审核日期'"
                @click="(isData = true), (setTime = 1)"
              >
                <u--input
                  disabled
                  fontSize="12"
                  disabledColor="#ffffff"
                  v-model="select.payVal"
                  suffixIcon="arrow-down"
                  suffixIconStyle="font-size: 12px;"
                ></u--input>
              </u-form-item>
            </u-col>
          </u-row>
        </u--form>
        <view class="footer">
          <u-button
            @click="getList1"
            color="#C8161D"
            text="搜索"
            class="btnn"
            v-hasButtons="['CashSearch']"
          ></u-button>
          <u-button @click="reset" text="重置"></u-button>
        </view>
      </view>
    </u-popup>
    <u-popup
      :show="centerDialogVisible"
      mode="center"
      @close="centerDialogVisible = false"
      :closeOnClickOverlay="false"
      round="10"
    >
      <view class="centerPopup">
        <u--form
          labelPosition="left"
          labelWidth="auto"
          :model="form"
          ref="uForm"
        >
          <u-form-item :label="'备注'">
            <u--textarea v-model="form.payerRemarks"></u--textarea>
          </u-form-item>
        </u--form>
        <view class="footer">
          <u-button
            @click="saveForm"
            color="#C8161D"
            :text="'确定'"
            class="btnn"
          ></u-button>
          <u-button
            @click="centerDialogVisible = false"
            :text="'取消'"
          ></u-button>
        </view> </view
    ></u-popup>
    <u-calendar
      @close="isData = false"
      :closeOnClickOverlay="true"
      :show="isData"
      mode="range"
      @confirm="confirm"
      :allowSameDay="true"
      :maxDate="calendar.maxDate"
      :minDate="calendar.minDate"
      :monthNum="calendar.monthNum"
    ></u-calendar>
    <!-- 悬浮球 -->
    <drag-button />
    <export-ball v-hasButtons="['CashDetailsExport']"  ref="exportBall" @handleExport="handleExport" />
  </view>
</template>
    
    <script>
import * as api from "@/api/financial";
import { isLocals, isLocalSymbol } from "@/util/numberToCurrency";
import { getRoleMenu } from '@/api/information'
export default {
  data() {
    return {
      select: {},
      isTop: false,
      isData: false,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
      },
      tableData: [],
      accountList: [], //钱包类型
      statusList: [], //打款状态
      shStateList: [], //审核状态
      userCountry: {},
      isCz: 0,
      postArr: [],
      centerDialogVisible: false,
      form: {},
      calendar: {
        minDate: "",
        maxDate: "",
        monthNum: 25,
      },
      showData:{}
    };
  },
  onLoad(options) {
    if (uni.getStorageSync("userAll")) {
      this.userCountry = JSON.parse(uni.getStorageSync("userAll")).country;
    }
    //查询会员信息
    this.getSearch();

    // 获取下拉
    this.getData();
    this.chooseTimed();
    this.getUserRole()
  },
  methods: {
    isLocalSymbol,
    isLocals,
    getUserRole() {
      getRoleMenu('CashDetails').then((res) => {
        const obj = {};
        res.data.forEach((ele) => {
          obj[ele] = true;
        });
        this.showData = obj;
       
      })
    },
     // 设置默认日期，最大值为今天，最小值为去年今天
     chooseTimed() {
      let date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      if (month <= 9) {
        month = '0' + month
      }
      if (day <= 9) {
        day = '0' + day
      }
      let minyear = year - 1
      let maxyear = year + 1
      this.calendar.minDate = minyear + '-' + month + '-' + day
      this.calendar.maxDate = maxyear + '-' + month + '-' + day
    },
    toQc(item) {
      api.showWithdraw([item.pkId]).then((res) => {
        if (res.code == 200) {
          
          uni.navigateTo({
            url:
              "/pages/financial/cashOnlineSign?data=" +
              JSON.stringify(res.data),
          });
        }
      });
    },
    openDig(index, items) {
      if (items.approveState == 5 && items.status != 1 && items.status != 2) {
        this.isCz = index;
        this.postArr = [items.pkId];
        this.centerDialogVisible = true;
      } else {
        uni.$u.toast('存在已打款或未审核单据');
      }
    },
    exportRow(na, pkIds) {
      let url = "/member/manager/withdraw/export";
      let obj = {
        memberCode: na,
        pkIds: [pkIds],
      };
      this.$refs.exportBall.handleExport(url, obj, '提现明细');
    },
    saveForm() {
      let url;
      if (this.isCz == 1) {
        url = api.positive;
      } else {
        url = api.payment;
      }
      url(Object.assign(this.form, { pkIds: this.postArr })).then((res) => {
        if (res.code == 200) {
          uni.$u.toast(res.msg);
          // 获取列表
          this.getList1();
          this.centerDialogVisible = false;
        }
      });
    },
    getData() {
      //钱包类型
      api.getenumsAccount().then((res) => {
        this.accountList = res.rows;
      });
      //打款状态
      api.paymentStatus().then((res) => {
        this.statusList = res.data;
      });
      //审核状态
      api.getApproveStatuss().then((res) => {
        this.shStateList = res.data;
      });
    },

    onReachBottom() {
      this.queryParams.pageNum++;
      this.getSearch();
    },
    getSearch() {
      api
        .withdrawList(Object.assign({}, this.queryParams, this.select))
        .then((res) => {
          this.total = res.total;
          this.lastData = res.rows[res.rows.length - 1];
          let arr = JSON.parse(JSON.stringify(res.rows));
          arr = arr.filter(function (v, i, ar) {
            return i !== ar.length - 1;
          });
          this.tableData = this.tableData.concat(arr);
          // this.tableData = this.tableData.concat(res.rows);
          this.tableData.forEach((item) => {
            item.pkCountryName = this.userCountry.shortName;
            item.pkCountryIcon = this.userCountry.nationalFlag2;
          });
        });
    },
    getList1() {
      this.tableData = [];
      this.queryParams.pageNum = 1;
      this.isTop = false;
      this.getSearch();
    },
    reset() {
      this.select = {};
      this.getSearch();
    },
    handleExport() {
      let url = "/member/manager/withdraw/export";
      let obj = Object.assign({}, this.select, this.queryParams);
      this.$refs.exportBall.handleExport(url, obj, '提现明细');
    },
    bindPickerChange2(e) {
      this.$set(
        this.select,
        "theaccountName",
        this.accountList[e.detail.value].accountName
      );
      this.$set(
        this.select,
        "pkAccount",
        this.accountList[e.detail.value].pkId
      );
    },
    bindPickerChange1(e) {
      this.$set(
        this.select,
        "statusVal",
        this.statusList[e.detail.value].label
      );
      this.$set(this.select, "status", this.statusList[e.detail.value].value);
    },
    bindPickerChange3(e) {
      this.$set(
        this.select,
        "shStateVal",
        this.shStateList[e.detail.value].label
      );
      this.$set(
        this.select,
        "approveState",
        this.shStateList[e.detail.value].value
      );
    },

    confirm(e) {
      if (this.setTime == 0) {
        this.$set(this.select, "startDate", e[0]);
        this.$set(this.select, "endDate", e[e.length - 1]);
        this.$set(
          this.select,
          "creationTimeVal",
          e[0] + " 至 " + e[e.length - 1]
        );
      } else {
        this.$set(this.select, "startPaymentTime", e[0]);
        this.$set(this.select, "endPaymentTime", e[e.length - 1]);
        this.$set(this.select, "payVal", e[0] + " 至 " + e[e.length - 1]);
      }

      this.isData = false;
    },
  },
};
</script>
    
<style lang="scss" scoped>
.centerPopup {
  padding: 27rpx;
  width: 670rpx;
}
.flex_btn {
  padding: 20rpx 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .thebtn {
    width: 20%;
  }
}
.content {
  background: #f9f9f9;
  padding: 20rpx 24rpx;
}
.header {
  background: #ffffff;
  box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.4);
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  .headernei {
    background: rgba(216, 216, 216, 0);
    border-radius: 64rpx;
    opacity: 1;
    border: 2rpx solid #259dfe;
    width: 100%;
    padding: 22rpx 20rpx;
    img {
      width: 24rpx;
      height: 24rpx;
    }
  }
}
.kuang {
  background: #ffffff;
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(204, 204, 204, 0.4);
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}
.tftable {
  border-collapse: collapse;
  width: 100%;
  background: #fff;
  border: 1px solid #f9f9f9;
  margin-top: 20rpx;
  td {
    font-size: 24rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #999;
    padding: 20rpx 40rpx;
    width: 50%;
  }
  tr :nth-child(2) {
    color: #333333;
    font-size: 26rpx;
  }
  .theflex {
    display: flex;
    align-items: center;
  }
}
.che {
  padding: 20rpx 40rpx;
}
.tt {
  padding: 20rpx;
  margin-top: 20px;
  font-size: 24rpx;
}
::v-deep .u-transition {
  z-index: 998 !important;
}
.footer {
  display: flex;
  align-items: center;
  padding: 20rpx 60rpx;
  font-size: 24rpx;
  .btnn {
    margin-right: 40rpx;
  }
}
::v-deep .u-input {
  padding: 0 9px !important;
}
::v-deep .u-form-item__body__left__content__label {
  font-size: 12px;
}
::v-deep .u-form-item__body {
  padding: 5px 0;
}
</style>