
<template>
  <section class="apply">
    <section class="apply-top">
      <h1>{{detail.name}}认证</h1>
      <section class="info" v-html="detail.description"/>
      <section v-if="conditions.length" class="cert-quals">
        <section class="cert-qual" v-for="(item, index) of conditions" :key="index">
          <section class="qual-status" :class="{'qual-completed': item.is_completed}">
            <div class="qual-point"></div>
            <span class="qual-status-name">{{item.is_completed ? '已达标' : '未达标'}}</span>
          </section>
          <span
            class="qual-info"
          >{{`${item.text}`}}{{item.target ? `（${handleCompletedNum(item.completed_num)}/${item.target}）` : ''}}</span>
        </section>
      </section>
      <section class="cer-price-info">
        <span class="price">
          ￥{{detail.real_price}}
          <sub class="sub">/次</sub>
        </span>
        <span class="origin-price" v-if="detail.is_discount">原价￥{{detail.origin_price}}</span>
        <span
          class="vip-tag"
          v-if="detail.is_vip_discount"
          @click="clickVipPrice"
        >{{`${detail.is_enjoy_vip_discount ? '会员' : '开通会员低至'}￥${detail.vip_price}`}}</span>
      </section>
      <section class="cert-status">
        <button class="cer-ctrl death" v-if="isDeath">{{detail.btn_name}}</button>
        <button class="cer-ctrl" @click="clickBtn" v-else>{{detail.btn_name}}</button>
        <span
          class="userful-time"
          v-if="detail.end_date && detail.is_cert_validate && detail.cert_no"
        >
          有效期至{{detail.end_date}}
          <nuxt-link class="link-cert" :to="`/cert/no/${detail.cert_no}`">查看证书</nuxt-link>
        </span>
      </section>
    </section>
    <section class="remind">
      <p style="color: #333;">说明:</p>
      <p>1、认证申请基本条件：已成为平台签约开发者，无纠纷降权记录；</p>
      <p>2、认证申请将在3到5个工作日内完成审核；</p>
      <p>3、认证申请为付费服务，若因申请者不达标而认证不通过，费用不予退回，3个月内可以免费申请3次；</p>
      <p>4、认证通过后，资质有效期为一年，到期后需要重新提交认证；</p>
      <p>5、认证通过后，如果违反平台相关规则，平台有权取消认证资质；</p>
      <p>6、如有疑问，请联系在线客服，或拨打客服热线 0571-28120931</p>
    </section>
  </section>
</template>

<script>
import http from '@/plugins/http'
import WxMixin from '@/mixins/wx'

export default {
  async asyncData({ params, req }) {
    let headers = req && req.headers
    let id = params.id
    let { data } = await http.post(`/api/cert/getDetail`, { id }, { config: { headers }, neverLogout: true })
    let workYearOp = +data.user_info.work_year_op
    return {
      detail: data,
      workYearOp,
    }
  },
  mixins: [WxMixin],
  data() {
    return {

    }
  },
  head() {
    return {
      title: `${this.detail.name}认证- 程序员客栈`,
      meta: [
        // { hid: 'description', name: 'description', content: 'My custom description' }
      ]
    }
  },
  computed: {
    conditions() {
      let conditions = this.detail.conditions
      return Object.keys(conditions).map(key => conditions[key])
    },
    userinfo() {
      return this.$store.state.userinfo
    },
    isDeath() {
      return !this.detail.can_click
    },
  },
  mounted() {
    console.log('this.detail')
    console.log(this.detail)
  },
  methods: {
    clickVipPrice() {
      window.open('/type/vip/')
    },
    async clickBtn() {
      if(this.hasLogined) {
        // 微信特殊处理
        if(this.$store.state.isWeixin) {
          location.href = `https://www.proginn.com/index/app?from=index_h5`
          return
        } else if(this.$store.state.isPC) {
          this.$confirm(`<p>1认证申请为付费服务，若因申请者不达标而认证不通过，费用不予退回，3个月内可以免费申请3次；</p><br><p>2认证通过后，如果违反平台相关规则，平台有权取消认证资质。</p>`, '提示', {
            dangerouslyUseHTMLString: true,
            confirmButtonText: '同意，我已理解上述内容',
            cancelButtonText: '拒绝，我再咨询了解一下',
          }).then(async () => {
            if(!this.detail.is_free_apply) location.href = `/pay?product_type=12&product_id=${this.detail.id}&next=/cert`
            else {
              await this.$post('/api/cert/apply', { user_cert_id: this.detail.user_cert_id })
              this.$message({
                message: '申请成功',
                type: 'success'
              })
              setTimeout(() => location.reload(), 1000)
            }
          }).catch(err => {
            console.log('cancel')
          })
        } else {
          location.href = `proginn://pay?product_type=12&product_id=${this.detail.id}&next=/cert`
        }
      } else {
        this.goLogin()
      }
    },
    handleCompletedNum(num = 0) {
      num = +num
      return this.workYearOp ? ++num : num
    },
  }
}
</script>

<style scoped>
.apply {
  width: 100%;
  max-width: 1000px;
  border-radius: 4px;
  margin: 20px 0 0;
}
.apply-top {
  background: white;
  padding: 20px;
}
.info {
  margin: 36px 0 0;
  padding-bottom: 30px;
  border-bottom: 1px solid #d8d8d8;
}
.apply .cer-price-info {
  display: flex;
  align-items: center;
  padding: 20px 0;
}
.price {
  font-size: 24px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  color: rgba(34, 34, 34, 1);
  margin-right: 10px;
}
.sub {
  margin: 0 0 0 -6px;
}
.origin-price {
  font-size: 12px;
  font-family: PingFangSC-Regular;
  color: rgba(153, 153, 153, 1);
  line-height: 17px;
  text-decoration: line-through;
  margin: 0 10px;
}
.vip-tag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  /* width: 122px; */
  height: 22px;
  padding: 0 10px;
  font-size: 12px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  color: #ddaf5a;
  background: url(~@/assets/img/cert/vip-tag.png) 0 0 / 100% 100% no-repeat;
  cursor: pointer;
}
.cert-quals {
  font-size: 14px;
  padding: 10px 0 30px;
  border-bottom: 1px solid #d8d8d8;
}
.cert-qual {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.qual-info {
  font-size: 13px;
  flex: 1;
}
.qual-status {
  display: flex;
  align-items: center;
  width: 80px;
}
.qual-completed .qual-point {
  background: #11bd6d;
}
.qual-completed .qual-status-name {
  color: #11bd6d;
}
.qual-point {
  --width: 6px;
  width: var(--width);
  height: var(--width);
  border-radius: 50%;
  background: #999;
  margin-right: 8px;
}
.qual-status-name {
  color: #999;
}
.cer-ctrl {
  margin: 10px 0 0;
  width: 260px;
  height: 44px;
  border-radius: 22px;
  background: #0093fd;
  font-size: 14px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: white;
}
.cer-ctrl.death {
  background: #ececec;
  cursor: not-allowed;
  color: #666;
}
.userful-time {
  font-size: 13px;
  font-family: PingFangSC-Regular;
  color: rgba(153, 153, 153, 1);
}
.link-cert {
  text-decoration: none;
  color: var(--mainColor);
}
.remind {
  line-height: 20px;
  color: #999;
  font-size: 12px;
  margin-top: 15px;
}
@media screen and (max-width: 960px) {
  .cert-status {
    text-align: center;
  }
  .remind {
    padding: 0 11px;
  }
  .userful-time {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eee;
  }
}
</style>
