<template>
  <!-- 商户信息添加|修改 -->
  <div class="merchantSetPage flex-col">
    <s-header :name="'商户信息'" :noback="false"></s-header>
    <div class="merchantSetBox">
      <div class="Body flex-col">
        <div class="Body flex-col">
          <div class="wrap1 flex-col">
            <div class="section1 flex-row justify-between">
              <span class="word3" :class="{ acttive: tabType === '0' }" @click="tabType = '0'">基本信息</span>
              <span class="info1" :class="{ acttive: tabType === '1' }" @click="tabType = '1'">提现资料</span>
            </div>
            <!-- <div class="section2 flex-col"></div> -->
            <img
              class="img1"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8947935ab81635fdedd8124b11e305eef66286421b69c84fef22233014a3fa9a"
            />
          </div>
          <div v-if="tabType === '0'">
            <div class="wrap2 flex-row justify-between">
              <span class="info2">*</span>
              <span class="info3">地区：
                <!-- 广东省&gt;广州市&gt;天河区 -->
              </span>
            </div>
            <span class="info4">账号：{{adminObj.username}}</span>
            <span class="info5">开通管理员：</span>
            <van-form @submit="onSubmit">
              <van-field
                v-model="adminObj.name"
                name="password"
                :label="'姓名:'"
                :placeholder="'请输入姓名'"
                :rules="[{ required: true, message: '请输入姓名' }]"
              />
              <van-field
                v-model="adminObj.password"
                name="password"
                type="password"
                :label="'密码:'"
                :placeholder="'请输入密码'"
              />
              <span class="txt3">留空表示不修改</span>
              <van-field
                v-model="adminObj.checkPassword"
                name="password"
                type="password"
                :label="'确认密码:'"
                :placeholder="'请输入确认密码'"
              />
              <van-field
                v-model="adminObj.email"
                name="password"
                :label="'邮箱:'"
                :placeholder="'请输入邮箱'"
              />
              <van-field
                v-model="adminObj.phone"
                name="password"
                :label="'电话:'"
                :placeholder="'请输入电话'"
              />
              <van-field
                v-model="adminObj.tradeMerchantNo"
                name="password"
                :label="'商户报备号:'"
                :placeholder="'请输入商户报备号'"
              />
              <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="adminObj.ifForeign" direction="horizontal">
                    <van-radio name="0" icon-size="18px">是</van-radio>
                    <van-radio name="1" icon-size="18px">否</van-radio>
                  </van-radio-group>
                </div>
              </div>
              <div v-if="adminType === 0 || adminType === 1">
                <div class="van-cell van-field">
                  <div class="van-cell__title van-field__label"><span>0折优惠码:</span></div>
                  <div class="van-cell__value van-field__value radioBox">
                    <van-radio-group v-model="adminObj.promoCodeOpen" direction="horizontal">
                      <van-radio name="0" icon-size="18px">是</van-radio>
                      <van-radio name="1" icon-size="18px">否</van-radio>
                    </van-radio-group>
                  </div>
                </div>
                <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="adminObj.payPlatform" direction="horizontal">
                      <van-radio name="0" icon-size="18px">汇聚</van-radio>
                      <van-radio name="1" icon-size="18px">杉德支付</van-radio>
                    </van-radio-group>
                  </div>
                </div>
              </div>
              <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>
          <div v-if="tabType === '1'" class="tab2">
            <span class="info3">商户类型：个人</span>
            <span class="info4">联系人姓名：{{adminMchObj.busiContactName}}</span>
            <span class="word4">联系人手机：{{adminMchObj.busiContactMobileNo}}</span>
            <div class="block3 flex-col"></div>
            <span class="txt2">法人/个人姓名：{{adminMchObj.legalPerson}}</span>
            <span class="word5">法人/个人手机号：{{adminMchObj.phoneNo}}</span>
            <span class="word6">法人/个人身份证号：{{adminMchObj.idCardNo}}</span>
            <span class="txt3">身份证有效期：{{adminMchObj.idCardExpiry}}</span>
            <span class="txt4">营业执照编码：{{adminMchObj.licenseNo}}</span>
            <span class="word7">营业执照有效期：{{adminMchObj.licenseExpiry}}</span>
            <span class="txt5">经营范围：{{adminMchObj.manageScope}}</span> <span class="word8">经营地址：{{adminMchObj.manageAddr}}</span>
            <div class="block4 flex-col"></div>
            <div class="block5 flex-row justify-between">
              <span class="txt6">账户类型：</span> <span class="word9">{{adminMchObj.bankAccountType === 1 ? '借记卡' : ''}}{{adminMchObj.bankAccountType === 4 ? '对公账户' : ''}}</span>
            </div>
            <span class="word10">银行账户名称：{{adminMchObj.bankAccountName}}</span>
            <span class="word11">银行账号：{{adminMchObj.bankAccountNo}}</span>
            <span class="word12">银行号：{{adminMchObj.bankChannelNo}}</span>
          </div>
        </div>
      </div>
    </div>

    <nav-bar></nav-bar>
  </div>
