<template>
  <div id="app">
    <ezj-container :menus="menus" default-active="0-1"></ezj-container>
    <!-- <ezj-tab-form title="填写报名表" :tabs="tabs"></ezj-tab-form> -->
    <!-- <ezj-tabs title="填写报名表" v-model="activeName">
      <ezj-tab-pane label="个人信息" name="one" :required="true">
        <ezj-form :options="formOptions" :model="formModel" :items="formItems" @submit="onSubmit"></ezj-form>
      </ezj-tab-pane>
      <ezj-tab-pane label="教育背景" name="two" :required="true">
        <ezj-form :options="formOptions" :model="formModel" :items="formItems" @submit="onSubmit"></ezj-form>
      </ezj-tab-pane>
      <ezj-tab-pane label="工作经验" name="three" :required="true"></ezj-tab-pane>
      <ezj-tab-pane label="学习目的" name="four" :required="true"></ezj-tab-pane>
      <ezj-tab-pane label="资料上传" name="five" :required="true"></ezj-tab-pane>
      <ezj-tab-pane label="所受培训" name="six"></ezj-tab-pane>
      <ezj-tab-pane label="荣誉奖励" name="seven"></ezj-tab-pane>
      <ezj-tab-pane label="最终检查" name="eight" :required="true"></ezj-tab-pane>
      <ezj-tab-pane label="申请声明" name="nine" :required="true"></ezj-tab-pane>
    </ezj-tabs>-->
  </div>
