<template>
  <BaseContainer>
    <NavBar title="申请成为机构" />
    <view class="apply-lecturer">
      <view class="tit" v-if="Verify_Status == 'N'">请先实名认证，认证通过后即可继续申请</view>
      <view class="form">
        <view v-if="active == 1">
          <view class="item">
            <view class="item-hd"><text>*</text>法人名称</view>
            <input v-model.trim="formData.merchant_name" :disabled="applyStatus === 1" type="text" placeholder="请输入法人名称"
              class="item-bd" />
          </view>
          <view class="item">
            <view class="item-hd"><text>*</text>法人身份证号</view>
            <input v-model.trim="formData.card_id" :disabled="applyStatus === 1" type="text" placeholder="请输入法人身份证号"
              class="item-bd" />
          </view>
          <view v-if="Verify_Status != 'N' && VerifyLoding">
            <view class="item">
              <view class="item-hd"><text>*</text>邮箱地址</view>
              <input v-model.trim="formData.emial" :disabled="applyStatus === 1" type="text" placeholder="请输入邮箱地址"
                class="item-bd" />
            </view>
            <view v-if="!(applyStatus === 1 && !formData.business_license)" class="honor-item">
              <view class="item-hd">
                <view><text class="text">*</text>营业执照</view>
                <view class="tip">请上传有年检章的企业营业执照副本扫描件，成功入驻后无法修改，请谨慎填写。</view>
              </view>
              <view class="item-bd">
                <view class="img-wrap" v-if="formData.business_license">
                  <i v-if="applyStatus !== 1" class="iconfont iconcha3"
                    @click="deleteImage('business_license', item)"></i>
                  <image mode="aspectFit" :src="formData.business_license" />
                </view>
                <view v-if="!formData.business_license && applyStatus !== 1" class="upload"
                  @click="upload('business_license', $event)">
                </view>
              </view>
            </view>
            <view class="item">
              <view class="item-hd"><text>*</text>公司名称</view>
              <input v-model.trim="formData.corporate_name" :disabled="applyStatus === 1" type="text"
                placeholder="请输入公司名称" class="item-bd" />
            </view>
            <view class="item">
              <view class="item-hd"><text>*</text>统一社会信用代码</view>
              <input v-model.trim="formData.credit_code" :disabled="applyStatus === 1" type="text" placeholder="请输入注册号"
                class="item-bd" />
            </view>
            <view class="item">
              <view class="item-hd"><text>*</text>营业期限</view>
              <view class="item-li"><i :class="[Businessterm ? 'iconxuanzhong1' : 'iconweixuanzhong', 'iconfont2']"
                  @click="getBusinessterm"></i>长期</view>
            </view>

            <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange"
              v-if="!Businessterm">
              <view class="term"> {{ date ? date : '同营业执照“营业/经营期限”，若无则选长期' }} <i class="iconfont iconxiangyou"></i>
              </view>
            </picker>
            <view v-if="!(applyStatus === 1 && !formData.charter.length)" class="honor-item">
              <view class="item-hd">
                <view><text class="text">*</text>法人身份证照片</view>
                <view class="tip">请提供有效期范围内的证件，证件需露出四角，请勿遮挡或模糊，确保信息清晰可见</view>
              </view>
              <view class="card">
                <view class="ca" @click="upload('card_straight', $event)">
                  <image
                    :src="formData.card_straight ? formData.card_straight : getImgPath('/wap/first/zsff/images/fan.png')"
                    mode="" />
                  <view class="card_name">身份证人像面</view>
                </view>
                <view class="ca on" @click="upload('card_side', $event)">
                  <image :src="formData.card_side ? formData.card_side : getImgPath('/wap/first/zsff/images/jfan.png')"
                    mode="" />
                  <view class="card_name">身份证徽面</view>
                </view>
              </view>
            </view>

          </view>

        </view>
        <view v-if="active == 0">

          <view class="item">
            <view class="item-hd"><text>*</text>教育领域</view>

            <picker @change="bindPickerChangeArea" :value="index" :range="array" range-key="title">
              <view class="uni-input"></view>
              <view class="term"> {{ array[index].title ? array[index].title : '请选择教育领域' }} <i
                  class="iconfont iconxiangyou"></i>
              </view>
            </picker>
          </view>
          <view v-for="(item, index) in qualifications" :key="index" style="border-bottom: 1px solid #e9e9e9;">
            <view :class="item.event_type != 2 ? 'item' : 'honor-item'">
              <view class="item-hd"><text v-if="item.is_required" class="text">*</text>{{ item.event_name }}
                <view class="tip" v-if="item.event_type == 2">{{ item.placeholder }}</view>
                <view class="item-bd">
                  <!-- 上传图片 -->
                  <view class="img-wrap" v-if="item.event_value && item.event_type == 2">
                    <i v-if="applyStatus !== 1" class="iconfont iconcha3" @click="deleteImage(index, item)"></i>
                    <image mode="aspectFit" :src="item.event_value" />
                  </view>
                  <view v-if="!formData.event_value && applyStatus !== 1 && item.event_type == 2" class="upload"
                    @click="uploadFile(index, $event)">
                  </view>
                </view>
              </view>
              <!-- 单选 -->
              <picker @change="bindPickerChangePicker($event, index, item.eventValue)" :value="index"
                :range="item.eventValue" v-if="item.event_type == 3">
                <view class="uni-input"></view>
                <view class="term"> {{ item.event_value ? item.event_value : '请选择' + item.event_name }} <i
                    class="iconfont iconxiangyou"></i>
                </view>
              </picker>
              <input v-if="item.event_type == 1" v-model="item.event_value" :disabled="applyStatus === 1" type="text"
                :placeholder="'请输入' + item.event_name" class="item-bd" />
              <!-- 时间选择 -->
              <view class="item-li" v-if="item.event_type == 4"><i
                  :class="[item.businessterm ? 'iconxuanzhong1' : 'iconweixuanzhong', 'iconfont2']"
                  @click="getBusinesstermEvent(index)"></i>长期</view>
            </view>
            <!-- <view>1245678</view> -->
            <picker mode="date" :value="item.event_value" :start="startDate" :end="endDate"
              @change="bindDateChangeSelect($event, index)" v-if="!item.businessterm && item.event_type == 4">
              <view class="term"> {{ item.event_value ? item.event_value : '同营业执照“营业/经营期限”，若无则选长期' }} <i
                  class="iconfont iconxiangyou"></i>
              </view>
            </picker>
          </view>

          <view class="item">
            <view class="item-hd"><text>*</text>手机</view>
            <input v-model="formData.link_tel" :disabled="applyStatus === 1" type="tel" placeholder="请输入手机号"
              class="item-bd" />
          </view>
          <view class="tip">注：成为机构后可使用该手机号用短信登录机构后台</view>
          <view v-if="applyStatus !== 1" class="item">
            <view class="item-hd"><text>*</text>验证码</view>
            <input v-model="formData.code" type="number" placeholder="请输入验证码" class="item-bd" />
            <view :disabled="!!count" class="code-btn" type="button" @click="getCode">
              {{ count ? "重新获取(" + count + "s)" : "获取验证码" }}
            </view>
          </view>
        </view>

        <view v-if="applyStatus !== 1 && active == 0" class="agree-item flex flex-center-x">
          <i :class="[agree ? 'iconxuanzhong1' : 'iconweixuanzhong', 'iconfont2']" @click="agree = !agree"></i>
          已阅读并同意
          <view class="agree-btn" @click="agreeVisible = true">《{{ title }}》</view>
        </view>
        <view class="btn flex flex-center" @click="Verify()" v-if="Verify_Status == 'N'">
          实名认证
        </view>
        <view v-if="applyStatus !== 1 && active == 1 && Verify_Status != 'N'" class="btn flex flex-center"
          @click="submitApply">下一步填写企业资质
        </view>
        <view v-else style="display: flex;">
          <view v-if="applyStatus !== 1 && active == 0" class="btn flex flex-center" @click="active = 1">
            上一步
          </view>
          <view v-if="applyStatus !== 1 && active == 0" class="btn flex flex-center" @click="submitApply">
            提交申请
          </view>
        </view>

      </view>
      <view :class="{ mask: agreeVisible }"></view>
      <!-- 协议弹窗 -->
      <view :class="{ show: agreeVisible }" class="agree-dialog">
        <view class="title">{{ title }}</view>
        <view class="content">          <mp-html class="section" 
          :content="content"></mp-html></view>
        <!-- <view class="content"><img class="empty" src="{__WAP_PATH}zsff/images/empty.png"></view> -->
        <button class="ok" type="button" @click="(agreeVisible = false), (agree = true)">
          我同意
        </button>
        <button class="no" type="button" @click="(agreeVisible = false), (agree = false)">
          不同意
        </button>
        <i class="iconfont iconcha3" @click="agreeVisible = false"></i>
      </view>
      <!-- 申请讲师状态 -->
      <ApplyDialog :show.sync="applyVisible" :status="applyStatus" :thetype="2" />
    </view>
  </BaseContainer>
