<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 + ''
                  data.city_select_str = ''
                  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': '姓名',
                    'required': true,
                    'model': 'real_name_cn',
                    'model-width': '300px',
                    'placeholder': '请输入姓名'
                  },
                  /* 手机号 */
                  {
                    'type': 'input-form',
                    'label': '手机号',
                    'required': true,
                    'model': 'phone_number',
                    'model-width': '300px',
                    'placeholder': '请输入手机号'
                  },
                  /* 邮箱 */
                  {
                    'type': 'input-form',
                    'label': '邮箱',
                    'required': true,
                    'model': 'email',
                    'model-width': '300px',
                    'placeholder': '请输入邮箱'
                  },
                  /* 证件类型 */
                  {
                    'type': 'select-form',
                    'label': '证件类型',
                    'required': true,
                    'model': 'id_type',
                    'model-width': '300px',
                    'placeholder': '请选择证件类型',
                    'values': [
                      { 'label': '居民身份证', 'value': 0 },
                      { 'label': '港澳台身份证', 'value': 1 },
                      { 'label': '护照号', 'value': 2 },
                      { 'label': '军官证', 'value': 3 },
                      { 'label': '其他', 'value': 9 }
                    ]
                  },
                  /* 证件号码 */
                  {
                    'type': 'input-form',
                    'label': '证件号码',
                    'required': true,
                    'model': 'id_number',
                    'model-width': '300px',
                    'placeholder': '请输入证件号码'
                  },
                  /* 出生日期 */
                  {
                    'type': 'date-picker-form',
                    'elemType': 'date',
                    'label': '出生日期',
                    'required': true,
                    'model': 'birthday',
                    'model-width': '300px',
                    'placeholder': '请选择出生日期',
                    'attrs': { 'value-format': 'yyyy-MM-dd' },
                    'rules': []
                  },
                  /* 性别 */
                  {
                    'type': 'radio-group-form',
                    'label': '性别',
                    'required': true,
                    'model': 'gender',
                    'model-width': '300px',
                    'values': [{ 'label': '男', 'value': 1 }, { 'label': '女', 'value': 2 }],
                    'attrs': {},
                    'rules': []
                  },
                  /* 国籍 */
                  {
                    'type': 'select-form',
                    'label': '国籍',
                    'required': true,
                    'model': 'nationality',
                    'model-width': '300px',
                    'placeholder': '请选择国籍',
                    'values': [
                      { 'label': '中国', 'value': 1 },
                      { 'label': '其他国家', 'value': 9 }
                    ]
                  },
                  /* 现居住城市 */
                  {
                    'type': 'city-select-form',
                    'label': '现居住城市',
                    'label-width': '160px',
                    'required': true,
                    'disabled': false,
                    'model': 'city_select_str',
                    'separator': '-',
                    'model-width': '',
                    'placeholder0': '请输入省份',
                    'placeholder1': '请输入城市',
                    'attrs0': {},
                    'attrs1': {},
                    'rules': []
                  },
                  /* 参加工作年份 */
                  {
                    'type': 'date-picker-form',
                    'elemType': 'year',
                    'label': '参加工作年份',
                    'required': true,
                    'model': 'date_of_starting_to_work',
                    'model-width': '300px',
                    'placeholder': '请选择参加工作年份',
                    'attrs': { 'value-format': 'yyyy' },
                    'rules': []
                  },
                  /* 微信号 */
                  {
                    'type': 'input-form',
                    'label': '微信号',
                    'required': true,
                    'model': 'we_chat_account',
                    'model-width': '300px',
                    'placeholder': '请输入微信号'
                  },
                  /* 邮寄地址 */
                  {
                    'type': 'input-form',
                    'label': '邮寄地址',
                    'required': true,
                    'model': 'mailing_address',
                    'model-width': '300px',
                    'placeholder': '请输入邮寄地址'
                  },
                  /* 紧急联系人 */
                  {
                    'type': 'input-form',
                    'label': '紧急联系人',
                    'required': true,
                    'model': 'emergency_contact_name',
                    'model-width': '300px',
                    'placeholder': '请输入紧急联系人'
                  },
                  /* 紧急联系电话 */
                  {
                    'type': 'input-form',
                    'label': '紧急联系电话',
                    'required': true,
                    'model': 'emergency_contacts_phone',
                    'model-width': '300px',
                    'placeholder': '请输入紧急联系电话'
                  }
                ]
              }
            },
            {
              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>
