<template>
  <div>
    <div class="g-row">
      <div class="g-row-left">
        <div class="m-box m-search">
          <div class="wrap">
            <!-- <div class="title">
              <span>社区查询</span>
            </div> -->
            <div class="tabs">
              <div :class="{ 'z-on': searchData.type == 'jumin' }" @click="searchDataTab('jumin')">查居民</div>
              <div :class="{ 'z-on': searchData.type == 'fangwu' }" @click="searchDataTab('fangwu')">查房屋</div>
            </div>

            <div class="search">
              <div class="search-input">
                <div class="input">
                  <input type="text" :placeholder="typePlaceholder[searchData.type]" v-model="searchData.searchKey"
                    @keyup.enter="handleClickSearchBtn" />

                  <div class="close-btn" v-if="searchData.searchKey != ''" @click="searchData.searchKey = ''">
                    <img src="@/assets/img/shequ/close.png" />
                  </div>
                </div>
                <div class="btn" @click="handleClickSearchBtn">查一下</div>
              </div>
            </div>
          </div>

          <div class="mewq">
            <div class="boxss">
              <div style="margin-top: 10px;">
                <span style="color: #2683DB; font-size: 25px;">{{ pandectData.totalResidents }}</span>
                <br>
                <span style="color: #858585; font-size: 12px;">居民总数</span>
              </div>
            </div>
            <div class="boxss">
              <div style="margin-top: 10px;">
                <span style="color: #2683DB; font-size: 25px;">{{ pandectData.permanentResiCount }}</span>
                <br>
                <span style="color: #858585; font-size: 12px;">常住人口</span>
              </div>
            </div>
            <div class="boxss">
              <div style="margin-top: 10px;">
                <span style="color: #2683DB; font-size: 25px;">{{ pandectData.floatingResiCount }}</span>
                <br>
                <span style="color: #858585; font-size: 12px;">流动人口</span>
              </div>
            </div>
            <div class="boxss">
              <div style="margin-top: 10px;" @click="jumpToHouse()">
                <span style="color: #2683DB; font-size: 25px;">{{ pandectData.homeCount }}</span>
                <br>
                <span style="color: #858585; font-size: 12px;">房屋总数</span>
              </div>
            </div>
            <div class="boxss" @click="jumpToHouse('zizhuM')">
              <div style="margin-top: 10px;">
                <span style="color: #2683DB; font-size: 25px;">{{ pandectData.selfStay }}</span>
                <br>
                <span style="color: #858585; font-size: 12px;">自住房屋</span>
              </div>
            </div>
            <div class="boxss" @click="jumpToHouse('chuzuM')">
              <div style="margin-top: 10px;">
                <span style="color: #2683DB; font-size: 25px;">{{ pandectData.rentOut }}</span>
                <br>
                <span style="color: #858585; font-size: 12px;">出租房屋</span>
              </div>
            </div>
            <div class="boxss" @click="jumpToHouse('xianzhiM')">
              <div style="margin-top: 10px;">
                <span style="color: #2683DB; font-size: 25px;">{{ pandectData.vacantHouse }}</span>
                <br>
                <span style="color: #858585; font-size: 12px;">闲置房屋</span>
              </div>

            </div>
          </div>
        </div>
        <div class="m-pan m-box">
          <!-- <div class="header">
            <img src="@/assets/images/index/title-icon-sqzl.png" />
            <span>组织总览</span>
          </div> -->
          <div class="flex_box">
            <div class="header">
              <div class="newqsa"><span>居民分类信息不完整数量统计</span></div>
              <!-- <img src="@/assets/images/index/title-icon-zntb.png" /> -->

            </div>
            <div class="cnt">
              <!-- 树状图 -->
              <div class="echart" id="myBarchart" style="width: 100%; height: 100%;"></div>
              <!-- 树状图end -->
            </div>
          </div>
        </div>

        <div class="m-box m-tb">
          <div class="wrap">
            <div class="header">
              <div class="newqsa"><span>不满意事项(月度)趋势分析</span></div>
              <!-- <img src="@/assets/images/index/title-icon-zntb.png" /> -->
            </div>
          </div>
          <!-- <div class="more">更多></div> -->
          <div class="cnt">
            <div id="my_chart" style="width: 100%; height: 230px; position: relative; top: -30px"></div>
          </div>
        </div>

      </div>
      <div class="g-row-right" style="margin-right: 20px;">
        <div class="m-box m-tx">
          <div class="header">
            <div class="newqsa"><span>消息提醒</span></div>
            <!-- <img src="@/assets/images/index/title-icon-zntx.png" /> -->
          </div>
          <div class="more" @click="toNoticePage">更多></div>
          <div class="cnt" v-if="noticeData.length > 0" style="margin-top: 0px;">
            <div @click="handleClickNotice(item)" class="item" :key="'notice' + item.targetId + index"
              v-for="(item, index) in noticeData">
              <div class="item_right">
                <div class="item-date">
                  {{ item.createdTime }}
                </div>
                <div class="item-title"
                  style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 450px;">
                  <img v-if="index === 0" class="thumbnail_1" referrerpolicy="no-referrer"
                    src="https://lanhu.oss-cn-beijing.aliyuncs.com/psjidpevo98fb607sd028bliakr139r25k82b2fbda-8291-4fe3-b190-bfe723a10036" />{{
                  item.content }}
                </div>
              </div>
              <div class="item_left">
                <i class="i-tag" v-if="item.readFlag == 1">已读</i>
                <i class="i-tag" v-else>未读</i>
              </div>
            </div>
          </div>
          <div class="cnt" v-else>
            <div class="empty">
              <img src="~@/assets/images/shuju/renfang/index/empty.png" />
              <span>暂无提醒～</span>
            </div>
          </div>
        </div>

        <div class="m-box m-tx" style="position: relative;">
          <div class="noe-text"> <span style="margin-top: 10px;">居民分类更新情况</span> <span class="update-settings"
              style="margin-top: 10px;" v-show="showAll" @click="jumpToJuMin()"><img referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/pskhmf0717eflwg54wn73s6spnsg6u48r0f69e94b-2bc8-4156-8330-902087b72e0b" />更新设置</span>
          </div>
          <el-table :data="tableList" style="width: 100%;margin-top:26px;overflow-y: scroll;"  :height="maxTableHeight" border :cell-style="columnbackgroundStyle" class="m-table-item">
            <el-table-column  label="居民类别" align="center" width="105">
              <template slot-scope="scope">
                  <span style="color:#989898">{{scope.row.residentCategoryName}}</span>
              </template>
            </el-table-column>
            <el-table-column  label="总人数" width="105"  align="center">
              <template slot-scope="scope">
                  <span style="color:#006fd6">{{scope.row.total}}</span>
              </template>
            </el-table-column>
            <el-table-column  label="分类信息不完整数" align="center"  :show-overflow-tooltip="true">
              <template slot-scope="scope">
                  <span style="color:#ff1200;cursor: pointer;"  @click="handelCLickJump(scope.row)">{{scope.row.nonIntegratedNum}}</span>
              </template>
            </el-table-column>
            <el-table-column  label="更新负责人" :show-overflow-tooltip="true" align="center" v-if="showAll">
              <template slot-scope="scope">
                  <span style="color:#ff1200;">{{scope.row.userName}}</span>
              </template>
            </el-table-column>
            <el-table-column  label="更新周期" align="center" width="105">
              <template slot-scope="scope">
                  <span style="color:#989898;">{{scope.row.updatePeriod?scope.row.updatePeriod =='month'?'每自然月':scope.row.updatePeriod =='halfMonth'?'每半自然月':scope.row.updatePeriod =='week'?'每周':'':''}}</span>
              </template>
            </el-table-column>
            <el-table-column label="更新人数" align="center" width="105">
              <template slot-scope="scope">
                  <span style="color:#006fd6;">{{scope.row.updateResiNum}}</span><span style="color:#989898;">({{scope.row.updatePeriodName?scope.row.updatePeriodName:'--'}})</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <fastcall ref="fastcall" />
  </div>
