<template>
  <view style="height: 100%">
    <custom-nav-bar position="fixed" color="black" left-text="实名认证" left-arrow />

    <van-notice-bar color="#FF7F34" background="#FEF9F5" text="* 属于必填项" />

    <view class="card">
      <!-- <view>居民身份证 <text class="red">*</text></view>
  <view class="card-icon flex">
    <view>
      <van-uploader bind:after-read="leftAfterRead" file-list="{{ leftFileList }}" deletable="{{ true }}" max-count="1" bind:delete="imageDelete">
        <image wx:if="{{form.idFrontFile === ''}}" bindtap="afterRead" data-name="idFrontFile" src="https://zongzhi.xuqidata.com:5009/xq-ssg/d'00'cc79bfb9f9e6d6f2f35d9f5645227eda4d1217e257de9e29a08f2549383e7.png"></image>
        <image wx:if="{{form.idFrontFile !== ''}}" src="{{form.idFrontFile}}"></image>
      </van-uploader>
    </view>
    <view>
      <van-uploader bind:after-read="rightAfterRead" file-list="{{ rightFileList }}" deletable="{{ true }}" max-count="1" bind:delete="imageDelete">
        <image wx:if="{{form.idBackFile === ''}}" bindtap="afterRead" data-name="idBackFile" src="https://zongzhi.xuqidata.com:5009/xq-ssg/549ee4c7df608811711eed29787a3ff22a6d8c46b96bfdf9e310cea77eb8ac67.png"></image>
        <image wx:if="{{form.idBackFile !== ''}}" src="{{form.idBackFile}}"></image>
      </van-uploader>
    </view>
  </view>
  <view class="card-block">点击上方按钮上传身份证图片</view> -->

      <van-cell-group>
        <van-field custom-style="padding:42rpx 0;" @change="headleInput($event, { name: 'realName' })"
          data-name="realName" :value="form.realName" label="姓名" placeholder="请输入姓名" input-align="right" />
      </van-cell-group>
      <van-cell-group>
        <van-field custom-style="padding:42rpx 0;" @change="headleInput($event, { name: 'mobile' })" data-name="mobile"
          :value="form.mobile" label="手机号码" placeholder="请输入手机号码" input-align="right" />
      </van-cell-group>
      <van-cell-group>
        <van-field custom-style="padding:42rpx 0;" @change="headleInput($event, { name: 'idNo' })" data-name="idNo"
          :value="form.idNo" label="身份证号码" placeholder="请输入身份证号码" input-align="right" />
      </van-cell-group>
      <!-- <view class="mt-50">
    <van-checkbox value="{{ checked }}" shape="square" checked-color="#FE3B53" bind:change="headleChecked">
      勾选同意“介休政企通用户协议”
    </van-checkbox>
  </view> -->
      <view class="form-treaty">
        <van-checkbox label-disabled :value="checked" shape="square" use-icon-slot @change="headleChecked">
          <image class="ic-check" slot="icon"
            :src="checked ? '/static/images/ic-radio1.png' : '/static/images/ic-radio.png'" />
          <view class="checbox-text flex">
            <text>勾选同意“</text>
            <view class="jump-to">介休用户协议</view>
            <text>”</text>
          </view>
        </van-checkbox>
      </view>
      <view>
        <van-button v-if="!checked" disabled block color="#C1C1C1">提交信息</van-button>
        <van-button @click="submit" v-if="checked" block color="#FE3B53">提交信息</van-button>
      </view>
    </view>
  </view>
</template>

