<template>
  <div class="app-container home">
    <template v-if="pageType === 'LIST'">
      <div class="home-head">
        <el-row :gutter="20">
          <el-col :xs="12" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
            <div class="home-head-left">
              <div class="head-left-top">
                <div class="head-left-top-title">渔安街道党组织</div>
                <div
                  class="head-left-top-subtitle"
                >上次登录时间：{{ parseTime($store.getters.loginDate, '{y}年{m}月{d}日 {h}:{i}:{s}') || '—' }}</div>
              </div>
              <div class="head-left-middle">
                <div class="head-left-middle-avatar">
                  <img :src="$store.getters.avatar" @error="imgViewerOnerror" />
                </div>
                <div class="head-left-middle-name">{{ $store.getters.nickName || '—' }}</div>
                <div class="head-left-middle-role">{{ $store.getters.roleName || '—' }}</div>
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
            <div class="home-head-right">
              <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                <el-col :span="6">
                  <div class="home-head-right_item">
                    <div class="home-head-right_item-title">正式党员数</div>
                    <div class="home-head-right_item-content">
                      <div
                        v-if="countsObj.formalCounts !== null && countsObj.formalCounts !== undefined"
                      >
                        <div class="formal">
                          <countTo :startVal="0" :endVal="countsObj.formalCounts" :duration="3000"></countTo>
                        </div>
                        <div>人</div>
                      </div>
                      <div v-else>—</div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="home-head-right_item">
                    <div class="home-head-right_item-title">预备党员数</div>
                    <div class="home-head-right_item-content">
                      <div
                        v-if="countsObj.readyCounts !== null && countsObj.readyCounts !== undefined"
                      >
                        <div class="prep">
                          <countTo :startVal="0" :endVal="countsObj.readyCounts" :duration="3000"></countTo>
                        </div>
                        <div>人</div>
                      </div>
                      <div v-else>—</div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="home-head-right_item">
                    <div class="home-head-right_item-title">发展党员数</div>
                    <div class="home-head-right_item-content">
                      <div
                        v-if="countsObj.progressCounts !== null && countsObj.progressCounts !== undefined"
                      >
                        <div class="develop">
                          <countTo
                            :startVal="0"
                            :endVal="countsObj.progressCounts"
                            :duration="3000"
                          ></countTo>
                        </div>
                        <div>人</div>
                      </div>
                      <div v-else>—</div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="home-head-right_item">
                    <div class="home-head-right_item-title">积极分子数</div>
                    <div class="home-head-right_item-content">
                      <div
                        v-if="countsObj.activeCounts !== null && countsObj.activeCounts !== undefined"
                      >
                        <div class="positive">
                          <countTo :startVal="0" :endVal="countsObj.activeCounts" :duration="3000"></countTo>
                        </div>
                        <div>人</div>
                      </div>
                      <div v-else>—</div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="home-main">
        <el-row :gutter="10">
          <el-col :span="24">
            <div class="home-main-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="home-main-list">
              <el-row :gutter="5">
                <template v-if="list.length > 0">
                  <el-col
                    v-for="(item, index) in list"
                    :key="'HOMEURGENCYLIST_' + item.id + index"
                    :xs="16"
                    :sm="12"
                    :md="8"
                    :lg="6"
                    :xl="4"
                    class="mb10"
                  >
                    <div class="home-main-list_card">
                      <div class="home-main-list_card-basic">
                        <img
                          :src="item.personPhoto ? (viewPdfFileUrlPrefix + item.personPhoto) : require('@/assets/images/tentative-img.png')"
                          @error="imgViewerOnerror"
                        />

                        <div class="list_card-basic-info">
                          <div class="list_card-basic-info-name">{{ item.name || '—' }}</div>
                          <div class="list_card-basic-info-idcard">{{ item.cardNo || '—' }}</div>
                          <div class="list_card-basic-info-sex">{{ item.sex || '—' }}</div>
                        </div>
                      </div>
                      <div style="clear: both;"></div>
                      <div class="home-main-list_card-stage">
                        <div>所处阶段：</div>
                        <div>{{ atStageNodeDataObj[item.atPoint] || '—' }}</div>
                      </div>
                      <div class="home-main-list_card-node">
                        <div>待更新节点：</div>
                        <div>{{ nodeDataObj[item.nextPoint] || '—' }}</div>
                      </div>
                      <div class="home-main-list_card-status">{{ item.descrption || '—' }}</div>
                      <div class="home-main-list_card-btn">
                        <el-button
                          v-hasPermi="['home:index:processing']"
                          type="rocpartyprimarybtn"
                          @click="handleImmediateProcessingClick(item)"
                        >立即处理</el-button>
                      </div>
                    </div>
                  </el-col>
                </template>
                <template v-else>
                  <el-col :span="24">
                    <div class="home-main-list-nodata">暂无数据</div>
                  </el-col>
                </template>
              </el-row>
            </div>
          </el-col>
          <el-col :span="24">
            <pagination
              v-show="total>0"
              :total="total"
              :pageSizes="[12, 24, 36, 48, 60]"
              layout="total, prev, pager, next, jumper"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="initData"
            />
          </el-col>
        </el-row>
      </div>
    </template>
    <template v-else-if="pageType === 'IMMEDIATEPROCESSING'">
      <div class="toptitlepage">
        <div class="toptitlepage-head">
          <div class="toptitlepage-head-title">
            <div>
              <img
                :src="require('@/assets/logo/home-main-title-logo.png')"
                @error="imgViewerOnerror"
              />
            </div>
            <div>首页（立即处理）</div>
          </div>
        </div>
        <update-party-develop
          :id="currentRow.id"
          operate-type="EDIT"
          update-type="EDIT"
          @page-submit="handleAddPageSubmitClick"
          @page-close="handleAddPageCloseClick"
        />
      </div>
    </template>
    <template v-else>
      <div>&nbsp;</div>
    </template>
  </div>
