<template>
  <view class="content">
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="特约商户设置"></uni-nav-bar>
    <view class="justify-center section_1" v-show="auditDetail">
      <image src="/static/imgs/merchant/error-icon.png" class="image_4" />
      <text class="text_4">申请被驳回，{{ auditDetail }}</text>
    </view>
    <qn-form-item label="商户信息" type="title"></qn-form-item>
    <qn-form-item label="商户名称">
      <text>{{ form.name }}</text>
    </qn-form-item>
    <qn-form-item label="商户类型" required>
      <qn-select
        contentStyle="background: none; padding: 0;text-align: right;"
        :options="types"
        v-model="form.mallSupplierType"
        placeholder="请选择商户类型"
      ></qn-select>
    </qn-form-item>
    <qn-form-item label="客服电话" required>
      <qn-easyinput :maxlength="11" v-model="form.servicePhone" :inputBorder="false" text="right" placeholder="请输入客服电话"></qn-easyinput>
    </qn-form-item>
    <qn-form-item label="联系邮箱" required>
      <qn-easyinput :maxlength="25" v-model="form.contactEmail" :inputBorder="false" text="right" placeholder="请输入联系邮箱"></qn-easyinput>
    </qn-form-item>
    <qn-form-item label="商户资料" size="large">
      <view class="flex-row img-area">
        <image v-for="(url, index) in imgs" :key="index" class="img" :src="url" @click="preview(url)"></image>
      </view>
    </qn-form-item>
    <qn-form-item label="结算账户" type="title"></qn-form-item>
    <qn-form-item label="账户类型">
      <text>{{ accountTypeName }}</text>
    </qn-form-item>
    <qn-form-item label="账户名">
      <text>{{ form.accountName }}</text>
    </qn-form-item>
    <qn-form-item label="账户号码">
      <text>{{ form.accountNumber }}</text>
    </qn-form-item>
    <qn-form-item label="开户行">
      <text>{{ form.accountBank }}</text>
    </qn-form-item>
    <qn-form-item label="法人信息" type="title"></qn-form-item>
    <qn-form-item label="法人姓名">
      <text>{{ form.contactName }}</text>
    </qn-form-item>
    <qn-form-item label="法人身份证号">
      <text>{{ form.contactIdNumber }}</text>
    </qn-form-item>
    <qn-form-item label="法人手机号">
      <text>{{ form.mobilePhone }}</text>
    </qn-form-item>
    <qn-footer fixed height="120rpx">
      <view class="button-area">
        <view class="button button__cancel" @click="back">
          <text class="text">取消</text>
        </view>
        <view class="button button__submit" @click="apply">
          <text class="text" style="color: white">提交申请</text>
        </view>
      </view>
    </qn-footer>
  </view>
</template>

<script>
import { go2, back } from '@/utils/hook.js'
import { applyMerchant } from '@/apis/merchantApi.js'
import { mallSupplierTypeEnum, applyStatusEnum } from '@/enums/index.js'
import { validateField } from '@/utils/index.js'
const types = [
  {
    label: '个体工商户',
    value: mallSupplierTypeEnum.PERSONAL
  },
  {
    label: '企业',
    value: mallSupplierTypeEnum.ENTERPRISE
  }
]

const accountFields = [
  {
    label: '开户银行',
    key: 'accountBank'
  },
  {
    label: '开户名称',
    key: 'accountName'
  },
  {
    label: '银行账号',
    key: 'accountNumber'
  },
  {
    label: '开户银行省市编码',
    key: 'bankAddressCode'
  },
  {
    label: '开户银行联行号',
    key: 'bankBranchId'
  }
]

