<template>
  <view class="body-background"></view>
  <u-navbar
      :title="title"
      :auto-back="true"
      left-icon-size="40rpx"
      :safe-area-inset-top="true"
      :placeholder="true"
      bgColor="transparent"
  ></u-navbar>
  <view class="fxx-container row">
    <view class="fxx-logo">
      <u-image
          mode="widthFix"
          width="400"
          height="161.37"
          :src="staticImage.fxxLogo"
      ></u-image>
    </view>
    <view class="fxx-content">
      <u-form
          errorType="toast"
          labelPosition="left"
          :model="model"
          :rules="rules"
          ref="authForm"
          labelWidth="200rpx"
      >
        <u-form-item
            :custom-style="{
                  padding:'36rpx 0'
              }"
            label="姓名"
            prop="userInfo.name"
            borderBottom
        >
          <u-input
              fontSize="28"
              placeholder="请填写您的真实姓名"
              v-model="model.userInfo.name"
              border="none"
          ></u-input>
        </u-form-item>
        <u-form-item
            :custom-style="{
                  padding:'36rpx 0'
              }"
            label="性别"
            prop="userInfo.sex"
            borderBottom
        >
          <u-radio-group
              v-model="model.userInfo.sex"
              placement="row"
              @change="sexChange"
          >
            <u-radio
                size="32"
                labelSize="32"
                activeColor="#FF9545"
                :customStyle="{marginRight: '40px'}"
                v-for="(item, index) in sexList"
                :key="index"
                :label="item.name"
                :name="item.id"
                @change="radioChange"
            >
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item
            :custom-style="{
                  padding:'36rpx 0'
              }"
            label="政治面貌"
            prop="userInfo.political_outlook "
            borderBottom
        >
          <u-text
              @click="openPolPicker"
              :text="political_outlook_name||'请选择'"
              size="28"
              :color="political_outlook_name?'#020B18':'#AFB5BE'"
              suffixIcon="arrow-right"
              :icon-style="{color:(political_outlook_name?'#020B18':'#AFB5BE')}"
          ></u-text>
        </u-form-item>
        <u-form-item
            :custom-style="{
                  padding:'36rpx 0'
              }"
            label="手机号码"
            prop="userInfo.phone"
            borderBottom
        >
          <u-input
              fontSize="28"
              placeholder="请输入"
              v-model="model.userInfo.phone"
              border="none"
          ></u-input>
        </u-form-item>
        <u-form-item
            :custom-style="{
                  padding:'36rpx 0'
              }"
            label="所属街道"
            prop="userInfo.street"
            borderBottom
        >
          <u-text
              @click="openStreetPicker"
              :text="model.userInfo.street||'请选择'"
              size="28"
              :color="model.userInfo.street?'#020B18':'#AFB5BE'"
              suffixIcon="arrow-right"
              :icon-style="{color:(model.userInfo.street?'#020B18':'#AFB5BE')}"
          ></u-text>
        </u-form-item>
        <u-form-item
            :custom-style="{
                  padding:'36rpx 0'
              }"
            label="所属社区"
            prop="userInfo.community"
            borderBottom
        >
          <u-text
              @click="openCommunityPicker"
              :text="model.userInfo.community||'请选择'"
              size="28"
              :color="model.userInfo.community?'#020B18':'#AFB5BE'"
              suffixIcon="arrow-right"
              :icon-style="{color:(model.userInfo.community?'#020B18':'#AFB5BE')}"
          ></u-text>
        </u-form-item>

        <u-form-item
            :custom-style="{
                  padding:'36rpx 0'
              }"
            label="公司全称"
            prop="userInfo.company"
            borderBottom
        >
          <view style="position: relative;z-index: 99;">
            <uni-combox labelWidth="0" placeholder="请选择公司" :candidates="companyTip" v-model="model.userInfo.company" :border="false"></uni-combox>
          </view>