</template>

<script>
import NodeDataObj from '@/views/PartyBuildingMgr/PartyMemberDevelop/JsonData/NodeDataObj';
import AtStageNodeDataObj from '@/views/PartyBuildingMgr/PartyMemberDevelop/JsonData/AtStageNodeDataObj';
import countTo from 'vue-count-to';
import { getCountsHome, getUrgencyListHome } from "@/api/home";

export default {
  name: "index",
  components: {
    countTo,
    'update-party-develop': () => import('@/components/UpdatePartyDevelop')
  },
  data() {
    return {
      pageType: 'LIST',
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 6
      },
      list: [],
      countsObj: {},
      currentRow: {},
      nodeDataObj: { ...NodeDataObj },
      atStageNodeDataObj: { ...AtStageNodeDataObj },
      viewPdfFileUrlPrefix: `${window.origin}${process.env.VUE_APP_FILE_VIEW_API}`
    };
  },
  created() {
    this.initData();
  },
  methods: {
    /**
     * 初始化数据
     */
    initData() {
      this.getCountsHomeData();
      this.getUrgencyListHomeData();
    },
    /**
     * 分类统计党员数量
     */
    getCountsHomeData() {
      getCountsHome().then(response => {
        this.countsObj = response.data || {};
      });
    },
    /**
     * 急需处理列表
     */
    getUrgencyListHomeData() {
      getUrgencyListHome(this.queryParams).then(response => {
        this.list = response?.rows || [];
        this.total = response?.total ?? 0;
      });
    },
    /**
     * 立即处理按钮事件
     */
    handleImmediateProcessingClick(item) {
      this.currentRow = item;
      this.pageType = 'IMMEDIATEPROCESSING';
    },
    /**
     * 信息录入页面保存按钮事件
     */
    handleAddPageSubmitClick(param) {
      this.pageType = param;
      this.initData();
    },
    /**
     * 信息录入页面取消按钮事件
     */
    handleAddPageCloseClick(param) {
      this.pageType = param;
      this.initData();
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  &-head {
    &-left {
      padding: 15px 20px;
      width: 100%;
      min-height: 145px;
      background: #ffffff;
      border-radius: 10px;
      background: url("../assets/images/home-head-img.png"), #ffffff;
      background-size: 67px 67px, cover;
      background-position: right 20px bottom 15px, center;
      background-repeat: no-repeat, no-repeat;

      .head-left-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;

        &-title {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 37px;
          font-size: 26px;
          font-weight: 400;
          color: #de0010;
          line-height: 37px;
          letter-spacing: 1px;
        }

        &-subtitle {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 37px;
          font-size: 14px;
          font-weight: 400;
          color: #737373;
          line-height: 20px;
          opacity: 0.7;
        }
      }

      .head-left-middle {
        display: flex;
        align-items: center;
        margin-top: 5px;
        width: 100%;

        &-avatar {
          img {
            width: 58px;
            height: 58px;
          }
        }

        &-name {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 15px;
          height: 58px;
          font-size: 20px;
          font-weight: 400;
          color: #363636;
          line-height: 28px;
        }

        &-role {
          margin-left: 10px;
          height: 20px;
          font-size: 14px;
          font-weight: 400;
          color: #737373;
          line-height: 20px;
          opacity: 0.9;
        }
      }
    }

    &-right {
      padding: 24px 20px;
      width: 100%;
      min-height: 145px;
      background: #ffffff;
      border-radius: 10px;
      background: url("../assets/images/home-head-img.png"), #ffffff;
      background-size: 67px 67px, cover;
      background-position: right 20px bottom 15px, center;
      background-repeat: no-repeat, no-repeat;

      &_item {
        z-index: 10;
        width: 100%;

        &-title {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 20px;
          font-size: 14px;
          font-weight: 400;
          color: #585858;
          line-height: 20px;
          opacity: 0.8;
        }

        &-content {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 12px;
          width: 100%;

          div {
            &:last-child {
              display: flex;
              justify-content: center;
              align-items: center;
              height: 59px;
              font-size: 14px;
              font-weight: 400;
              color: #939393;
              line-height: 20px;
              opacity: 0.8;
            }
          }

          .formal {
            height: 59px;
            font-size: 42px;
            font-weight: 500;
            color: #f75d5d;
            line-height: 59px;
            letter-spacing: 1px;
          }

          .prep {
            height: 59px;
            font-size: 42px;
            font-weight: 500;
            color: #f7a25d;
            line-height: 59px;
            letter-spacing: 1px;
          }

          .develop {
            height: 59px;
            font-size: 42px;
            font-weight: 500;
            color: #3b98e0;
            line-height: 59px;
            letter-spacing: 1px;
          }

          .positive {
            height: 59px;
            font-size: 42px;
            font-weight: 500;
            color: #57ba4d;
            line-height: 59px;
            letter-spacing: 1px;
          }
        }
      }
    }
  }

  &-main {
    padding: 20px 20px 72px;
    min-height: 660px;
    background: url("../assets/images/home-head-img.png"), #ffffff;
    background-size: 67px 67px, cover;
    background-position: right 20px bottom 5px, center;
    background-repeat: no-repeat, no-repeat;
    border-radius: 10px;

    &-title {
      display: flex;
      align-items: center;

      div {
        &:first-child {
          height: 37px;
          line-height: 37px;
        }

        &:last-child {
          margin-left: 15px;
          height: 37px;
          font-size: 26px;
          font-weight: 400;
          color: #4f4f4f;
          line-height: 37px;
          letter-spacing: 1px;
        }

        img {
          width: 34px;
          height: 34px;
        }
      }
    }

    &-list {
      margin-top: 20px;

      &_card {
        padding: 15px 8px;
        overflow: hidden;
        width: 100%;
        border: 1px solid #b5b5b5;
        border-radius: 5px;

        &-basic {
          img {
            float: left;
            margin-right: 6px;
            width: 73px;
            height: 91px;
          }

          .list_card-basic-info {
            float: left;

            &-name {
              height: 25px;
              font-size: 18px;
              font-weight: 400;
              color: #363636;
              line-height: 25px;
            }

            &-idcard {
              margin-top: 5px;
              height: 22px;
              font-size: 16px;
              font-weight: 400;
              color: #747474;
              line-height: 22px;
            }

            &-sex {
              margin-top: 5px;
              height: 22px;
              font-size: 16px;
              font-weight: 400;
              color: #363636;
              line-height: 22px;
              opacity: 0.9;
            }
          }
        }

        &-stage {
          margin-top: 26px;
          width: 100%;

          div {
            &:first-child {
              height: 22px;
              font-size: 16px;
              font-weight: 400;
              color: #363636;
              line-height: 22px;
              opacity: 0.9;
            }

            &:last-child {
              margin-top: 4px;
              height: 20px;
              font-size: 14px;
              font-weight: 400;
              color: #747474;
              line-height: 20px;
            }
          }
        }

        &-node {
          margin-top: 21px;
          width: 100%;

          div {
            &:first-child {
              height: 22px;
              font-size: 16px;
              font-weight: 400;
              color: #363636;
              line-height: 22px;
              opacity: 0.9;
            }

            &:last-child {
              margin-top: 4px;
              height: 20px;
              font-size: 14px;
              font-weight: 400;
              color: #747474;
              line-height: 20px;
            }
          }
        }

        &-status {
          margin-top: 32px;
          height: 20px;
          font-size: 14px;
          font-weight: 400;
          color: #de0010;
          line-height: 20px;
        }

        &-btn {
          margin: 35px auto 15px;
          text-align: center;

          .el-button {
            width: 70%;
          }
        }
      }

      &-nodata {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 386px;
        border: 1px solid #b5b5b5;
        border-radius: 5px;
        color: #747474;
        opacity: 0.8;
      }
    }
  }
}
</style>