<template>
  <div class="m-jdjs">
    <div class="m-jdjs-js">
      <div class="m-table">
        <table class="table" border="0" cellspacing="0" cellpadding="0">
          <col :align="item.align" :width="item.width" :key="'col' + index" v-for="(item, index) in colList" />
          <thead>
            <tr class="table-header">
              <th class="table-header-th" v-for="item in header" :key="item">
                {{ item }}
              </th>
            </tr>
          </thead>
        </table>
        <el-scrollbar :style="{maxHeight:treeHeight}" class="g-scrollar">
          <table class="table" border="0" cellspacing="0" cellpadding="0">
            <col :align="item.align" :width="item.width" :key="'col' + index" v-for="(item, index) in colList" />
            <tbody  class="table-body" style="width: 1886px;">
              <!-- <tr class="table-body-tr">
                <td class="td">
                  报警时间
                </td>
                <td class="td">
                  报警类型
                </td>
                <td class="td">
                  报警状态
                </td>
                <td class="td">
                 设备位置
                </td>
                <td class="td">
                 操作</td>
              </tr> -->
              <tr class="table-body-tr" v-for="(item, index) in list" :key="index" >
                <td class="td">
                  <div>{{ item.date }}</div>
                </td>
                <td class="td">
                  <div>{{ item.baoxiu }}</div>
                </td>
                <td class="td">
                  <div>{{ item.type }}</div>
                </td>
                <td class="td">
                  <div>{{ item.address }}</div>
                </td>
                <td class="table-header-th" style="color: #007FF1;">
                 <div  @click="getWaring(item)">查看</div>  </td>

              </tr>
            </tbody>
            <!-- 	</div> -->
          </table>
        </el-scrollbar>
        <!-- <el-table :data="tableData" stripe style="width: 428px">
                    <el-table-column prop="date" label="日期">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                    <el-table-column  label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table> -->
      </div>

      <!-- <video src="../image/123.mp4" />
          <video src="../image/123.mp4" />
          <video src="../image/123.mp4" />
          <video src="../image/123.mp4" /> -->
    </div>
    <warning :showInfo="showInfo" :warnItem="warnItem" @close="close" @handleCancle="showInfo = false"></warning>
  </div>
</template>
  <script>
  import warning from "@/views/dataBoard/IoTPerception/more/warning.vue";
