<template>
  <div class="app-content">
    <div v-show="showStaffArea">
      <form @submit="formSubmit" @reset="formReset">
        <div class="module-com input-line-wrap">
          <tui-list-cell class="line-cell" :hover="false">
            <div class="tui-title required">支付宝姓名</div>
            <input
              v-model="form.cashName"
              placeholder-class="phcolor"
              class="tui-input"
              name="cashName"
              placeholder="请输入姓名"
              maxlength="50"
              type="text"
            />
          </tui-list-cell>

          <tui-list-cell class="line-cell" :hover="false">
            <div class="tui-title required">支付宝帐号</div>
            <input
              v-model="form.cashAccount"
              placeholder-class="phcolor"
              class="tui-input"
              name="cashAccount"
              placeholder="请输入帐号"
              maxlength="50"
              type="text"
            />
          </tui-list-cell>
        </div>

        <!-- 提交 -->
        <div class="confirm-btn">
          <button class="admin-button-com big blue" formType="submit">
            提交
          </button>
        </div>
      </form>
    </div>
    <kd-entrance></kd-entrance>
  </div>
</template>

<script>
import TuiListCell from "@/components/plugin/list-cell";
import AppAvatarModule from "@/components/module/app-avatar";
const form = require("@/utils/formValidation.js");
import { cashUpdate } from "@/api/cash";
import { currentShop } from "@/api/shop";
export default {
  name: "cashSet",
  components: {
    TuiListCell,
    AppAvatarModule,
  },
  data() {
    return {
      form: {
        cashAccount: "",
        cashName: "",
      },
      roleList: [],
      roleSelData: {},
      showStaffArea: true,
      miniCodeSrc: "",
      memberData: {},
    };
  },
  onLoad() {
    //this.init()
  },
  onShow() {
    uni.setNavigationBarTitle({
      title: `提现帐号设置`,
    });
  },
  methods: {
    async init() {
      try {
        const { data } = await currentShop();

        this.form.cashAccount = data.cashAccount;
        this.form.cashName = data.cashName;
        this.$forceUpdate();
      } finally {
      }
    },
    confirmFn() {
      cashUpdate(this.form).then((res) => {
        this.$msg("操作成功");
        setTimeout(() => {
          uni.navigateBack();
        }, 1300)
      });
    },
    formSubmit(e) {
      // 表单验证
      let rules = [
        {
          name: "cashName",
          rule: ["required"],
          msg: ["请输入姓名"],
        },
        {
          name: "cashAccount",
          rule: ["required"],
          msg: ["请输入帐号"],
        },
      ];
      // 进行表单检查
      let formData = e.detail.value;
      let checkRes = form.validation(formData, rules);
      // 验证通过!
      if (!checkRes) {
        this.confirmFn();
      } else {
        this.$msg(checkRes);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.app-content {
  min-height: calc(100vh - 20px);
  padding-top: 20px;
}
.prompt-text {
  color: $fontColor3;
  padding-left: 30px;
  margin-bottom: 30px;
}
// ---
.module-com {
  margin-bottom: 20px;
  .member-wrap {
    .member-det {
      font-size: 24px;
      margin-left: 20px;
    }
  }
  .remark-wrap {
    align-items: flex-start;
    .remark {
      height: 240px;
    }
  }
}
// 按钮
.confirm-btn {
  width: calc(100% - 60px);
  margin: 60px 30px 20px;
  .admin-button-com {
    width: 100%;
  }
}
</style>