const validateFields = [
  {
    name: 'contactEmail',
    rules: [{ required: true, message: '请输入联系邮箱' }]
  },
  {
    name: 'servicePhone',
    rules: [
      { required: true, message: '请输入客服电话' },
      { type: 'phone', message: '请输入正确的手机号' }
    ]
  }
]
export default {
  data() {
    return {
      types: Object.freeze(types),
      accountTypeName: '私账',
      privateAccounts: {}, // 私账
      corporateAccount: {}, // 公账
      imgs: [],
      auditDetail: '',
      form: {
        businessType: 0, // 业务类型 0 云工厂 1 纸通宝
        enterpriseId: null,
        name: 'xxx',
        mallSupplierType: null,
        accountName: '',
        accountNumber: '',
        accountBank: '',
        bankAddressCode: '',
        bankBranchId: '',
        servicePhone: '',
        contactName: '',
        contactIdNumber: '',
        mobilePhone: '',
        contactEmail: ''
      }
    }
  },
  onLoad(option) {
    if (!option.info) {
      uni.showToast({
        title: '参数错误',
        icon: 'none',
        success: () => {
          setTimeout(() => {
            back()
          }, 1500)
        }
      })
    } else {
      let info = JSON.parse(option.info)
      this.privateAccounts = info.privateAccounts
      this.corporateAccount = info.corporateAccount
      this.imgs.push(info.businessLicenseImg, info.legalPersonIdCardFrontImg, info.legalPersonIdCardBackImg)
      let keys = Object.keys(this.form)
      keys.forEach((key) => {
        if (info[key] != undefined) {
          this.form[key] = info[key]
        }
      })
      if (info.applymentState === applyStatusEnum.REJECTED) {
        if (info.auditDetail) {
          let reasons = info.auditDetail.map((item) => item.rejectReason)
          this.auditDetail = reasons.join('，')
        }
      }
    }
  },
  watch: {
    'form.mallSupplierType': function (val) {
      if (val === mallSupplierTypeEnum.PERSONAL) {
        this.accountTypeName = '私账'
        this.updateAccount(this.privateAccounts)
      } else {
        this.accountTypeName = '公账'
        this.updateAccount(this.corporateAccount)
      }
    }
  },
  methods: {
    go2,
    back,
    preview(url) {
      uni.previewImage({
        urls: this.imgs,
        current: url
      })
    },
    // 更新账户信息
    updateAccount(account) {
      accountFields.forEach((item) => {
        this.form[item.key] = account[item.key]
      })
    },
    apply() {
      for (let field of validateFields) {
        const { name, rules } = field
        const value = this.form[name]
        const { isValid, msg } = validateField(value, rules)
        if (!isValid) {
          uni.showToast({
            title: msg,
            icon: 'none'
          })
          return false
        }
      }
      applyMerchant(this.form).then((res) => {
        if (res) {
          uni.showToast({
            title: '申请成功',
            icon: 'none',
            success: () => {
              setTimeout(() => {
                back()
              }, 1500)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 750rpx;
  .img-area {
    width: 686rpx;
    padding-bottom: 32rpx;
  }
  .img {
    margin-left: 12rpx;
    border-radius: 10rpx;
    width: 120rpx;
    height: 120rpx;
    border: 1px solid #f7f8fa;
  }
}
.section_1 {
  width: 750rpx;
  padding: 28rpx 32rpx;
  color: rgb(0, 0, 0);
  font-size: 32rpx;
  font-weight: 500;
  line-height: 45rpx;
  white-space: pre-wrap;
  background-color: rgb(255, 192, 195);
  .image_4 {
    margin: 4rpx 0;
    width: 36rpx;
    height: 36rpx;
  }
  .text_4 {
    width: 100%;
    margin-left: 12rpx;
  }
}
.button-area {
  width: 750rpx;
  padding: 0 32rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .button {
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10rpx;
    .text {
      font-size: 30rpx;
      font-weight: 500;
      text-align: center;
    }
  }
  .button__cancel {
    width: 270rpx;
    height: 88rpx;
    border: 2rpx solid #979797;
  }
  .button__submit {
    width: 400rpx;
    height: 88rpx;
    background: #007aff;
  }
}
</style>
