<template>
  <div id="basic-info">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <el-col :span="16">
            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="曾用名" prop="beforeName">
                <el-input v-model="form.beforeName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="公民身份号码" prop="card">
                <el-input v-model="form.card"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="gender">
                <el-select v-model="form.gender" clearable placeholder="请选择" style="width: 100%">
                  <el-option label="男" value="男"></el-option>
                  <el-option label="女" value="女"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出生日期" prop="birth">
                <el-date-picker v-model="form.birth" placeholder="请选择" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" style="width: 100%">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="民族" prop="nation">
                <el-select v-model="form.nation" filterable clearable placeholder="请选择" style="width: 100%">
                  <el-option v-for="(item, index) in nationList" :key="index" :label="item" :value="item"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="政治面貌" prop="politics">
                <el-select v-model="form.politics" filterable clearable placeholder="请选择" style="width: 100%">
                  <el-option v-for="(item, index) in politicsList" :key="index" :label="item" :value="item"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="文化程度" prop="education">
                <el-select v-model="form.education" filterable clearable placeholder="请选择" style="width: 100%">
                  <el-option v-for="(item, index) in educationList" :key="index" :label="item" :value="item"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="兵役状况" prop="soldier">
                <el-select v-model="form.soldier" filterable clearable placeholder="请选择" style="width: 100%">
                  <el-option v-for="(item, index) in soldierList" :key="index" :label="item" :value="item"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身高" prop="height">
                <el-input v-model="form.height"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="血型" prop="blood">
                <el-select v-model="form.blood" filterable clearable placeholder="请选择" style="width: 100%">
                  <el-option v-for="(item, index) in bloodList" :key="index" :label="item" :value="item"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="婚姻状况" prop="marriage">
                <el-select v-model="form.marriage" clearable placeholder="请选择" style="width: 100%">
                  <el-option label="已婚" value="已婚"></el-option>
                  <el-option label="未婚" value="未婚"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="8" class="right">
            <el-col :span="16" class="image">
              <el-image :src="form.head">
                <div slot="error" class="image-slot">暂无图片</div>
              </el-image>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24">
          <el-col :span="24">
            <el-col :span="8">
              <el-form-item label="户籍省市县" prop="house_city">
                <el-input v-model="form.house_city"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="longlabel">
              <el-form-item label="户籍派出所名称" prop="house_police">
                <el-input v-model="form.house_police"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="现住地省市县" prop="onhouse_city">
                <el-input v-model="form.onhouse_city"></el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="培训机构编码" prop="train_num">
                <el-input v-model="form.train_num"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="户籍地详址" prop="house_address">
                <el-input v-model="form.house_address"></el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="24">
              <el-form-item label="报名企业" prop="sign_company">
                <el-input v-model="form.sign_company"></el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="24">
              <el-form-item label="现住地详址" prop="house_onaddress">
                <el-input v-model="form.house_onaddress"></el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="24">
              <el-form-item label="家庭主要成员" prop="home_member">
                <el-input v-model="form.home_member"></el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="24">
              <el-form-item label="教育经历" prop="education_experience">
                <el-input v-model="form.education_experience"></el-input>
              </el-form-item>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const { nation, politics, education, soldier, blood } = require('@common/src/layout/deploy/dict');
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'basic-info',
  props: {
    form: { type: Object },
  },
  components: {},
  data: function () {
    return {
      // 民族
      nationList: nation,
      // 政治面貌
      politicsList: politics,
      // 文化程度
      educationList: education,
      // 兵役状况
      soldierList: soldier,
      // 血型
      bloodList: blood,
    };
  },
  created() {},
  methods: {},
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    .right {
      padding: 5% 0;
      .image {
        text-align: right;
        /deep/.el-image__inner {
          width: 140px;
          height: 150px;
        }
        /deep/.image-slot {
          width: 140px;
          height: 150px;
          line-height: 150px;
          text-align: center;
          border: 1px solid #ccc;
        }
      }
      .imageBtn {
        .el-button {
          margin: 5px 10px;
        }
      }
    }
  }
}
</style>