<!--          <u-input-->
<!--              fontSize="28"-->
<!--              placeholder="请输入"-->
<!--              v-model="model.userInfo.company"-->
<!--              border="none"-->
<!--          ></u-input>-->
        </u-form-item>
        <u-form-item
            :custom-style="{
                  padding:'36rpx 0'
              }"
            label="职业分类"
            prop="userInfo.position_type"
            borderBottom
        >
          <u-text
              @click="openPositionPicker"
              :text="model.userInfo.position_type||'请选择'"
              size="28"
              :color="model.userInfo.position_type?'#020B18':'#AFB5BE'"
              suffixIcon="arrow-right"
              :icon-style="{color:(model.userInfo.position_type?'#020B18':'#AFB5BE')}"
          ></u-text>
          <u-input
              fontSize="28"
              placeholder="请输入"
              v-model="model.userInfo.position_text"
              border="none"
              custom-style="margin-top:20rpx;"
              v-if="(model.userInfo.position_type === '其他')"
          ></u-input>
        </u-form-item>
        <u-form-item
            :custom-style="{
                  padding:'36rpx 0'
              }"
            label="身份证号码"
            prop="userInfo.id_card"
            borderBottom
        >
          <u-input
              fontSize="28"
              placeholder="请输入"
              v-model="model.userInfo.id_card"
              border="none"
          ></u-input>
        </u-form-item>
      </u-form>
      <u-button
          type="primary"
          text="立即认证"
          shape="circle"
          :custom-style="{
              color:'#020B18',
              backgroundColor:'#FF9545',
              border:'none',
              fontSize:'36',
              fontWeight:'400',
              marginTop:'48rpx'
            }"
          @click="submit"
      ></u-button>
    </view>
  </view>

  <uv-picker
            ref="pol"
            :columns="[polList]"
            keyName="name"
            @confirm="selectPol"></uv-picker>
  <uv-picker
            ref="street"
            :columns="[streetList]"
            keyName="name"
            @confirm="selectStreet"></uv-picker>
  <uv-picker
            ref="community"
            :columns="[communityList]"
            keyName="name"
            @confirm="selectCommunity"></uv-picker>
  <uv-picker
            ref="position"
            :columns="[positionList]"
            keyName="name"
            @confirm="selectPosition"></uv-picker>
</template>

<script>
import {
  imghost
} from '@/config/host.js'
import MzSubsection from '@/components/MzSubsection/Index.vue';
import api from '@/utils/functions.js';
import {getCommonStreet, systemConfig, webConfig} from "@/api/other";
import {fxxApply, userExtends} from "@/api/user";

