<template>
  <!-- 备用提现账号 -->
  <div class="shandeMchPage flex-col">
    <s-header :name="'备用提现账号'" :noback="false"></s-header>
    <div class="accountPerBox flex-col">
      <van-form @submit="onSubmit">
        <div class="van-cell van-field">
            <div class="van-cell__title van-field__label"><span>商户类型:</span></div>
            <div class="van-cell__value van-field__value radioBox">
                <van-radio-group v-model="type" direction="horizontal">
                <van-radio name="1" icon-size="18px">个人</van-radio>
                <van-radio name="0" icon-size="18px">企业</van-radio>
                </van-radio-group>
            </div>
        </div>
        <van-field
          v-model="bankName"
          name="bankName"
          label="杉德宝账号名称"
          :placeholder="'请输入杉德宝账号名称'"
          :rules="[{ required: true, message: '请输入杉德宝账号名称' }]"
        />
        <van-field
          v-model="bankNo"
          name="bankNo"
          label="杉德宝账号号码"
          :placeholder="'请输入杉德宝账号号码'"
          :rules="[{ required: true, message: '请输入杉德宝账号号码' }]"
        />
        <van-field
          v-model="bankChannelNo"
          name="bankbankChannelNoName"
          label="联行号"
          :placeholder="'请输入联行号'"
          :rules="[{ required: type === '1', message: '请输入联行号' }]"
        />
        <van-field
          v-model="bankChannelName"
          name="bankChannelName"
          label="开户行名称"
          :placeholder="'请输入开户行名称'"
          :rules="[{ required: type === '1', message: '请输入开户行名称' }]"
        />
        <!-- 操作 -->
        <van-row justify="space-around" style="padding: 1em">
          <van-button
            span="5"
            round
            type="primary"
            style="height: 2em; padding: 0 2em"
            native-type="submit"
            >提交</van-button
          >
        </van-row>
      </van-form>
    </div>
    <nav-bar></nav-bar>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from "vue";
import navBar from "@/components/NavBar";
import sHeader from "@/components/SimpleHeader";
import { Toast } from "vant";
import { saveShandeMch, getOneShandeMch } from "@/service/shandeMch";
import { getLoginUser } from "@/common/js/utils";
import { useRouter } from "vue-router";

export default {
  components: { sHeader, navBar },
  setup() {
    const router = useRouter();
    const user = getLoginUser();
    let addParams = reactive({
        adminId: user.id, // 当前登录账户的id
        type: '1', // 类型 String 必填 对公企业:type=0; 个人:type=1
        bankName: '', // 杉德宝账号名称 String 必填
        bankNo: '', // 杉德宝账号号码 String 必填
        bankChannelNo: '', // 联行号 type=0时 必填
        bankChannelName: '', // 开户行名称 type=0时 必填
    });
    onMounted(async () => { getOneShandeMchFun(); });
    // 获取备用提现账号回显
    const getOneShandeMchFun = async () => {
      const { data } = await getOneShandeMch({ adminId: user.id });
      if (data.code === "00000") {
        console.log(data);
        addParams.type = data.data.type;
        addParams.bankName = data.data.bankName;
        addParams.bankNo = data.data.bankNo;
        addParams.bankChannelNo = data.data.bankChannelNo;
        addParams.bankChannelName = data.data.bankChannelName;
      } else {
        Toast.fail(data.message);
      }
    };
    const onSubmit = async () => {
        console.log('onSubmit', addParams);
        saveShandeMchFun();
    };
    const saveShandeMchFun = async () => {
      const { data } = await saveShandeMch(addParams);
      if (data.code === "00000") {
        Toast.success("提交成功");
        router.push("/user");
      } else {
        Toast.fail(`提交失败 ${data.message}`);
      }
      console.log("onSubmit", data);
    };
    return {
      ...toRefs(addParams),
      onSubmit,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../common/style/common.less";
@import "./index.less";
</style>
