<template>
  <ai-detail class="party-detail">
    <template slot="title">
      <ai-title
        title="党员信息详情"
        isShowBack
        isShowBottomBorder
        @onBackClick="cancel(true)"
      ></ai-title>
    </template>
    <template slot="content">
      <div>
        <ai-card title="基本信息">
          <template #content>
            <ai-wrapper label-width="72px">
              <ai-avatar
                class="party-avatar"
                v-model="info.avatarUrl"
                :editable="false"
              ></ai-avatar>
              <ai-info-item label="姓名">{{ info.name }}</ai-info-item>
              <ai-info-item
                label="性别"
                :value="dict.getLabel('sex', info.sex)"
              ></ai-info-item>
              <ai-info-item label="身份证号">
                <ai-id mode="show" :value="info.idNumber" rightBtn />
              </ai-info-item>
              <ai-info-item
                label="民族"
                :value="dict.getLabel('nation', info.nation)"
              ></ai-info-item>
              <ai-info-item
                label="出生日期"
                :value="info.birthday"
              ></ai-info-item>
              <ai-info-item label="年龄">{{ info.age }}</ai-info-item>
              <ai-info-item label="发展状态">{{ info.age }}</ai-info-item>
              <ai-info-item
                label="籍贯"
                isLine
                :value="info.birthplaceAreaName"
              ></ai-info-item>
              <ai-info-item
                label="户籍地"
                isLine
                :value="info.householdAreaName"
              ></ai-info-item>
            </ai-wrapper>
          </template>
        </ai-card>
        <ai-card title="联络信息">
          <template #content>
            <ai-wrapper label-width="72px">
              <ai-info-item label="联系方式">{{ info.name }}</ai-info-item>
              <ai-info-item
                label="现住址"
                isLine
                :value="info.householdAreaName"
              ></ai-info-item>
            </ai-wrapper>
          </template>
        </ai-card>
        <ai-card title="团籍信息">
          <template #content>
            <ai-wrapper label-width="72px">
              <ai-info-item label="入团日期">{{ info.name }}</ai-info-item>
              <ai-info-item label="文化程度">{{ info.name }}</ai-info-item>
              <ai-info-item label="学位职称">{{ info.name }}</ai-info-item>
              <ai-info-item label="奖励情况" isLine :value="info.householdAreaName"></ai-info-item>
              <ai-info-item label="处分情况" isLine :value="info.householdAreaName"></ai-info-item>
              <ai-info-item label="简历" isLine :value="info.householdAreaName"></ai-info-item>
              <ai-info-item label="附件" isLine>
                <ai-file-list v-if="info.files && info.files.length"
                  :fileList="info.files"
                  :fileOps="{ name: 'name', size: 'fileSizeStr' }"
                ></ai-file-list>
              </ai-info-item>
            </ai-wrapper>
          </template>
        </ai-card>
        <ai-card title="申请入学">
          <template #content>
            <ai-wrapper label-width="72px">
              <ai-info-item label="申请入学时间">{{ info.name }}</ai-info-item>
              <ai-info-item
                label="申请入学形式"
                isLine
                :value="info.householdAreaName"
              ></ai-info-item>
            </ai-wrapper>
          </template>
        </ai-card>
        


      </div>
    </template>
  </ai-detail>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "detail",

  props: {
    instance: Function,
    dict: Object,
    params: Object,
  },

  data() {
    return {
      info: {},
      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" },
      ],
    };
  },

  computed: {
    ...mapState(["user"]),
  },

  created() {
    this.getInfo();
  },

  methods: {
    getInfo() {
      let { id } = this.$route.query;
      id &&
        this.instance
          .post(`/app/appparty/detail`, null, {
            params: { id },
          })
          .then((res) => {
            if (res?.data) {
              this.info = res.data;
              if (this.info.birthday) {
                this.info.birthday = this.info.birthday.substring(0, 10);
              }
            }
          });
    },
    remove(id, apiUrl) {
      this.$confirm("确定删除该数据？").then(() => {
        this.instance.post(`${apiUrl}?ids=${id}`).then((res) => {
          if (res.code == 0) {
            this.getInfo();
            this.$message.success("删除成功！");
          }
        });
      });
    },
    editJob(query) {
      this.jobForm = {
        ...query,
        date: [query.starTime, query.endTime],
      };
      this.jobId = query.id;

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

      this.isShowStarForm = true;
    },

    editDisciplinary(query) {
      this.disciplinaryForm = {
        ...query,
      };
      this.disciplinaryId = query.id;

      this.isShowDisciplinaryForm = true;
    },

    onDisciplinarForm() {
      this.$refs.disciplinaryForm.validate((valid) => {
        if (valid) {
          this.instance
            .post(`/app/apppartydisciplinaryinfo/addOrUpdate`, {
              ...this.disciplinaryForm,
              partyId: this.params.id,
            })
            .then((res) => {
              if (res.code == 0) {
                this.isShowDisciplinaryForm = false;
                this.getInfo();
                this.$message.success(this.jobId ? "编辑成功" : "新增成功");
              }
            });
        }
      });
    },

    onJobForm() {
      this.$refs.jobForm.validate((valid) => {
        if (valid) {
          this.instance
            .post(`/app/apppartyworkinfo/addOrUpdate`, {
              ...this.jobForm,
              starTime: this.jobForm.date[0],
              endTime: this.jobForm.date[1],
              partyId: this.params.id,
            })
            .then((res) => {
              if (res.code == 0) {
                this.isShowJobForm = false;
                this.getInfo();
                this.$message.success(this.jobId ? "编辑成功" : "新增成功");
              }
            });
        }
      });
    },

    onStarForm() {
      this.$refs.starForm.validate((valid) => {
        if (valid) {
          this.instance
            .post(`/app/apppartyfivestar/addOrUpdate`, {
              ...this.starForm,
              idNumber: this.info.idNumber,
              partyId: this.params.id,
            })
            .then((res) => {
              if (res.code == 0) {
                this.isShowStarForm = false;
                this.getInfo();
                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;
      }
    },

    cancel() {
      this.$router.push({});
    },
  },
};
</script>

<style scoped lang="scss">
.party-detail {
  ::v-deep .AiID {
    line-height: 1.4;
    color: #222;

    .el-button {
      height: auto;
      padding: 0 8px 0 0;
    }
  }

  .party-avatar {
    position: absolute;
    right: 100px;
  }
}

.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>
