<template>
  <view class="page">
    <uv-form ref="form" :model="userInfo" :rules="rules" labelPosition="left" labelWidth="auto">
      <uv-form-item borderBottom label="电话:" prop="phone">
        <uv-input v-model="userInfo.phone" border="none"></uv-input>
      </uv-form-item>
      <uv-form-item borderBottom label="地址:" prop="location">
        <uv-input v-model="userInfo.location" border="none"></uv-input>
      </uv-form-item>
      <uv-form-item borderBottom label="主体名称:" prop="name">
        <uv-input v-model="userInfo.name" border="none"></uv-input>
      </uv-form-item>
      <uv-form-item borderBottom label="统一社会信用代码:" prop="code">
        <uv-input v-model="userInfo.code" border="none"></uv-input>
      </uv-form-item>
      <view class="license">
        <text>营业执照</text>
      </view>
      <uv-form-item>
        <image-uploader
          ref="uploader"
          :height="'400rpx'"
          :width="'auto'"
          @success="handleUploadSuccess"
        />
      </uv-form-item>
      <view class="btn-signature">
        <uv-button
          customStyle="margin-top: 10px; background-color: #F15A04;
    color: white;"
          throttleTime="1000"
          @click="openProtocol"
          >点击查看协议
        </uv-button>
        <uv-button
          customStyle="margin-top: 10px; background-color: #F15A04;
    color: white;"
          text="确认协议并去签名"
          @click="submit"
        >
        </uv-button>
      </view>
    </uv-form>
  </view>
</template>

<script>
export default {
  onLoad() {
    // this.openProtocol()
  },
  data() {
    return {
      tempUrl: '',
      userInfo: {
        name: '',
        code: '',
        phone: '',
        location: '',
        businessLicenseUrl: '',
        signatureUrl: '',
        templateId: '2',
      },

      rules: {
        name: {
          type: 'string',
          required: true,
          message: '请填写主体名称',
          trigger: ['blur', 'change'],
        },
        phone: {
          type: 'string',
          required: true,
          // pattern: /^1[3-9]\d{9}$/,
          message: '请填写正确的手机号码',
          trigger: ['blur', 'change'],
        },
        location: {
          type: 'string',
          required: true,
          message: '请填写地址',
          trigger: ['blur', 'change'],
        },
        code: {
          type: 'string',
          required: true,
          // pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/,
          message: '请填写正确的统一社会信用代码',
          trigger: ['blur', 'change'],
        },
      },
      radio: '',
      switchVal: false,
    }
  },
  methods: {
    openProtocol() {
      uni.downloadFile({
        url: 'https://api.ccttiot.com/hhrxy-1757582246358.pdf',
        success: function (res) {
          var filePath = res.tempFilePath
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
            success: function (res) {},
          })
        },
      })
    },

    handleUploadSuccess(result) {
      console.log('图片上传成功:', result.url)
      this.userInfo.businessLicenseUrl = result.url
      uni.showToast({
        title: '上传成功',
        icon: 'success',
      })
    },
    // 提交
    async submit() {
      if (this.userInfo.businessLicenseUrl === '') {
        uni.showToast({
          icon: 'error',
          title: '请上传营业执照',
        })
        return
      }

      this.$refs.form
        .validate()
        .then(res => {
          uni.showToast({
            icon: 'success',
            title: '校验通过',
          })
          // 这里可以添加实际的提交逻辑
          console.log('表单数据:', this.userInfo)
          uni.navigateTo({
            url: `/pages/signature/signature?${Object.entries(this.userInfo)
              .map(([key, val]) => `${key}=${encodeURIComponent(val)}`)
              .join('&')}`,
          })
        })
        .catch(errors => {
          uni.showToast({
            icon: 'error',
            title: '校验失败',
          })
          console.log('验证错误:', errors)
        })
    },
    // 重置
    reset() {
      this.$refs.form.resetFields()
      this.$refs.form.clearValidate()
      this.userInfo.businessLicenseUrl = ''
    },

    hideKeyboard() {
      uni.hideKeyboard()
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  padding: 10rpx 30rpx;
}

.btn-signature {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.license {
  margin-top: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 690rpx;
}
</style>