</template>

<script>
import {
  getApplyData,
  getMerchantApplyStatus,
  getMerchantProtocolInfo,
  saveInstitutionApply,
  getInstitution,
  getInstitutionDetails,
  getVerify,
  getdelVerify
} from "@/api/merchant";
import { getAuthCode } from "@/api/user";
import AddressPicker from "@/components/AddressPicker/index.vue";
import ApplyDialog from "@/components/ApplyDialog/index.vue";
import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html.vue";

const COUNT = 60;

export default {
  components: {
    AddressPicker,
    ApplyDialog,
    mpHtml
  },
  data() {
    return {
      active: 1,
      VerifyLoding:false,
      formData: {
        merchant_name: "",
        link_tel: "",
        code: "",
        merchant_head: "",
        province: "",
        city: "",
        district: "",
        address: "",
        explain: "",
        introduction: "",
        charter: [],
        emial: '',
        business_license: '',
        corporate_name: '',
        credit_code: '',
        business_term: '',
        card_straight: "",
        card_side: '',
        card_id: ""
      },
      view: "",
      show: false,
      ready: false,
      count: 0,
      agree: false,
      Businessterm: false,
      agreeVisible: false,
      applyStatus: null,
      applyVisible: false,
      title: "",
      content: "",
      date: "",
      array: [],
      index: 0,
      selectedId: 0,
      qualifications: [],
      uid: 0,
      Verify_Status: "T"
    };
  },
  created() {
    this.getBaseInfo();
    this.Institution();
  },
  computed: {
    startDate() {
      return this.getDate('start');
    },
    endDate() {
      return this.getDate('end');
    }
  },
  onShow() {
   // #ifdef MP-TOUTIAO
   this.type_address = true
   this.VerifyLoding = true
   // #endif
   // #ifdef MP-WEIXIN
   this.VerifyLoding = true
   // #endif
   // #ifdef MP-KUAISHOU
   this.kuaishou = true
   this.VerifyLoding = true
   // #endif
   // #ifdef APP-PLUS
   this.is_verify();
   // #endif
   // #ifdef H5
   let target = navigator.userAgent.toLowerCase();
   let isWeixin = /micromessenger/.test(target);
   if (!isWeixin) {
	 this.is_verify();
   }
   // #endif
  },
  methods: {
    getBusinesstermEvent(index) {
      var that = this
      that.qualifications[index].businessterm = that.qualifications[index].businessterm ? 0 : 1
      if (that.qualifications[index].businessterm == 0) {
        that.qualifications[index].event_value = ""
      }
      var asss = that.qualifications;
      that.qualifications = [];
      that.qualifications = asss
    },
    bindDateChangeSelect(e, index) {
      this.qualifications[index].event_value = e.detail.value
    },
    bindDateChange: function (e) {
      this.date = e.detail.value
      this.formData.business_term = e.detail.value
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === 'start') {
        year = year - 60;
      } else if (type === 'end') {
        year = year + 2;
      }
      month = month > 9 ? month : '0' + month;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    },
    handleAddressPicker({ detail }) {
      let [{ value: province }, { value: city }, district = {}] = detail.value;
      if (district && district.value) district = district.value;
      Object.assign(this.formData, {
        province,
        city,
        district,
      });
    },
    is_verify() {
      getVerify().then(res => {
        this.Verify_Status = res.data.status == 'F' ? 'N' : res.data.status;
        this.formData.merchant_name = res.data.cert_name
        this.formData.card_id = res.data.cert_no
        this.VerifyLoding = true

        if (res.data.status == "T") {
          this.delVerify('T');
          return this.$util.showMsg("认证成功");
        }
      })
    },
    delVerify(type) {
      var data = { type: type };
      getdelVerify(data).then(res => { })
    },
    showPicker() {
      if (this.applyStatus == 1) return;
      this.$refs.picker.show();
    },
    async uploadFile(index) {
      const { tempFilePaths } = await this.$util.wrapFn(uni.chooseImage, {
        count: 1,
        extension: ["png", "jpg", "jpeg"],
      });
      const path = tempFilePaths[0];

      uni.showLoading({
        mask: true,
      });
      try {
        const result = await this.$util.uploadImg(path);
        this.qualifications[index].event_value = result
        uni.hideLoading();
      } catch (err) {
        uni.hideLoading();
        this.$util.showMsg(err.msg || err);
      }
    },
    // 上传图片
    async upload(name) {
      const { tempFilePaths } = await this.$util.wrapFn(uni.chooseImage, {
        count: 1,
        extension: ["png", "jpg", "jpeg"],
      });
      const path = tempFilePaths[0];

      uni.showLoading({
        mask: true,
      });
      try {
        const result = await this.$util.uploadImg(path);

        if (typeof this.formData[name] === "string") {
          this.formData[name] = result;
        } else {
          this.formData[name].push(result);
        }

        uni.hideLoading();
      } catch (err) {
        uni.hideLoading();
        this.$util.showMsg(err.msg || err);
      }
    },
    // 删除图片
    deleteImage(name, url) {
      if (typeof this.formData[name] === "string") {
        this.formData[name] = "";
      } else if (Array.isArray(this.formData[name])) {
        this.formData[name].splice(this.formData[name].indexOf(url), 1);
      }
    },
    bindPickerChangePicker: function (e, index, list) {
      this.qualifications[index].event_value = list[e.detail.value]

      // this.qualifications[index].event_value = e.detail.value
    },
    bindPickerChangeArea: function (e) {
      const { value } = e.detail;
      const selectedId = this.array[value].id;
      this.selectedId = selectedId
      this.index = e.detail.value
      this.InstitutionDetails();
    },
    InstitutionDetails() {
      var data = { id: this.selectedId };
      getInstitutionDetails(data).then(res => {
        this.qualifications = res.data;
        this.qualifications.forEach((item, index) => {
          if (item.event_type == 3) {
            this.qualifications[index].eventValue = this.qualifications[index].event_value.split('#');
            this.qualifications[index].event_value = ''
          }
          if (item.event_type == 4) {
            this.qualifications[index].businessterm = 0
          }
        });
        console.log(this.qualifications)
      }).catch(err => {

      })
    },
    Institution() {
      getInstitution().then(res => {
        this.array = res.data
        if (this.applyStatus == null) {
          this.selectedId = res.data[0].id
          this.InstitutionDetails();
        }
        this.is_apply();

      }).catch(err => {
        console.log(err)
      })
    },
    Verify() {
      if (!this.formData.merchant_name) {
        return this.$util.showMsg("请输入姓名");
      }
      if (!this.formData.card_id) {
        return this.$util.showMsg("请输入身份证号");
      }
      // if (!this.agree) {
      //   return this.$util.showMsg("请勾选机构入驻协议");
      // }

      // #ifdef MP-WEIXIN 
      var type = 5;
      // #endif
      // #ifdef APP-PLUS
      var url = `https://demo.zhishi.tczxkj.com/wap/merchant/apply_verify?uid=${this.uid}&cert_name=${this.formData.merchant_name}&cert_no=${this.formData.card_id}&type=1`
      let platform = uni.getSystemInfoSync().platform;
      if (platform == "android") {
        plus.runtime.openURL(url)
      } else {
        plus.runtime.openURL(encodeURI(url))
      }
      // #endif
      // #ifdef H5
      var url = `https://demo.zhishi.tczxkj.com/wap/merchant/apply_verify?uid=${this.uid}&cert_name=${this.formData.merchant_name}&cert_no=${this.formData.card_id}&type=4`
      window.location.href = url
      // #endif
      // #ifdef MP-KUAISHOU
      var type = 3;
      // #endif
      // #ifdef MP-TOUTIAO
      var type = 2;
      // #endif
    },
    // 提交申请
    async submitApply() {

      if (this.active == 1) {
        if (!this.formData.merchant_name) {
          return this.$util.showMsg("请输入法人姓名");
        }
        if (!this.formData.card_id) {
          return this.$util.showMsg("请输入法人身份证号");
        }
        if (!this.formData.emial) {
          return this.$util.showMsg("请输入邮箱");
        }
        if (!this.formData.business_license) {
          return this.$util.showMsg("请上传营业执照");
        }
        if (!this.formData.corporate_name) {
          return this.$util.showMsg("请输入公司名称");
        }
        if (!this.formData.credit_code) {
          return this.$util.showMsg("请输入注册号");
        }
        if (!this.Businessterm && !this.formData.business_term) {
          return this.$util.showMsg("请选择营业期限");
        }
        if (!this.formData.card_straight) {
          return this.$util.showMsg("请上传身份证正面");
        }
        if (!this.formData.card_side) {
          return this.$util.showMsg("请上传身份证徽面");
        }

        this.active = this.active == 1 ? 0 : 1
        this.Institution();
      } else {
        for (var i = 0, len = this.qualifications.length; i < len; i++) {
          if (!this.qualifications[i].is_required) {
            continue;
          }
          switch (this.qualifications[i].event_type) {
            case 1:
              if (!this.qualifications[i].event_value) {
                this.$util.showMsg('请输入' + this.qualifications[i].event_name);
                return;
              }
              break;
            case 2:
              if (!this.qualifications[i].event_value.length) {
                this.$util.showMsg('请上传' + this.qualifications[i].event_name);
                return;
              }
            case 3:
              if (!this.qualifications[i].event_value.length) {
                this.$util.showMsg('请选择' + this.qualifications[i].event_name);
                return;
              }
              break;
            case 4:
              if (!this.qualifications[i].event_value.length && !this.qualifications[i].businessterm) {
                this.$util.showMsg('请选择' + this.qualifications[i].event_name);
                return;
              }
              break;
          }
        }
        if (!this.formData.link_tel) {
          return this.$util.showMsg("请输入手机号");
        }
        if (!/^1[3456789]\d{9}$/.test(this.formData.link_tel)) {
          return this.$util.showMsg("请输入正确的手机号");
        }
        if (!this.formData.code) {
          return this.$util.showMsg("请输入验证码");
        }
        if (!this.agree) {
          return this.$util.showMsg("请勾选机构入驻协议");
        }
        // uni.showLoading({ mask: true });
        console.log(this.formData)
        this.formData.certificate = JSON.stringify(this.qualifications)
        this.formData.entry_type = 2
        this.formData.cert_id = this.selectedId
        try {
          const { data } = await saveInstitutionApply(this.formData);
          uni.hideLoading();
          this.applyVisible = true;
          this.applyStatus = 0;
        } catch (err) {
          uni.hideLoading();
          this.$util.showMsg(err.msg);
        }
      }

    },
    getBaseInfo() {
      getMerchantProtocolInfo({ type: 2 }).then(({ data }) => {
        const { content, title, uid } = data;
        Object.assign(this, {
          content,
          title,
          uid
        });
      });
    },
    // 申请状态
    is_apply() {
      getMerchantApplyStatus().then(({ data }) => {
        if (data) {
          this.applyStatus = data.status;
          if (data.status === 2) {
            this.ready = true;
          } else {
            this.apply_data();
          }
        } else {
          this.ready = true;
        }
      });
    },
    // 申请数据
    apply_data() {
      getApplyData().then(({ data }) => {
        this.formData = data;
        if (data.business_term == "长期") {
          this.Businessterm = true
        }
        let index = this.array.findIndex(item => item.id === data.cert_id);
        this.index = index
        this.qualifications = data.certificate
        this.view = data.label.join();
        this.ready = true;
      });
    },
    // 添加领域规则弹窗
    viewAlert() {
      uni.showModal({
        title: "提示",
        content:
          "格式：领域一,领域二\n领域之间用逗号分隔\n每个领域1-6个字\n可添加1-3个领域",
        showCancel: false,
      });
    },
    getBusinessterm() {
      console.log(this.applyStatus)
      if (this.applyStatus == 0 || this.applyStatus == null) {
        this.Businessterm = this.Businessterm ? false : true
        this.date = ""
        this.formData.business_term = ''
      }

    },
    // 获取验证码
    async getCode() {
      let timer;
      if (!this.formData.link_tel) {
        return this.$util.showMsg("请输入手机号");
      }
      if (!/^1[3456789]\d{9}$/.test(this.formData.link_tel)) {
        return this.$util.showMsg("请输入正确的手机号");
      }
      timer = setInterval(() => {
        this.count--;
        if (!this.count) {
          clearInterval(timer);
          timer = null;
        }
      }, 1e3);
      this.count = COUNT;

      uni.showLoading({ mask: true });

      try {
        const { msg } = await getAuthCode(this.formData.link_tel);
        uni.hideLoading();
        this.$util.showMsg(msg);
      } catch (err) {
        if (timer) {
          clearInterval(timer);
          timer = null;
          this.count = 0;
        }
        this.$util.showMsg(err.msg);
      }
    },
  },
};
</script>
<style>
page {
  background: linear-gradient(60deg, #bde2f7 0%, #F7F8F9 100%);
}
</style>
<style scoped lang="scss">
.tip {
  padding-left: 22rpx;
  font-size: 20rpx;
  color: #e93323;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

/* 申请成为讲师 */
.apply-lecturer {
  padding: 50rpx 30rpx 50rpx;
  // background: url(getAssetsPath("/wap/first/zsff/images/apply-lecturer2.png")) center
  //     99rpx/478rpx 76rpx no-repeat,
  //   url(getAssetsPath("/wap/first/zsff/images/apply-lecturer1.jpg")) center/cover
  //     no-repeat;
}

.apply-lecturer .form {
  padding: 10rpx 50rpx 40rpx;
  border-radius: 24rpx;
  background-color: #ffffff;
}

.apply-lecturer .item {
  display: flex;
  align-items: center;
  padding: 40rpx 0 24rpx;
  border-top: 1px solid #e9e9e9;
  justify-content: space-between;
}

.apply-lecturer .item:first-child {
  border-top: 0;
}

.apply-lecturer .item .item-hd {
  width: 137rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #282828;
  display: flex;
}

.apply-lecturer .item .item-bd {
  flex: 1;
  min-width: 0;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #282828;
}

.intro {
  min-height: 4em;
}

.apply-lecturer input::placeholder {
  color: #cccccc;
}

.apply-lecturer .item .item-hd text {
  margin: 0 8rpx 0 5rpx;
  font-weight: 600;
  color: #e93323;
}

.apply-lecturer .item .item-hd .iconfont {
  margin-left: 6rpx;
  font-size: 24rpx;
  color: #ff6b00;
  cursor: pointer;
}

.apply-lecturer .item .item-bd {
  flex: 1;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #282828;
}

.apply-lecturer input::placeholder {
  color: #cccccc;
}

.apply-lecturer .icondidian {
  font-size: 38rpx;
  line-height: 40rpx;
  color: #2c8eff;
}

.apply-lecturer .upload {
  position: relative;
  display: inline-block;
  width: 120rpx;
  height: 120rpx;
  background-color: #f7f7f7;
  vertical-align: middle;
}

.apply-lecturer .upload::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 37rpx;
  height: 3rpx;
  background-color: #d8d8d8;

  transform: translate(-50%, -50%);
}

.apply-lecturer .upload::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 3rpx;
  height: 37rpx;
  background-color: #d8d8d8;

  transform: translate(-50%, -50%);
}

