<template>
  <d2-container v-loading="isLoading">
    <div class="addHouser-container">
      <el-form :model="form"
               label-width="120px"
               ref="form"
               :rules="rules">
        <el-form-item label="支付费率："
                      prop="payRate">
          <el-input placeholder="请填写"
                    type="number"
                    :step="0.1"
                    v-model="form.payRate"
                    max='99.9'
                    min="0.1"
                    class="filter-item-same-width">
            <template slot="append">%</template>
          </el-input>
          <div class="zhu">注：费率设置单位为百分数，最小基本单位为0.1，有效数据0.1-99.9之间</div>

        </el-form-item>
        <el-form-item label="服务费率："
                      prop="serviceRate">
          <el-input placeholder="请填写"
                    type="number"
                    :step="0.1"
                    v-model="form.serviceRate"
                    max='99.9'
                    min="0.1"
                    class="filter-item-same-width">
            <template slot="append">%</template>
          </el-input>
          <div class="zhu">注：费率设置单位为百分数，最小基本单位为0.1，有效数据0.1-99.9之间</div>
        </el-form-item>

        <el-form-item label="微信商户号："
                      prop="merchantId">
          <el-input placeholder="请填写"
                    v-model="form.merchantId"
                    autocomplete="off"
                    maxlength="30"
                    :show-word-limit="true"
                    class="filter-item-same-width">
          </el-input>
        </el-form-item>

        <el-form-item label="商户号名称："
                      prop="">
          <el-input placeholder="请填写"
                    v-model="form.merchantName"
                    autocomplete="off"
                    maxlength="30"
                    :show-word-limit="true"
                    class="filter-item-same-width">
          </el-input>
          <div class="zhu">注：收款账户为平台服务商下申请的支付商户号，请谨慎填写！！</div>

        </el-form-item>

      </el-form>
    </div>
    <span slot="footer"
          class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary"
                 style="margin-left: 150px"
                 :loading="ifSubmit"
                 @click="submit('form')">保存</el-button>
    </span>
  </d2-container>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import {
  modiyBusiness,
  getBusiness
} from '@/libs/common/constant'
export default {
  data () {
    return {
      openId: this.$route.params.id,
      isLoading: false,
      ifSubmit: false,
      form: {},
      rules: {
        payRate: [{ required: true, message: '请填写', trigger: 'blur' }],
        serviceRate: [{ required: true, message: '请填写', trigger: 'blur' }],
        merchantId: [{ required: true, message: '请填写', trigger: 'blur' }]
      }
    }
  },
  async created () {
    if (this.openId) {
      this.isLoading = true
      await this.getBusiness()
    } else {
      await this.cancel()
    }
  },
  computed: {
    // 获取 此页面 路径
    ...mapState('d2admin/page', ['current'])
  },
  methods: {
    ...mapActions('d2admin/page', ['close', 'add']),
    // 获取 基本信息
    async getBusiness () {
      const res = await this.$api.GET(`${getBusiness.url}${this.openId}`)
      this.form = { ...res.info, ...res.company }

      this.isLoading = false
    },
    async cancel () {
      var tagName = this.current
      await this.close({ tagName })
      this.$router.push('/businessList')
    },
    validatePhoneNumber (phoneNumber) {
      var pattern = /^1[3456789]\d{9}$/
      return pattern.test(phoneNumber)
    },
    submit (detail) {
      if (!this.validatePhoneNumber(this.form.contactPhone)) {
        this.$message.error('请输入正确的手机号！！！')
        return
      }
      if (this.ifSubmit) {
        return
      }
      this.ifSubmit = true
      this.$refs[detail].validate(async (valid) => {
        if (valid) {
          try {
            // 提交前 处理 数据
            // 拼接 营业时间 转换 时间
            var data = await this.arrangeData()
            // 判断 参数 确定是修改还是 添加
            if (this.openId) {
              console.log(data, '编辑提交的参数')
              //  提交接口
              data.companyOpenId = this.openId
              const res = await this.$api.POST(`${modiyBusiness.url}`, data)
            } else {
              console.log(data, '添加提交的参数')
            }
            await this.cancel()
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
          } catch (error) {}
        } else {
          console.log('error submit!!')
          this.ifSubmit = false
          return false
        }
      })
    },
    arrangeData () {
      // if (this.form.validUntil != this.form.value1) {
      //   this.form.validUntil = dayjs(this.form.value1).format(
      //     "YYYY-MM-DD 00:00:00"
      //   );
      // }
      var data = {
        companyName: this.form.companyName,
        provinceId: this.form.provinceId,
        cityId: this.form.cityId,
        countyId: this.form.countyId,
        townId: this.form.townId,
        contactName: this.form.contactName,
        contactPhone: this.form.contactPhone,
        loginName: this.form.loginName,
        loginPwd: this.form.loginPwd,
        merchantId: this.form.merchantId,
        merchantName: this.form.merchantName,
        nature: this.form.nature,
        businessType: this.form.businessType,
        validUntil: this.form.validUntil,
        payRate: this.form.payRate,
        serviceRate: this.form.serviceRate,
        addrDetail: this.form.addrDetail,
        businessHours: this.form.businessHours,
        // 非必填
        companyCode: this.form.companyCode,
        businessLicenseImageList: this.form.businessLicenseImageList || []
      }
      return data
    }
  }
}
</script>

<style>
</style>
