<template>
  <div class="satisfaction-eval">
    <el-row :gutter="20">
      <el-col :span="8" class="bgImg">
        <Title text="12345数据分析" />
        <eventAnalysis/>
      </el-col>
      <el-col :span="8" >
        <!-- <EventSituation /> -->
        <div class=" bgImg">
          <Title text="不满意事项类型分析">
            <div class="more" @click="goToPage(`/dataBoard/satisfactionEval/dissatisfied/${index}/${type}/${time}`)">查看详细 <i class="el-icon-arrow-right"></i></div>
          </Title>
          <TypesOfDissatisfaction @timeChange="timeChange" />
        </div>
        <div class="bgImg">
          <Title text="不满意事项及满意度自查走势" />
          <SelfTrend />
        </div>
        <div class="bgImg">
          <Title text="下级组织不满意事项统计" />
          <EventStatistics :date="typeDate" />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="bgImg">
          <Title text="不满意人员画像" />
          <PersonnelPortrait />
        </div>

        <div class="bgImg">
          <Title text="潜在不满意人数" />
          <PotentialPeople :date="typeDate" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TypesOfDissatisfaction from "./modules/TypesOfDissatisfaction";
import RiskStatistics from "./modules/RiskStatistics";
import Title from "@/views/dataBoard/satisfactionEval/components/Title";
import EventSituation from "@/views/dataBoard/satisfactionEval/modules/EventSituation";
import SelfTrend from "@/views/dataBoard/satisfactionEval/modules/SelfTrend";
import EventStatistics from "@/views/dataBoard/satisfactionEval/modules/EventStatistics";
import PersonnelPortrait from "@/views/dataBoard/satisfactionEval/modules/PersonnelPortrait";
import PotentialPeople from "@/views/dataBoard/satisfactionEval/modules/PotentialPeople";
import eventAnalysis from "@/views/dataBoard/satisfactionEval/modules/eventAnalysis";


export default {
  name: "satisfactionEvaluation",
  components: {
    EventStatistics,
    SelfTrend,
    EventSituation,
    TypesOfDissatisfaction,
    RiskStatistics,
    Title,
    PersonnelPortrait,
    PotentialPeople,
    eventAnalysis
  },
  data() {
    return {
      typeDate: {},
      index: 0,
      type: 0,
      time: 0,
    };
  },
  methods: {
    goToPage(url) {
      this.$router.push(url);
    },
    timeChange(date) {
      this.typeDate = date;
    },
  },
};
</script>
<style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped />

<style scoped lang="scss">
/deep/ .el-input__inner {
    width: 90px !important;
    height: 24px !important;
    background: #021c49 !important;
    border: 1px solid #125aaa !important;
    border-radius: 12px !important;
    color: #a0cdff;
  }

  /deep/ .el-input__icon {
    line-height: 24px !important;
    color: #a0cdff;
  }

.more {
  font-size: 14px;
  font-weight: 400;
  color: #a0cdff;
  cursor: pointer;
}
.bgImg{
  background: url('@/assets/images/shuju/overview/box-bg.png') no-repeat;
	background-size: 100% 100%;
	margin-top: 5px;
}

</style>
