
<template>
  <div class="g-main">
    <div>
      <div class="m-search">
        <el-form
          :inline="true"
          :model="formData"
          ref="ref_searchform"
          :label-width="'100px'"
        >
          <el-form-item label="自评周期">
            <el-date-picker
              v-model="formData.period"
              type="month"
              value-format="yyyy-MM"
              placeholder="选择日期"
              style="width: 202px"
              clearable
            >
            </el-date-picker>
          </el-form-item>
          <div style="float: right; margin-top: 5px">
            <el-button
              style="margin-left: 30px"
              size="small"
              type="primary "
              @click="handleSearch"
              >查询</el-button
            >
            <el-button
              style="margin-left: 10px"
              is-plain
              class="diy-button--white el-button--default"
              size="small"
              @click="resetSearch"
              >重置</el-button
            >
          </div>
        </el-form>
      </div>

      <div class="m-table">
        <div class="div_btn" v-if="btnFlag">
          <el-button
            type="primary"
            size="small"
            class="diy-button--white el-button--default"
            @click="handleCreateMonthlySurvey"
            >生成本月社区自查问卷表</el-button
          >
        </div>
        <div
          class="m-table-item"
          :style="{ height: maxTableHeight + 'px', width: '100%' }"
        >
          <div>本月已参与调研人数 {{ personQty }}人</div>
          <section class="content_box">
            <div class="left">
              <img
                src="../../../../assets/img/satisfaction/zhdf.png"
                alt="Image"
              />
              <div class="left_right">
                <div>
                  {{
                    synthesisScore < 0
                      ? Math.abs(synthesisScore)
                      : synthesisScore
                  }}
                </div>
                <div>综合得分</div>
              </div>
              <div class="right_box">
                <div :class="synthesisState ? 'up' : 'down'">
                  <img
                    src="@/assets/images/index/up.png"
                    alt=""
                    v-if="synthesisState && synthesisScoreBtLastMonth != 0"
                  />
                  <img
                    src="@/assets/images/index/down.png"
                    alt=""
                    v-if="
                      !synthesisState &&
                      synthesisScoreBtLastMonth != 0 &&
                      synthesisScoreBtLastMonth != null
                    "
                  />
                  <span>{{
                    synthesisScoreBtLastMonth < 0
                      ? Math.abs(synthesisScoreBtLastMonth)
                      : synthesisScoreBtLastMonth
                  }}</span>
                </div>
                <div style="color: #999">较上月</div>
              </div>
            </div>
            <div class="right">
              <div class="box" v-for="(item, index) in score" :key="index">
                <div class="card">
                  <img :src="item.imgUrl" alt="Image" />
                  <div class="right_right">
                    <div>{{ item.score }}</div>
                    <div>{{ item.satisfactionCategoryName }}</div>
                  </div>
                  <div class="right_box">
                    <div>
                      <img
                        src="@/assets/images/index/up.png"
                        alt=""
                        v-if="item.state && item.scoreDiffBtLastMonth != 0"
                      />
                      <img
                        src="@/assets/images/index/down.png"
                        alt=""
                        v-if="!item.state && item.scoreDiffBtLastMonth != 0"
                      />
                      <span :class="item.state ? 'up' : 'down'">
                        {{
                          item.scoreDiffBtLastMonth < 0
                            ? Math.abs(item.scoreDiffBtLastMonth)
                            : item.scoreDiffBtLastMonth
                        }}
                      </span>
                    </div>
                    <div style="color: #999">较上月</div>
                  </div>
                </div>
              </div>
            </div>
          </section>

          <section class="bto-box">
            <div id="myCharts" v-if="user.level != 'street'"></div>
            <div v-else class="f-top16">
              <el-table
                :data="tableList"
                :height="tabHeight"
                border
                align="center"
              >
                <el-table-column label="序号" type="index" width="80" />
                <el-table-column
                  label="社区"
                  show-overflow-tooltip
                  prop="agencyName"
                  width="200"
                >
                </el-table-column>
                <el-table-column
                  label="参与调研人数"
                  prop="personQty"
                  width="150"
                >
                </el-table-column>
                <el-table-column
                  label="综合得分"
                  prop="synthesisScore"
                  width="150"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div class="f-flex">
                      <span class="down f-right8">{{
                        scope.row.synthesisScore
                      }}</span>
                      <div>
                        <img
                          src="@/assets/images/index/up.png"
                          width="10px"
                          height="14px"
                          v-if="
                            scope.row.synthesisScoreDiffBtLastMonth > 0 &&
                            scope.row.synthesisScoreDiffBtLastMonth != 0
                          "
                        />
                        <img
                          src="@/assets/images/index/down.png"
                          width="10px"
                          height="14px"
                          v-if="
                            scope.row.synthesisScoreDiffBtLastMonth < 0 &&
                            scope.row.synthesisScoreDiffBtLastMonth != 0
                          "
                        />
                        <span class="gray">{{
                          scope.row.synthesisScoreDiffBtLastMonth < 0
                            ? Math.abs(scope.row.synthesisScoreDiffBtLastMonth)
                            : scope.row.synthesisScoreDiffBtLastMonth
                        }}</span>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="文化设施"
                  prop="culturalFacilityScore"
                  width="150"
                >
                  <template slot-scope="scope">
                    <div class="f-flex">
                      <span class="down f-right8">{{
                        scope.row.culturalFacilityScore
                      }}</span>
                      <div>
                        <img
                          src="@/assets/images/index/up.png"
                          width="10px"
                          height="14px"
                          v-if="
                            scope.row.culturalFacilityScoreDiffBtLastMonth >
                              0 &&
                            scope.row.culturalFacilityScoreDiffBtLastMonth != 0
                          "
                        />
                        <img
                          src="@/assets/images/index/down.png"
                          width="10px"
                          height="14px"
                          v-if="
                            scope.row.culturalFacilityScoreDiffBtLastMonth <
                              0 &&
                            scope.row.culturalFacilityScoreDiffBtLastMonth != 0
                          "
                        />
                        <span class="gray">{{
                          scope.row.culturalFacilityScoreDiffBtLastMonth < 0
                            ? Math.abs(
                                scope.row.culturalFacilityScoreDiffBtLastMonth
                              )
                            : scope.row.culturalFacilityScoreDiffBtLastMonth
                        }}</span>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="基础教育"
                  prop="basicEducation"
                  width="150"
                >
                  <template slot-scope="scope">
                    <div class="f-flex">
                      <span class="down f-right8">{{
                        scope.row.basicEducationScore
                      }}</span>
                      <div>
                        <img
                          src="@/assets/images/index/up.png"
                          width="10px"
                          height="14px"
                          v-if="
                            scope.row.basicEducationScoreDiffBtLastMonth > 0 &&
                            scope.row.basicEducationScoreDiffBtLastMonth != 0
                          "
                        />
                        <img
                          src="@/assets/images/index/down.png"
                          width="10px"
                          height="14px"
                          v-if="
                            scope.row.basicEducationScoreDiffBtLastMonth < 0 &&
                            scope.row.basicEducationScoreDiffBtLastMonth != 0
                          "
                        />
                        <span class="gray">{{
                          scope.row.basicEducationScoreDiffBtLastMonth < 0
                            ? Math.abs(
                                scope.row.basicEducationScoreDiffBtLastMonth
                              )
                            : scope.row.basicEducationScoreDiffBtLastMonth
                        }}</span>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="体育设施"
                  prop="sportsFacility"
                  width="150"
                >
                  <template slot-scope="scope">
                    <div class="f-flex">
                      <span class="down f-right8">{{
                        scope.row.sportsFacilityScore
                      }}</span>
                      <div>
                        <img
                          src="@/assets/images/index/up.png"
                          width="10px"
                          height="14px"
                          v-if="
                            scope.row.sportsFacilityScoreDiffBtLastMonth > 0 &&
                            scope.row.sportsFacilityScoreDiffBtLastMonth != 0
                          "
                        />
                        <img
                          src="@/assets/images/index/down.png"
                          width="10px"
                          height="14px"
                          v-if="
                            scope.row.sportsFacilityScoreDiffBtLastMonth < 0 &&
                            scope.row.sportsFacilityScoreDiffBtLastMonth != 0
                          "
                        />
                        <span class="gray">{{
                          scope.row.sportsFacilityScoreDiffBtLastMonth < 0
                            ? Math.abs(
                                scope.row.sportsFacilityScoreDiffBtLastMonth
                              )
                            : scope.row.sportsFacilityScoreDiffBtLastMonth
                        }}</span>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="生态环境"
                  prop="ecologicalEnv"
                  width="150"
                >
                  <template slot-scope="scope">
                    <div class="f-flex">
                      <span class="down f-right8">{{
                        scope.row.ecologicalEnvScore
                      }}</span>
                      <div>
                        <img
                          src="@/assets/images/index/up.png"
                          width="10px"
                          height="14px"
                          v-if="
                            scope.row.ecologicalEnvScoreDiffBtLastMonth > 0 &&
                            scope.row.ecologicalEnvScoreDiffBtLastMonth != 0
                          "
                        />
                        <img
                          src="@/assets/images/index/down.png"
                          width="10px"
                          height="14px"
                          v-if="
                            scope.row.ecologicalEnvScoreDiffBtLastMonth < 0 &&
                            scope.row.ecologicalEnvScoreDiffBtLastMonth != 0
                          "
                        />
                        <span class="gray">{{
                          scope.row.ecologicalEnvScoreDiffBtLastMonth < 0
                            ? Math.abs(
                                scope.row.ecologicalEnvScoreDiffBtLastMonth
                              )
                            : scope.row.ecologicalEnvScoreDiffBtLastMonth
                        }}</span>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="社会治安"
                  prop="socialSecurity"
                  width="150"
                >
                  <template slot-scope="scope">
                    <div class="f-flex">
                      <span class="down f-right8">{{
                        scope.row.socialSecurityScore
                      }}</span>
                      <div>
                        <img
                          src="@/assets/images/index/up.png"
                          width="10px"
                          height="14px"
                          v-if="
                            scope.row.socialSecurityScoreDiffBtLastMonth > 0 &&
                            scope.row.socialSecurityScoreDiffBtLastMonth != 0
                          "
                        />
                        <img
                          src="@/assets/images/index/down.png"
                          width="10px"
                          height="14px"
                          v-if="
                            scope.row.socialSecurityScoreDiffBtLastMonth < 0 &&
                            scope.row.socialSecurityScoreDiffBtLastMonth != 0
                          "
                        />
                        <span class="gray">{{
                          scope.row.socialSecurityScoreDiffBtLastMonth < 0
                            ? Math.abs(
                                scope.row.socialSecurityScoreDiffBtLastMonth
                              )
                            : scope.row.socialSecurityScoreDiffBtLastMonth
                        }}</span>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="社会救助"
                  prop="socialAssistance"
                  width="150"
                >
                  <template slot-scope="scope">
                    <div class="f-flex">
                      <span class="down f-right8">{{
                        scope.row.socialAssistanceScore
                      }}</span>
                      <div>
                        <img
                          src="@/assets/images/index/up.png"
                          width="10px"
                          height="14px"
                          v-if="
                            scope.row.socialAssistanceScoreDiffBtLastMonth >
                              0 &&
                            scope.row.socialAssistanceScoreDiffBtLastMonth != 0
                          "
                        />
                        <img
                          src="@/assets/images/index/down.png"
                          width="10px"
                          height="14px"
                          v-if="
                            scope.row.socialAssistanceScoreDiffBtLastMonth <
                              0 &&
                            scope.row.socialAssistanceScoreDiffBtLastMonth != 0
                          "
                        />
                        <span class="gray">{{
                          scope.row.socialAssistanceScoreDiffBtLastMonth < 0
                            ? Math.abs(
                                scope.row.socialAssistanceScoreDiffBtLastMonth
                              )
                            : scope.row.socialAssistanceScoreDiffBtLastMonth
                        }}</span>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="老有所养"
                  prop="oldPeopleProvide"
                  width="150"
                >
                  <template slot-scope="scope">
                    <div class="f-flex">
                      <span class="down f-right8">{{
                        scope.row.oldPeopleProvideScore
                      }}</span>
                      <div>
                        <img
                          src="@/assets/images/index/up.png"
                          width="10px"
                          height="14px"
                          v-if="
                            scope.row.oldPeopleProvideScoreDiffBtLastMonth >
                              0 &&
                            scope.row.oldPeopleProvideScoreDiffBtLastMonth != 0
                          "
                        />
                        <img
                          src="@/assets/images/index/down.png"
                          width="10px"
                          height="14px"
                          v-if="
                            scope.row.oldPeopleProvideScoreDiffBtLastMonth <
                              0 &&
                            scope.row.oldPeopleProvideScoreDiffBtLastMonth != 0
                          "
                        />
                        <span class="gray">{{
                          scope.row.oldPeopleProvideScoreDiffBtLastMonth < 0
                            ? Math.abs(
                                scope.row.oldPeopleProvideScoreDiffBtLastMonth
                              )
                            : scope.row.oldPeopleProvideScoreDiffBtLastMonth
                        }}</span>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="病有所医" prop="medical" width="150">
                  <template slot-scope="scope">
                    <div class="f-flex">
                      <span class="down f-right8">{{
                        scope.row.medicalScore
                      }}</span>
                      <div>
                        <img
                          src="@/assets/images/index/up.png"
                          width="10px"
                          height="14px"
                          v-if="
                            scope.row.medicalScoreDiffBtLastMonth > 0 &&
                            scope.row.medicalScoreDiffBtLastMonth != 0
                          "
                        />
                        <img
                          src="@/assets/images/index/down.png"
                          width="10px"
                          height="14px"
                          v-if="
                            scope.row.medicalScoreDiffBtLastMonth < 0 &&
                            scope.row.medicalScoreDiffBtLastMonth != 0
                          "
                        />
                        <span class="gray">{{
                          scope.row.medicalScoreDiffBtLastMonth < 0
                            ? Math.abs(scope.row.medicalScoreDiffBtLastMonth)
                            : scope.row.medicalScoreDiffBtLastMonth
                        }}</span>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  width="90"
                  align="center"
                  fixed="right"
                >
                  <template slot-scope="data">
                    <el-button type="text" @click="handleView(data.row)"
                      >查看</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <el-row type="flex">
                <el-col :span="12" align="left">
                  <div style="margin-top: 25px">共{{ total }}条</div>
                </el-col>
                <el-col :span="12" align="right">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="pageNo"
                    :page-size="pageSize"
                    layout="prev, pager, next,jumper"
                    :total="total"
                  >
                  </el-pagination
                ></el-col>
              </el-row>
            </div>
          </section>
        </div>
      </div>
    </div>
    <el-dialog
      v-if="showCommunitDialog"
      :visible.sync="showCommunitDialog"
      :title="communitDialogTitle"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="1250px"
      top="5vh"
      class="dialog-h"
      @closed="showCommunitDialog = false"
    >
      <community-dialog
        :communityId="communityId"
        :period="formData.period"
        :satisfaction_category="dicts.satisfaction_category"
        @handelClickChart="handelClickChart"
      >
      </community-dialog>
      <el-dialog
        v-if="showFormList"
        :visible.sync="showFormList"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="社区自查"
        append-to-body
        width="820px"
        top="5vh"
        class="dialog-h"
        @closed="showFormList = false"
      >
        <form-list
          @handleClose="handleClose"
          @handelDetail="handelDetail"
          @handelFollowUpList="handelFollowUpList"
          :period="formData.period"
          :seriesName="seriesName"
          :inspRecordId="inspRecordId"
          :communityId="communityId"
        ></form-list>
        <el-dialog
          width="920px"
          class="dialog-h"
          title="社区自查报告详情"
          :close-on-click-modal="false"
          v-if="showFollowUpDetail"
          :visible.sync="showFollowUpDetail"
          append-to-body
        >
          <follow-Detail
            :period="formData.period"
            :inspResultId="inspResultId"
            @handleClose="showFollowUpDetail = false"
          ></follow-Detail>
        </el-dialog>
        <el-dialog
          width="820px"
          class="dialog-h"
          title="回访记录"
          :close-on-click-modal="false"
          v-if="showFollowUpList"
          :visible.sync="showFollowUpList"
          append-to-body
        >
          <follow-list :id="inspResultId"></follow-list>
        </el-dialog>
      </el-dialog>
    </el-dialog>

    <el-dialog
      v-if="showFormList"
      :visible.sync="showFormList"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="社区自查"
      append-to-body
      width="820px"
      top="5vh"
      class="dialog-h"
      @closed="showFormList = false"
    >
      <form-list
        @handleClose="handleClose"
        @handelDetail="handelDetail"
        @handelFollowUpList="handelFollowUpList"
        :period="formData.period"
        :modal-append-to-body="false"
        :seriesName="seriesName"
        :inspRecordId="inspRecordId"
        :communityId="communityId"
      ></form-list>
      <el-dialog
        width="920px"
        class="dialog-h"
        title="社区自查报告详情"
        :close-on-click-modal="false"
        v-if="showFollowUpDetail"
        :visible.sync="showFollowUpDetail"
        append-to-body
      >
        <follow-Detail
          :period="formData.period"
          :inspResultId="inspResultId"
          @handleClose="showFollowUpDetail = false"
        ></follow-Detail>
      </el-dialog>
      <el-dialog
        width="820px"
        class="dialog-h"
        title="回访记录"
        :close-on-click-modal="false"
        v-if="showFollowUpList"
        :visible.sync="showFollowUpList"
        append-to-body
      >
        <follow-list :id="inspResultId"></follow-list>
      </el-dialog>
    </el-dialog>
    <el-dialog title="调查问卷" :visible.sync="showTduckImage" width="550px">
      <el-image :src="qrCodeImgUrl">
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
      </el-image>
      <div><span>问卷链接：</span> {{ questionnaireUrl }}</div>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
  </div>