.apply-lecturer .intro-item {
  padding: 40rpx 0;
  border-top: 1px solid #e9e9e9;
}

.apply-lecturer .intro-item .item-hd {
  display: flex;

  align-items: flex-end;
}

.apply-lecturer .intro-item .item-hd-lt {
  flex: 1;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #282828;
}

.apply-lecturer .intro-item .item-hd-lt text {
  margin: 0 8rpx 0 5rpx;
  font-weight: 600;
  color: #e93323;
}

.apply-lecturer .intro-item .item-hd-rt {
  font-size: 24rpx;
  color: #666666;
}

.apply-lecturer .intro-item .item-bd {
  width: 100%;
  padding: 19rpx;
  border-radius: 10rpx;
  margin-top: 20rpx;
  background-color: #f5f5f5;
  font-size: 24rpx;
  line-height: 33rpx;
  color: #282828;
  resize: none;
}

.apply-lecturer textarea::placeholder {
  color: #999999;
}

.apply-lecturer .honor-item {
  padding: 40rpx 15rpx 0;
  border-top: 1px solid #e9e9e9;
}

.apply-lecturer .honor-item .item-hd {
  font-size: 28rpx;
  color: #666666;
}

.apply-lecturer .honor-item .tip {
  margin-top: 9rpx;
  font-size: 22rpx;
  line-height: 30rpx;
  color: #999999;
}

