<template>
  <div class="info-box">
    <v-form ref="form" :model="formModel" :fields="fields" @submit="onSubmit" className="info" :hasFieldBorder="true">
      <div class="agreement">
        <van-checkbox checked-color="#ad0440" v-model="isAgree" @change="agreeChange" />
        <div class="text">
          我承诺以上信息真实有效，同意遵守<router-link to="/agreement">《i紫荆用户协议》</router-link>。
        </div>
      </div>
      <input type="button" value="提交" class="submit-button" @click="handleSubmit" />
    </v-form>
  </div>
</template>
<script>
import * as api from '@/api/index'
import VForm from '@/components/Form'

export default {
  components: { VForm },
  data() {
    return {
      isAgree: false,
      formModel: {},
      fields: [
        {
          name: 'personal_name',
          label: '用户名',
          placeholder: '请输入用户名',
          readonly: true
        },
        {
          name: 'city',
          label: '常驻城市',
          placeholder: '请输入常驻城市'
        },
        {
          name: 'hobby',
          label: '兴趣爱好',
          placeholder: '请输入兴趣爱好'
        },
        {
          name: 'constellation',
          label: '星座',
          placeholder: '请输入星座'
        },
        {
          name: 'mobile',
          label: '联系方式',
          placeholder: '请输入联系方式',
          readonly: true
        },
        {
          name: 'company',
          label: '公司',
          placeholder: '请输入公司'
        },
        {
          name: 'position',
          label: '职务',
          placeholder: '请输入职务'
        },
        {
          name: 'birthday',
          label: '生日(月 日)',
          placeholder: '请输入生日(月 日)'
        },
        {
          fieldType: 'nativeSelect',
          name: 'industry',
          label: '所在行业',
          placeholder: '请选择所在行业',
          values: [
            { name: '人工智能/IOT', text: '人工智能/IOT' },
            { name: 'IT/通信/电子/互联网', text: 'IT/通信/电子/互联网' },
            { name: '金融业', text: '金融业' },
            { name: '医疗/医药/大健康', text: '医疗/医药/大健康' },
            { name: '农林牧副渔', text: '农林牧副渔' },
            { name: '房地产/建筑', text: '房地产/建筑' },
            { name: '贸易/批发/零售/租赁业', text: '贸易/批发/零售/租赁业' },
            { name: '材料/新材料', text: '材料/新材料' },
            { name: '生产/加工/制造', text: '生产/加工/制造' },
            { name: '能源/破产/环保', text: '能源/破产/环保' },
            { name: '商业服务', text: '商业服务' },
            { name: '服务业', text: '服务业' },
            { name: '文体教育/工艺美术', text: '文体教育/工艺美术' },
            { name: '文化/传媒/娱乐/体育', text: '文化/传媒/娱乐/体育' },
            { name: '政府/非营利机构', text: '政府/非营利机构' },
            { name: '交通/运输/物流/仓储', text: '交通/运输/物流/仓储' },
            { name: '其他', text: '其他' }
          ]
        },
        {
          name: 'customer',
          label: '客户是谁',
          placeholder: '请输入客户是谁'
        },
        {
          name: 'product',
          label: '公司产品',
          placeholder: '请输入公司产品'
        },
        {
          type: 'textarea',
          name: 'dedication',
          label: '可以为大家奉献什么？',
          placeholder: '请输入'
        },
        {
          fieldType: 'uploader',
          name: 'avatar',
          label: '个人头像'
        }
      ]
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    handleSubmit() {
      this.$refs.form.submit()
    },
    onSubmit(data) {
      if (!this.isAgree) {
        this.$notify({ type: 'warning', message: '请勾选用户协议' })
        return false
      }
      if (data.avatar) {
        const [first = { url: '' }] = data.avatar
        data.avatar = first.url
      }
      api.studenUpdate(data).then(response => {
        this.$notify({ type: 'primary', message: response.message })
      })
    },
    // 获取我的详情
    getDetail() {
      const userId = this.$store.state.user.id
      api.getStudentInfo(userId).then(response => {
        this.formModel = response
      })
    },
    // 勾选协议
    agreeChange(value) {
      value && api.agreementCheck()
    }
  }
}
</script>
<style lang="scss" scoped>
.info {
  padding-bottom: 40px;
}

::v-deep .van-uploader {
  width: 0.6rem;
  height: 0.6rem;
}
::v-deep .van-uploader__upload,
::v-deep .van-uploader__preview-image {
  width: 0.6rem;
  height: 0.6rem;
  background-color: #fff;
  border: 1px solid #bfbfbf;
}
::v-deep .van-uploader__upload-icon {
  font-size: 0.12rem;
  color: #000030;
}
.submit-button {
  width: 2rem;
  margin: 20px auto 0;
}
.agreement {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  .text {
    margin-left: 8px;
    font-size: 12px;
    color: #969696;
    a {
      color: rgba(173, 4, 64, 1);
    }
  }
}
</style>
