<template>
  <ai-detail class="party">
    <template slot="title">
      <ai-title
          :title="isEdit ? '编辑党员' : '添加党员'"
          isShowBack
          isShowBottomBorder
          @onBackClick="cancel(false)"
      >
      </ai-title>
    </template>
    <template slot="content">
      <el-form
          ref="form"
          :model="form"
          label-width="110px"
          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"
                    :rules="[
                    {
                      required: true,
                      message: '请输入姓名',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-input
                      size="small"
                      :disabled="isEdit"
                      :maxLength="15"
                      placeholder="请输入姓名"
                      v-model="form.name"
                  >
                    <template slot="append" v-if="!isEdit">
                      <ai-person-select
                          :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>
              </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"
                >
                </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="审核状态" v-if="isEdit">
          <template #content>
            <el-form-item label="审核状态" style="width: 100%">
              <span
                  style="padding-left: 24px"
                  :class="'audit-' + form.auditStatus"
              >{{ dict.getLabel("auditStatus", form.auditStatus) }}</span
              >
            </el-form-item>
          </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>
            <el-form-item
                label="所属党组织"
                prop="partyOrgId"
                :rules="[
                {
                  required: true,
                  message: '请选择所属党组织',
                  trigger: 'change',
                },
              ]"
            >
              <el-input
                  size="small"
                  disabled
                  placeholder="请选择所属党组织"
                  v-model="form.partyOrgName"
              >
                <template slot="append">
                  <ai-party
                      :instance="instance"
                      size="small"
                      :value="form.partyOrgId"
                      @origin="handlePartyOrgSelect"
                  />
                </template>
              </el-input>
            </el-form-item>
          </div>
        </ai-card>
        <ai-card title="党籍信息">
          <div class="ai-form" slot="content">
            <el-form-item
                label="党籍状态"
                prop="partyStatus"
                :rules="[
                {
                  required: true,
                  message: '请选择党籍状态',
                  trigger: 'change',
                },
              ]"
            >
              <ai-select
                  v-model="form.partyStatus"
                  placeholder="请选择党籍状态"
                  :selectList="dict.getDict('partyStatus')"
              ></ai-select>
            </el-form-item>
            <el-form-item
                label="党员类型"
                prop="partyType"
                :rules="[
                {
                  required: true,
                  message: '请选择党员类型',
                  trigger: 'change',
                },
              ]"
            >
              <ai-select
                  v-model="form.partyType"
                  placeholder="请选择党员类型"
                  :selectList="dict.getDict('partyType')"
              ></ai-select>
            </el-form-item>
            <el-form-item
                label="入党时间"
                prop="joinPartyTime"
                :rules="[
                {
                  required: true,
                  message: '请选择入党时间',
                  trigger: 'change',
                },
              ]"
            >
              <el-date-picker
                  size="small"
                  v-model="form.joinPartyTime"
                  type="date"
                  placeholder="请选择入党时间"
                  style="width: 100%"
                  format="yyyy-MM-dd"
                  :value-format="'yyyy-MM-dd' + ' 00:00:00'"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="转正日期" prop="turnPositiveTime">
              <el-date-picker
                  size="small"
                  v-model="form.turnPositiveTime"
                  type="date"
                  placeholder="请选择转正日期"
                  style="width: 100%"
                  format="yyyy-MM-dd"
                  :value-format="'yyyy-MM-dd' + ' 00:00:00'"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="入党介绍人" prop="joinPartyIntroducer">
              <el-input
                  size="small"
                  v-model="form.joinPartyIntroducer"
                  placeholder="请输入入党介绍人"
                  :maxLength="15"
              ></el-input>
            </el-form-item>
            <el-form-item label="党内职务" prop="partyPosition">
              <ai-select
                  v-model="form.partyPosition"
                  placeholder="请选择党内职务"
                  :selectList="dict.getDict('partyPosition')"
              ></ai-select>
            </el-form-item>
            <el-form-item label="任职日期" prop="partyStartDate">
              <el-date-picker
                  size="small"
                  v-model="form.partyStartDate"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                  format="yyyy-MM-dd"
                  :value-format="'yyyy-MM-dd' + ' 00:00:00'"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="党内兼职" prop="partyWork">
              <el-input
                  size="small"
                  v-model="form.partyWork"
                  placeholder="请输入党内兼职"
                  clearabel
                  :maxLength="20"
              ></el-input>
            </el-form-item>
          </div>
        </ai-card>
        <ai-card title="流动信息">
          <div class="ai-form" slot="content">
            <el-form-item
                label="流动情况"
                prop="flowStatus"
                :rules="[
                {
                  required: true,
                  message: '请选择流动情况',
                  trigger: 'change',
                },
              ]"
            >
              <ai-select
                  v-model="form.flowStatus"
                  placeholder="请选择流动情况"
                  :selectList="dict.getDict('flowStatus')"
              ></ai-select>
            </el-form-item>
            <el-form-item
                label="流入组织"
                prop="flowOrgId"
                v-if="form.flowStatus == 1"
                :rules="[
                {
                  required: true,
                  message: '请输入流入组织',
                  trigger: 'change',
                },
              ]"
            >
              <el-input
                  size="small"
                  v-model="form.flowOrgId"
                  placeholder="请输入..."
              ></el-input>
            </el-form-item>
            <el-form-item
                label="流入时间"
                prop="flowTime"
                v-if="form.flowStatus == 1"
                :rules="[
                {
                  required: true,
                  message: '请选择流入时间',
                  trigger: 'change',
                },
              ]"
            >
              <el-date-picker
                  size="small"
                  v-model="form.flowTime"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                  format="yyyy-MM-dd"
                  :value-format="'yyyy-MM-dd' + ' 00:00:00'"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
                label="流出组织"
                prop="outFlow"
                v-if="form.flowStatus === '0'"
                :rules="[
                {
                  required: true,
                  message: '请输入流出组织',
                  trigger: 'change',
                },
              ]"
            >
              <el-input
                  size="small"
                  v-model="form.outFlow"
                  placeholder="请输入..."
              ></el-input>
            </el-form-item>
            <el-form-item
                label="流出时间"
                prop="inTime"
                v-if="form.flowStatus === '0'"
                :rules="[
                {
                  required: true,
                  message: '请选择流出时间',
                  trigger: 'change',
                },
              ]"
            >
              <el-date-picker
                  size="small"
                  v-model="form.inTime"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                  format="yyyy-MM-dd"
                  :value-format="'yyyy-MM-dd' + ' 00:00:00'"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
                label="失联时间"
                prop="lossTime"
                v-if="form.flowStatus == 2"
                :rules="[
                {
                  required: true,
                  message: '请选择失联时间',
                  trigger: 'change',
                },
              ]"
            >
              <el-date-picker
                  size="small"
                  v-model="form.lossTime"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                  format="yyyy-MM-dd"
                  :value-format="'yyyy-MM-dd' + ' 00:00:00'"
              ></el-date-picker>
            </el-form-item>
          </div>
        </ai-card>
        <ai-card title="文化程度">
          <template #content>
            <div class="ai-form">
              <el-form-item label="文化程度" prop="education">
                <ai-select
                    v-model="form.education"
                    placeholder="请选择党籍状态"
                    :selectList="dict.getDict('education')"
                ></ai-select>
              </el-form-item>
            </div>
            <el-tabs v-model="activeName">
              <el-tab-pane label="五星党员" name="五星党员" lazy></el-tab-pane>
              <el-tab-pane label="工作信息" name="工作信息" lazy></el-tab-pane>
              <el-tab-pane label="违纪信息" name="违纪信息" lazy></el-tab-pane>
            </el-tabs>
            <div class="add-btn">
              <span></span>
              <div @click="addForm(activeName)">
                <i class="iconfont iconAdd"></i>
                <span>添加{{ activeName }}</span>
              </div>
            </div>
            <ai-table
                v-if="activeName === '五星党员'"
                :border="true"
                :tableData="form.starList"
                :isShowPagination="false"
                :col-configs="colConfigs1"
                :stripe="false"
                @getList="() => {}"
            >
              <el-table-column label="评定等级" slot="level" align="center">
                <template slot-scope="{ row }">
                  <el-rate
                      v-model="row.level"
                      disabled
                      show-text
                      :texts="textlist"
                  ></el-rate>
                </template>
              </el-table-column>
              <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="editStar(row, $index)"
                    >编辑
                    </el-button
                    >
                    <el-button type="text" @click="remove($index, 'starList')"
                    >删除
                    </el-button
                    >
                  </div>
                </template>
              </el-table-column>
            </ai-table>
            <ai-table
                v-if="activeName === '工作信息'"
                :border="true"
                :tableData="form.workInfoList"
                :isShowPagination="false"
                :col-configs="colConfigs2"
                :stripe="false"
                @getList="() => {}"
            >
              <el-table-column label="工作时间" slot="date" align="center">
                <template slot-scope="{ row }">
                  <span v-if="row.starTime && row.endTime"
                  >{{ row.starTime.split(" ")[0] }} 至
                    {{ row.endTime.split(" ")[0] }}</span
                  >
                </template>
              </el-table-column>
              <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="editJob(row, $index)"
                    >编辑
                    </el-button
                    >
                    <el-button
                        type="text"
                        @click="remove($index, 'workInfoList')"
                    >删除
                    </el-button
                    >
                  </div>
                </template>
              </el-table-column>
            </ai-table>
            <ai-table
                v-if="activeName === '违纪信息'"
                :border="true"
                :tableData="form.disciplinaryInfoList"
                :isShowPagination="false"
                :col-configs="colConfigs3"
                :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="editDisciplinary(row, $index)"
                    >编辑
                    </el-button
                    >
                    <el-button
                        type="text"
                        @click="remove($index, 'disciplinaryInfoList')"
                    >删除
                    </el-button
                    >
                  </div>
                </template>
              </el-table-column>
            </ai-table>
          </template>
        </ai-card>
      </el-form>
      <ai-dialog
          :visible.sync="isShowStarForm"
          width="690px"
          :title="starId ? '修改五星党员' : '添加五星党员'"
          @close="onClose"
          @onConfirm="onStarForm"
      >
        <el-form
            ref="starForm"
            :model="starForm"
            label-width="110px"
            label-position="right"
        >
          <el-form-item
              label="评定时间"
              prop="starTime"
              :rules="[
              { required: true, message: '请选择评定时间', trigger: 'change' },
            ]"
          >
            <el-date-picker
                size="small"
                v-model="starForm.starTime"
                type="month"
                placeholder="请选择评定时间"
                style="width: 230px"
                format="yyyy-MM"
                :value-format="'yyyy-MM-dd' + ' 00:00:00'"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
              label="评定等级"
              prop="level"
              :rules="[
              { required: true, message: '请选择评定等级', trigger: 'change' },
            ]"
          >
            <el-rate
                v-model="starForm.level"
                show-text
                :texts="textlist"
                style="line-height: 2.5"
            ></el-rate>
          </el-form-item>
        </el-form>
      </ai-dialog>
      <ai-dialog
          :visible.sync="isShowJobForm"
          width="690px"
          :title="jobId ? '修改工作信息' : '添加工作信息'"
          @close="onClose"
          @onConfirm="onJobForm"
      >
        <el-form
            ref="jobForm"
            :model="jobForm"
            label-width="110px"
            label-position="right"
        >
          <el-form-item
              label="工作时间"
              prop="date"
              :rules="[
              { required: true, message: '请选择评定时间', trigger: 'change' },
            ]"
          >
            <el-date-picker
                size="small"
                v-model="jobForm.date"
                type="monthrange"
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
                format="yyyy-MM"
                :value-format="'yyyy-MM-dd' + ' 00:00:00'"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
              label="单位"
              prop="company"
              :rules="[
              { required: true, message: '请输入工作单位', trigger: 'blur' },
            ]"
          >
            <el-input
                size="small"
                :maxLength="30"
                v-model="jobForm.company"
                placeholder="请输入工作单位"
            ></el-input>
          </el-form-item>
          <el-form-item
              label="职务"
              prop="position"
              :rules="[
              { required: true, message: '请输入职务', trigger: 'blur' },
            ]"
          >
            <el-input
                size="small"
                :maxLength="30"
                v-model="jobForm.position"
                placeholder="请输入职务"
            ></el-input>
          </el-form-item>
        </el-form>
      </ai-dialog>
      <ai-dialog
          :visible.sync="isShowDisciplinaryForm"
          width="690px"
          :title="disciplinaryId ? '修改违纪信息' : '添加违纪信息'"
          @close="onClose"
          @onConfirm="onDisciplinarForm"
      >
        <el-form
            ref="disciplinaryForm"
            :model="disciplinaryForm"
            label-width="110px"
            label-position="right"
        >
          <el-form-item
              label="时间"
              prop="starTime"
              :rules="[
              { required: true, message: '请选择违纪时间', trigger: 'change' },
            ]"
          >
            <el-date-picker
                size="small"
                v-model="disciplinaryForm.starTime"
                type="month"
                placeholder="请选择违纪时间"
                style="width: 230px"
                format="yyyy-MM"
                :value-format="'yyyy-MM-dd' + ' 00:00:00'"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
              label="违纪原因"
              prop="disciplinaryInfo"
              :rules="[
              { required: true, message: '请输入违纪原因', trigger: 'blur' },
            ]"
          >
            <el-input
                size="small"
                v-model="disciplinaryForm.disciplinaryInfo"
                placeholder="请输入违纪原因"
            ></el-input>
          </el-form-item>
          <el-form-item
              label="处理结果"
              prop="result"
              :rules="[
              { required: true, message: '请输入处理结果', trigger: 'blur' },
            ]"
          >
            <el-input
                size="small"
                v-model="disciplinaryForm.result"
                placeholder="请输入处理结果"
            ></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>
