<template>
  <div>
    <van-form @submit="onSubmit">
      <template v-for="(item, index) in fields">
        <template v-if="item.type === 'select'">
          <div class="van-cell van-field" :key="index">
            <div class="van-cell__title van-field__label">
              <span>{{ item.label }}</span>
            </div>
            <div class="van-cell__value van-field__value">
              <div class="van-field__body">
                <input
                  v-model="form[item.name]"
                  :placeholder="item.placeholder"
                />
                <select v-model="form[item.name]" class="div-select van-field__control">
                  <option disabled selected v-if="item.placeholder">{{ item.placeholder }}</option>
                  <option v-for="option in item.values" :value="option[item.valueKey] || option.name" :key="option.name">
                    {{ option.text }}
                  </option>
                </select>
              </div>
            </div>
          </div>
        </template>
        <template v-else-if="item.type === 'textarea'">
          <van-field
            :key="index"
            v-model="form[item.name]"
            rows="2"
            :label="item.label"
            type="textarea"
            :placeholder="item.placeholder"
          />          
        </template>
        <template v-else-if="item.type === 'uploader'">
          <van-field
            :key="index"
            :border="false"
            :required="false"
            v-model="form[item.name]"
          >
            <template #label>
              {{ item.label }}
              <div class="form-item__tips" v-if="item.tips">{{ item.tips }}</div>
            </template>
            <template #input>
              <upload v-model="form[item.name]" v-bind="item" :max-count="1" />
            </template>
          </van-field>
        </template>
        <template v-else>
          <van-field
            :disabled="item.disabled || false"
            :key="index"
            v-model="form[item.name]"
            :label="item.label"
            :placeholder="item.placeholder"
          />
        </template>
      </template>
      <div class="agree-change" @click="agreeChange">
        <van-icon :name="!isAgree ? 'circle' : 'passed'" :class="!isAgree ? 'icon' : 'active'"/>
        <div class="text">
          我承诺以上信息真实有效，同意遵守<a href="/">《i紫荆用户协议》</a>。
        </div>
      </div>
      <div style="margin: 16px;">
        <van-button class="btns" round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import * as api from '@/api/index'
import Upload from '@/components/Upload'
export default {
  components: { Upload },
  props: {
    fields: { type: Array }
  },
  data() {
    return {
      isAgree: false,
      form: {},
      columns: ['11', '22']
    }
  },
  mounted() {
    this.getDetail()
    // this.isAgreement()
  },
  methods: {
    onSubmit() {
      if (!this.isAgree) {
        this.$notify({ type: 'warning', message: '请勾选用户协议' })
        return false
      }
      api
        .studenUpdate(this.form)
        .then(response => {
          this.$notify({ type: 'primary', message: response.message })
        })
        .catch(() => {
        })
      console.log(this.form)
    },
    // 获取我的详情
    getDetail() {
      api.getMy().then(response => {
        api.getStudentInfo(response.user.id).then(response => {
          this.form = response
        })
      })
    },
    // 勾选协议
    agreeChange() {
      this.isAgree = !this.isAgree
      if (this.isAgree) {
        api
          .agreementCheck()
          .then(response => {
            console.log(response)
          })
          .catch(() => {
          })
      }
    }
    // // 判断是否勾选
    // isAgreement() {
    //   api
    //     .isAgreementCheck()
    //     .then(response => {
    //       response.success === 1 && (this.isAgree = true)
    //     })
    //     .catch(() => {
    //     })
    // }
  }
}
</script>
<style lang="scss" scoped>
.div-select{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.btns{
  width: 2rem;
  height: .4rem;
  background: #AD0440;
  border-radius: .2rem;
  font-size: .14rem;
  color: #FFFFFF;
  border: none;
  margin: 0 auto;
  line-height: .4rem;
}
.agree-change{
  display: flex;
  align-items: center;
  .icon{
    color: rgba(160, 160, 160, 1);
    font-size: .14rem;
    margin: 0 .02rem 0 .15rem;
  }
  .active{
    color: rgba(173, 4, 64, 1);
    font-size: .14rem;
    margin: 0 .02rem 0 .15rem;
  }
  .text{
    font-size: .13rem;
    color: #969696;
    a{
      color: rgba(173, 4, 64, 1);
    }
  }
}
</style>
