<template>
  <div class="list-card list-common-table" v-if="id!=0">
    <t-card :bordered="false" v-if="show==1">
      <t-steps :defaultCurrent="current" :style="{ width: '1200px',margin:'20px auto' }">
        <t-step-item :title="info.association_name"></t-step-item>
        <t-step-item title="会员信息填写"></t-step-item>
        <t-step-item title="公司信息填写"></t-step-item>
      </t-steps>
      <div style="margin-top: 40px">
        <template v-if="current==0">
          <t-card :title="info.association_name+'入会须知'" :bordered="true" hover-shadow
                  :style="{ width: '1200px',margin:'0 auto' }">
            <div v-html="info.ruhuixizhu"
                 style="height: 500px;    overflow-y: auto;white-space: break-spaces;line-height: 25px;"></div>
            <div style="text-align: center;padding: 20px">
              <t-checkbox v-model="ok">同意安装协议</t-checkbox>
            </div>
            <div style="text-align: center">
              <t-button @click="okIns">下一步</t-button>
            </div>
          </t-card>
        </template>
        <template v-if="current==1">
          <t-card title="会员信息填写" :bordered="true" hover-shadow :style="{ width: '1200px',margin:'0 auto' }">
            <div style="padding: 20px">
              <div style="padding-bottom: 20px;font-weight: bold">登陆信息</div>
              <t-form
                layout="inline"
                labelAlign="top"
              >
                <t-form-item label="手机号" name="phone">
                  <t-input v-model="formData.phone" placeholder="请输入手机号"></t-input>
                </t-form-item>
                <t-form-item label="密码" name="password">
                  <t-input v-model="formData.password" placeholder="请输入密码"></t-input>
                </t-form-item>
                <t-form-item label="申请职位" name="position_id">
                  <t-select v-model="formData.position_id" :style="{ width: '200px' }">
                    <t-option v-for="(item,index) in plan_list" :label="item.position_name" :value="item.id"></t-option>
                  </t-select>
                </t-form-item>

              </t-form>
            </div>
            <div style="padding: 20px">
              <div style="padding-bottom: 20px;font-weight: bold"></div>
              <t-form
                labelAlign="top"
                layout="inline"
              >
                <t-form-item label="真实姓名" name="nikename">
                  <t-input v-model="formData.nikename" placeholder="请输入真实姓名"></t-input>
                </t-form-item>
                <t-form-item label="性别" name="gender">
                  <t-select v-model="formData.gender" :style="{ width: '200px' }">
                    <t-option key="0" label="女" value="0"></t-option>
                    <t-option key="1" label="男" value="1"></t-option>
                  </t-select>
                </t-form-item>
                <t-form-item label="民族" name="nation">
                  <t-input v-model="formData.nation" placeholder="请输入民族"></t-input>
                </t-form-item>
                <t-form-item label="政治面貌" name="political">
                  <t-input v-model="formData.political" placeholder="请输入政治面貌"></t-input>
                </t-form-item>
                <t-form-item label="出生日期" name="birth_time">
                  <t-date-picker :style="{ width: '200px' }" v-model="formData.birth_time"/>
                </t-form-item>
                <t-form-item label="身份证号码" name="card_number">
                  <t-input v-model="formData.card_number" placeholder="请输入身份证号码"></t-input>
                </t-form-item>
                <t-form-item label="籍贯" name="jiguan">
                  <t-input v-model="formData.jiguan" placeholder="请输入籍贯"></t-input>
                </t-form-item>
                <t-form-item label="毕业院校" name="institution">
                  <t-input v-model="formData.institution" placeholder="请输入毕业院校"></t-input>
                </t-form-item>
                <t-form-item label="学历" name="education">
                  <t-input v-model="formData.education" placeholder="请输入学历"></t-input>
                </t-form-item>
                <t-form-item label="学位" name="academic_degree">
                  <t-input v-model="formData.academic_degree" placeholder="请输入学位"></t-input>
                </t-form-item>
                <t-form-item label="工作单位" name="academic_degree">
                  <t-input v-model="formData.work_unit" placeholder="请输入工作单位"></t-input>
                </t-form-item>
                <t-form-item label="单位职务" name="unit_position">
                  <t-input v-model="formData.unit_position" placeholder="请输入单位职务"></t-input>
                </t-form-item>
                <t-form-item label="微信号" name="wx_number">
                  <t-input v-model="formData.wx_number" placeholder="请输入微信号"></t-input>
                </t-form-item>
                <t-form-item label="邮箱" name="mailbox">
                  <t-input v-model="formData.mailbox" placeholder="请输入邮箱"></t-input>
                </t-form-item>
                <t-form-item label="固定电话" name="fixed_telephone">
                  <t-input v-model="formData.fixed_telephone" placeholder="请输入固定电话"></t-input>
                </t-form-item>
                <t-form-item label="其他社会职务" name="other_social_positions">
                  <t-input v-model="formData.other_social_positions" placeholder="请输入其他社会职务"></t-input>
                </t-form-item>
                <t-form-item label="其他联系人" name="other_contacts">
                  <t-input v-model="formData.other_contacts" placeholder="请输入其他联系人"></t-input>
                </t-form-item>