</template>
<script>
export default {
  name: 'app',
  data() {
    return {
      menus: [
        {
          id: '0',
          title: '填写报名表',
          isActive: true,
          hasShadow: true,
          children: [
            {
              id: '0-1',
              title: '个人信息',
              showProgress: true,
              progress: 0,
              get: {
                action: '/zws/v1/enrollment/profiles?project_id=1001',
                callback(data) {
                  data.date_of_starting_to_work =
                    data.date_of_starting_to_work + ''
                  return data
                }
              },
              update: {
                action: '/zws/v1/enrollment/profiles',
                data: { project_id: 1001 },
                callback(data) {
                  return data
                }
              },
              form: {
                options: {
                  labelWidth: '160px'
                },
                items: [
                  {
                    'type': 'input-form',
                    'label': '姓名',
                    'label-width': '160px',
                    'required': true,
                    'model': 'real_name_cn',
                    'model-width': '300px',
                    'placeholder': '请输入姓名'
                  },
                  {
                    'type': 'input-form',
                    'label': '手机号',
                    'label-width': '160px',
                    'required': true,
                    'model': 'phone_number',
                    'model-width': '300px',
                    'placeholder': '请输入手机号'
                  },
                  {
                    'type': 'input-form',
                    'label': '邮箱',
                    'label-width': '160px',
                    'required': true,
                    'model': 'email',
                    'model-width': '300px',
                    'placeholder': '请输入邮箱'
                  },
                  {
                    type: 'select-form',
                    values: [
                      { label: '居民身份证', value: 0 },
                      { label: '港澳台身份证', value: 1 },
                      { label: '护照号', value: 2 },
                      { label: '军官证', value: 3 },
                      { label: '其他', value: 9 }
                    ],
                    label: '证件类型',
                    model: 'id_type',
                    required: true
                  },
                  {
                    type: 'input-form',
                    label: '证件号码',
                    model: 'id_number',
                    required: true
                  },
                  {
                    type: 'date-picker-form',
                    elemType: 'date',
                    label: '出生日期',
                    model: 'birthday',
                    required: true,
                    attrs: { 'value-format': 'yyyy-MM-dd' }
                  },
                  {
                    type: 'radio-group-form',
                    values: [
                      { label: '男', value: 1 },
                      { label: '女', value: 2 }
                    ],
                    label: '性别',
                    model: 'gender',
                    required: true
                  },
                  {
                    type: 'select-form',
                    values: [
                      { label: '中国', value: 1 },
                      { label: '其他国家', value: 9 }
                    ],
                    label: '国籍',
                    model: 'nationality',
                    required: true
                  },
                  {
                    type: 'date-picker-form',
                    elemType: 'year',
                    label: '参加工作年份',
                    model: 'date_of_starting_to_work',
                    required: true,
                    attrs: { 'value-format': 'yyyy' }
                  },
                  {
                    type: 'input-form',
                    label: '手机号',
                    model: 'phone_number',
                    required: true
                  },
                  {
                    type: 'input-form',
                    label: '邮箱',
                    model: 'email',
                    required: true,
                    hint: '（后续报名信息将发送至此邮箱，请认真填写）'
                  },
                  {
                    type: 'input-form',
                    label: 'QQ号',
                    model: 'qq_account',
                    required: true
                  },
                  {
                    type: 'input-form',
                    label: '微信号',
                    model: 'we_chat_account',
                    required: true
                  },
                  {
                    type: 'input-form',
                    label: '邮寄地址',
                    model: 'mailing_address',
                    required: true
                  },
                  {
                    type: 'input-form',
                    label: '紧急联系人',
                    model: 'emergency_contact_name',
                    required: true
                  },
                  {
                    type: 'input-form',
                    label: '紧急联系电话',
                    model: 'emergency_contacts_phone',
                    required: true
                  },
                  {
                    type: 'select-form',
                    values: [
                      { label: '请选择', value: 0 },
                      { label: '四级', value: 4 },
                      { label: '六级', value: 3 },
                      { label: '托福', value: 1 },
                      { label: '雅思', value: 2 }
                    ],
                    label: '英语水平',
                    model: 'english_level',
                    required: true
                  },
                  {
                    type: 'input-form',
                    label: '托福/雅思成绩',
                    model: 'english_score',
                    required: true
                  },
                  {
                    type: 'select-form',
                    values: [
                      { label: '请选择', value: 0 },
                      { label: '紫荆教育官方网站', value: 11 },
                      { label: '紫荆教育官方微信公众号', value: 12 },
                      { label: '紫荆教育学位项目老学员推荐', value: 13 },
                      { label: '紫荆教育Kelley项目系列活动', value: 14 },
                      {
                        label: '紫荆教育其他活动公开课、大讲堂、沙龙等',
                        value: 15
                      },
                      { label: '紫荆教育员工或者老师推荐', value: 16 },
                      { label: '公司人力资源推荐', value: 17 },
                      {
                        label:
                          '报纸杂志网站广告微博微信公众号论坛等第三方媒体、社交平台',
                        value: 18
                      },
                      {
                        label: '网络搜索，如百度、必应、谷歌等',
                        value: 19
                      },
                      { label: '其他', value: 9 }
                    ],
                    label: '了解途径',
                    model: 'channel',
                    required: true
                  }
                ]
              }
            },
            {
              id: '0-2',
              title: '教育背景',
              showProgress: true,
              progress: 0,
              get: {
                action: '/zws/v1/enrollment/profiles?project_id=1001',
                callback(data) {
                  const { start_date: startDate, end_date: endDate } = data
                  if (startDate) {
                    data.times = [startDate + '', endDate + '']
                  }
                  return data
                }
              },
              update: {
                action: '/zws/v1/enrollment/profiles',
                data: { project_id: 1001 },
                callback(data) {
                  let [startDate, endDate] = data.times
                  data.start_date = startDate
                  data.end_date = endDate
                  return data
                }
              },
              form: {
                hasAdd: true,
                options: {
                  labelWidth: '160px'
                },
                items: [
                  {
                    type: 'date-picker-form',
                    elemType: 'monthrange',
                    label: '教育时间',
                    model: 'times',
                    required: true,
                    attrs: { 'value-format': 'yyyy-MM' }
                  },
                  {
                    type: 'input-form',
                    label: '学校名称',
                    model: 'school_name_cn',
                    rules: [
                      {
                        required: true,
                        message: '请输入学校名称',
                        trigger: 'blur'
                      }
                    ]
                  },
                  {
                    type: 'input-form',
                    label: '学校所在国家',
                    model: 'school_country',
                    rules: [
                      {
                        required: true,
                        message: '请输入学校所在国家',
                        trigger: 'blur'
                      }
                    ]
                  },
                  {
                    type: 'input-form',
                    label: '学校所在城市',
                    model: 'school_city',
                    rules: [
                      {
                        required: true,
                        message: '请输入学校所在城市',
                        trigger: 'blur'
                      }
                    ]
                  },
                  {
                    type: 'input-form',
                    label: '专业名称',
                    model: 'major_cn',
                    rules: [
                      {
                        required: true,
                        message: '请输入专业名称',
                        trigger: 'blur'
                      }
                    ]
                  },
                  {
                    type: 'select-form',
                    values: [
                      { label: '请选择', value: 0 },
                      { label: '专科', value: 1 },
                      { label: '本科', value: 2 },
                      { label: '本科/学士', value: 3 },
                      { label: '硕士研究生', value: 4 },
                      { label: '研究生/硕士', value: 5 },
                      { label: '博士研究生', value: 6 },
                      { label: '研究生/博士', value: 7 },
                      { label: '其他', value: 9 }
                    ],
                    label: '学历/学位',
                    model: 'degree'
                  }
                ]
              }
            },
            {
              id: '0-3',
              title: '工作经验',
              progress: 0
            },
            {
              id: '0-4',
              title: '学习目的',
              progress: 0
            },
            {
              id: '0-5',
              title: '资料上传',
              progress: 0
            },
            {
              id: '0-6',
              title: '所受培训',
              progress: 0
            },
            {
              id: '0-7',
              title: '最终检查',
              progress: 0
            },
            {
              id: '0-8',
              title: '申请声明',
              progress: 0
            }
          ]
        },
        {
          id: '1',
          title: '办理入学',
          isGroup: true,
          children: [
            {
              title: '必填项',
              children: [
                { id: '1-1', title: '入学协议' },
                { id: '1-2', title: '缴费凭证' }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    onSubmit(data) {
      console.log(data)
    }
  }
}
</script>