</template>
<script>
import { requestPost, requestGet } from "@/js/dai/request";
import { mapGetters } from "vuex";
import * as echarts from "echarts";
import formList from "./formList";
import followList from "./followList";
import followDetail from "./followUpDetail";
import communityDialog from "./communityDialog";

import util from "@js/util.js";

export default {
  components: { formList, followList, followDetail, communityDialog },

  data() {
    return {
      searchH: 20,

      formData: {
        period: "", //月份
      },
      inspRecordId: "",

      multiSelection: [], // 多选结果

      dicts: {
        satisfaction_category: [],
      }, //字典对象

      myChart: {},
      option: {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["满意", "基本满意", "不满意"],
          bottom: "10%",
          icon: "rect",
          itemWidth: 20,
          itemHeight: 5,
          itemGap: 20,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "25%",
          containLabel: true,
        },
        toolbox: {},

        xAxis: {
          type: "category",
          boundaryGap: true,
          axisLine: {
            show: true,
          },
          axisTick: {
            show: false,
          },
          data: [], // 请将yourDataArray替换为您的x轴数据数组
          splitLine: {
            show: true,
            lineStyle: {
              width: 60, // 设置阴影的宽度
              color: "#000",
              opacity: 0,
            },
            // 控制间隔，这里设置为2表示左右两侧有间隔，可以根据需要调整
          },
        },

        yAxis: {
          type: "value",
          name: "单位(个)",
          min: 0,
        },
        series: [
          {
            name: "满意",
            type: "bar",
            data: [],
            barWidth: 16, // 设置柱子宽度
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#2c7cf2" }, // 从顶部开始
                { offset: 1, color: "#80b3ff" }, // 到底部结束
              ]),
            },
          },
          {
            name: "基本满意",
            type: "bar",
            data: [],
            barWidth: 16, // 设置柱子宽度
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#3ca267" }, // 从顶部开始
                { offset: 1, color: "#82cca0" }, // 到底部结束
              ]),
            },
          },
          {
            name: "不满意",
            type: "bar",
            data: [],
            barWidth: 16, // 设置柱子宽度
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#edb42d" }, // 从顶部开始
                { offset: 1, color: "#ffd981" }, // 到底部结束
              ]),
            },
          },
        ],
      },

      satisfactionCategory: [], //类目
      satisfactionCategoryName: [],
      score: [], //得分

      showFormList: false, //自查列表弹框
      showFollowUpDetail: false, //自查列表中查看弹框
      showFollowUpList: false, //回访记录弹框
      showTduckImage: false,

      qrCodeImgUrl: "", //生成二维码图片链接
      questionnaireUrl: "", //问卷调查链接

      synthesisScore: "", //综合得分
      synthesisState: false, //综合得分状态
      synthesisScoreBtLastMonth: null, //综合得分对比上月
      personQty: "", //人数

      inspResultId: "",

      btnFlag: true, //生成调查问卷按钮权限(非社区账号)

      user: {},

      tableList: [],

      total: 0,
      pageNo: 1,
      pageSize:window.localStorage.getItem('pageSize') || 20,
      showCommunitDialog: false,
      communitDialogTitle: "",
      communityId: "",
    };
  },
  computed: {
    maxTableHeight() {
      let num = this.user.level == "street" ? 50 : 0;
      const _h = this.clientHeight - 260 - this.searchH - num;
      return _h;
    },
    tabHeight() {
      const _h = this.clientHeight - 600;
      return _h;
    },
    ...mapGetters(["clientHeight", "iframeHeight"]),
  },
  watch: {},
  async mounted() {
    this.user = this.$store.state.user;
    this.agencyId = this.user.agencyId;
    if (this.user.level != "community") {
      this.btnFlag = false;
    }
    await this.getDicts();
    await this.initData();
    if (this.user.level != "street") {
      this.initEcharts();
    }
  },
  created() {
    let date = new Date();
    this.formData.period = util.formatDate(date, "yyyy-MM");
  },
  activated() {
    // this.handleWindowResize();
  },
  methods: {
    // ------------------------------------字典------------------------------------------
    async getDicts() {
      try {
        const requests = [
          this.$http.post("sys/dict/data/dictlist", {
            dictType: "satisfaction_category",
          }),
        ];
        const dictKeys = ["satisfaction_category"]; // 对应的键名

        const results = await Promise.all(requests);
        results.forEach((result, index) => {
          if (result.data.code === 0) {
            this.dicts[dictKeys[index]].push(...result.data.data);
          } else {
            console.log(`获取${dictKeys[index]}失败: ${result.data.msg}`);
          }
        });
      } catch (error) {
        console.log("获取字典失败: ", error);
      }
    },
    // ------------------------------------事件------------------------------------------
    handelDetail(id) {
      this.showFollowUpDetail = true;
      this.inspResultId = id;
    },
    handelFollowUpList(id) {
      this.showFollowUpList = true;
      this.inspResultId = id;
    },
    async handleCreateMonthlySurvey() {
      try {
        let url =
          "/governance/satisfaction/communitySelfInsp/generateQuestionnaire";
        const { data, code } = await requestPost(url);
        if (code == 0) {
          this.showTduckImage = true;
          this.qrCodeImgUrl = data.qrCodeImgUrl;
          this.questionnaireUrl = data.questionnaireUrl;
        }
      } catch (err) {
        console.log(err);
      }
    },
    initEcharts() {
      this.myChart = echarts.init(document.getElementById("myCharts"));
      this.myChart.setOption(this.option);
      let than = this;
      this.myChart.on("click", function (params) {
        than.handelClickChart(params.name, params.seriesName);
      });
      this.$nextTick(() => {
        window.addEventListener("resize", this.handleWindowResize);
      });
    },
    handleWindowResize() {
      if (this.myChart) {
        this.myChart.resize();
      }
    },
    handelClickChart(name, seriesName) {
      this.showFormList = true;
      this.seriesName =
        seriesName == "满意"
          ? "veryGood"
          : seriesName == "基本满意"
          ? "good"
          : "bad";
    },
    handleClose() {
      this.showFormList = false;
      this.showFollowUpDetail = false;
    },
    // 搜索事件
    handleSearch(val) {
      this.initData();
    },
    async initData() {
      if (this.user.level != "street") {
        this.getCharts();
      } else {
        this.getTableData();
      }
    },
    async getCharts() {
      let url = "/governance/satisfaction/communitySelfInsp/stats/synthesis";
      const { formData } = this;
      const { data, code, msg } = await requestGet(url, { ...formData });
      if (code == 0) {
        this.score = [];
        this.option.series.forEach((series) => (series.data = []));
        this.option.xAxis.data = [];
        this.satisfactionCategory = [];
        this.inspRecordId = data.inspRecordId;
        this.synthesisScore = data.synthesisScore;
        this.synthesisScoreBtLastMonth = data.synthesisScoreBtLastMonth;
        this.synthesisState = this.synthesisScoreBtLastMonth >= 0;
        if (this.synthesisScoreBtLastMonth < 0) {
          this.synthesisScoreBtLastMonth = Math.abs(
            this.synthesisScoreBtLastMonth
          );
        }
        this.personQty = data.personQty;

        const allowedCategories = this.dicts.satisfaction_category.map(
          (item) => item.value
        );
        for (const item of data.categoryDatas) {
          if (allowedCategories.includes(item.satisfactionCategory)) {
            this.option.series[0].data.push(item.veryGoodQty);
            this.option.series[1].data.push(item.goodQty);
            this.option.series[2].data.push(item.badQty);
            this.option.xAxis.data.push(item.satisfactionCategoryName);
            this.satisfactionCategory.push(item.satisfactionCategory);
            this.score.push({
              score: item.score,
              satisfactionCategoryName: item.satisfactionCategoryName,
              imgUrl: require(`@/assets/img/satisfaction/${item.satisfactionCategory}.png`),
              scoreDiffBtLastMonth: item.scoreDiffBtLastMonth,
              state: item.scoreDiffBtLastMonth >= 0,
            });
            if (item.scoreDiffBtLastMonth < 0) {
              item.scoreDiffBtLastMonth = Math.abs(item.scoreDiffBtLastMonth);
            }
          }
        }
        this.myChart.setOption(this.option);
      } else {
        this.$message.error(msg);
      }
    },
    async getTableData() {
      let url =
        "/governance/satisfaction/communitySelfInsp/stats/synthesis/superior";
      const { formData, agencyId } = this;
      const { data, msg, code } = await requestGet(url, {
        ...formData,
        agencyId,
      });
      if (code == 0) {
        this.score = [];
        this.satisfactionCategory = [];
        this.inspRecordId = data.inspRecordId;
        this.synthesisScore = data.synthesisScore;
        this.synthesisScoreBtLastMonth = data.synthesisScoreBtLastMonth;
        this.synthesisState = this.synthesisScoreBtLastMonth >= 0;
        if (this.synthesisScoreBtLastMonth < 0) {
          this.synthesisScoreBtLastMonth = Math.abs(
            this.synthesisScoreBtLastMonth
          );
        }
        this.personQty = data.personQty;

        const allowedCategories = this.dicts.satisfaction_category.map(
          (item) => item.value
        );
        for (const item of data.categoryDatas) {
          if (allowedCategories.includes(item.satisfactionCategory)) {
            this.satisfactionCategory.push(item.satisfactionCategory);
            this.score.push({
              score: item.score,
              satisfactionCategoryName: item.satisfactionCategoryName,
              imgUrl: require(`@/assets/img/satisfaction/${item.satisfactionCategory}.png`),
              scoreDiffBtLastMonth: item.scoreDiffBtLastMonth,
              state: item.scoreDiffBtLastMonth >= 0,
            });
            if (item.scoreDiffBtLastMonth < 0) {
              item.scoreDiffBtLastMonth = Math.abs(item.scoreDiffBtLastMonth);
            }
          }
        }
        this.tableList = data.childrenAgencyDatas;
        this.total = this.tableList.length;
      }
    },
    handleCurrentChange() {
      this.pageNo = val;
      this.getTableData();
    },
    handleSizeChange() {
      this.pageSize = val;
      window.localStorage.setItem("pageSize", val);
      this.getTableData();
    },
    //   重置
    resetSearch() {
      this.formData = {};
      this.initData();
    },
    handleView(row) {
      this.communityId = row.agencyId;
      this.showCommunitDialog = true;
      this.communitDialogTitle = `${row.agencyName}满意度自查详情`;
    },
  },

  props: {},
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/buttonstyle.scss";
@import "@/assets/scss/modules/management/list-main.scss";
@import "@/assets/scss/modules/shequzhili/event-info.scss";

.div_btn_left > * {
  margin-right: 10px;
}

.m-table-item {
  display: flex;
  flex-direction: column;
}

.content_box {
  display: flex;
  height: 160px;
  margin-top: 24px;

  .left {
    background: #f7faff;
    margin-right: 10px;
    min-width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    img {
      margin-right: 8px;
    }
  }

  img {
    width: 50px;
    height: 50px;
    margin-right: 15px;
  }

  .left_right,
  .right_right {
    display: flex;
    flex-direction: column;
    flex: 1;
    :nth-child(1) {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
    }

    :nth-child(2) {
      font-size: 14px;
      font-family: PingFang SC;
      color: #666666;
    }
  }
  .right_box {
    img {
      margin: 0;
      width: 10px;
      height: 14px;
    }
  }
  .right {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    .box {
      height: 75px;
      margin: 0 10px 10px 0;

      .card {
        background: #f7faff;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        border-radius: 5px;
        padding: 20px;
        box-sizing: border-box;
      }
    }
  }
}

#myCharts {
  width: 100%;
  height: 100%;
}
.bto-box {
  flex: 1;
}
.down {
  color: #ff7135;
}
.up {
  color: #00bb72;
}
.gray {
  color: #999999;
}
</style>
    
    