<!--                <t-form-item label="意向协会职务" name="position">-->
<!--                  <t-input v-model="formData.position" placeholder="请输入意向协会职务"></t-input>-->
<!--                </t-form-item>-->
                <t-form-item label="自我介绍" name="achievement_award">
                  <t-textarea placeholder="请输入自我介绍" :autosize="{ minRows: 3, maxRows: 5 }"
                              v-model="formData.introduction"/>
                </t-form-item>
                <t-form-item label="主要成就以及获奖情况" name="achievement_award">
                  <t-textarea placeholder="请输入主要成就以及获奖情况" :autosize="{ minRows: 3, maxRows: 5 }"
                              v-model="formData.achievement_award"/>
                </t-form-item>
              </t-form>
            </div>
            <div style="padding: 0px 20px">
              <t-form labelAlign="top"
                      layout="inline">
                <t-form-item label="形象照">
                  <t-upload
                    :action="$store.state.user.apiUrl+'/api/common/upload'"
                    v-model="formData.photo_image_show"
                    theme="image"
                    tips="请选择形象照"
                    accept="image/*"
                    :format-response="(response) => formatResponse(response, 0)"
                  ></t-upload>
                </t-form-item>
                <t-form-item label="身份证正面照">
                  <t-upload
                    :action="$store.state.user.apiUrl+'/api/common/upload'"
                    v-model="formData.cardz_image_show"
                    theme="image"
                    tips="请选择身份证正面照"
                    accept="image/*"
                    :format-response="(response) => formatResponse(response, 1)"
                  ></t-upload>
                </t-form-item>
                <t-form-item label="身份证反面照">
                  <t-upload
                    :action="$store.state.user.apiUrl+'/api/common/upload'"
                    v-model="formData.cardf_image_show"
                    theme="image"
                    tips="请选择身份证反面照"
                    accept="image/*"
                    :format-response="(response) => formatResponse(response, 2)"
                  ></t-upload>
                </t-form-item>
              </t-form>
            </div>
            <div style="text-align: center;margin-top: 40px">
              <t-space :style="{ width: '300px',margin:'0 auto',textAlign:'center' }">
                <t-button @click="okreceiveCode">下一步</t-button>
              </t-space>
            </div>
          </t-card>
        </template>
        <template v-if="current==2">
          <t-card title="公司信息填写" :bordered="true" hover-shadow :style="{ width: '1200px',margin:'0 auto' }">
            <div style="padding: 20px">
              <t-form labelAlign="top"
                      layout="inline">
                <t-form-item label="营业执照">
                  <t-upload
                    :action="$store.state.user.apiUrl+'/api/common/upload'"
                    v-model="formData.business_license_image_show"
                    theme="image"
                    tips="请选择营业执照"
                    accept="image/*"
                    :format-response="(response) => formatResponse(response, 3)"
                  ></t-upload>
                </t-form-item>
                <t-form-item label="统一社会信用代码" name="unified_code">
                  <t-input v-model="formData.unified_code" placeholder="请输入统一社会信用代码"></t-input>
                </t-form-item>
                <t-form-item label="企业名称" name="enterprise_name">
                  <t-input v-model="formData.enterprise_name" placeholder="请输入企业名称"></t-input>
                </t-form-item>
                <t-form-item label="企业性质" name="enterprise_nature">
                  <t-input v-model="formData.enterprise_nature" placeholder="请输入企业性质"></t-input>
                </t-form-item>
                <t-form-item label="行业" name="industry_id">
                  <t-select v-model="formData.industry_id" :style="{ width: '200px' }">
                    <t-option v-for="(item,index) in industry_list" :label="item.industry_name" :value="item.id"></t-option>
                  </t-select>
                </t-form-item>
                <t-form-item label="企业网址" name="enterprise_website">
                  <t-input v-model="formData.enterprise_website" placeholder="请输入企业网址"></t-input>
                </t-form-item>
                <t-form-item label="是否上市" name="if_list">
                  <t-select v-model="formData.if_list" :style="{ width: '200px' }">
                    <t-option key="0" label="是" value="0"></t-option>
                    <t-option key="1" label="否" value="1"></t-option>
                  </t-select>
                </t-form-item>
                <t-form-item label="员工人数" name="employee">
                  <t-input v-model="formData.employee" placeholder="请输入员工人数"></t-input>
                </t-form-item>
                <t-form-item label="企业注册地" name="enterprise_location">
                  <t-input v-model="formData.enterprise_location" placeholder="请输入企业注册地"></t-input>
                </t-form-item>
                <t-form-item label="上年度营业额" name="previous_revenue">
                  <t-input v-model="formData.previous_revenue" placeholder="请输入上年度营业额"></t-input>
                </t-form-item>
                <t-form-item label="上年度纳税额" name="previous_tax">
                  <t-input v-model="formData.previous_tax" placeholder="请输入上年度纳税额"></t-input>
                </t-form-item>
                <t-form-item label="上年度净利润" name="previous_profit">
                  <t-input v-model="formData.previous_profit" placeholder="请输入上年度净利润"></t-input>
                </t-form-item>
                <t-form-item label="上年度公益性捐赠支出" name="previous_donation">
                  <t-input v-model="formData.previous_donation" placeholder="上年度公益性捐赠支出"></t-input>
                </t-form-item>
                <t-form-item label="其他企业任职情况" name="qitaqiyerenzhiqingkuang">
                  <t-input v-model="formData.qitaqiyerenzhiqingkuang" placeholder="其他企业任职情况"></t-input>
                </t-form-item>
                <t-form-item label="企业介绍" name="enterprise_Introduction">
                  <t-textarea placeholder="请输入企业介绍" :autosize="{ minRows: 3, maxRows: 5 }"
                              v-model="formData.enterprise_Introduction"/>
                </t-form-item>
                <t-form-item label="业务介绍" name="introdiction">
                  <t-textarea placeholder="请输入业务介绍" :autosize="{ minRows: 3, maxRows: 5 }"
                              v-model="formData.introdiction"/>
                </t-form-item>
                <t-form-item label="企业所获荣誉以及专利" name="enterprise_honor">
                  <t-textarea placeholder="请输入企业所获荣誉以及专利" :autosize="{ minRows: 3, maxRows: 5 }"
                              v-model="formData.enterprise_honor"/>
                </t-form-item>
              </t-form>
              <t-form labelAlign="top"
                      layout="inline">
                <t-form-item label="是否建立团组织" name="if_organization">
                  <t-select v-model="formData.if_organization" :style="{ width: '200px' }">
                    <t-option key="0" label="是" value="0"></t-option>
                    <t-option key="1" label="否" value="1"></t-option>
                  </t-select>
                </t-form-item>
              </t-form>
              <t-form v-if="formData.if_organization==0" labelAlign="top"
                      layout="inline">
                <t-form-item label="团组织性质" name="nature">
                  <t-input v-model="formData.nature" placeholder="团组织性质"></t-input>
                </t-form-item>
                <t-form-item label="建团时间" name="jiantuan_time">
                  <t-date-picker :style="{ width: '200px' }" v-model="formData.jiantuan_time"/>
                </t-form-item>
                <t-form-item label="建团人数" name="jiantuan_number">
                  <t-input v-model="formData.jiantuan_number" placeholder="建团人数"></t-input>
                </t-form-item>
                <t-form-item label="青年人数" name="youth_number">
                  <t-input v-model="formData.youth_number" placeholder="青年人数"></t-input>
                </t-form-item>
                <t-form-item label="上级团组织" name="superior_nature">
                  <t-input v-model="formData.superior_nature" placeholder="上级团组织"></t-input>
                </t-form-item>
                <t-form-item label="团委负责人信息" name="tuanweifuzerenxinxi">
                  <t-input v-model="formData.tuanweifuzerenxinxi" placeholder="团委负责人信息"></t-input>
                </t-form-item>
                <t-form-item label="批复文件">
                  <t-upload
                    :action="$store.state.user.apiUrl+'/api/common/upload'"
                    v-model="formData.documents_file_show"
                    theme="image"
                    tips="请选择批复文件(图片)"
                    accept="image/*"
                    :format-response="(response) => formatResponse(response, 4)"
                  ></t-upload>
                </t-form-item>
              </t-form>
              <div style="text-align: center;margin-top: 40px">
                <t-space :style="{ width: '300px',margin:'0 auto',textAlign:'center' }">
                  <t-button @click="current=1" theme="default">上一步</t-button>
                  <t-button @click="submit">提交申请</t-button>
                </t-space>
              </div>
            </div>
          </t-card>
        </template>
      </div>
    </t-card>
    <div class="result-success" v-if="show==0">
      <check-circle-icon class="result-success-icon" />
      <div class="result-success-title">申请已提交</div>
      <div class="result-success-describe">登陆小程序可查看审核结果</div>
      <div>
        <t-button @click="() => this.$router.push('/login?id='+id)">返回首页</t-button>
      </div>
    </div>
  </div>
