<template>
  <div class="module-corner row zhjt-caseAnalysis" style="margin:0;">
    <div>
      <div class="col-30" v-for="(value,index) in caseAnalysis" :key="index">
        <LitterTitle :title="value.title" />
        <div style="margin: 0 1% 0 3%;">
          <div :id="'publicSafety-caseAnalysis-box'+(index+1)">
            <EchartLineNoY
              :id="value.data.id"
              :width="value.data.width"
              :height="value.data.height"
              :legend="value.data.legend"
              :xAxisData="value.data.xAxisData"
              :yAxisData="value.data.yAxisData"
            />
          </div>
        </div>
      </div>
    </div>
    <Corner2 />
  </div>
</template>
<script>
import Corner2 from '@/components/Corner2'
import LitterTitle from '@/components/title/LitterTitle'
import EchartLineNoY from '@/components/echart/EchartLineNoY'
export default {
  components: {
    Corner2,
    LitterTitle,
    EchartLineNoY
  },
  data () {
    return {
      color: ['213,50,35', '3,179,177', '216,50,218', '242,92,33', '33,140,254', '28,254,0', '3,179,177'],
      caseAnalysis: [
        {
          title: '刑事案件',
          data: {
            id: 'echart-caseAnalysis1',
            width: 0,
            height: 0,
            xAxisData: ['9.24', '9.24', '9.24', '9.24', '9.24', '9.24', '9.24'],
            yAxisData: [
              {name: '刑事案件', data: [855, 1078, 856, 865, 990, 782, 1210], color: '213,50,35'}
            ]
          }
        },
        {
          title: '民事纠纷事件',
          data: {
            id: 'echart-caseAnalysis2',
            width: 0,
            height: 0,
            xAxisData: ['9.24', '9.24', '9.24', '9.24', '9.24', '9.24', '9.24'],
            yAxisData: [
              {name: '民事纠纷事件', data: [855, 1078, 856, 865, 990, 782, 1210], color: '3,179,177'}

            ]
          }
        },
        {
          title: '聚众群体事件',
          data: {
            id: 'echart-caseAnalysis3',
            width: 0,
            height: 0,
            xAxisData: ['9.24', '9.24', '9.24', '9.24', '9.24', '9.24', '9.24'],
            yAxisData: [
              {name: '聚众群体事件', data: [855, 1078, 856, 865, 990, 782, 1210], color: '216,50,218'}

            ]
          }
        }
      ]
    }
  },
  mounted () {
    this.caseAnalysis.forEach((item, index) => {
      this.callEchart('publicSafety-caseAnalysis-box' + (index + 1), this.caseAnalysis[index].data, 2.3)
    })
    this.getCaseAnalysis()
  },
  methods: {
    // 获取数据分析
    getCaseAnalysis () {
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1092'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        let xAxisData = []
        let data = [
          {title: '刑事案件', data: []},
          {title: '民事纠纷事件', data: []},
          {title: '聚众群体事件', data: []},
          {title: '黄赌毒事件', data: []},
          {title: '消防事件', data: []},
          {title: '突发应急事件', data: []}
          // {title:'治安事件', data:[]},
        ]
        for (let i = 0; i < res.data.length; i++) {
          xAxisData.push(res.data[i].SJ)
          data[0].data.push(res.data[i].XS)
          data[1].data.push(res.data[i].MS)
          data[2].data.push(res.data[i].QZ)
          data[3].data.push(res.data[i].HDD)
          data[4].data.push(res.data[i].XF)
          data[5].data.push(res.data[i].TF)
          // data[6].data.push(res.data[i].ZA)
        };
        this.caseAnalysis = []
        data.forEach((item, index) => {
          this.caseAnalysis.push(
            {
              title: item.title,
              data: {
                id: 'publicSafety-caseAnalysis' + (index + 1),
                width: 0,
                height: 0,
                xAxisData: xAxisData,
                yAxisData: [
                  {name: '总数量', data: item.data, color: this.color[index]}
                ]
              }
            }
          )
        })
        setTimeout(() => {
          data.forEach((item, index) => {
            this.callEchart('publicSafety-caseAnalysis-box' + (index + 1), this.caseAnalysis[index].data, 2.3)
          })
        }, 100)
      })
    },
    callEchart (idBox, data, offset) {
      const _width = document.getElementById(idBox).clientWidth
      this.$set(data, 'width', _width)
      this.$set(data, 'height', _width / offset)
    }
  }
}
</script>

<style scoped>
.row{
  width: 100%;
  overflow: hidden;
  margin: 0.07rem 0;
}
.col-30{
  width: 33%;
  float: left;
}
.zhjt-caseAnalysis{
  padding: .05rem .02rem;
}
</style>
<style>
.zhjt-caseAnalysis .litter-title img{
  height: .05rem;
  margin-top: .02rem;
}
</style>