<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-input
                v-model="formData.name"
                placeholder="请输入"
                size="small"
                class="u-item-width-normal"
                clearable
              ></el-input>
            </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">
            <el-button
              type="primary"
              size="small"
              class="diy-button--white el-button--default"
              >生成本月社区自查问卷表</el-button
            >
          </div>
          <div   class="m-table-item" :style="{ height: maxTableHeight + 'px', width: '100%' }">
            <div>本月已参与调研人数 500人</div>
            <section class="content_box">
                <div class="left">
                    <img src="../../../../assets/img/satisfaction/zhdf.png"  alt="Image">
                    <div class="left_right">
                        <div>85.12</div>
                        <div>综合得分</div>
                    </div>
                </div>
                <div class="right">
                    <div class="box">
                        <div class="card">
                        <img src="../../../../assets/img/satisfaction/zhdf.png"  alt="Image">
                        <div class="right_right">
                            <div>85.12</div>
                            <div>综合得分</div>
                        </div>
                         </div>
                    </div>
                    <div class="box">
                        <div class="card">
                        <img src="../../../../assets/img/satisfaction/zhdf.png"  alt="Image">
                        <div class="right_right">
                            <div>85.12</div>
                            <div>综合得分</div>
                        </div>
                         </div>
                    </div>

                    <div class="box">
                        <div class="card">
                        <img src="../../../../assets/img/satisfaction/zhdf.png"  alt="Image">
                        <div class="right_right">
                            <div>85.12</div>
                            <div>综合得分</div>
                        </div>
                         </div>
                    </div>
                    <div class="box">
                        <div class="card">
                        <img src="../../../../assets/img/satisfaction/zhdf.png"  alt="Image">
                        <div class="right_right">
                            <div>85.12</div>
                            <div>综合得分</div>
                        </div>
                         </div>
                    </div>
                    <div class="box">
                        <div class="card">
                        <img src="../../../../assets/img/satisfaction/zhdf.png"  alt="Image">
                        <div class="right_right">
                            <div>85.12</div>
                            <div>综合得分</div>
                        </div>
                         </div>
                    </div>
                    <div class="box">
                        <div class="card">
                        <img src="../../../../assets/img/satisfaction/zhdf.png"  alt="Image">
                        <div class="right_right">
                            <div>85.12</div>
                            <div>综合得分</div>
                        </div>
                         </div>
                    </div>
                    <div class="box">
                        <div class="card">
                        <img src="../../../../assets/img/satisfaction/zhdf.png"  alt="Image">
                        <div class="right_right">
                            <div>85.12</div>
                            <div>综合得分</div>
                        </div>
                         </div>
                    </div>
                    <div class="box">
                        <div class="card">
                        <img src="../../../../assets/img/satisfaction/zhdf.png"  alt="Image">
                        <div class="right_right">
                            <div>85.12</div>
                            <div>综合得分</div>
                        </div>
                         </div>
                    </div>
                </div>
            </section>
            <div id="myCharts" ></div>
         </div>
          <div>
            <!-- <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="pageNo"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="parseInt(pageSize)"
              layout="sizes, prev, pager, next, total"
              :total="total"
            >
            </el-pagination> -->
          </div>
        </div>
      </div>
      <!-- <el-dialog
        v-if="showAdd"
        :visible.sync="showAdd"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :title="addDiaTitle"
        :modal-append-to-body="false"
        width="720px"
        top="5vh"
        class="dialog-h"
        @closed="showAdd = false"
      >
        <add-form
          ref="ref_add_form"
          @handleComfirm="handleComfirm"
          @handleClose="handleClose"
        ></add-form>
      </el-dialog> -->
    </div>
  </template>
    
      <script>
  import { requestPost } from "@/js/dai/request";
  import nextTick from "dai-js/tools/nextTick";
  import { mapGetters } from "vuex";
  import axios from "axios";
  import * as echarts from 'echarts'
