<template>
  <ai-detail class="party">
    <ai-title slot="title" :title="isEdit ? '编辑发展党员' : '添加发展党员'" isShowBack isShowBottomBorder @onBackClick="cancel"/>
    <template slot="content">
      <el-form ref="form" :model="form" :rules="rules" label-width="160px" label-position="right">
        <ai-card title="个人信息">
          <template #content>
            <el-alert
                v-if="!isEdit"
                style="margin-bottom: 20px"
                type="warning"
                show-icon
                :closable="false"
                title="请仔细核对姓名与身份证号码，保存后将无法修改姓名、身份证号"
            ></el-alert>
            <div class="ai-form">
              <div style="width: 50%">
                <el-form-item
                  label="姓名"
                  style="width: 100%"
                  prop="name" 
                >
                  <el-input
                    size="small"
                    :disabled="isEdit"
                    :maxLength="15"
                    placeholder="请输入姓名"
                    v-model="form.name"
                  >
                    <template slot="append" v-if="!isEdit">
                      <ai-person-select
                          :url="'/app/appresident/list?areaId='+user.info.areaId"
                          :instance="instance"
                          @selectPerson="checkName"
                      >
                      </ai-person-select>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item
                    label="身份证号"
                    style="width: 100%"
                    prop="idNumber"
                    :rules="[
                    {
                      required: true,
                      message: '请输入身份证号',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-input
                      size="small"
                      v-model="form.idNumber"
                      @change="idChange"
                      :disabled="isEdit"
                      placeholder="请输入身份证号"
                      :maxLength="18"
                      clearable
                  >
                  </el-input>
                </el-form-item>
                <el-form-item label="发展状态" prop="developStatus" style="width: 100%">
                  <ai-select
                      v-model="form.developStatus"
                      placeholder="请选择发展状态"
                      :selectList="dict.getDict('developStatus')"
                  ></ai-select>
                </el-form-item>
              </div>
              <el-form-item label="个人照片" prop="photo">
                <ai-avatar :instance="instance" v-model="form.avatarUrl"/>
              </el-form-item>
              <el-form-item label="性别" prop="sex">
                <ai-select
                    disabled
                    v-model="form.sex"
                    placeholder="请选择性别"
                    :selectList="dict.getDict('sex')"
                ></ai-select>
              </el-form-item>
              <el-form-item label="出生日期">
                <el-date-picker
                    disabled
                    size="small"
                    v-model="form.birthday"
                    type="date"
                    style="width: 100%"
                    placeholder="选择日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="年龄" prop="age">
                <el-input
                    size="small"
                    disabled
                    v-model="form.age"
                    placeholder="请输入..."
                    clearabel
                    :maxLength="15"
                ></el-input>
              </el-form-item>
              <el-form-item label="民族" prop="email">
                <ai-select
                    v-model="form.nation"
                    placeholder="请选择民族"
                    :selectList="dict.getDict('nation')"
                    @change="(search.current = 1), getList()"
                ></ai-select>
              </el-form-item>
              <el-form-item label="籍贯" style="width: 100%">
                <ai-area-select
                    clearable
                    :instance="instance"
                    v-model="form.birthplaceAreaId"
                    always-show
                    area-level="3"
                />
              </el-form-item>
              <el-form-item label="户籍地" style="width: 100%">
                <template>
                  <ai-area-select
                      clearable
                      :instance="instance"
                      always-show
                      v-model="form.householdAreaId"
                  />
                  <el-input
                      size="small"
                      placeholder="请输入详细地址..."
                      clearable
                      v-model="form.householdAddress"
                      maxlength="50"
                      show-word-limit
                  ></el-input>
                </template>
              </el-form-item>
            </div>
          </template>
        </ai-card>
        <ai-card title="联络信息">
          <div class="ai-form" slot="content">
            <el-form-item label="联系方式" prop="phone">
              <el-input
                  size="small"
                  v-model="form.phone"
                  placeholder="请输入..."
                  clearabel
                  :maxLength="11"
              ></el-input>
            </el-form-item>
            <el-form-item label="现住址" style="width: 100%">
              <template>
                <ai-area-select
                    clearable
                    :instance="instance"
                    v-model="form.currentAreaId"
                    always-show
                />
                <el-input
                    size="small"
                    clearable
                    v-model="form.currentAddress"
                    placeholder="请输入详细地址"
                    maxlength="50"
                    show-word-limit
                ></el-input>
              </template>
            </el-form-item>
          </div>
        </ai-card>
        <ai-card title="团籍信息">
          <div class="ai-form" slot="content">
            <el-form-item label="入团日期">
              <el-date-picker
                  size="small"
                  v-model="form.joinLeagueMemberTime"
                  type="date"
                  placeholder="请选择入团日期"
                  style="width: 100%"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="文化程度">
              <ai-select
                v-model="form.education"
                placeholder="请选择文化程度"
                :selectList="dict.getDict('education')"
              ></ai-select>
            </el-form-item>
            <el-form-item label="学位职称">
              <el-input
                  size="small"
                  v-model="form.position"
                  placeholder="请输入..."
                  clearabel
                  :maxLength="20"
              ></el-input>
            </el-form-item>
            <el-form-item label="奖励情况" style="width: 100%;">
              <el-input type="textarea" v-model="form.rewardRemark" clearable maxlength="500" show-word-limit
                 rows="2" placeholder="请输入..."/>
            </el-form-item>
            <el-form-item label="处分情况" style="width: 100%;">
              <el-input type="textarea" v-model="form.punishmentRemark" clearable maxlength="500" show-word-limit
                 rows="2" placeholder="请输入..."/>
            </el-form-item>
            <el-form-item label="简历" style="width: 100%;">
              <el-input type="textarea" v-model="form.resume" clearable maxlength="500" show-word-limit
                 rows="2" placeholder="请输入..."/>
            </el-form-item>
            <el-form-item label="附件" style="width: 100%;">
              <ai-uploader
                  :isShowTip="true"
                  :instance="instance"
                  v-model="form.fileList"
                  fileType="file"
                  acceptType=".zip, .rar, .doc, .docx, .xls, .ppt, .pptx, .pdf, .txt, .jpg, .png"
                  :limit="9">
                <template slot="tips">
                  最多上传9个附件,单个文件最大10MB<br/>
                  支持.zip、.rar、.doc、.docx、.xls、.ppt、.pptx、.pdf、.txt、.jpg、.png格式<br/>
                  建议上传《入党积极分子培养教育考察登记簿》、《中共预备党员考察登记簿》<br/>
                </template>
              </ai-uploader>
            </el-form-item>
          </div>
        </ai-card>

        <template v-if="isEdit">
          <ai-card title="申请入党">
            <template #content>
              <el-form-item label="申请入党时间" prop="applyJoinPartyTime">
                <el-date-picker
                    size="small"
                    v-model="form.applyJoinPartyTime"
                    type="date"
                    placeholder="请选择申请入党时间"
                    style="width: 100%"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="申请入党形式">
                <el-input
                    size="small"
                    v-model="form.applyJoinPartyWay"
                    placeholder="请输入..."
                    clearabel
                    :maxLength="11"
                ></el-input>
              </el-form-item>
            </template>
          </ai-card>
          <ai-card title="入党积极分子的确定和教育培养" v-if="form.developStatus > 0">
            <template #content>
              <el-form-item label="确定为入党积极分子时间" prop="activistTime" >
                <el-date-picker
                    size="small"
                    v-model="form.activistTime"
                    type="date"
                    placeholder="请选择确定为入党积极分子时间"
                    style="width: 100%"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="确定为积极分子的根据和意见" style="width: 100%;">
                <el-input type="textarea" v-model="form.activistAccordingRemark" clearable maxlength="500" show-word-limit
                  rows="2" placeholder="请输入..."/>
              </el-form-item>
              <el-form-item label="培养教育情况及鉴定意见" style="width: 100%;">
                <el-input type="textarea" v-model="form.activistEducationRemark" clearable maxlength="500" show-word-limit
                  rows="2" placeholder="请输入..."/>
              </el-form-item>

            </template>
          </ai-card>
          <ai-card title="入党介绍人/培养人" v-if="form.developStatus > 0">
            <template #right>
              <el-button type="text" icon="iconfont iconAdd" @click="addIntroducer()">添加入党介绍人/培养人</el-button>
            </template>
            <template #content>
              <ai-table
                :border="true"
                :tableData="form.introducerList"
                :isShowPagination="false"
                :col-configs="colConfigs"
                :stripe="false"
                @getList="() => {}"
              >
                <el-table-column
                  slot="options"
                  width="120px"
                  fixed="right"
                  label="操作"
                  align="center"
                >
                  <template slot-scope="{ row, $index }">
                    <div class="table-options">
                      <el-button type="text" @click="remove($index)">删除</el-button>
                    </div>
                  </template>
                </el-table-column>
              </ai-table>
            </template>
          </ai-card>
          <ai-card title="发展对象的确定和考察" v-if="form.developStatus > 1">
            <template #content>
              <el-form-item label="确定为发展对象时间" prop="determineTime" >
                <el-date-picker
                    size="small"
                    v-model="form.determineTime"
                    type="date"
                    placeholder="请选择确定为发展对象时间"
                    style="width: 100%"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="政治历史的考察及结论" style="width: 100%;">
                <el-input type="textarea" v-model="form.determinePoliticsRemark" clearable maxlength="500" show-word-limit
                  rows="2" placeholder="请输入..."/>
              </el-form-item>
              <el-form-item label="社会关系考察及结论" style="width: 100%;">
                <el-input type="textarea" v-model="form.determineSocialRemark" clearable maxlength="500" show-word-limit
                  rows="2" placeholder="请输入..."/>
              </el-form-item>
              <el-form-item label="现实考察及结论" style="width: 100%;">
                <el-input type="textarea" v-model="form.determineRealityRemark" clearable maxlength="500" show-word-limit
                  rows="2" placeholder="请输入..."/>
              </el-form-item>
              <el-form-item label="党的基本知识考核及考试成绩" style="width: 100%;">
                <el-input type="textarea" v-model="form.determineKnowledgeRemark" clearable maxlength="500" show-word-limit
                  rows="2" placeholder="请输入..."/>
              </el-form-item>
              <el-form-item label="综合考察结论意见" style="width: 100%;">
                <el-input type="textarea" v-model="form.determineComprehensiveRemark" clearable maxlength="500" show-word-limit
                  rows="2" placeholder="请输入..."/>
              </el-form-item>
              <el-form-item label="党内讨论是否确定为发展对象的意见" style="width: 100%;">
                <el-input type="textarea" v-model="form.determinePartyInnerRemark" clearable maxlength="500" show-word-limit
                  rows="2" placeholder="请输入..."/>
              </el-form-item>
              <el-form-item label="确定为发展对象后的谈话记录" style="width: 100%;">
                <el-input type="textarea" v-model="form.determineChatRemark" clearable maxlength="500" show-word-limit
                  rows="2" placeholder="请输入..."/>
              </el-form-item>
              <el-form-item label="支委会研究意见" style="width: 100%;">
                <el-input type="textarea" v-model="form.determineBranchRemark" clearable maxlength="500" show-word-limit
                  rows="2" placeholder="请输入..."/>
              </el-form-item>
            </template>
          </ai-card>
          <ai-card title="预备党员的接收" v-if="form.developStatus > 2">
            <template #content>
              <el-form-item label="吸收入党时间" prop="acceptTime" >
                <el-date-picker
                    size="small"
                    v-model="form.acceptTime"
                    type="date"
                    placeholder="请选择吸收入党时间"
                    style="width: 100%"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="吸收入党地点">
                <el-input
                    size="small"
                    v-model="form.acceptAddress"
                    placeholder="请输入..."
                    clearabel
                    :maxLength="50"
                ></el-input>
              </el-form-item>
              <el-form-item label="吸收入党时支部大会上党员提的意见和要求及个人的态度" style="width: 100%;">
                <el-input type="textarea" v-model="form.acceptBranchMeetingOpinion" clearable maxlength="500" show-word-limit
                  rows="2" placeholder="请输入..."/>
              </el-form-item>
              <el-form-item label="预备期间的教育情况" style="width: 100%;">
                <el-input type="textarea" v-model="form.acceptEducationRemark" clearable maxlength="500" show-word-limit
                  rows="2" placeholder="请输入..."/>
              </el-form-item>
              <el-form-item label="党小组对其转正的讨论意见" style="width: 100%;">
                <el-input type="textarea" v-model="form.acceptPartyGroupRemark" clearable maxlength="500" show-word-limit
                  rows="2" placeholder="请输入..."/>
              </el-form-item>
              <el-form-item label="预备期间的考察情况" style="width: 100%;">
                <el-input type="textarea" v-model="form.acceptInvestigateRemark" clearable maxlength="500" show-word-limit
                  rows="2" placeholder="请输入..."/>
              </el-form-item>
              <el-form-item label="党支部对其转正的意见" style="width: 100%;">
                <el-input type="textarea" v-model="form.acceptBranchRemark" clearable maxlength="500" show-word-limit
                  rows="2" placeholder="请输入..."/>
              </el-form-item>
            </template>
          </ai-card>
          <ai-card title="预备党员的教育考察和转正" v-if="form.developStatus == 4">
            <template #content>
              <el-form-item label="转正时间" prop="becomePartyTime" >
                <el-date-picker
                    size="small"
                    v-model="form.becomePartyTime"
                    type="date"
                    placeholder="请选择转正时间"
                    style="width: 100%"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="预备期间的教育情况" style="width: 100%;">
                <el-input type="textarea" v-model="form.becomePartyEducationRemark" clearable maxlength="500" show-word-limit
                  rows="2" placeholder="请输入..."/>
              </el-form-item>
              <el-form-item label="预备期间的考察情况" style="width: 100%;">
                <el-input type="textarea" v-model="form.becomePartyInvestigateRemark" clearable maxlength="500" show-word-limit
                  rows="2" placeholder="请输入..."/>
              </el-form-item>
              <el-form-item label="党小组对其转正的讨论意见" style="width: 100%;">
                <el-input type="textarea" v-model="form.becomePartyGroupRemark" clearable maxlength="500" show-word-limit
                  rows="2" placeholder="请输入..."/>
              </el-form-item>
              <el-form-item label="党支部对其转正的意见" style="width: 100%;">
                <el-input type="textarea" v-model="form.becomePartyBranchRemark" clearable maxlength="500" show-word-limit
                  rows="2" placeholder="请输入..."/>
              </el-form-item>
            </template>
          </ai-card>
        </template>
      </el-form>
      <ai-dialog
          :visible.sync="isShowIntroducer"
          width="690px"
          title="添加入党介绍人/培养人"
          @close="onClose"
          @onConfirm="onConfirm"
      >
        <el-form
            ref="introducerForm"
            :model="introducerInfo"
            label-width="110px"
            label-position="right"
        >
          <el-form-item
              label="姓名"
              prop="name"
              :rules="[
              { required: true, message: '请输入姓名', trigger: 'change' },
            ]"
          >
            <el-input
                size="small"
                v-model="introducerInfo.name"
                placeholder="请输入..."
                clearabel
                :maxLength="20"
            ></el-input>
          </el-form-item>
          <el-form-item
              label="职称"
              prop="position"
              :rules="[
              { required: true, message: '请输入职称', trigger: 'change' },
            ]"
          >
            <el-input
                size="small"
                v-model="introducerInfo.position"
                placeholder="请输入..."
                clearabel
                :maxLength="20"
            ></el-input>
          </el-form-item>
        </el-form>
      </ai-dialog>
    </template>
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">提交</el-button>
    </template>
  </ai-detail>
