<!--
 * @Description: 党员详细资料
 * @Author: Rockery
 * @Date: 2022-01-04 10:37:17
 * @LastEditors: Rockery
 * @LastEditTime: 2022-01-21 10:50:48
 * @FilePath: \party_construct_web\src\components\PartyMemberDetails\index.vue
 * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
-->

<template>
  <div class="partymemberdetails">
    <el-row>
      <!-- 顶部信息 -->
      <el-col :span="24">
        <div class="partymemberdetails-head">
          <el-row>
            <!-- 党员详细资料 -->
            <el-col :span="24">
              <div class="partymemberdetails-head-title">
                <div>
                  <img
                    :src="require('@/assets/logo/home-main-title-logo.png')"
                    @error="imgViewerOnerror"
                  />
                </div>
                <div>党员详细资料</div>
              </div>
            </el-col>

            <!-- 个人基本情况 -->
            <el-col :span="24">
              <div class="partymemberdetails-head-subtitle">个人基本情况</div>
            </el-col>

            <el-col :span="24">
              <div class="partymemberdetails-head-basic">
                <div class="partymemberdetails-head-basic-personphoto">
                  <img
                    :src="viewFullPartyInfoObj.personPhoto ? (viewPdfFileUrlPrefix + viewFullPartyInfoObj.personPhoto) : require('@/assets/images/tentative-img.png')"
                    @error="imgViewerOnerror"
                  />
                </div>
                <div class="partymemberdetails-head-basic-info">
                  <div class="basic-info-first">{{ viewFullPartyInfoObj.name }}</div>

                  <div class="basic-info-second">
                    <span>性别：{{ viewFullPartyInfoObj.sex || '—' }}</span>
                    <span class="basic-info-divider">｜</span>
                    <span>民族：{{ viewFullPartyInfoObj.nation || '—' }}</span>
                    <span class="basic-info-divider">｜</span>
                    <span>出生年月：{{ parseTime(viewFullPartyInfoObj.birthday, '{y}年{m}月{d}日') || '—' }}</span>
                    <!-- <span class="basic-info-divider">｜</span>
                    <span>手机号：{{ viewFullPartyInfoObj.mobile || '—' }}</span>-->
                    <span class="basic-info-divider">｜</span>
                    <span>籍贯：{{ viewFullPartyInfoObj.placeStr || '—' }}</span>
                    <span class="basic-info-divider">｜</span>
                    <span>学历：{{ educationFormat({ education: viewFullPartyInfoObj.education }) || '—' }}</span>
                    <span class="basic-info-divider">｜</span>
                    <span>入团时间：{{ parseTime(viewFullPartyInfoObj.addTeamTime, '{y}年{m}月{d}日') || '—' }}</span>
                    <span class="basic-info-divider">｜</span>
                    <span>单位、职务或职业：{{ viewFullPartyInfoObj.workJob || '—' }}</span>
                    <!-- <span class="basic-info-divider">｜</span>
                    <span>参加工作时间：{{ parseTime(viewFullPartyInfoObj.workTime, '{y}年{m}月{d}日') || '—' }}</span>-->
                  </div>

                  <div class="basic-info-third">
                    <span class="basic-info-cardno">居民身份证号码：{{ viewFullPartyInfoObj.cardNo || '—' }}</span>
                    <span
                      class="basic-info-address"
                    >现居住地：{{ viewFullPartyInfoObj.addressStr || '—' }}</span>
                  </div>

                  <div class="basic-info-fourth">
                    <!-- 本人简历（包括学历） -->
                    <div class="basic-info-fourth-label">本人简历（包括学历）：</div>
                    <template v-if="viewFullPartyInfoObj.resume">
                      <div
                        class="basic-info-fourth-info"
                        @click="handleViewPageCheckClick(viewFullPartyInfoObj.resume, 'pdf文件')"
                      >查看</div>
                      <div
                        class="basic-info-fourth-info"
                        @click="handleViewPageDownloadClick(viewFullPartyInfoObj.resume, 'pdf文件')"
                      >下载</div>
                    </template>
                    <template v-else>
                      <div class="basic-info-fourth-label">—</div>
                    </template>

                    <!-- 其他情况 -->
                    <div class="basic-info-fourth-label ml20">其他情况：</div>
                    <template v-if="viewFullPartyInfoObj.other">
                      <div
                        class="basic-info-fourth-info"
                        @click="handleViewPageCheckClick(viewFullPartyInfoObj.other, 'pdf文件')"
                      >查看</div>
                      <div
                        class="basic-info-fourth-info"
                        @click="handleViewPageDownloadClick(viewFullPartyInfoObj.other, 'pdf文件')"
                      >下载</div>
                    </template>
                    <template v-else>
                      <div class="basic-info-fourth-label">—</div>
                    </template>

                    <!-- 情况说明 -->
                    <template v-if="viewFullPartyInfoObj.hasConditionLog > 0">
                      <div
                        class="basic-info-fourth-label ml20"
                      >{{ viewFullPartyInfoObj.name }}同志曾经进行过情况说明</div>
                      <div class="basic-info-fourth-info" @click="handleViewDescInfoClick">查看</div>
                    </template>
                  </div>

                  <div class="basic-info-fifth">备注：</div>

                  <div class="basic-info-sixth">{{ viewFullPartyInfoObj.remark || '—' }}</div>
                </div>
              </div>
            </el-col>

            <el-col :span="24">
              <div class="partymemberdetails-head-divider"></div>
            </el-col>

            <el-col :span="24">
              <div class="partymemberdetails-head-desc">党员发展情况</div>
            </el-col>

            <el-col :span="24">
              <div class="partymemberdetails-head-stage">
                <el-row :gutter="20">
                  <template v-if="viewFullPartyInfoObj.type === 4">
                    <el-col :span="24">
                      <div class="head-stage-current">
                        <span>正式党员</span>
                        <span
                          v-if="viewFullPartyInfoObj.applyAddPartyTime"
                          style="margin-left: 25px;"
                        >提交入党申请的时间：{{ parseTime(viewFullPartyInfoObj.applyAddPartyTime, '{y}年{m}月{d}日') }}</span>
                        <span
                          v-if="viewFullPartyInfoObj.addPartyTime"
                          style="margin-left: 25px;"
                        >正式入党时间：{{ parseTime(viewFullPartyInfoObj.addPartyTime, '{y}年{m}月{d}日') }}</span>
                      </div>
                    </el-col>
                  </template>
                  <template v-else>
                    <template v-if="viewFullPartyInfoObj.flowStatus === 27">
                      <el-col :span="24">
                        <div class="head-stage-current">
                          <span>待转为正式党员</span>
                          <span
                            v-if="viewFullPartyInfoObj.applyAddPartyTime"
                            style="margin-left: 30px;"
                          >提交入党申请的时间：{{ parseTime(viewFullPartyInfoObj.applyAddPartyTime, '{y}年{m}月{d}日') }}</span>
                        </div>
                      </el-col>
                    </template>
                    <template v-else>
                      <el-col :span="12">
                        <div class="head-stage-current">
                          <span>当前所处阶段：{{ atStageNodeDataObj[viewFullPartyInfoObj.maxType] || '—' }}</span>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div class="head-stage-future">
                          <span>待更新节点：{{ nodeDataObj[viewFullPartyInfoObj.flowStatus + 1] || '—' }}</span>
                        </div>
                      </el-col>
                    </template>
                  </template>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>

      <!-- 主体信息 -->
      <el-col :span="24">
        <div class="partymemberdetails-main">
          <el-tabs type="border-card" v-model="tabsModel" class="partymemberdetails-main-tabs">
            <el-tab-pane
              v-for="(tabPaneItem, tabPaneIndex) in tabsEleObjList"
              :key="tabPaneItem.tabPaneName + '-' +tabPaneIndex"
              :label="tabPaneItem.tabPaneLabel"
              :name="tabPaneItem.tabPaneName"
            >
              <div class="roc-tabpane">
                <el-row>
                  <el-col :span="24">
                    <div class="roc-tabpane-head">
                      <div class="tabpane-head-left">
                        <!-- 大类节点步骤 -->
                        <div class="tabpane-head-left-title">{{ tabPaneItem.tabPaneHeadLeftTitle }}</div>
                      </div>

                      <!-- 大类节点名称 -->
                      <div class="tabpane-head-right">{{ tabPaneItem.tabPaneHeadRight }}</div>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div class="roc-tabpane-line"></div>
                  </el-col>
                  <el-col :span="24">
                    <div class="roc-tabpane-step">
                      <el-row>
                        <el-col
                          v-for="(tabpaneStepItem, tabpaneStepIndex) in tabPaneItem.tabpaneStepList"
                          :key="tabpaneStepItem.elcolKey + '-' +tabpaneStepIndex"
                          :span="24"
                        >
                          <el-row>
                            <el-col
                              :span="24"
                              :style="tabpaneStepItem.elcolStyle ? tabpaneStepItem.elcolStyle : ''"
                            >
                              <div class="roc-tabpane-step-item">
                                <!-- 小类节点步骤 -->
                                <div class="step-item-left">{{ tabpaneStepItem.stepItemLeft }}</div>
                                <div class="step-item-right">
                                  <el-row>
                                    <el-col
                                      :span="24"
                                      :style="([7, 12, 16, 20, 27].includes(tabpaneStepItem.stepItemLeft)) ? 'margin-bottom: 46px;' : ''"
                                    >
                                      <!-- 小类节点标题 -->
                                      <div
                                        class="step-item-right-title"
                                      >{{ tabpaneStepItem.stepItemRightTitle }}</div>

                                      <!-- 小节点内容 -->
                                      <div class="step-item-right-container">
                                        <el-row :gutter="20">
                                          <el-col
                                            v-for="(stepItemRightItem, stepItemRightIndex) in tabpaneStepItem.stepItemRightList"
                                            :key="stepItemRightItem.stepItemColProp + '-' + stepItemRightIndex"
                                            :span="stepItemRightItem.stepItemColSpan"
                                            :style="stepItemRightItem.stepItemColStyle ? stepItemRightItem.stepItemColStyle : ''"
                                          >
                                            <!-- 纯内容展示模式 -->
                                            <template
                                              v-if="stepItemRightItem.stepItemColType === 'CONTENT'"
                                            >
                                              <template
                                                v-if="stepItemRightItem.stepItemColPropType === 'DATEPICKER'"
                                              >
                                                <div
                                                  class="step-item-right-container_content"
                                                  :style="(stepItemRightItem.stepItemColAlignment === 'right') ? 'text-align: right;' : ''"
                                                >{{ stepItemRightItem.stepItemColLable }}{{ parseTime(viewFullPartyInfoObj[stepItemRightItem.stepItemColProp], '{y}年{m}月{d}日') || '待更新' }}</div>
                                              </template>
                                              <template
                                                v-else-if="stepItemRightItem.stepItemColPropType === 'RADIORESULT'"
                                              >
                                                <div
                                                  class="step-item-right-container_content"
                                                >{{ stepItemRightItem.stepItemColLable }}{{ (viewFullPartyInfoObj[stepItemRightItem.stepItemColProp] === 0 )? '未通过' : ((viewFullPartyInfoObj[stepItemRightItem.stepItemColProp] === 1) ? '通过' : '待更新')}}</div>
                                              </template>
                                              <template v-else>
                                                <div
                                                  class="step-item-right-container_content"
                                                >{{ stepItemRightItem.stepItemColLable }}{{ viewFullPartyInfoObj[stepItemRightItem.stepItemColProp] || '待更新' }}</div>
                                              </template>
                                            </template>

                                            <!-- PDF文件模式 -->
                                            <template
                                              v-else-if="stepItemRightItem.stepItemColType === 'VIEWPDFFILE'"
                                            >
                                              <template
                                                v-if="viewFullPartyInfoObj[stepItemRightItem.stepItemColProp]"
                                              >
                                                <div class="step-item-right-container_viewpdffile">
                                                  <div
                                                    class="viewpdffile-label"
                                                  >{{ stepItemRightItem.stepItemColLable }}</div>
                                                  <div
                                                    class="viewpdffile-view"
                                                    @click="handleViewPageCheckClick(viewFullPartyInfoObj[stepItemRightItem.stepItemColProp], stepItemRightItem.stepItemColPdfFileName)"
                                                  >查看</div>
                                                  <div
                                                    class="viewpdffile-download"
                                                    @click="handleViewPageDownloadClick(viewFullPartyInfoObj[stepItemRightItem.stepItemColProp], stepItemRightItem.stepItemColPdfFileName)"
                                                  >下载</div>
                                                </div>
                                              </template>
                                              <template v-else>
                                                <div class="step-item-right-container_viewpdffile">
                                                  <div
                                                    class="viewpdffile-label"
                                                  >{{ stepItemRightItem.stepItemColLable }}</div>
                                                  <div class="step-item-right-container_content">待更新</div>
                                                </div>
                                              </template>
                                            </template>

                                            <!-- 思想汇报模式 -->
                                            <template
                                              v-else-if="stepItemRightItem.stepItemColType === 'THOUGHTREPORTRECORD'"
                                            >
                                              <el-row>
                                                <el-col
                                                  v-for="(thoughtRecordItem, thoughtRecordIndex) in viewFullPartyInfoObj[stepItemRightItem.stepItemColProp]"
                                                  :key="stepItemRightItem.stepItemColProp + '-' + (thoughtRecordIndex + 1)"
                                                  :span="24"
                                                  style="margin-top: 16px;"
                                                >
                                                  <el-row :gutter="20">
                                                    <el-col :span="12">
                                                      <div
                                                        class="step-item-right-container_content"
                                                      >{{ '思想汇报递交时间' + (thoughtRecordIndex + 1) + '：' }}{{ parseTime(thoughtRecordItem.submitTime, '{y}年{m}月{d}日') || '待更新' }}</div>
                                                    </el-col>
                                                    <el-col :span="12">
                                                      <template v-if="thoughtRecordItem.filePath">
                                                        <div
                                                          class="step-item-right-container_viewpdffile"
                                                        >
                                                          <div
                                                            class="viewpdffile-label"
                                                          >{{ '思想汇报' + (thoughtRecordIndex + 1) + '：' }}</div>
                                                          <div
                                                            class="viewpdffile-view"
                                                            @click="handleViewPageCheckClick(thoughtRecordItem.filePath, stepItemRightItem.stepItemColPdfFileName + (thoughtRecordIndex + 1))"
                                                          >查看</div>
                                                          <div
                                                            class="viewpdffile-download"
                                                            @click="handleViewPageDownloadClick(thoughtRecordItem.filePath, stepItemRightItem.stepItemColPdfFileName + (thoughtRecordIndex + 1))"
                                                          >下载</div>
                                                        </div>
                                                      </template>
                                                      <template v-else>
                                                        <div
                                                          class="step-item-right-container_viewpdffile"
                                                        >
                                                          <div
                                                            class="viewpdffile-label"
                                                          >{{ stepItemRightItem.stepItemColLable }}</div>
                                                          <div
                                                            class="step-item-right-container_content"
                                                          >待更新</div>
                                                        </div>
                                                      </template>
                                                    </el-col>
                                                  </el-row>
                                                </el-col>
                                              </el-row>
                                            </template>

                                            <template
                                              v-else-if="stepItemRightItem.stepItemColType === 'PRELIMINARYREPORT'"
                                            >
                                              <div
                                                class="step-item-right-container_preliminaryreport"
                                              >{{ stepItemRightItem.stepItemColLable }}</div>
                                            </template>

                                            <!-- 不存在模式 -->
                                            <template v-else>
                                              <div>&nbsp;</div>
                                            </template>
                                          </el-col>
                                        </el-row>
                                      </div>
                                    </el-col>
                                  </el-row>
                                </div>
                              </div>
                            </el-col>

                            <!-- 节点链接线 -->
                            <el-col :span="24">
                              <template v-if="tabpaneStepItem.stepItemLeft === 7">
                                <div
                                  class="roc-tabpane-step-tail"
                                  :style="{height: (84 + viewFullPartyInfoObj.thoughtReportRecord.length * 38) + 'px', marginTop: '-' + (64 + viewFullPartyInfoObj.thoughtReportRecord.length * 38) + 'px'}"
                                ></div>
                              </template>
                              <template v-else>
                                <div
                                  class="roc-tabpane-step-tail"
                                  :style="tabpaneStepItem.stepItemTailStyle ? tabpaneStepItem.stepItemTailStyle : ''"
                                ></div>
                              </template>
                            </el-col>
                          </el-row>
                        </el-col>
                      </el-row>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
    <div class="pagefooter-btngroup">
      <el-button
        type="rocpartyprimaryplainbtn"
        icon="el-icon-circle-close"
        class="mr20"
        @click="handlePageCloseClick"
      >关 闭</el-button>
    </div>

    <!-- PDF 文件预览对话框 -->
    <roc-vue-pdf-dialog
      v-if="pdfDialogVisible"
      :visible.sync="pdfDialogVisible"
      :dialog-title="viewPdfFileObj.fileName"
      :pdfUrl="viewPdfFileObj.filePath"
    ></roc-vue-pdf-dialog>
  </div>
