<template>
  <view>
    <form class="padding-lr cu-form-group flex-direction">
      <view class="cu-form-group flex flex-direction padding-tb">
        <view class="title padding-bottom-sm">
          <span class="text-red padding-right-xs" v-show="!(userInfo && userInfo.id)">*</span>姓名
        </view>
        <input
          :disabled="userInfo && userInfo.id ? true : false"
          name="input"
          placeholder="请输入真实姓名"
          type="text"
          v-model="name"
        />
      </view>
      <!-- <view class="cu-form-group flex flex-direction padding-tb">
        <view class="title padding-bottom-sm">
          <span class="text-red padding-right-xs" v-show="!(userInfo && userInfo.id)">*</span>身份证
        </view>
        <input
          :disabled="userInfo && userInfo.id ? true : false"
          name="input"
          placeholder="请输入身份证号"
          type="idcard"
          v-model="idCard"
        />
      </view> -->
      <view class="cu-form-group flex flex-direction padding-tb">
        <view class="title padding-bottom-sm">
          <span class="text-red padding-right-xs" v-show="!(userInfo && userInfo.id)">*</span>联系方式
        </view>
        <input
          :disabled="userInfo && userInfo.id ? true : false"
          name="input"
          placeholder="请输入手机号码"
          type="number"
          v-model="phone"
        />
      </view>
      <view class="cu-form-group flex flex-direction padding-tb">
        <view class="title padding-bottom-sm">
          <span class="text-red padding-right-xs" v-show="!(userInfo && userInfo.id)">*</span>身份
        </view>
        <radio-group @change="RadioChange" class="block" v-if="!(userInfo && userInfo.id)">
          <view class="flex">
            <view :key="index" class="flex-sub margin-tb-sm" v-for="(identity, index) in identitys">
              <label class="flex justify-between align-center">
                <radio
                  :checked="index === current"
                  :value="identity.value"
                  class="round margin-right-xs"
                ></radio>
                <text class="flex-sub" style="font-size: 34rpx;">{{ identity.name }}</text>
              </label>
            </view>
          </view>
        </radio-group>
        <input
          :value="current === 0 ? '学生' : current === 1 ? '教师' : '工作人员'"
          disabled
          name="input"
          type="text"
          v-else
        />
      </view>
      <view class="cu-form-group flex flex-direction padding-tb">
        <view class="title padding-bottom-sm">
		  <span class="text-red padding-right-xs" v-show="!(userInfo && userInfo.id)">*</span>学号/工号
        </view>
        <input
          :disabled="userInfo && userInfo.id ? true : false"
          name="input"
          placeholder="请输入学号/工号"
          type="text"
          v-model="studentID"
        />
      </view>
    </form>
    <user-agreement @changeIntentions="changeIntentions" @changeIntentions1="changeIntentions1" @changeIntentions2="changeIntentions2" v-if="!(userInfo && userInfo.id)"></user-agreement>
	<view class="flex text-df margin-bottom margin-lr agree-text">
		微信小程序和企业微信应用同时实名后，可以绑定微信小程序帐号和企业微信应用帐号，方便操作
	</view>
	
    <button
      @tap="handleSubmitUserInfo"
      class="bg-cyan margin primary-btn"
      hover-class="cc-active"
      v-show="!(userInfo && userInfo.id)"
    >确认提交</button>
  </view>
</template>

<script>
import { showToast } from 'common/script/util';
import { SUBMIT_USER_INFO } from 'api/api';
import { mapState, mapMutations } from 'vuex';

export default {
  data() {
    return {
      name: '',
      // idCard: '',
      phone: '',
      identitys: [
        {
          value: '0',
          name: '学生',
        },
        {
          value: '1',
          name: '教师',
        },
        {
          value: '2',
          name: '工作人员',
        },
      ],
      studentID: '',
      current: 0,
      agree: false,
	  agree1: false,
	  agree2: false
    };
  },

  created() {
    if (this.userInfo) {
      this.name = this.userInfo.name;
      // this.idCard = this.userInfo.idCard;
      this.phone = this.userInfo.phone;
      this.studentID = this.userInfo.no;
      this.current = this.userInfo.post;
    }
  },

  computed: mapState('user', ['userInfo', 'pagePath']),

  methods: {
    ...mapMutations('user', ['setUserInfo']),
    RadioChange: function(evt) {
      for (let i = 0; i < this.identitys.length; i++) {
        if (this.identitys[i].value === evt.target.value) {
          this.current = i;
          break;
        }
      }
    },

    changeIntentions(data) {
      this.agree = data;
    },
	changeIntentions1(data) {
	  this.agree1 = data;
	},
	changeIntentions2(data) {
	  this.agree2 = data;
	},

    /**
     * 提交基本信息
     */
    async handleSubmitUserInfo() {
      try {
        if (!this.checkRules()) return;

        const { name, phone, studentID, current, pagePath } = this;
        const params = {
          param: {
            // idCard,
            name,
            no: studentID,
            phone,
            post: current,
          },
        };

        const res = await this.$http.post(SUBMIT_USER_INFO, params);
        const { success, code, msg, data } = res.data;
        if (success && code === 200) {
          uni.showToast({
            title: '基本信息提交成功',
            duration: 2000,
          });
          this.success = true;
          this.setUserInfo(data);
          if (pagePath === '/pages/basic-info/basic-info') {
            uni.reLaunch({
              url: `/pages/index/index`,
            });
          } else {
            uni.redirectTo({ url: pagePath });
          }
        } else {
          uni.showToast({
            title: msg || '基本信息提交失败',
            icon: 'none',
          });
        }
      } catch (error) {
        console.log('error: ', error);
        if (error.msg) {
          uni.showToast({
            title: error.msg || '基本信息提交失败',
            icon: 'none',
          });
        }
      }
    },

    // 验证信息
    checkRules() {
      const { name, phone, identitys, studentID, agree,agree1,agree2 } = this;
      if (!name) {
        showToast('请输入姓名');
        return;
      }
      // if (!this.verifyIdCard(idCard)) {
      //   showToast('请输入正确的身份证号');
      //   return;
      // }
      if (!this.verifyPhone(phone)) {
        showToast('请输入正确的手机号');
        return false;
      }
      if (!identitys) {
        showToast('请选择身份');
        return;
      }
	  if (!studentID) {
	    showToast('请输入学号/工号');
	    return;
	  }
      if (!agree) {
        showToast('请选择是否同意《用户服务协议》和《隐私政策》');
        return;
      }
	  if (!agree1) {
		showToast('请选择是否同意信息提交山西大学管理');
		return;
	  }
	  if (!agree2) {
		showToast('请确定是否为本人填写');
		return;
	  }
      return true;
    },

    /**
     * 验证手机号格式
     * @param {string} phone 手机号
     */
    verifyPhone(phone) {
      const phoneExg = /^1\d{10}$/;
      return phoneExg.test(phone);
    },

    /**
     * 验证身份证号格式
     * @param {string} idCard 身份证号
     */
    // verifyIdCard(idCard) {
    //   const idCardExg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
    //   return idCardExg.test(idCard);
    // },
  },
};
</script>

<style lang="scss" scoped>
.primary-btn {
  border-radius: 15rpx;
}

.agree-text {
	line-height: 60rpx;
}
</style>