import {    mapGetters} from "vuex";
import titleSmall from "@/views/dataBoard/satisfactionEval/components/Title/titleSmall.vue";
  import * as echarts from "echarts";
  import resiCategoryMap from "@/views/business/resi-category-map.js";
  import {requestPost} from "@/js/dai/request";

  export default {
    name: "jdjs",
    props: {
      currentLevelData: {
        type: Object,
        default: {},
      },
    },
    data() {
      return {
        colList: [
				{
					align: "left",
					width: "20%",
				},
                {
					align: "left",
					width: "20%",
				},
				{
					align: "left",
					width: "20%",
				},
				{
					align: "left",
					width: "25%",
				},
				{
					align: "left",
					width: "15%",
				},
			
			],
			header: [
				"保修时间",
				"保修类型",
				"报警状态",
        "设备位置",
				"操作",
			],
        list: [],
        equipmentListType: [],
        equipmentType: '',
        orgId: this.$store.state.chooseArea.chooseName,
        report: "",
        overview: "",
        loading: false,
        rffxDate:'',
        event12345Num:"",
        provinceSatisfactionNum:"",
        selfInspectNum:"",
        typeConditionList: [
          {
            label: "本月",
            value: 1,
          },
          {
            label: "上月",
            value: 2,
          },
          {
            label: "近三月",
            value: 3,
          },
          {
            label: "近半年",
            value: 4,
          },
          {
            label: "近一年",
            value: 5,
          },
        ],
        typeCondition:5,
        endTime:"",
         startTime:"",
        showInfo:false,
        warnItem:{},
      };
    },
    watch: {
      currentLevelData(val) {
        if (val.orgId) {
          this.getReport(val);
          this.getData();
          this.getChartData(val);
        }
      },
    },
    computed: {
			treeHeight() {
				return this.$store.state.inIframe ? this.clientHeight - 385 + this.iframeHeight + "px" : this
					.clientHeight - 385 + "px";
			},
			treeWidth() {
				return document.documentElement.clientWidth;
			},
			...mapGetters(["clientHeight", "iframeHeight"]),
		},
    mounted() {
        this.getList()
    },
    components: {
      titleSmall,warning
    },
    methods: {
      async getList(){
        let {data,code} = await requestPost('/actual/base/equipmentInspectRecord/page',{agencyId:this.$store.state.user.agencyId})
        if(code === 0){
          this.list = data.list.map(item=>({date:item.inspectTime,baoxiu:item.inspectName,type:item.status,address:'东明社区160号',inspectCode:item.inspectCode?item.inspectCode:'',id:item.id}))
        }
      },
      close(){this.showInfo=false},
      getWaring(item){

        this.warnItem = item;
        
        this.showInfo=true
        
      },

      getReport({ orgId, orgLevel }) {
        this.$http
          .get(
            "/actual/base/streetOverview/communityOverview?orgId=" +
              orgId +
              "&level=" +
              orgLevel
          )
          .then(({ data: { data } }) => {
            this.overview = data;
          });
        this.$http
          .get(
            "/actual/base/streetOverview/summaryReport?orgId=" +
              orgId +
              "&level=" +
              orgLevel
          )
          .then(({ data: { data } }) => {
            this.report = data;
          });
      },
      getChartData({ orgId, orgLevel }) {
        this.loading = true
        this.$http.get('/actual/base/resiCategory/categoryCountList?orgId=' +
              orgId +
              "&level=" +
              orgLevel
          ).then(({data: {data}}) => {
          this.initCharts(data)
        })
      },
      initCharts(data) {
        let div = document.getElementById('zdgz');
        this.myChart = echarts.init(div);
       let chartData =  data.categoryList.map((item) => {
              return {
                name: resiCategoryMap[item.categoryName] || "",
                count: item.categoryCount,
              };
        }).slice(0,8);
        let xData = chartData.map(item=>item.name);
        let yData = chartData.map(item=>item.count)
        let color = [[
          {
            offset: 0,
            color: 'rgba(0, 84, 255, 0)' // 0% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(38, 244, 248, 1)' // 100% 处的颜色
          }
        ]]
        let num = yData
        const max = Math.max(...num)
        let barArray = new Array(xData.length).fill((parseInt(max / 100) + 1) * 100)
        var option = {
          title: {
            show: false,
            text: '',
            x: 'center',
            top: '18px',
            textStyle: {
              color: '#333333',
              fontWeight: 500,
              fontSize: 12,
            },
          },
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(13,33,71,0.5)',
            borderColor: 'rgba(143,174,252,0.6)',
            padding: 8,
            textStyle: {
              color: '#fff',
            },
            formatter: function (params) {
              var res = '<div"><p>' + params[0].name + '：'+params[0].value + '</p></div>'
              return res;
            },
          },
  /*        dataZoom: [
            {
              "type": "slider",
              "start": 0,
              "end": parseInt((5 / xData.length) * 10) / 10 * 100,
              "height": 10,
              "bottom": 0,
              "showDetail": false,
              "showDataShadow": false,
              "borderColor": "transparent"
            }
          ],*/
          grid: {
            top: '18%',
            left: '2%',
            right: '4%',
            bottom: '8%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisLine: {
                lineStyle: {
                  color: '#323c41'
                }
              },
              axisLabel: {
                align: 'center',
                interval: 0,
                textStyle: {
                  fontSize: 12,
                  color: '#A3B9DA'
                }
              },
              boundaryGap: true,
              data: xData,
            }, {
              type: 'category',
              data: xData,
              axisLine: {show: false},
              axisLabel: {
                show: false,
              },
              boundaryGap: true,
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '单位：人',
              nameLocation: 'end',
              splitLine: {
                show: true,
                lineStyle: {
                  color: 'rgba(4,187,255,0.18)',
                  type: 'dashed'
                },
              },
              nameTextStyle: {
                color: '#A3B9DA',
                textStyle: {
                  fontSize: 12
                },
                align: 'right',
                padding: [0, 5, -5, 5],
              },
              axisLabel: {
                show: true,
                color: '#A3B9DA',
                textStyle: {
                  fontSize: 12
                },
              },
              axisTick: {
                show: false
              }
            }
          ],
          series: [
          {
            name: "",
            type: 'bar',
            barWidth: 20,
            itemStyle: {
              opacity: 1,
              color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  color[0],
                  false
              )
            },
            data: yData,
          },
            {
              name: '',
              type: 'bar',
              barWidth: 40,
              barGap: '-60%',
              data: barArray,
              itemStyle: {
                normal: {
                  color: 'rgba(22,153,152, 0.1)'
                }
              },
              zlevel: -1,
              xAxisIndex: 1,
            }
          ],
        };
        this.myChart.setOption(option);
        window.addEventListener("resize", () => this.myChart.resize());
        this.loading = false
      },
      getData() {
        this.loading = true;
        let {startTime,endTime } = this
        let params = {
          level: this.currentLevelData.orgLevel,
          orgId: this.currentLevelData.orgId,
          startTime,
          endTime,
        };
        this.$http
          .get(
            "/governance/satisfactionOverview/satisfactionFollowGroup?" +
              this.$paramsFormat(params)
          )
          .then(({ data: { data } }) => {
            this.event12345Num = data.event12345Num;
            this.provinceSatisfactionNum = data.provinceSatisfactionNum;
            this.selfInspectNum = data.selfInspectNum;
            this.loading = false;
          });
      },
      timeChange() {
        let startTime = "",
          endTime = "";
        if (this.typeCondition === 1) {
          startTime = this.$moment().startOf("month").format("YYYY-MM-DD");
        }
        if (this.typeCondition === 2) {
          startTime = this.$moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD");
        }
        if (this.typeCondition === 3) {
          startTime = this.$moment().subtract(2, "months").startOf("month").format("YYYY-MM-DD");
        }
        if (this.typeCondition === 4) {
          startTime = this.$moment().subtract(5, "months").startOf("month").format("YYYY-MM-DD");
        }
        if (this.typeCondition === 5) {
          startTime = this.$moment().subtract(11, "months").startOf("month").format("YYYY-MM-DD");
        }
        if (this.typeCondition === 2) {
          endTime = this.$moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD");
        } else {
          endTime = this.$moment().endOf("month").format("YYYY-MM-DD");
        }
        this.startTime = startTime;
        this.endTime = endTime;
        this.getData();
      },
    },
  };
  </script>
  <style lang="scss" src="./index.scss" scoped />
  <style lang="scss" scoped>
  .el-table .thead{
    color: #c0c4cd !important;
    background: #0d2b57 !important;
   }
  /deep/ .el-input__inner {
      width: 110px !important;
      height: 32px !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;
    }
  .f-hflex{
    width: 100px;
  }
  .f-flex{
    margin-top: 20px;
  }
  .f-darkGray{
    margin-top: 10px;
  }
  .event-statistics {
    margin-bottom: 27px;
  }
  .m-table {
		margin-top: 5px;
		// overflow: hidden;
		min-height: 200px;
		.table {
			box-sizing: border-box;
			width: 100%;
			border: none;
			table-layout: fixed;
			&-header {
				width: 100%;
				// height: 56px;
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.65);
				line-height: 20px;
				&-th {
					text-align: left;
					border: none;
					padding: 10px 5px 10px 24px;
					// width: calc(100% / 5);
				}
			}
			&-body {
				box-sizing: border-box;
				width: 100%;
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				line-height: 20px;
				&-tr {
					box-sizing: border-box;
					width: 100%;
					min-height: 56px;
					.td {
						box-sizing: border-box;
						text-align: left;
						border: none;
						padding: 18px 5px 18px 24px;
						>div {
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							word-wrap: normal;
						}
						a {
							font-size: 14px;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #1a95ff;
							line-height: 20px;
							cursor: pointer;
						}
					}
				}
				&-tr:nth-child(2n-1) {
					background: rgba(26, 149, 255, 0.15);
				}
				// &-tr:hover {
				//   background: url("../../../../assets/img/modules/visual/hover-bac.png")
				//     no-repeat center;
				//   background-size: 100% 100%;
				// }
			}
			/deep/ .el-scrollbar__wrap {
				width: 100% !important;
				// overflow-x: hidden !important;
			}
		}
		.g-scrollar {
			width: 100%;
			// overflow-x: hidden;
			overflow-y: auto;
		}
		.orange {
			color: #FFAA00
		}
		.green {
			color: #04C790
		}
		.table-status {
			position: relative;
			height: 300px;
			// 暂无数据
			.no-data {
				&-img {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					width: 120px;
				}
			}
		}
	}
  </style>
  