<template>
  <view class="content">
    <u--form labelPosition="left" labelWidth="auto" :model="select" ref="uForm">
      <view class="top_view">
        <u-row gutter="10">
          <u-col span="12">
            <u-form-item :label="'会员编号'">
              <u--input
                confirm-type="search"
                @confirm="changeName"
                @blur="changeName"
                fontSize="24rpx"
                v-model="select.memberCode"
              ></u--input>
            </u-form-item>
          </u-col>
        </u-row>
        <u-row gutter="10">
          <u-col span="12">
            <u-form-item :label="'会员姓名'">
              <u--input
                disabled
                fontSize="24rpx"
                v-model="select.memberName"
              ></u--input>
            </u-form-item>
          </u-col>
        </u-row>
      </view>
      <view class="top_view">
        <u-row gutter="10">
          <u-col span="12">
            <u-form-item :label="'充值方式'">
              <u-radio-group v-model="rechargeMethod" placement="row">
                <u-radio
                  :customStyle="{ marginLeft: '20rpx' }"
                  v-for="(item, index) in czWayList"
                  :key="index"
                  :label="item.label"
                  :name="item.value"
                >
                </u-radio>
              </u-radio-group>
            </u-form-item>
          </u-col>
        </u-row>
      </view>
    </u--form>
    <view class="top_view" v-if="tableData.length > 0">
      <view class="top_flex">
        <view class="flex_view1">
          <view class="text1">{{ '会员编号' }}</view>
          <view class="text2">{{ tableData[0].memberCode }}</view>
        </view>
        <view>
          <view class="text1">{{ '会员姓名' }}</view>
          <view class="text2">{{ tableData[0].memberName }}</view>
        </view>
      </view>
      <view>
        <u--form
          labelPosition="left"
          labelWidth="240rpx"
          :model="tableData[0]"
          ref="uForm2"
          labelAlign="right"
        >
          <u-row>
            <u-col span="12">
              <u-form-item :label="'交款方式'">
                <picker
                  :range="paymentTypeList"
                  range-key="label"
                  @change="bindPickerChange1"
                >
                  <u--input
                    fontSize="24rpx"
                    disabledColor="#ffffff"
                    v-model="tableData[0].paymentMethodName"
                    suffixIcon="arrow-down"
                    suffixIconStyle="font-size: 12px;"
                  ></u--input>
                </picker>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row v-for="(item, index) in enumsAccountList" :key="index">
            <u-col span="12">
              <u-form-item
                :label="
                  item.pkTransactionKeyVal + `${'变更'}(${isLocalSymbol()})`
                "
              >
                <u-number-box
                  :style="{
                    width: '100%',
                  }"
                  inputWidth="100%"
                  :min="0"
                  :showMinus="false"
                  :showPlus="false"
                  v-model="tableData[0].rechargeDetailMap[`${item.pkId}`]"
                ></u-number-box>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row>
            <u-col span="12">
              <u-form-item :label="'备注(前台)'">
                <u--input
                  fontSize="24rpx"
                  v-model="tableData[0].memberRemarks"
                ></u--input>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row>
            <u-col span="12">
              <u-form-item :label="'备注(后台)'">
                <u--input
                  fontSize="24rpx"
                  v-model="tableData[0].remarks"
                ></u--input>
              </u-form-item>
            </u-col>
          </u-row>
        </u--form>
      </view>
    </view>
    <view class="footer">
      <u-button
        @click="saveDate"
        color="#C8161D"
        text="充值"
        v-hasButtons="['ChongzhiConfirm']"
        class="btnn"
      ></u-button>
    </view>
    <!-- 悬浮球 -->
    <drag-button />
  </view>
</template>
<script>
  import * as api from '@/api/financial';
  import { isLocals, isLocalSymbol } from '@/util/numberToCurrency';

  export default {
    data() {
      return {
        tableData: [],
        select: {
          memberCode: '',
        },
        rechargeMethod: 1,
        czWayList: [], // 充值方式
        enumsAccountList: [], // 钱包类型
        paymentTypeList: [], // 交款方式
      };
    },
    onLoad() {
      // 交款方式
      this.getpaymentType();
      // 充值方式
      this.getrechargeMethod();
    },
    methods: {
      isLocalSymbol,
      // 充值
      saveDate() {
        let shouldTerminate = false;

        this.tableData.forEach((ele) => {
          if (!ele.paymentMethod) {
            shouldTerminate = true;
            uni.showToast({
              title: '交款方式不能为空',
              icon: 'none',
              duration: 1500,
            });
          }
        });
        if (!shouldTerminate) {
          uni.navigateTo({
            url:
              '/pages/financial/czzxqc?czlx=1&rechargeMethod=' +
              this.rechargeMethod +
              '&detailParams=' +
              JSON.stringify(this.tableData),
          });
        }
      },
      bindPickerChange1(e) {
        this.$set(
          this.tableData[0],
          'paymentMethodName',
          this.paymentTypeList[e.detail.value].label
        );
        this.$set(
          this.tableData[0],
          'paymentMethod',
          this.paymentTypeList[e.detail.value].value
        );
      },
      // 钱包类型
      getenumsCzAccount() {
        api.getenumsCzAccount({ accountProperty: 1 }).then((res) => {
          this.enumsAccountList = res.rows;
        });
      },
      // 交款方式
      getpaymentType() {
        api.getpaymentType().then((res) => {
          this.paymentTypeList = res.data;
        });
      },
      // 充值方式
      getrechargeMethod() {
        api.getrechargeMethod().then((res) => {
          this.czWayList = res.data;
        });
      },
      // 根据会员编号查询会员姓名
      changeName() {
        api
          .getMemberName({ memberCode: this.select.memberCode })
          .then((res) => {
            this.$set(this.select, 'memberName', res.memberName);
            this.getList();
          });
      },
      getList() {
        api
          .changeAccountType({
            memberCode: this.select.memberCode,
            memberName: this.select.memberName,
          })
          .then((res) => {
            res.data.forEach((ele) => {
              ele.rechargeDetailMap = {};
            });
            this.tableData = res.data;
            // 钱包类型
            this.getenumsCzAccount();
          });
      },
      radioChange(n) {
        this.rechargeMethod = n;
      },
    },
  };
</script>
<style lang="scss" scoped>
  ::v-deep .u-form-item__body__left__content__label {
    font-size: 24rpx;
    font-weight: bold;
  }
  .content {
    padding: 18rpx 24rpx 120rpx 24rpx;
    background: #f9f9f9;
    .footer {
      background: #ffffff;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20rpx;
    }
    .top_view {
      padding: 20rpx 22rpx;
      background: #ffffff;
      margin-bottom: 20rpx;
      box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(204, 204, 204, 0.4);
      border-radius: 20rpx;
      .top_flex {
        display: flex;
        border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
        padding-bottom: 22rpx;
        .flex_view1 {
          margin-right: 300rpx;
        }
        .text1 {
          font-size: 20rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          margin-bottom: 10rpx;
        }
        .text2 {
          font-size: 24rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
        }
      }
    }
  }
</style>