export default {
  name: "Add",

  props: {
    instance: Function,
    dict: Object,
  },
  computed: {
    isEdit() {
      return !!this.$route.query.id;
    },
  },
  data() {
    const validatorPhone = function (rule, value, callback) {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (!/^1\d{10}$/.test(value)) {
        callback(new Error("手机号格式错误"));
      } else {
        callback();
      }
    };
    return {
      info: {},
      validatorPhone: validatorPhone,
      form: {
        name: "",
        partyOrgId: "",
        idNumber: "",
        sex: "",
        fileId: "",
        birthday: "",
        age: "",
        nation: "",
        partyOrgName: "",
        birthplaceAreaId: "",
        householdAreaId: "",
        householdAddress: "",
        phone: "",
        currentAreaId: "",
        currentAddress: "",
        partyStatus: "",
        partyType: "",
        joinPartyTime: "",
        turnPositiveTime: "",
        joinPartyIntroducer: "",
        partyPosition: "",
        partyStartDate: "",
        partyWork: "",
        flowStatus: "",
        flowOrgId: "",
        flowTime: "",
        disciplinaryInfoList: [],
        starList: [],
        workInfoList: [],
        outFlow: "",
        lossTime: "",
        inTime: "",
        education: "",
      },
      isShowStarForm: false,
      isShowJobForm: false,
      jobForm: {
        date: [],
        company: "",
        position: "",
      },
      jobId: "",
      starForm: {
        starTime: "",
        level: 1,
      },
      disciplinaryId: "",
      isShowDisciplinaryForm: false,
      disciplinaryForm: {
        starTime: "",
        disciplinaryInfo: "",
        result: "",
      },
      starId: "",
      activeName: "五星党员",
      textlist: ["一星党员", "二星党员", "三星党员", "四星党员", "五星党员"],
      colConfigs1: [
        {
          prop: "starTime",
          label: "评定时间",
          align: "center",
          formart: (v) => (v ? v.split(" ")[0] : "-"),
        },
        {slot: "level"},
      ],
      colConfigs2: [
        {slot: "date"},
        {prop: "company", label: "单位", align: "center"},
        {prop: "position", label: "职务", align: "center"},
      ],
      colConfigs3: [
        {
          prop: "starTime",
          label: "时间",
          align: "center",
          formart: (v) => (v ? v.split(" ")[0] : "-"),
        },
        {prop: "disciplinaryInfo", label: "违纪原因", align: "center"},
        {prop: "result", label: "处理结果", align: "center"},
      ],
    };
  },
  created() {
    this.initOrg();
    this.dict.load(
        "partyStatus",
        "education",
        "flowStatus",
        "auditStatus",
        "partyType",
        "partyPosition",
        "sex",
        "nation"
    );
    this.getInfo();
  },
  methods: {
    initOrg() {
      let {oid: partyOrgId, oname: partyOrgName} = this.$route.query;
      this.form.partyOrgId = partyOrgId;
      this.form.partyOrgName = partyOrgName;
    },
    remove(index, key) {
      this.$confirm("确定删除该数据？").then(() => {
        this.form[key].splice(index, 1);
      });
    },
    getInfo() {
      let {id} = this.$route.query;
      id &&
      this.instance
      .post(`/app/appparty/detail`, null, {
        params: {id},
      })
      .then((res) => {
        if (res?.data) {
          this.form = {
            ...res.data,
          };
        }
      });
    },
    editJob(query, index) {
      this.jobForm = {
        ...query,
        date: [query.starTime, query.endTime],
      };
      this.jobId = index;

      this.isShowJobForm = true;
    },
    editStar(query, index) {
      this.starForm = {
        ...query,
      };
      this.starId = index;

      this.isShowStarForm = true;
    },
    editDisciplinary(query, index) {
      this.disciplinaryForm = {
        ...query,
      };
      this.disciplinaryId = index;
      this.isShowDisciplinaryForm = true;
    },
    idChange(val) {
      if (val.length == 18) {
        this.IdCard(val);
      } else {
        this.form.sex = "";
        this.form.age = "";
        this.form.birthday = "";
      }
    },
    IdCard(UUserCard) {
      if (UUserCard) {
        let arr = [];
        let birth =
            UUserCard.substring(6, 10) +
            "-" +
            UUserCard.substring(10, 12) +
            "-" +
            UUserCard.substring(12, 14) +
            " 00:00:00";
        arr.push(birth);
        if (parseInt(UUserCard.substr(16, 1)) % 2 == 1) {
          arr.push("1");
        } else {
          arr.push("0");
        }

        const myDate = new Date();
        const month = myDate.getMonth() + 1;
        const day = myDate.getDate();
        let age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
        if (
            UUserCard.substring(10, 12) < month ||
            (UUserCard.substring(10, 12) == month &&
                UUserCard.substring(12, 14) <= day)
        ) {
          age++;
        }
        arr.push(age);
        this.form.sex = arr[1];
        this.form.age = arr[2];
        this.form.birthday = arr[0];
      }
    },
    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;
    },
    onDisciplinarForm() {
      this.$refs.disciplinaryForm.validate((valid) => {
        if (valid) {
          if (this.disciplinaryId !== "") {
            this.$set(
                this.form.disciplinaryInfoList,
                this.disciplinaryId,
                JSON.parse(JSON.stringify(this.disciplinaryForm))
            );
          } else {
            this.form.disciplinaryInfoList.push(
                JSON.parse(JSON.stringify(this.disciplinaryForm))
            );
          }
          this.isShowDisciplinaryForm = false;
          this.$message.success(
              this.disciplinaryId !== "" ? "编辑成功" : "新增成功"
          );
        }
      });
    },
    onJobForm() {
      this.$refs.jobForm.validate((valid) => {
        if (valid) {
          if (this.jobId !== "") {
            this.$set(
                this.form.workInfoList,
                this.jobId,
                JSON.parse(
                    JSON.stringify({
                      ...this.jobForm,
                      starTime: this.jobForm.date[0],
                      endTime: this.jobForm.date[1],
                    })
                )
            );
          } else {
            this.form.workInfoList.push(
                JSON.parse(
                    JSON.stringify({
                      ...this.jobForm,
                      starTime: this.jobForm.date[0],
                      endTime: this.jobForm.date[1],
                    })
                )
            );
          }

          this.isShowJobForm = false;
          this.$message.success(this.jobId !== "" ? "编辑成功" : "新增成功");
        }
      });
    },
    onStarForm() {
      this.$refs.starForm.validate((valid) => {
        if (valid) {
          if (this.starId !== "") {
            this.$set(
                this.form.starList,
                this.starId,
                JSON.parse(JSON.stringify(this.starForm))
            );
          } else {
            this.form.starList.push(JSON.parse(JSON.stringify(this.starForm)));
          }

          this.isShowStarForm = false;
          this.$message.success(this.starId !== "" ? "编辑成功" : "新增成功");
        }
      });
    },
    onClose() {
      this.starId = "";
      this.jobId = "";
      this.disciplinaryId = "";
      this.starForm.level = 0;
      this.starForm.id = "";
      this.starForm.starTime = "";
      this.jobForm.date = [];
      this.jobForm.company = "";
      this.jobForm.id = "";
      this.jobForm.position = "";
      this.disciplinaryForm.starTime = "";
      this.disciplinaryForm.id = "";
      this.disciplinaryForm.disciplinaryInfo = "";
      this.disciplinaryForm.result = "";
    },
    addForm(type) {
      if (type === "五星党员") {
        this.isShowStarForm = true;
      } else if (type === "工作信息") {
        this.isShowJobForm = true;
      } else {
        this.isShowDisciplinaryForm = true;
      }
    },
    confirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.instance
          .post(`/app/appparty/addOrUpdate`, {
            ...this.form,
          })
          .then((res) => {
            if (res.code == 0) {
              this.$message.success(this.isEdit ? "编辑成功" : "添加成功");
              setTimeout(() => {
                this.cancel(true);
              }, 600);
            }
          });
        }
      });
    },
    cancel() {
      this.$router.push({});
    },
    handlePartyOrgSelect(e) {
      let {isLeaf, name, id} = e?.[0];
      if (isLeaf == 1) {
        this.form.partyOrgName = name;
        this.form.partyOrgId = id;
      } else {
        this.$message.error("请选择党支部");
      }
    },
  },
};
</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;
    }
  }

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

  .audit-1 {
    color: #2ea222 !important;
  }

  .add-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0 20px;

    div {
      display: flex;
      align-items: center;
      color: #2266ff;
      font-size: 14px;

      &:hover {
        opacity: 0.6;
        cursor: pointer;
        user-select: none;
      }

      i {
        line-height: 1;
        margin-right: 4px;
      }
    }
  }
}
</style>