<script>
  // const app = getApp();
  // const { myApi } = app.globalData.api;
  import * as myApi from '@/api/myApi';
  export default {
    components: {},
    data() {
      return {
        // env: app.globalData.env,
        // appName: app.globalData.env.appName,
        checked: false,

        card: {
          just: '',
          against: ''
        },

        form: {
          // idFrontFile: '', // 正面
          // idBackFile: '', // 反面
          realName: null,
          mobile: null,
          idNo: null
        },

        leftFileList: [],
        name: ''
      };
    },
    async onLoad() {},
    async onShow() {},
    methods: {
      onClickLeft() {
        uni.switchTab({
          url: '/pages/enterprise/enterprise'
        });
      },

      async leftAfterRead(event) {
        const {
          file
        } = event.detail;
        const res = await getApp().globalData.upload({
          file
        });
        if (res.code !== 0) {
          uni.showToast({
            title: '上传图片失败',
            icon: 'none'
          });
          return false;
        }
        this.form.idFrontFile = res.data;
        this.setData({
          form: this.form
        });
      },

      async rightAfterRead(event) {
        const {
          file
        } = event.detail;
        const res = await getApp().globalData.upload({
          file
        });
        if (res.code !== 0) {
          uni.showToast({
            title: '上传图片失败',
            icon: 'none'
          });
          return false;
        }
        this.form.idBackFile = res.data;
        this.setData({
          form: this.form
        });
      },

      afterRead(event) {
        const {
          name
        } = event.currentTarget.dataset;
        this.card[name] = 'http://h5.shichunfei.top/static/image/e3.png';
        this.setData({
          card: {
            ...this.card,
            [name]: this.card[name]
          }
        });
      },

      // 获取input输入框数据
      headleInput(event, _dataset) {
        /* ---处理dataset begin--- */
        this.handleDataset(event, _dataset);
        /* ---处理dataset end--- */
        const {
          name
        } = event.currentTarget.dataset;
        this.form[name] = event.detail;
        this.setData({
          [name]: this[name]
        });
      },

      // 是否同意协议
      headleChecked(event) {
        const checked = this.checked;
        this.setData({
          checked: !checked
        });
      },

      async submit() {
        // const { idFrontFile, idBackFile } = this.data.form
        const {
          realName,
          mobile,
          idNo
        } = this.form;
        const {
          checked
        } = this;
        // if (idFrontFile === '' || idBackFile === '') {
        //   wx.showToast({
        //     title: idFrontFile === '' ? '居民身份证正面不能为空' : idBackFile === '' ? '居民身份证反面不能为空' : '居民身份证不能为空',
        //     icon: 'none'
        //   })
        //   return false
        // }

        if (realName === null || mobile === null || idNo === null) {
          uni.showToast({
            title: realName === null ? '姓名不能为空' : mobile === null ? '电话号不能为空' : idNo === null ? '身份证号不能为空' : '',
            icon: 'none'
          });
          return false;
        }
        if (!checked) {
          uni.showToast({
            title: '请勾选“介休政企通用户协议”',
            icon: 'none'
          });
          return false;
        }
        let params = {
          // idFrontFile, // 正面
          // idBackFile, // 反面
          realName,
          mobile,
          idNo
        };
        console.log(params);
        const res = await myApi.nameAuthApi(params);
        if (res.code !== 0) {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
          return;
        }
        uni.showToast({
          title: '认证成功！',
          icon: 'none'
        });
        setTimeout(() => {
          uni.redirectTo({
            url: '/pages/my/my'
          });
        }, 500);
      }
    }
  };
</script>
<style lang="less">
  page {
    background-color: #fff;
    --notice-bar-padding: 0 40rpx;
  }

  .mt-16 {
    margin-top: 16rpx;
  }

  .card {
    padding: 0 40rpx 0 40rpx;
  }

  .card-icon {
    margin-top: 40rpx;

    image {
      width: 252rpx;
      height: 160rpx;
      margin-right: 32rpx;
      border-radius: 10rpx;
    }
  }

  .card-block {
    margin-top: 24rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #666666;
  }

  .van-field__label:after {
    content: ' * ';
    color: red;
  }

  .label-class {
    color: #333333;
  }

  .van-cell--hover {
    color: #3333;
    padding: 42rpx 0;
  }

  .form-treaty {
    padding: 167rpx 0 75rpx;

    .ic-check {
      width: 32rpx;
      height: 32rpx;
    }

    .checbox-text {
      font-size: 28rpx;
      font-weight: 400;
      color: #000000;
      line-height: 28rpx;

      // .jump-to {
      //   color: var(--item-dominant-color);
      // }
    }
  }

  .card .van-field__label {
    font-size: 28rpx;
  }

  .card .van-field__body,
  .card .van-field__control {
    font-size: 32rpx;
  }

  .card .van-cell::after {
    border-bottom: 1px solid #efefef;
    border-bottom-color: #efefef;
    left: 0;
    right: 0;
    width: 100%;
  }
</style>