export default {
  components: {
    MzSubsection
  },
  data() {
    return {
      companyTip:[],
      polShow:false,
      model: {
        userInfo: {
          name: '',
          sex: 1,
          phone: '',
          company: '',
          political_outlook: '',
          street: '',
          community: '',
          id_card: '',
          position_type: '',
        },
      },
      rules: {
        'userInfo.name': {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change']
        },
        'userInfo.sex': {
          type: 'string',
          max: 1,
          required: true,
          message: '请选择男或女',
          trigger: ['blur', 'change']
        },
        'userInfo.political_outlook ': {
          type: 'string',
          required: true,
          message: '请选择政治面貌',
          trigger: ['blur', 'change']
        },
        'userInfo.phone': {
          type: 'string',
          required: true,
          message: '请输入手机号码',
          trigger: ['blur', 'change']
        },
        'userInfo.street': {
          type: 'string',
          required: true,
          message: '请选择街道',
          trigger: ['blur', 'change']
        },
        'userInfo.community': {
          type: 'string',
          required: true,
          message: '请选择社区',
          trigger: ['blur', 'change']
        },
        'userInfo.id_card': {
          type: 'string',
          required: true,
          message: '请输入身份证号',
          trigger: ['blur', 'change']
        },
        'userInfo.position_type ': {
          type: 'string',
          required: true,
          message: '请选择职业分类',
          trigger: ['blur', 'change']
        },
      },
      sexList:[
        {
          id:1,
          name: '男',
          disabled: false,
        },
        {
          id:2,
          name: '女',
          disabled: false,
        },
      ],
      political_outlook_name:'',
      polList:[
        {
          id:0,
          name: '群众',
        },
        {
          id:1,
          name: '共青团员',
        },
        {
          id:2,
          name: '预备党员',
        },
        {
          id:3,
          name: '党员',
        },
      ],

      // 或者如下，也可以配置keyName参数修改对象键名
      // list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
      current: 1,
      title: '丰行侠认证',
      loading: true,
      staticImage: {
        bg: imghost + '/BG.png',
        newIcon: imghost + '/new-icon.png',
        fxxLogo: imghost + '/fxx-logo.png',
        fxx1: imghost + '/fxx-1.png',
      },
      user: {
        avatar: imghost + '/banner.png',
        nickname: '清晨的风',
        coupons: 221,
        id: 88685,
      },
      isTop: false,
      lists: [
        {
          id: 1,
          thumb: imghost + '/new-1.png',
          title: '全市公安机关夏季治安打击整治“彭安行动”新闻发布会召开',
          desc: '需要您带一点猫砂上门，谢谢',
          time: '2023/06/16',
          is_new: true
        }, {
          id: 2,
          thumb: imghost + '/new-2.png',
          title: '全市公安机关夏季治安打击整治“彭安行动”新闻发布会召开',
          desc: '需要您带一点猫砂上门，谢谢',
          time: '2023/06/16',
          is_new: true
        }, {
          id: 3,
          thumb: imghost + '/new-3.png',
          title: '全市公安机关夏季治安打击整治“彭安行动”111开',
          desc: '需要您带一点猫砂上门，谢谢',
          time: '2023/06/16',
          is_new: false
        },
      ],
      size: {
        height: 500,
      },
      streetList:[],
      communityList:[],
      positionList:[],
    }
  },
  onLoad() {

  },
  computed: {
    api() {
      return api
    },
    sectionStyle() {
      const style = {};
      style.padding = '0 26rpx';
      style.position = 'sticky';
      style.zIndex = '9999';
      style.top = api.navHeight().systemBarHeight + 'px'
      return style;
    },
    listHeight() {
      let that = this;
      let height;
      let info = uni.createSelectorQuery().in(this).select('.subsection');
      info.boundingClientRect(function (data) {
        that.size.height = data.height;
      }).exec(function (res) {

      });
      // that.size.height = (api.navHeight().windowHeight - height);
    }
  },
  methods: {
    getTips(){
      systemConfig({
        type:'company'
      }).then(res => {
        this.companyTip = res.data;
      });
    },
    openPolPicker(){
      this.$refs.pol.open();
    },
    openStreetPicker(){
      this.$refs.street.open();
    },
    openCommunityPicker(){
      this.$refs.community.open();
    },
    openPositionPicker(){
      this.$refs.position.open();
    },
    chatDetail(item) {
      wx.navigateTo({
        url: '/pages/ChatDetail/index?id=' + item.id
      });
    },
    checkSection(index) {
      this.current = index;
    },
    scrollToLower() {

    },
    sexChange(e){
      console.log(e)
      this.model.userInfo.sex = e;
    },
    navTo(url) {
      wx.navigateTo({
        url: url
      })
    },
    getPickerData(){
      systemConfig({
        type:'job_type'
      }).then(res => {
        this.positionList = res.data;
        console.log(this.positionList)
      })
      getCommonStreet({}).then(res => {
        this.streetList = res.data
      });
    },
    selectPol(e){
      this.political_outlook_name = e.value[0].name;
      this.model.userInfo.political_outlook = e.value[0].id;
      this.polShow = false;
    },
    selectStreet(e){
      this.model.userInfo.street = e.value[0].name;
      this.communityList = e.value[0].children;
    },
    selectCommunity(e){
      this.model.userInfo.community = e.value[0].name;
    },
    selectPosition(e){
      this.model.userInfo.position_type = e.value[0].name;
    },
    submit(){
      if(this.model.userInfo.position_text!=='' && this.model.userInfo.position_type === '其他'){
        this.model.userInfo.position_type = this.model.userInfo.position_text;
      }
      fxxApply(this.model.userInfo).then(res => {
        if(res.code === 200){
          this.navTo('/pages/Authentication/done?id='+res.data.fxx_id+'&name='+this.model.userInfo.name)
        }else{
          uni.$u.toast(res.msg);
        }
      })

    },
    getUserExtend() {
      userExtends().then((res) => {
        if(res.code === 200) {
          this.userInfo = res.data;
          this.userInfo = res.data;
          this.model.userInfo.name = res.data.name;
          this.model.userInfo.phone = res.data.phone;
          this.model.userInfo.street = res.data.street;
          this.model.userInfo.community = res.data.community;
          this.model.userInfo.company = res.data.company;
          this.model.userInfo.position_type = res.data.position;
          this.model.userInfo.id_card = res.data.id_card;
          console.log(this.model.userInfo);
          uni.setStorageSync('user', res.data);
          this.$store.commit('userInfo', res.data);
        }
      });
    }
  },
  onPageScroll(res) {
    if (res.scrollTop <= 20) {
      uni.$emit('isTop', true);
    } else {
      uni.$emit('isTop', false);
    }
  },
  created() {
    // this.listHeight();

    // this.pagePadding = (api.navHeight().navPaddingTop +
    // 	api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
  },
  mounted() {
    this.getPickerData();
    let token = uni.getStorageSync('token');
    if (token) {
      this.getUserExtend();
    }
    this.getTips();
  },
}
</script>

<style lang="scss">
@import './components/form.scss';
</style>