</template>

<script>
import EleObjArr from './JsonData/EleObjArr';
import NodeDataObj from '@/views/PartyBuildingMgr/PartyMemberDevelop/JsonData/NodeDataObj';
import AtStageNodeDataObj from '@/views/PartyBuildingMgr/PartyMemberDevelop/JsonData/AtStageNodeDataObj';
import {
  viewDetailFullPartyMember,
} from "@/api/PartyBuildingMgr/FullPartyMember";
import { regularDownloadPdfFile } from "@/utils/rockeryutil";

export default {
  name: "Partymemberdetails",
  components: {
    'roc-vue-pdf-dialog': () => import('@/components/RocVuePdfDialog')
  },
  props: {
    id: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      // 学历选项列表
      educationOptions: [],
      tabsModel: 'APPLY',
      viewFullPartyInfoObj: {
        thoughtReportRecord: []
      },
      viewPdfFileObj: {},
      pdfDialogVisible: false,
      tabsEleObjList: [...EleObjArr],
      nodeDataObj: { ...NodeDataObj },
      atStageNodeDataObj: { ...AtStageNodeDataObj },
      viewPdfFileUrlPrefix: `${window.origin}${process.env.VUE_APP_FILE_VIEW_API}`
    };
  },
  computed: {
    currentId() {
      return this.id;
    }
  },
  created() {
    this.initData();
  },
  methods: {
    /**
    * 初始化数据
    */
    async initData() {
      await this.getMainOptions();
      this.getViewDetailData();
    },
    /**
     * 获取主要选项列表
     */
    async getMainOptions() {
      // 学历选项列表
      await this.getDicts('party_full_education').then(response => {
        this.educationOptions = response?.data || [];
      });
    },
    /**
     * 学历选项格式化
     */
    educationFormat(row) {
      return this.selectDictLabel(this.educationOptions, row?.education);
    },
    /**
     * 获取信息详情
     */
    getViewDetailData() {
      viewDetailFullPartyMember({ memberId: this.currentId }).then((viewResp) => {
        // 初始化数据
        let tempFormModel = {};

        // 分离数据
        const { partyMember, flowPointPo, ...otherViewResp } = viewResp.data || {};
        const { place, address, ...otherPartyMember } = partyMember || {};
        const { thoughtReportRecord, publicTime, readyDeadline, readyDeadline1, publicTime1, ...otherFlowPointPo } = flowPointPo || {};

        // 籍贯数据
        if (place) {
          let placeArr = place.split(',') || [];
          (placeArr.length === 2) && (tempFormModel.placeStr = `${placeArr[0] || ''}${placeArr[1] || ''}`);
        }

        // 现居地数据
        if (address) {
          let addressArr = address.split(',') || [];
          if (addressArr.length >= 3) {
            tempFormModel.addressStr = `${addressArr[0] || ''}${addressArr[1] || ''}${addressArr[2] || ''}${addressArr[3] || ''}`;
          }
        }

        // 第7步 思想汇报数据
        tempFormModel.thoughtReportRecord = [
          {
            submitTime: null,
            filePath: null
          }
        ];
        if (thoughtReportRecord && thoughtReportRecord?.length > 0) {
          tempFormModel.thoughtReportRecord = [...thoughtReportRecord];
        }

        // 第10步 公示时间数据
        if (publicTime) {
          let publicTimeArr = publicTime.split('~') || [];
          (publicTimeArr.length === 2) && (tempFormModel.publicTimeStr = this.parseTime(publicTimeArr[0], '{y}年{m}月{d}日') + ' 至 ' + this.parseTime(publicTimeArr[1], '{y}年{m}月{d}日'));
        }

        // 第16步 预备期数据
        if (readyDeadline) {
          let readyDeadlineArr = readyDeadline.split('~') || [];
          (readyDeadlineArr.length === 2) && (tempFormModel.readyDeadlineStr = this.parseTime(readyDeadlineArr[0], '{y}年{m}月{d}日') + ' 至 ' + this.parseTime(readyDeadlineArr[1], '{y}年{m}月{d}日'));
        }

        // 第21步 预备期数据
        if (readyDeadline1) {
          let readyDeadline1Arr = readyDeadline1.split('~') || [];
          (readyDeadline1Arr.length === 2) && (tempFormModel.readyDeadline1Str = this.parseTime(readyDeadline1Arr[0], '{y}年{m}月{d}日') + ' 至 ' + this.parseTime(readyDeadline1Arr[1], '{y}年{m}月{d}日'));
        }

        // 第25步 公示时间数据
        if (publicTime1) {
          let publicTime1Arr = publicTime1.split('~') || [];
          (publicTime1Arr.length === 2) && (tempFormModel.publicTime1Str = this.parseTime(publicTime1Arr[0], '{y}年{m}月{d}日') + ' 至 ' + this.parseTime(publicTime1Arr[1], '{y}年{m}月{d}日'));
        }

        tempFormModel = {
          ...tempFormModel,
          ...otherViewResp,
          ...otherPartyMember,
          ...otherFlowPointPo
        };

        // 移除tempFormModel对象的属性没有值的元素
        Object.keys(tempFormModel).forEach(item => {
          ((tempFormModel[item] !== 0) && (!tempFormModel[item] || JSON.stringify(tempFormModel[item]) === '{}' || JSON.stringify(tempFormModel[item]) === '[]')) && (delete tempFormModel[item]);
        });

        this.viewFullPartyInfoObj = { ...tempFormModel };
      });
    },
    /**
     * 页面取消按钮事件
     */
    handlePageCloseClick() {
      this.viewFullPartyInfoObj = {
        thoughtReportRecord: []
      };
      this.viewPdfFileObj = {};
      this.$emit("page-close", 'LIST');
    },
    /**
     * PDF文件查看按钮事件
     */
    handleViewPageCheckClick(pdfFilePath, pdfFileName = 'pdf-file') {
      if (!pdfFilePath) return;
      const filePath = `${window.origin}${process.env.VUE_APP_FILE_VIEW_API}${pdfFilePath}`;
      const fileName = `${pdfFileName}-PDF文件预览`;
      this.viewPdfFileObj = {
        filePath,
        fileName
      };
      this.pdfDialogVisible = true;
    },
    /**
     * PDF文件下载按钮事件
     */
    handleViewPageDownloadClick(pdfFilePath, pdfFileName = 'pdf-file') {
      if (!pdfFilePath) return;
      regularDownloadPdfFile(`${window.origin}${process.env.VUE_APP_FILE_VIEW_API}${pdfFilePath}`, pdfFileName);
    },
    /**
     * 情况说明查看按钮事件
     */
    handleViewDescInfoClick() {
      if (this.viewFullPartyInfoObj.hasConditionLog === 0) return;
      this.$router.push(`/partybuildingmgr/situationdesc`);
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./scss/PartyMemberDetails.scss";
</style>