</template>

<script>
import {mapState} from "vuex";
export default {
  name: "Add",
  props: {
    instance: Function,
    dict: Object,
    selected: Object,
  },
  computed: {
     ...mapState(["user"]),
    isEdit() {
      return !!this.$route.query.id;
    },
  },
  data() {
    return {
      form: {
        name: '',
        idNumber: '',
        developStatus: '',
        sex: '',
        birthday: '',
        age: '',
        nation: '',
        birthplaceAreaId: '',
        householdAreaId: '',
        householdAddress: '',
        avatarUrl: '',
        phone: '',
        currentAreaId: '',
        currentAddress: '',
        joinLeagueMemberTime: '',
        education: '',
        position: '',
        rewardRemark: '',
        punishmentRemark: '',
        resume: '',
        fileList: [],
        applyJoinPartyTime: '',
        applyJoinPartyWay: '',
        activistTime: '',
        activistAccordingRemark: '',
        activistEducationRemark: '',
        introducerList: [],
        determineTime: '',
        determinePoliticsRemark: '',
        determineSocialRemark: '',
        determineRealityRemark: '',
        determineKnowledgeRemark: '',
        determineComprehensiveRemark: '',
        determinePartyInnerRemark: '',
        determineChatRemark: '',
        determineBranchRemark: '',
        acceptTime: '',
        acceptAddress: '',
        acceptBranchMeetingOpinion: '',
        acceptEducationRemark: '',
        acceptBranchMeetingOpinion: '',
        acceptInvestigateRemark: '',
        acceptBranchRemark: '',
        becomePartyTime: '',
        becomePartyEducationRemark: '',
        becomePartyInvestigateRemark: '',
        becomePartyGroupRemark: '',
        becomePartyBranchRemark: '',
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
        idNumber: [{ required: true, message: '请输入身份证号', trigger: 'change' }],
        developStatus: [{ required: true, message: '请选择发展状态', trigger: 'change' }],
        phone: [{ required: true, message: '请输入联系方式', trigger: 'change' }],
        applyJoinPartyTime: [{ required: true, message: '请选择申请入党时间', trigger: 'change' }],
        activistTime: [{ required: true, message: '请选择确定为入党积极分子时间', trigger: 'change' }],
        determineTime: [{ required: true, message: '请选择确定为发展对象时间', trigger: 'change' }],
        acceptTime: [{ required: true, message: '请选择吸收入党时间', trigger: 'change' }],
        becomePartyTime: [{ required: true, message: '请选择转正时间', trigger: 'change' }],
      },
      isShowIntroducer: false,
      introducerInfo: {position: '', name: ''},
      colConfigs: [
        {prop: "name", label: "姓名", align: "center"},
        {prop: "position", label: "职务", align: "center"},
        {slot: "options"},
      ],
    };
  },
  created() {
    this.dict.load("education", "sex", "nation", "developStatus").then(() => {
      if (this.isEdit) {
        this.getInfo()
      }
    })
    console.log(this.$route.query.partyOrgId)
  },
  methods: {
    confirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.partyOrgId = this.$route.query.partyOrgId
          this.instance.post(`/app/apppartydevelop/addOrUpdate`, {...this.form}).then((res) => {
            if (res.code == 0) {
              this.$message.success(this.isEdit ? "编辑成功" : "添加成功");
              setTimeout(() => {
                this.cancel(true);
              }, 600);
            }
          });
        }
      });
    },
    cancel() {
      this.$router.push({});
    },
    addIntroducer() {
      this.isShowIntroducer = true
      this.introducerInfo = {position: '', name: ''}
    },
    onClose() {
      this.isShowIntroducer = false
    },
    onConfirm() {
      this.$refs.introducerForm.validate((valid) => {
        if (valid) {
          this.introducerInfo.developPartyId = this.form.id
          this.form.introducerList.push(this.introducerInfo)
          this.isShowIntroducer = false
        }
      });
    },
    remove(index) {
      console.log(index)
      this.$confirm("确定删除该数据？").then(() => {
        this.form.introducerList.splice(index, 1)
      });
      // this.form.introducerList.splice(index, 1)
      // this.$forceUpdate()
    },
    checkName(val) {
      for (let i in this.form) {
        for (let j in val) {
          if (i == j) {
            this.form[i] = val[j];
          }
        }
      }
      this.idChange(val.idNumber);
      if (val.photo) {
        this.imageUrl = val.photo.split(";")[0];
      }
      this.form.avatarUrl = val.photo;
    },
    getInfo() {
      let {id} = this.$route.query;
      id && this.instance.post(`/app/apppartydevelop/queryDetailById`, null, {params: {id},}).then((res) => {
        if (res?.data) {
          this.form = res.data
        }
      });
    },
    idChange(val) {
      let info = this.idCardNoUtil.getIdCardInfo(val)
      this.form.sex = info.sex || "";
      this.form.birthday = info.birthday + ' 00:00:00' || "";
      this.form.age = this.$calcAge(val) || "";
    },
  }
};
</script>

<style scoped lang="scss">
.party {
  ::v-deep .el-input-group__append {
    height: 32px;
    margin: 0;
    padding: 0;
    border: none;

    button {
      margin: 0;
      height: 32px;
      color: #fff;
    }

    &:hover {
      background: rgba(34, 102, 255, 0.9);
      border-color: rgba(34, 102, 255, 0.9);
      color: #fff;
    }
  }

  ::v-deep.cardTabs {
    .el-tabs__header {
      padding: 0;
    }
  }

  .audit-0 {
    color: #ff8822 !important;
  }

  .audit-1 {
    color: #2ea222 !important;
  }
  ::v-deep .ai-form .el-form-item .el-form-item__content {
    margin-left: 174px!important;
  }
}
</style>