.apply-lecturer .honor-item .item-bd {
  margin: 10rpx -22rpx 0 12rpx;
  font-size: 0;
}

.apply-lecturer .img-wrap {
  position: relative;
  display: inline-block;
  width: 120rpx;
  height: 120rpx;
  margin: 0 22rpx 30rpx 0;
  vertical-align: middle;
}

.apply-lecturer .img-wrap:only-child {
  margin: 0;
}

.apply-lecturer .img-wrap image {
  width: 100%;
  height: 100%;
}

.apply-lecturer .img-wrap .iconfont {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;

  transform: translate(50%, -50%);
  font-size: 33rpx;
  color: #c5c5c5;
  cursor: pointer;
}

.apply-lecturer .btn {
  width: 100%;
  height: 86rpx;
  border-radius: 43rpx;
  margin-top: 40rpx;
  background-color: #2c8eff;
  font-size: 32rpx;
  color: #ffffff;
}

.apply-lecturer .honor-item .upload {
  margin-bottom: 40rpx;
}

.apply-lecturer .agree-item {
  padding-top: 30rpx;
  font-size: 24rpx;
  line-height: 33rpx;
  color: #999999;
}

.apply-lecturer .agree-item .iconfont2 {
  margin-right: 12rpx;
  vertical-align: middle;
  font-size: 30rpx;
  color: #c3c3c3;
  cursor: pointer;
}

