<template>
  <div id="basic-1">
    <el-row>
      <el-col :span="24" class="main">
        <el-form :model="form" ref="form" label-width="130px">
          <el-col :span="24" class="one">
            <el-col :span="16">
              <el-col :span="24">
                <el-form-item label="联系电话" prop="phone">
                  <el-input v-model="form.phone" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="form.name" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="曾用名" prop="beforeName">
                  <el-input v-model="form.beforeName" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="公民身份号码" prop="card">
                  <el-input v-model="form.card" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别" prop="gender">
                  <el-input v-model="form.gender" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="出生日期" prop="birth">
                  <el-input v-model="form.birth" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="民族" prop="nation">
                  <el-input v-model="form.nation" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="政治面貌" prop="politics">
                  <el-input v-model="form.politics" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="文化程度" prop="education">
                  <el-input v-model="form.education" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="兵役状况" prop="soldier">
                  <el-input v-model="form.soldier" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="身高" prop="height">
                  <el-input v-model="form.height" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="血型" prop="blood">
                  <el-input v-model="form.blood" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="婚姻状况" prop="marriage">
                  <el-input v-model="form.marriage" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="8" class="right">
              <el-col :span="16" class="image">
                <el-image :src="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" readonly></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" readonly></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" readonly></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" readonly></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" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="12">
                <el-form-item label="报名企业" prop="sign_company">
                  <el-input v-model="form.sign_company" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="现住地详址" prop="house_onaddress">
                  <el-input v-model="form.house_onaddress" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="12">
                <el-form-item label="家庭主要成员" prop="home_member">
                  <el-input v-model="form.home_member" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="教育经历" prop="education_experience">
                  <el-input v-model="form.education_experience" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="24">
                <el-form-item label="工作经历" prop="work_experience">
                  <el-input v-model="form.work_experience" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="12">
                <el-form-item label="注销人" prop="cancel_personal">
                  <el-input v-model="form.cancel_personal" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="注销原因" prop="cancel_reason">
                  <el-input v-model="form.cancel_reason" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="8">
                <el-form-item label="受理人" prop="acceptance_personal">
                  <el-input v-model="form.acceptance_personal" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="受理公安机关" prop="acceptance_police">
                  <el-input v-model="form.acceptance_police" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="受理时间" prop="acceptance_date">
                  <el-input v-model="form.acceptance_date" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-col>
          </el-col>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const { mapActions: security_guard_base } = createNamespacedHelpers('security_guard_base');
const { mapActions: security_guard_collect } = createNamespacedHelpers('security_guard_collect');
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'basic-1',
  props: { basic_id: { type: String } },
  components: {},
  data: function () {
    return {
      form: {},
      head: '',
    };
  },
  async created() {
    if (this.basic_id) await this.search();
  },
  methods: {
    ...security_guard_base(['fetch']),
    ...security_guard_collect(['query']),
    async search() {
      let res = await this.fetch({ id: this.basic_id });
      if (this.$checkRes(res)) {
        this.$set(this, `form`, res.data);
      }
      res = await this.query({ security_guard_id: this.basic_id, type: '人像' });
      if (this.$checkRes(res)) {
        let data = res.data[0];
        if (data) this.$set(this, `head`, data.data);
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    basic_id: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val) this.search();
      },
    },
  },
};
</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>