</template>
<script>
import { onMounted, ref } from "vue";
import navBar from "@/components/NavBar";
import sHeader from "@/components/SimpleHeader";
import { getAdmin, getAdminMch, updateAdmin } from "@/service/merchantManage";
import { Toast } from "vant";
import { useRoute } from "vue-router";
import { getLoginUser } from "@/common/js/utils";

export default {
  components: { sHeader, navBar },
  setup() {
    const tabType = ref('0');
    const user = getLoginUser();
    const adminType = ref(user.type);
    const route = useRoute();
    const merchantId = ref('');
    const adminObj = ref({});
    const adminMchObj = ref({});
    onMounted(async () => {
      merchantId.value = route.query.merchantId;
      getAdminFun();
      getAdminMchFun();
    });
    const getAdminFun = async () => {
      const { data } = await getAdmin({id: merchantId.value});
      if (data.code === "00000") { adminObj.value = data.data; adminObj.value.password = ''; adminObj.value.checkPassword = ''; } else { Toast.fail(data.message); }
      console.log('getAdminFun', data);
    };
    const getAdminMchFun = async () => {
      const { data } = await getAdminMch({id: merchantId.value});
      if (data.code === "00000") { adminMchObj.value = data.data; } else { Toast.fail(data.message); }
      console.log('getAdminMchFun', data);
    }
    const onSubmit = async () => {
      const params = {
        id: adminObj.value.id,
        name: adminObj.value.name,
        username: adminObj.value.username,
        ifForeign: adminObj.value.ifForeign,
        phone: adminObj.value.phone,
        email: adminObj.value.email,
        tradeMerchantNo: adminObj.value.tradeMerchantNo,
      };
      if (adminType.value === 0 || adminType.value === 1) {
        params.promoCodeOpen = adminObj.value.promoCodeOpen;
        params.applyStartTime = adminObj.value.applyStartTime;
        params.applyEndTime = adminObj.value.applyEndTime;
        params.payPlatform = adminObj.value.payPlatform;
      }
      if (adminObj.value.password !== '') {
        if (adminObj.value.checkPassword === '') { Toast.fail('请输入确认密码');  return;}
        if (adminObj.value.password === adminObj.value.checkPassword) {
          params.password = adminObj.value.password;
        } else {
          Toast.fail('两次密码输入不相同');
        }
      }
      const { data } = await updateAdmin(params);
      if (data.code === "00000") { Toast.success('修改成功'); getAdminFun(); } else { Toast.fail(data.message); }
      console.log('onSubmit', data);
    }
    return {
      tabType,
      adminType,
      adminObj,
      adminMchObj,
      onSubmit
    };
  },
};
</script>
<style lang="less" scoped>
@import "../../common/style/common.less";
@import "./set.less";
</style>