//   import addForm from "./addForm";
  
  export default {
    components: {  },
  
    data() {
      return {
        searchH: 20,
        formData: {
            name: "",
            idNum: "",
            gender: "",
            birthdayStart: "",
            birthdayEnd: "",
            cultureLevel: "",
            postType: "",
            hireDateFrom: "",
            hireDateEnd: ""
        },
      
        multiSelection: [], // 多选结果
        importLoading: false,
  
        dicts: {
          educationList: [],
          nationList: [],
          public_welfare_post_type:[]
        }, //字典对象

        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, 
                data: ['文化设施', '体育设施', '生态环境', '社会治安', '社会救助', '老有所养', '基础教育','病有所医'],
            },
            yAxis: {
                type: 'value',
                scale: true,
                name: '单位(个)',
            },
            series: [
                {
                    name: '满意',
                    type: 'bar',
                    data: [120, 132, 101, 134, 90, 230, 210, 210],
                    barWidth: 16, // 设置柱子宽度
                    barCategoryGap: 0, // 设置柱子间的间隔为0
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: '#2c7cf2' }, // 从顶部开始
                                { offset: 1, color: '#80b3ff' } // 到底部结束
                            ]
                        )
                    },
                    showBackground: true,
                    backgroundStyle: {
                        color: '#fafbfc',
                        opacity:"0.5"
                    }
                },
                {
                    name: '基本满意',
                    type: 'bar',
                    data: [220, 182, 191, 234, 290, 330, 310,210],
                    barWidth: 16,  // 设置柱子宽度
                    barCategoryGap: 0,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#3ca267'}, // 从顶部开始
                                {offset: 1, color: '#82cca0'}   // 到底部结束
                            ]
                        )
                    },
                    showBackground: true,
                    backgroundStyle: {
                            color: '#fafbfc',
                            opacity:"0.5"
                    }
                },
                {
                    name: '不满意',
                    type: 'bar',
                    data: [150, 232, 201, 154, 190, 330, 410,210],
                    barWidth: 16,  // 设置柱子宽度
                    barCategoryGap: 0,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#edb42d'}, // 从顶部开始
                                {offset: 1, color: '#ffd981'}   // 到底部结束
                            ]
                        )
                    },
                    showBackground: true,
                    backgroundStyle: {
                            color: '#fafbfc',
                            opacity:"0.5"
                    }
                }
            ]
}

      };
    },

    computed: {
      maxTableHeight() {
        const h = this.clientHeight - this.searchH - 330 + this.iframeHeight;
        const _h = this.clientHeight - 330 - this.searchH;
        return this.$store.state.inIframe ? h : _h;
      },
      ...mapGetters(["clientHeight", "iframeHeight"]),
    },
    watch: {},
    async created() {
      await this.getDicts();
    },
    mounted() {
      this.user = this.$store.state.user;
      this.agencyId = this.user.agencyId;
      this.getTableData();
      this.$nextTick(()=>{
        this.initEcharts()
      })
    },
    methods: {
      // --------------------------------------字典------------------------------------------
      async getDicts() {
        try {
          const requests = [
            this.$http.post("sys/dict/data/nation", {
              formCode: "resi_base_info",
            }),
            this.$http.post("sys/dict/data/education", {
              formCode: "resi_base_info",
            }),
            this.$http.post("sys/dict/data/education", {
              formCode: "public_welfare_post_type",
            }),
            
          ];
          const dictKeys = ["nationList", "educationList",'public_welfare_post_type']; // 对应的键名
  
          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);
        }
      },
  
      binaryText(value){
         let text = ''
         text = this.binaryOptionList.filter(item=>item.value == value)[0].label
         return text || "--"
      },
      // ------------------------------------事件------------------------------------------
      checkNumberInput(){
          if (isNaN(this.formData.retirementAmount)) {
          this.$message.error('请输入数字');
          this.formData.retirementAmount = '';
          } else {
          this.formData.retirementAmount = parseFloat(this.formData.retirementAmount);
          }
      },
      initEcharts(){
        this.myChart = echarts.init(document.getElementById('myCharts'));
        this.myChart.setOption(this.option)
        window.addEventListener('resize', this.handleWindowResize);

      },
      handleWindowResize () {
      if (this.myChart) {
        console.log(this.myChart);
        this.myChart.resize();
      }
    },
      // 搜索事件
      handleSearch(val) {
        console.log(this.formData);
        this.pageNo = 1;
        this.getTableData();
      },
  
     
      //   查看详情触发事件
      async handleDetail(row) {
        this.addDiaTitle = "详情";
        this.formType = "detail";
        this.showAdd = true;
        this.$nextTick(() => {
          this.$refs.ref_add_form.initForm("detail", row);
        });
      },
  
      //   获取列表
      async getTableData() {
        this.tableLoading = true;
        const url = "/actual/base/resiCategorized/publicWelfarePost/page";
  
        const { pageSize, pageNo, formData } = this;
        const { data, code, msg } = await requestPost(url, {
          pageSize,
          pageNo,
          ...formData,
        });
        this.tableLoading = false;
        if (code === 0) {
          this.total = data.total || 0;
          this.tableData = data.list;
        } else {
          this.$message.error(msg);
        }
      },
   
      //   重置
      resetSearch() {
        this.formData = {};
  
        this.pageNo = 1;
        this.getTableData();
      },
    },
  
    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;
         img{
            margin-right: 8px;
         }
         .left_right{
            display: flex;
            flex-direction: column;
         }
    }
    img{
        width: 50px;
        height: 50px;
        margin-right: 15px;

    }
    .right{
        flex:1;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        .box{
            height: 75px;
            width: 24%;
            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;
            .right_right{
                display: flex;
                flex-direction: column; 
            }
        }
        }
    }
  }
  #myCharts{
    width: 100%;
    flex: 1;
  }
  </style>
    
    