.apply-lecturer .agree-item .iconxuanzhong1 {
  color: #2c8eff;
}

.apply-lecturer .agree-btn {
  color: #2c8eff;
}

.apply-lecturer .code-btn {
  font-size: 28rpx;
  color: #2c8eff;
}

.apply-lecturer .code-btn:disabled {
  color: #999999;
}

.apply-lecturer .agree-dialog {
  position: fixed;
  top: 50%;
  right: 47rpx;
  left: 47rpx;
  z-index: 56;
  display: none;

  flex-direction: column;
  max-height: 90%;
  padding: 48rpx 52rpx 35rpx;
  border-radius: 24rpx;
  background-color: #ffffff;

  transform: translateY(-50%);
  opacity: 0;
}

.apply-lecturer .agree-dialog.show {
  display: flex;
  opacity: 1;
}

.apply-lecturer .agree-dialog .title {
  text-align: center;
  font-weight: 600;
  font-size: 32rpx;
  line-height: 45rpx;
  color: #282828;
}

.apply-lecturer .agree-dialog .content {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 30rpx;
  color: #333333;
}

.apply-lecturer .agree-dialog .content * {
  white-space: pre-wrap;
}

.apply-lecturer .agree-dialog .empty {
  display: block;
  width: 414rpx;
  margin: 0 auto;
}

