<!--新增、编辑人员信息-->
<template>
  <div >
    <div v-loading.fullscreen.lock="loadingFull" />
    <el-form
      :model="editForm"
      :rules="rules"
      ref="editForm"
      label-width="150px"
      text-align="left"
      class="demo-editForm"
    >
      <div class="item">
        <el-form-item
          label="姓名"
          prop="true_name"
        >
          <el-input v-model="editForm.true_name"></el-input>
        </el-form-item>
        <el-form-item
          label="学号"
          prop="no"
        >
          <el-input v-model="editForm.no"></el-input>
        </el-form-item>
      </div>
      <div class="item">
        <el-form-item
          label="入学日期"
          prop="enrol_date"
        >
          <el-date-picker
            v-model="editForm.enrol_date"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择入学日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="出生日期"
          prop="birthday"
        >
          <el-date-picker
            v-model="editForm.birthday"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择出生日期"
          >
          </el-date-picker>
        </el-form-item>
      </div>
      <div class="item">
        <el-form-item
          label="性别"
          prop="sex"
        >
          <el-select
            v-model="editForm.sex"
            placeholder="请选择性别"
          >
            <el-option
              v-for="item in sex"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="民族"
          prop="nation"
        >
          <el-select
            v-model="nationList[nationIndex]"
            placeholder="请选择民族"
            @change="changeNation"
          >
            <el-option
              v-for="(item,index) in nationList"
              :key="index"
              :label="item"
              :value="index"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="item">
        <el-form-item
          label="身份证号"
          prop="id_card"
        >
          <el-input v-model="editForm.id_card"></el-input>
        </el-form-item>
        <el-form-item
          label="户籍邮政编码"
          prop="code"
        >
          <el-input v-model="editForm.code"></el-input>
        </el-form-item>

      </div>
      <el-form-item
        label="籍贯（XX省XX县）"
        prop="native_place"
      >
        <el-input v-model="editForm.native_place"></el-input>
      </el-form-item>

      <el-form-item
        label="家庭地址"
        prop="address"
      >
        <el-input v-model="editForm.address"></el-input>
      </el-form-item>
      <el-form-item
        label="户口所在地派出所"
        prop="local_police_station"
      >
        <el-input v-model="editForm.local_police_station"></el-input>
      </el-form-item>
      <div class="item">
        <el-form-item
          label="手机号"
          prop="mobile"
        >
          <el-input v-model="editForm.mobile"></el-input>
        </el-form-item>
        <el-form-item
          label="邮箱地址"
          prop="email"
        >
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
      </div>
      <div class="item">
        <el-form-item
          label="政治面貌"
          prop="politics_status"
        >
          <el-select
            v-model="editForm.politics_status"
            placeholder="请选择政治面貌"
          >
            <el-option
              v-for="item in politicsStatus"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="所在支部"
          prop="organization_id"
        >
          <el-select
            v-model="editForm.organization_id"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteZb"
            :loading="loading"
          >
            <el-option
              v-for="item in treeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

      </div>
      <div class="item">

        <el-form-item
          label="院系班级"
          prop="class"
          
        >
          <el-select
            v-model="editForm.class"
            clearable
            filterable
            allow-create
            @on-create="channelCreate"
            @keydown.native.enter.prevent="keyDownEvent"
            placeholder="年级+班级全称 (eg:2013级信息管理与信息系统)"
            @change="changeSelect"
          >
            <el-option
              v-for="item in classList"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="申请入党日期"
          prop="join_party_date"
        >
          <el-date-picker
            v-model="editForm.join_party_date"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择申请入党日期"
          >
          </el-date-picker>
        </el-form-item>
      </div>
      <div class="item">

        <el-form-item
          label="列为积极分子日期"
          prop="join_activist_date"
        >
          <el-date-picker
            v-model="editForm.join_activist_date"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="党课结业日期"
          prop="complete_party_date"
        >
          <el-date-picker
            v-model="editForm.complete_party_date"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
      </div>
      <div class="item">
      <el-form-item
          label="确定为发展对象日期"
          prop="editForm"
        >
          <el-date-picker
            v-model="editForm.join_fzdx_date"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="确定为预备党员日期"
          prop="join_ybdy_date"
        >
          <el-date-picker
            v-model="editForm.join_ybdy_date"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        
      </div>
       <div class="item">
      <el-form-item
          label="成为正式党员日期"
          prop="editForm"
        >
          <el-date-picker
            v-model="editForm.join_zsdy_date"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
         <el-form-item>
        </el-form-item>
        
      </div>

      <div class="bottom-form">

        <!--<el-form-item
          label="头像"
          prop="avatar"
        >
          <el-input v-model="editForm.avatar"></el-input>
        </el-form-item>-->
        <div class="button-bt">
          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm('editForm')"
            >{{ type==0 ? "立即创建" : "保存编辑"}}</el-button>
            <el-button @click="resetForm('editForm')">重置</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import {
  personnelDetail,
  editPersonnel,
  addPersonnel,
  getNationList
} from "@/api/personnel/index";
import { fatherLists, classLists } from "@/api/organizationList/index";
import { Select } from "element-ui";
import { setTimeout } from "timers";
import { pid } from "process";
import { number } from "echarts/lib/export";
export default {
  data() {
    return {
      dialogVisible: false,
      disabled: false,
      dialogImageUrl: "",
      type: "", //类型0为创建页面,1为编辑页面
      loadingFull: false,
      loading: false,
      treeList: [
        {
          pid: 0,
          id: 0,
          name: "未选择"
        }
      ], //支部列表
      classList: [], //班级列表
      editForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        class: [],
        organization_id: 0,
        politics_status: 3
      },
      value: [],
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则"
            }
          ]
        }
      ],
      politicsStatus: [
        {
          id: 0,
          name: "未选择"
        }
      ],
      politicsIndex: "", //选中身份索引
      sex: [
        {
          value: 1,
          label: "男"
        },
        {
          value: 2,
          label: "女"
        }
      ],
      nation: [
        {
          value: 1,
          label: "汉族"
        },
        {
          value: 3,
          label: "回族"
        }
      ],
      //表格非空验证规则
      rules: {
        true_name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        no: [{ required: true, message: "请输入学号", trigger: "blur" }],
        enrol_date: [
          {
            required: true,
            message: "请选择入学日期",
            trigger: "change"
          }
        ],
        birthday: [
          {
            required: true,
            message: "请选择出生日期",
            trigger: "change"
          }
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        nation: [{ required: true, message: "请选择民族", trigger: "change" }],
        mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        politics_status: [
          { required: true, message: "请选择政治面貌", trigger: "change" }
        ],

        id_card: [
          { required: true, message: "请填写身份证号", trigger: "blur" }
        ],
        class: [
          { required: true, message: "请填写院系班级/部门", trigger: "blur" }
        ],
        native_place: [
          { required: true, message: "请选择籍贯", trigger: "change" }
        ],
        address: [
          { required: true, message: "请填写家庭住址", trigger: "blur" }
        ],
        local_police_station: [
          { required: true, message: "请填写户口所在地派出所", trigger: "blur" }
        ],
        organization_id: [
          { required: true, message: "请选择支部", trigger: "blur" }
        ]
      },
      personnelId: "", //编辑人员id
      personnelDetails: "", //人员详情
      nationList: [], //民族列表
      nationIndex: "" //民族索引
    };
  },
  created() {
    let that = this;

    //获取班级列表
    classLists().then(res => {
      this.classList = res;
    });
    const id = this.$route.query.id;
    if (id) {
      const params = { id: id };
      this.personnelDetail(params);
      this.type = 1;
    } else {
      this.type = 0;
    }
    //获取父级组织列表
    fatherLists().then(res => {
      console.log(res, "llllll");
      that.treeList = res.data;
    });
    let allStatus = JSON.parse(sessionStorage.getItem("status"));
    this.nationList = allStatus["App\\Repositories\\Enums\\NationEnum"];
    let politics = allStatus["App\\Repositories\\Enums\\PoliticsEnum"];
    let arr = [];
    for (let i in politics) {
      arr.push({
        id: Number(i),
        name: politics[i]
      });
    }
    this.politicsStatus = arr;
  },
  methods: {
    //详情
    async personnelDetail(params) {
      this.loadingFull = true;
      await personnelDetail(params).then(res => {
        console.log(res, "人员详情");
        this.editForm = res.data;
        this.nationIndex = res.data.nation;
        console.log(typeof res.data.organization_id);
        this.loadingFull = false;
      });
    },
    //修改人员信息
    async editPersonnel() {
      const data = this.editForm;
      await editPersonnel(data)
        .then(res => {
          console.log(res, "修改信息");
          this.$message({
            type: "success",
            message: "修改成功"
          });
          this.$store.dispatch("tagsView/delView", this.$route);
          // 返回上一步路由
          this.$router.go(-1);
          //this.$refs[formName].resetFields();
        })
        .catch(err => {
          console.log(err, "");
          this.loadingFull = false;
        });
    },
    ceshiBT() {
      this.addPersonnel();
    },
    //创建人员信息
    async addPersonnel() {
      await addPersonnel(this.editForm)
        .then(res => {
          console.log(res, "ppppp");
          this.$message.success("操作成功");
          this.$store.dispatch("tagsView/delView", this.$route);
          // 返回上一步路由
          this.$router.go(-1);
          //this.$refs[formName].resetFields();
        })
        .catch(res => {
          console.log(res, "ppp");
          this.loadingFull = false;
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.editForm, "baocun");
          if (this.type == 0) {
            this.addPersonnel();
          } else if (this.type == 1) {
            this.editPersonnel();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //远程搜索
    remoteMethod() {},
    //选中的值
    changeSelect(select) {
      console.log(select, "xuanzhongdezhi ");
    },
    //选中身份
    changePolitics(e) {
      this.politicsIndex = e;
      this.editForm.politics_status = e;
    },
    //选中民族
    changeNation(e) {
      this.nationIndex = e;
      this.editForm.nation = e;
    },

    channelCreate(val) {
      this.channel = val;
      this.channellist.push(this.classList);
    },
    keyDownEvent() {},
    remoteZb() {},
    handleChange(e) {
      console.log(e, "籍贯");
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/content.scss";
.el-form {
  width: 70%;
  margin: 0 auto;
  margin-top: 30px;
}
.el-form-item__label {
  text-align: left;
}
.item {
  display: flex;
  .el-form-item {
    width: 100%;
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 100%;
  }
  .el-form-item:first-child {
    margin-right: 50px;
  }
  .el-select {
    width: 100%;
  }
}
.bottom-form {
  .el-input {
    width: 82%;
  }
}
.button-bt {
  .el-form-item__content {
    margin-left: 35% !important;
    margin-top: 50px;
  }
}
</style>