</template>
<script>
import { requestPost, requestGet } from "@/js/dai/request";
import resiCategoryMap from "@/views/business/resi-category-map.js";
import { mapGetters } from "vuex";
import nextTick from "dai-js/tools/nextTick";
import fastcall from "@/views/modules/cpts/fastcall";
import * as echarts from "echarts";

export default {
  components: { fastcall },

  data() {
    return {
      searchStatus: "ini", //ing over
      searchData: {
        type: "jumin",
        searchKey: "",
      },
      showAll: false,

      typePlaceholder: {
        jumin: "请输入姓名或联系电话或证件号",
        fangwu: "请输入小区名称或楼栋名称",
        xuqiu: "请输入需求人或需求内容或服务组织",
      },

      resiCategory: {
        loading: false,
        total: "",
        list: [],
      },
      tableList: [
        // { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
        // { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
        // { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
        // { shenfen: '保障房人员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
        // { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
        // { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
        // { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
        // { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
        // { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
        // { shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
      ],
      znycCategory: {
        loading: false,
        total: "",
        list: [],
      },

      orgData: {
        id: "",
        level: "agency",
      },

      pandectData: {
        communityName: "",
        streetName: "",
        gridCount: "",
        resiCount: "",
        homeCount: "",
        floatingResiCount: "",
        permanentResiCount: "",
      },
      noticeData: [],
      activeName: "resi",
      myChart: {},
      myBarchart:{},
      agencyLevel: '',
      yData: [
        // {
        //   value: 720,
        //   itemStyle: {
        //     color: {
        //       type: 'linear',
        //       x: 0,
        //       y: 0,
        //       x2: 0,
        //       y2: 1,
        //       colorStops: [{
        //         offset: 0, color: '#2D7DF2' // 上部颜色
        //       }, {
        //         offset: 0.45, color: '#7EB1FE' // 中部颜色
        //       }, {
        //         offset: 0.45, color: '#EFB632' // 中部颜色
        //       }, {
        //         offset: 1, color: '#FDD77D' // 下部颜色
        //       }],
        //       global: false // 默认为 false
        //     },
        //     shadowColor: "#91cc75",
        //     borderType: "dashed",
        //     // opacity: 0.5
        //   }
        // },725,165,765,742,710,720,730,735,762,754
      ],
      myChartStyle: { float: "left", width: "140%", height: "100%" },
    }
  },
  computed: {
    maxTableHeight() {
      const _h = this.clientHeight - 610 ;
      return  _h;
    },
    ...mapGetters(["clientHeight"]),
  },
  watch: {
    "searchData.searchKey": function (val) {
      if (val == "") {
        this.searchStatus = "ini";
      }
    },
    $route: {
      handler: function (newVal, oldVal) {
        if (newVal.name == "home") {
          this.getApiData();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
  },
  mounted() {
    // this.ehso();
    //图形


    this.getApiData();
    this.$nextTick(() => {
      this.initChart()
      this.initEcharts();

    })
    this.agencyLevel = localStorage.getItem("level", data.level);
    console.log(
      "dynamicMenuRoutes----------------------------",
      this.$store.state.sidebarMenuList
    );
  },
  methods: {
    initChart() {
      this.$http.get("/governance/satisfactionOverview/notSatisfactionTrend").then(({ data: { data } }) => {
        this.myChart = echarts.init(document.getElementById("my_chart"));
        // console.log("123123", data.series)
        let series = data.series.map((item, index) => {
          return {
            ...item,
            type: "line",
            lineStyle: { // 添加lineStyle属性来指定折线样式
              color: index === 0 ? '#F76828' : index === 1 ? '#EDB42D' : '#0056D6' // 根据索引指定不同的颜色
            },
            symbol: 'none',
            itemStyle: {
              color: index === 0 ? '#F76828' : index === 1 ? '#EDB42D' : '#0056D6' // 设置折点颜色
            }
          };
        });
        let option = {
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: data.series.map((item) => item.name),
            bottom: "-5",
            icon: "rect",
            itemWidth: 20,
            itemHeight: 5,
            itemGap: 20,
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "15%",
            containLabel: true,
          },
          toolbox: {
            // feature: {
            // 	saveAsImage: {}
            // }
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            // data: data.monthTimes.map((item) => this.$moment(item).format("M") + "月"),
            data: data.monthTimes
          },
          yAxis: {
            type: "value",
          },
          series,
        };
        this.myChart.setOption(option, true);
        window.addEventListener("resize", this.handleWindowResize);
      });
      this.borderH();
      const level = localStorage.getItem('level');
      console.log('Stored level:', level);
      if (level == 'community') {
        this.showAll = true
      }
    },

    columnbackgroundStyle({ row, column, rowIndex, columnIndex }) {
        if (columnIndex == 3||columnIndex == 4||columnIndex == 5) {
            return 'background:#fffcf3;'
        }
    },

    borderH() {
      this.$http.post("/actual/base/residentCategoryUpdateInfo/getUpdateAndintegrityList").then(({ data: { data } }) => {
        this.tableList = data
        console.log("请求成功:", data);
      });
    },

    handleWindowResize() {
      if (this.myChart) {
        this.myChart.resize();
        this.myBarChart.resize();
      }
    },
    searchDataTab(str) {
      this.searchData.type = str;
    },
    handleClickCategory(item) {
      this.$router.push({
        name: "base-resi",
        params: {
          category: item.code,
        },
      });
    },
    async readClearOne(item) {
      console.log("item", item);
      const url = `/message/intelligentMessage/msg/clearOne/?msgId=${item.id}`;
      const { data, code, msg } = await requestPost(url);
      if (code == 0) {
        this.getNoticeData();
      } else if (code >= 8000) {
        this.$message.error(msg);
      }
    },
    async readClearOne(item) {
      const url = `/message/intelligentMessage/msg/clearOne/?msgId=${item.id}`;
      const { data, code, msg } = await requestPost(url);
      if (code == 0) {
        this.getNoticeData();
      } else if (code >= 8000) {
        this.$message.error(msg);
      }
    },
    handleClickNotice(item) {
      this.readClearOne(item);
      if (item.msgType == "community_house") {
        let { agencyId, gridId, gridName, houseId, houseName, targetId } = item
        this.$store.dispatch('saveDataH', { agencyId, gridId, gridName, houseId: targetId, houseName:'房屋详情' });
        this.$router.push({ name: 'house-huaxiang' });
        this.$store.state.contentTabs = this.$store.state.contentTabs.map(item => {
          if (item.name === "house-huaxiang") {
            return { ...item, title: '房屋信息' };
          }
          return item;
        });
      } else if (item.msgType == "resident_base_info") {
        let {
          agencyId,
          gridId,
          gridName,
          gender,
          homeId,
          homeName,
          name,
          targetId,
          deptName
        } = item;
        this.$store.dispatch("saveData", {
          agencyId,
          gridId,
          gridName,
          gender,
          homeId,
          homeName,
          name:'居民详情',
          resiId: targetId,
        });
        this.$router.push({ name: "jumin-huaxiang" });
        this.$store.state.contentTabs = this.$store.state.contentTabs.map(
          (item) => {
            if (item.name === "jumin-huaxiang") {
              return { ...item, title: name };
            }
            return item;
          }
        );
      }
      this.getNoticeData()
    },

    toNoticePage() {
      this.$router.push({
        path: "/main/home-notice",
      });
    },
    jumpToJuMin() {
      this.$router.push({
        path: "/main/workSys-setResiUpdate-index",
      });
    },
    //
    jumpToHouse(e) {
      this.$router.push({
        path: "/main/base-community-community",
        query: {
          param1: e,
        }
      });
    },

    toSearchPage(type, searchKey) {
      this.$router.push({
        path: "/main/shequ-chaxun",
      });
      localStorage.setItem("homeSearchType", type);
      localStorage.setItem("homeSearchKey", searchKey);
    },

    handleClickSearchBtn(str) {
      const {
        searchData: { type, searchKey },
      } = this;
      if (str) {
        this.toSearchPage(type, searchKey);
        return;
      }
      if (!searchKey) return this.$message.error("请输入搜索条件");
      this.toSearchPage(type, searchKey);
    },

    async getApiData() {
      await this.getOrgData();
      this.getWarningList();
      // this.getZnycList();
      this.getPandectData();
      this.getNoticeData();
    },

    //加载组织数据
    async getOrgData() {
      const url = "/gov/org/agency/maporg";
      let params = {
        orgId: "",
        level: "",
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.orgData = data;
      } else {
        this.$message.error(msg);
      }
    },

    //加载组织数据
    async getPandectData() {
      const url = "/actual/base/residentHouseMerge/communityOverview";
      let params = {
        // orgId: "",
        // level: "",
      };

      const { data, code, msg } = await requestGet(url, params);

      if (code === 0) {
        if (data) {
          this.pandectData = data;
        }
      } else {
        this.$message.error(msg);
      }
    },

    //加载组织数据
    async getNoticeData() {
      const url = "/message/intelligentMessage/list";
      let params = {
        last: "10",
        readFlag: '0'
      };
      const { data, code, msg } = await requestGet(url, params);
      if (code === 0) {
        if (data) {
          this.noticeData = data;
        }
      } else {
        this.$message.error(msg);
      }
    },
    handelCLickJump(e){
      this.$router.push({
            path: "/main/base-nonIntResi",
            query: {
              resiCategory: e.residentCategory,
            }
          });
    },
 
    //加载组织数据
    async getWarningList() {
      const url = "/actual/base/resiCategory/categoryCountList";
      let params = {
        // id: this.orgData.id,
        // level: "agency",
      };

      this.resiCategory.loading = true;
      const { data, code, msg } = await requestGet(url, params);
      this.resiCategory.loading = false;

      if (code === 0) {
        if (data) {
          this.resiCategory.count = data.resiCount;
          this.resiCategory.list = data.categoryList.map((item) => {
            return {
              code: item.categoryName,
              name: resiCategoryMap[item.categoryName] || "",
              count: item.categoryCount,
              per: ((100 * item.categoryCount) / data.resiCount).toFixed(0),
              const: "const",
            };
          });
        }
      } else {
        this.$message.error(msg);
      }
    },
    //加载智能预测数据
    async getZnycList() {
      const url = "/actual/base/resiCategory/intelligentPredictioncategoryCountList";
      // const url = "/actual/base/resiCategory/categoryCountList";
      let params = {
        // id: this.orgData.id,
        // level: "agency",
      };

      this.znycCategory.loading = true;
      const { data, code, msg } = await requestGet(url, params);
      this.znycCategory.loading = false;

      if (code === 0) {
        if (data) {
          this.znycCategory.count = data.resiCount;
          this.znycCategory.list = data.categoryList.map((item) => {
            return {
              code: item.categoryName,
              name: resiCategoryMap[item.categoryName] || "",
              count: item.categoryCountNext,
              // per: parseInt(
              //   (100 * item.categoryCount) / data.resiCount
              // ),
              per: item.change_ratio,
              const: "const",
            };
          });
        }
      } else {
        this.$message.error(msg);
      }
    },
    initEcharts() {
      this.$http.get("/actual/base/residentIntegrity/resiCategoryStats/byOrg/query4Org").then(({ data: { data } }) => {
        this.myBarchart = echarts.init(document.getElementById("myBarchart"));
        let xData = data.categoryStatsDatas.map(item => item.resiCategoryName)
        // let integratedNum = data.categoryStatsDatas.map(item => item.integratedNum)
        // let nonIntegratedNum = data.categoryStatsDatas.map(item => item.nonIntegratedNum)
        let option = {
          backgroundColor: '#fff',
          color: ['#448cf6', '#f7ca60', ],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            x: 'center',
            bottom: '8%',
            data: ['分类信息完整数', '分类信息不完整数']
          },
          grid: { //图表的位置
            top: '5%',
            left: '3%',
            right: '4%',
            bottom: '20%',
            containLabel: true
          },
          yAxis: [{
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#f2f2f2']
              }
            },
          }],
          xAxis: [{
            type: 'category',
            data: xData,
            axisLabel: {
                rotate: 50  // 设置旋转角度为45度
            }
          }],
          series: [{
            name: '分类信息完整数',
            type: 'bar',
            stack: '总量',
            barWidth: '30px',
            data: data.categoryStatsDatas.map((item, index) => ({
            value: item.integratedNum,
            extraProperty: item.resiCategory
          })),
          },
          {
            name: '分类信息不完整数',
            type: 'bar',
            stack: '总量',
            data: data.categoryStatsDatas.map((item, index) => ({
            value: item.nonIntegratedNum,
            extraProperty: item.resiCategory
          })),
          }
          ]
        };
        this.myBarchart.setOption(option);
        window.addEventListener("resize", this.handleWindowResize);
        this.myBarchart.on("click", (e) => {
          this.$router.push({
            path: "/main/base-nonIntResi",
            query: {
              resiCategory: e.data.extraProperty,
            }
          });

        });
      });
    },


  },
};
</script>

<style lang="scss" src="@/assets/scss/modules/index.scss" scoped></style>