.apply-lecturer .agree-dialog .ok {
  flex-shrink: 0;
  width: 100%;
  height: 86rpx;
  border-radius: 43rpx;
  background-color: #2c8eff;
  font-size: 30rpx;
  color: #ffffff;
  line-height: 44px;
}

.apply-lecturer .agree-dialog .no {
  flex-shrink: 0;
  margin-top: 25rpx;
  font-size: 30rpx;
  line-height: 42rpx;
  color: #666666;
}

.apply-lecturer .agree-dialog .iconfont {
  position: absolute;
  top: 15rpx;
  right: 15rpx;
  font-size: 43rpx;
  line-height: 1;
  color: #cccccc;
  cursor: pointer;
}

.term {
  display: flex;
  justify-content: flex-end;
  color: #999;
  font-size: 28rpx;
  align-items: center;
}

.iconfont2 {
  color: #2c8eff;
}

.item-li {
  display: flex;
  color: #999999;
}

.text {
  color: red;
}

.card {
  display: flex;
  justify-content: space-around;

  .ca {
    image {
      width: 300rpx;
      height: 190rpx;
    }

    .card_name {
      font-size: 24rpx;
      color: #999999;
      margin-left: 40rpx;
    }
  }

  .ca.on {
    image {
      margin-left: 20rpx;
    }
  }
}

.tit {
  color: #f00;
  font-size: 14px;
}
</style>