</template>
<script>
import {UserIcon, LockOnIcon} from 'tdesign-icons-vue';
import { CheckCircleIcon } from 'tdesign-icons-vue';

export default {
  components: {
    CheckCircleIcon,
    UserIcon,
    LockOnIcon,
  },
  data() {
    return {
      show:1,
      formData: {
        position_id:null,
        industry_id:null,
        phone: '',
        password: '',
        nikename: '',
        gender: null,
        birth_time: '',
        nation: '',
        political: '',
        jiguan: '',
        institution: '',
        education: '',
        academic_degree: '',
        card_number: '',
        work_unit: '',
        unit_position: '',
        wx_number: '',
        mailbox: '',
        fixed_telephone: '',
        achievement_award: '',
        other_contacts: '',
        other_social_positions: '',
        position: '',
        cardf_image_show: [],
        cardz_image_show: [],
        photo_image_show: [],
        cardf_image: '',
        cardz_image: '',
        photo_image: '',
        business_license_image_show: [],
        business_license_image: '',
        unified_code: '',
        enterprise_nature: '',
        enterprise_website: '',
        if_list: null,
        employee: '',
        previous_revenue: '',
        previous_tax: '',
        previous_profit: '',
        previous_donation: '',
        qitaqiyerenzhiqingkuang: '',
        enterprise_Introduction: '',
        introdiction: '',
        enterprise_honor: '',
        if_organization: null,
        nature: '',
        jiantuan_time: '',
        jiantuan_number: '',
        youth_number: '',
        superior_nature: '',
        tuanweifuzerenxinxi: '',
        documents_file: '',
        documents_file_show: [],
        enterprise_location:'',
        introduction:'',
        enterprise_name:'',
      },
      ok: false,
      current: 2,
      id: 0,
      info: '',
      industry_list:[],
      plan_list:[]
    };
  },
  mounted() {
    console.log(this.$route.query.id);
    if (typeof (this.$route.query.id) != 'undefined') {
      this.id = this.$route.query.id;
      this.getInfo();
      this.getPlan();
      this.getIndustry();
    } else {
      this.$message.error('入会链接有误！', 0);
    }
  },
  methods: {
    getIndustry(){
      this.$request
        .post("/industry",{association_id:this.id})
        .then( (res) => {
          console.log(res);
          if(res.code==1){
            this.industry_list=res.data;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    getPlan(){
      this.$request
        .post("/position",{association_id:this.id})
        .then( (res) => {
          console.log(res);
          if(res.code==1){
            this.plan_list=res.data;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    formatResponse(res, type) {
      console.log(res);
      if (type == 0) {
        this.formData.photo_image = res.data.url;
      } else if (type == 1) {
        this.formData.cardz_image = res.data.url;
      } else if (type == 2) {
        this.formData.cardf_image = res.data.url;
      } else if (type == 3) {
        this.formData.business_license_image = res.data.url;
      } else {
        this.formData.documents_file = res.data.url;
      }

      return {url: res.data.fullurl};
    },
    getInfo() {
      this.$request
        .post("/association/find", {association_id: this.id})
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.info = res.data;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    okIns() {
      if (!this.ok) {
        this.$message.error('请认真阅读且同意入会协议！');
        return;
      }
      this.current = 1;
      //this.getreceiveCode();
    },
    okreceiveCode() {
      //检查是否填写
      if (this.formData.phone == '') {
        this.$message.error('请输入手机号！');
        return;
      }
      if (this.formData.password == '') {
        this.$message.error('请输入密码！');
        return;
      }
      if (this.formData.nikename == '') {
        this.$message.error('请输入真实姓名！');
        return;
      }
      if (this.formData.position_id == null) {
        this.$message.error('请选择申请职位！');
        return;
      }
      if (this.formData.birth_time == '') {
        this.$message.error('请输入出生日期！');
        return;
      }
      if (this.formData.gender == null) {
        this.$message.error('请选择性别！');
        return;
      }
      if (this.formData.nation == '') {
        this.$message.error('请输入民族！');
        return;
      }
      if (this.formData.political == '') {
        this.$message.error('请输入政治面貌！');
        return;
      }
      if (this.formData.jiguan == '') {
        this.$message.error('请输入籍贯！');
        return;
      }
      if (this.formData.institution == '') {
        this.$message.error('请输入毕业院校！');
        return;
      }
      if (this.formData.education == '') {
        this.$message.error('请输入学历！');
        return;
      }
      if (this.formData.academic_degree == '') {
        this.$message.error('请输入学位！');
        return;
      }
      if (this.formData.card_number == '') {
        this.$message.error('请输入身份证号！');
        return;
      }
      if (this.formData.work_unit == '') {
        this.$message.error('请输入工作单位！');
        return;
      }
      if (this.formData.unit_position == '') {
        this.$message.error('请输入单位职务！');
        return;
      }
      if (this.formData.wx_number == '') {
        this.$message.error('请输入微信号！');
        return;
      }
      if (this.formData.mailbox == '') {
        this.$message.error('请输入邮箱！');
        return;
      }
      if (this.formData.fixed_telephone == '') {
        this.$message.error('请输入固定电话！');
        return;
      }
      if (this.formData.achievement_award == '') {
        this.$message.error('请输主要成就以及获奖情况！');
        return;
      }
      if (this.formData.other_contacts == '') {
        this.$message.error('请输入其他联系人！');
        return;
      }
      if (this.formData.other_social_positions == '') {
        this.$message.error('请输入其他社会职务！');
        return;
      }
      if (this.formData.position == '') {
        this.$message.error('请输入意向协会职务！');
        return;
      }
      if (this.formData.cardf_image == '') {
        this.$message.error('请上传身份证正面！');
        return;
      }
      if (this.formData.cardz_image == '') {
        this.$message.error('请上传身份证反面！');
        return;
      }
      if (this.formData.photo_image == '') {
        this.$message.error('请上传个人照片！');
        return;
      }
      if(this.formData.introduction==''){
        this.$message.error('请填写自我介绍！');
        return;
      }
      this.current = 2;
    },
    submit(){
      if (this.formData.business_license_image == '') {
        this.$message.error('请上传营业执照！');
        return;
      }
      if (this.formData.unified_code == '') {
        this.$message.error('请输入统一社会信用代码！');
        return;
      }
      if(this.formData.enterprise_name==''){
        this.$message.error('请输入企业名称！');
        return;
      }
      if (this.formData.enterprise_nature == '') {
        this.$message.error('请输入企业性质！');
        return;
      }
      if (this.formData.industry_id == null) {
        this.$message.error('请选择行业！');
        return;
      }
      if (this.formData.enterprise_website == '') {
        this.$message.error('请输入企业网址！');
        return;
      }
      if (this.formData.if_list == null) {
        this.$message.error('请选择是否上市！');
        return;
      }
      if (this.formData.employee == '') {
        this.$message.error('请输入员工人数！');
        return;
      }
      if (this.formData.enterprise_location == '') {
        this.$message.error('请输入企业注册地！');
        return;
      }
      if (this.formData.previous_revenue == '') {
        this.$message.error('请输入上年度营业额！');
        return;
      }
      if (this.formData.previous_tax == '') {
        this.$message.error('请输入上年度纳税额！');
        return;
      }
      if (this.formData.education == '') {
        this.$message.error('请输入学历！');
        return;
      }
      if (this.formData.previous_profit == '') {
        this.$message.error('请输入上年度净利润！');
        return;
      }
      if (this.formData.previous_donation == '') {
        this.$message.error('请输入上年度公益性捐赠支出！');
        return;
      }
      if (this.formData.qitaqiyerenzhiqingkuang == '') {
        this.$message.error('请输入其他企业任职情况！');
        return;
      }
      if (this.formData.enterprise_Introduction == '') {
        this.$message.error('请输入企业介绍！');
        return;
      }
      if (this.formData.introdiction == '') {
        this.$message.error('请输入业务介绍！');
        return;
      }
      if (this.formData.enterprise_honor == '') {
        this.$message.error('请输入企业所获荣誉以及专利！');
        return;
      }
      if (this.formData.if_organization == null) {
        this.$message.error('是否建立团组织！');
        return;
      }
      if(this.formData.if_organization==0){
        if (this.formData.nature == '') {
          this.$message.error('请输主团组织性质！');
          return;
        }
        if (this.formData.jiantuan_time == '') {
          this.$message.error('请输入建团时间！');
          return;
        }
        if (this.formData.jiantuan_number == '') {
          this.$message.error('请输入建团人数！');
          return;
        }
        if (this.formData.youth_number == '') {
          this.$message.error('请输入青年人数！');
          return;
        }
        if (this.formData.superior_nature == '') {
          this.$message.error('请输入上级团组织！');
          return;
        }
        if (this.formData.tuanweifuzerenxinxi == '') {
          this.$message.error('请输入团委负责人信息！');
          return;
        }
        if (this.formData.documents_file == '') {
          this.$message.error('请上传批复文件！');
          return;
        }
      }
      this.formData.association_id=this.id;
      this.$request
        .post("/move/login/add", this.formData)
        .then((res) => {
          console.log(res);
          if (res.code==1){
            this.$message.success(res.msg);
            this.show=0;
          }else{
            this.$message.error(res.msg);
          }
          // setTimeout(() => {
          //   this.$router.push(`/login?id=`+this.id);
          // }, 1000);
          //this.getInfo();
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },

};
</script>
<style lang="less" scoped>
@import '@/style/variables.less';

.result-success {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 75vh;

  &-icon {
    font-size: 72px;
    color: var(--td-success-color);
  }

  &-title {
    margin-top: 28px;
    font-size: 20px;
    color: var(--td-text-color-primary);
    text-align: center;
    line-height: 28px;
    font-weight: 500;
  }

  &-describe {
    margin: 8px 0 32px;
    font-size: 14px;
    color: var(--td-text-color-secondary);
    line-height: 22px;
  }
}

.t-button + .t-button {
  margin-left: var(--td-comp-margin-s);
}
</style>
