<template>
  <el-card shadow="never" id="chartCard">
    <el-row id="conditionArea" v-if="conditions.length > 0">
      <div class="conditiondiv" v-for="cond in conditions" :key="cond.field">
        <div v-if="cond.defaultType == '1'">
          <span>{{ cond.comment }}</span>
          <el-input
            v-if="cond.dbType != 'date'"
            size="mini"
            style="width:160px;padding-right: 0;"
            clearable
            :placeholder="'请输入' + cond.comment"
            prefix-icon="el-icon-search"
            v-model="conditionValue[cond.field]"
            @keyup.enter.native="searchEnterFun"
          ></el-input>

          <el-date-picker
            v-if="cond.dbType == 'date' && cond.condition == 'BETWEEN'"
            v-model="conditionValue[cond.field]"
            type="datetimerange"
            align="right"
            size="mini"
            start-placeholder="开始日期"
            end-placeholder="截止日期"
            :default-time="['00:00:00', '23:59:59']"
          ></el-date-picker>

          <el-date-picker
            v-if="cond.dbType == 'date' && cond.condition != 'BETWEEN'"
            size="mini"
            v-model="conditionValue[cond.field]"
            type="datetime"
            style="width:160px;"
            placeholder="选择日期"
          ></el-date-picker>
        </div>
      </div>

      <div
        class="conditiondiv"
        style="text-align: center;float: right;width:230px;"
      >
        <el-button
          size="mini"
          type="primary"
          icon="el-icon-search"
          @click="search"
          >查询</el-button
        >
        <el-button size="mini" icon="el-icon-refresh" @click="reset"
          >重置</el-button
        >
      </div>
    </el-row>

    <el-tabs type="card" style="margin-top:10px">
      <el-tab-pane label="查看图表">
        <div
          id="chartDiv"
          style="width:100%;float:left; margin-left: 0px;"
        ></div>
      </el-tab-pane>
      <el-tab-pane label="查看数据">
        <el-table
          :data="chartData.rows"
          id="chartDataTable"
          style="width: 100%;overflow: auto"
          header-cell-class-name="todo-header-row"
          row-class-name="todo-row"
          size="small"
          v-loading="fullscreenLoading"
        >
          <el-table-column
            type="index"
            width="80"
            align="center"
            label="序号"
          ></el-table-column>
          <el-table-column
            :label="showF.comment"
            :key="showF.field"
            v-for="showF in showFiled"
          >
            <template slot-scope="scope">
              <span class="todo-subject">{{ getValue(scope.row, showF) }}</span>
            </template>
          </el-table-column>
        </el-table>

        <el-row type="flex" justify="end" style="margin: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
          ></el-pagination>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>
<script>
import {mapState} from 'vuex'
import utils from '@/utils.js'

export default {
  props: ['id'],
  data() {
    return {
      queryOpTransObj: {
        EQ: 'equal',
        BETWEEN: 'between',
        GE: 'great_equal',
        LE: 'less_equal',
        LK: 'like',
        IN: 'in'
      },
      fullscreenLoading: false,
      dialogVisible: false,
      customChart: '',
      conditions: [],
      showFiled: [],
      pagination: {page: 1, pageSize: 20, showTotal: true},
      chartData: {},
      conditionValue: {}
    }
  },
  created() {
    let this_ = this
    this.$store.dispatch('form/getCustomChart', this.id).then(function(data) {
      if (data) {
        data.conditionfield = JSON.parse(data.conditionfield)
        data.displayfield = JSON.parse(data.displayfield)
        data.xaxisField = JSON.parse(data.xaxisField)
        data.sortfield = JSON.parse(data.sortfield)
        for (var i = 0, c; (c = data.conditionfield[i++]); ) {
          c.condition = this_.queryOpTransObj[c.condition].toUpperCase()
        }
        this_.conditions = data.conditionfield
        this_.customChart = data
        this_.showFiled = JSON.parse(
          JSON.stringify(
            this_.customChart.xaxisField.concat(this_.customChart.displayfield)
          )
        )
        setTimeout(function() {
          var chartHeight = document.getElementById('chartCard').offsetHeight
          var selectArea =
            document.getElementById('conditionArea') &&
            document.getElementById('conditionArea').offsetHeight
              ? document.getElementById('conditionArea').offsetHeight
              : 0
          document.getElementById('chartDiv').style.height =
            chartHeight - selectArea - 65 + 'px'
          document.getElementById('chartDataTable').style.height =
            chartHeight - selectArea - 95 + 'px'
          this_.search()
        }, 20)
      }
    })
  },
  methods: {
    buildQuerys() {
      let queryFilter = {pageBean: this.pagination, querys: [], sorter: []}
      for (var i = 0, c; (c = this.conditions[i++]); ) {
        let queryValue = ''
        if (c.defaultType != '1' && c.defaultValue) {
          queryValue = c.defaultValue
        } else if (c.defaultType == '1' && this.conditionValue[c.field]) {
          queryValue = this.conditionValue[c.field]
        }
        if (queryValue) {
          queryFilter.querys.push({
            property: c.field,
            operation: c.condition,
            value: queryValue
          })
        }
      }

      for (var i = 0, s; (s = this.customChart.sortfield[i++]); ) {
        queryFilter.sorter.push({
          property: s.field,
          direction: s.sortType.toUpperCase()
        })
      }
      return queryFilter
    },
    getValue(r, s) {
      var value = r[s.field.toUpperCase()]
      if (s.dbType == 'date') {
        var filter = this.$options.filters['dateformat']
        value = filter(value, 'YYYY-MM-DD HH:mm:ss')
      }
      return value
    },
    //重置
    reset() {
      this.conditionValue = {}
      this.search()
    },
    handleSizeChange: function(size) {
      //每页下拉显示数据
      this.pagination.pageSize = size
      this.search()
    },
    handleCurrentChange: function(currentPage) {
      //点击第几页
      this.pagination.page = currentPage
      this.search()
    },

    //查询
    search() {
      let queryFilter = this.buildQuerys() //查询条件
      let param = {id: this.id, filter: queryFilter}
      let this_ = this
      this.$store.dispatch('form/getChartData', param).then(function(data) {
        if (data) {
          this_.chartData = data
          this_.pagination = {
            pageSize: data.pageSize,
            page: data.page,
            total: data.total
          }
          this_.buildChart(data.rows)
        }
      })
    },
    //根据自定义图表的相关设置以及数据生产图表
    buildChart(data) {
      const echarts = require('echarts')
      var myChart = echarts.init(document.getElementById('chartDiv'))
      this.$root.$on('resize', () => {
        myChart.resize() //监测图表自适应
      })
      myChart.clear()
      var displayfield = this.customChart.displayfield
      var legendData = []
      var xAxisData = []
      var seriesData = []
      var xaxisField = this.customChart.xaxisField
      if (xaxisField) xaxisField = xaxisField[0]
      for (var i = 0, d; (d = displayfield[i++]); ) {
        if (d) {
          var arr = []
          if (this.customChart.style == 3) {
            for (var j = 0, res; (res = data[j++]); ) {
              if (res) {
                var value = res[xaxisField.field.toUpperCase()]
                if (
                  xaxisField.dbType == 'date' &&
                  value &&
                  typeof value == 'number'
                )
                  value = new Date(value).format('yyyy-MM-dd HH:mm:dd')
                legendData.push(value)
                arr.push({
                  value: res[d.field.toUpperCase()],
                  name: value
                })
              }
            }
            seriesData.push({
              name: d.comment,
              type: 'pie',
              radius: '75%',
              center: ['50%', '55%'],
              data: arr,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            })
          } else {
            var type = this.customChart.style == 1 ? 'line' : 'bar'
            legendData.push(d.comment)
            for (var j = 0, res; (res = data[j++]); ) {
              if (i == 1) {
                var value = res[xaxisField.field.toUpperCase()]
                if (
                  xaxisField.dbType == 'date' &&
                  value &&
                  typeof value == 'number'
                )
                  value = new Date(value).format(defaultFmt)
                xAxisData.push(value)
              }
              if (res) {
                var value = res[d.field.toUpperCase()]
                /*if(d.dbType=='date' && value && (typeof value=="number")) value=new Date(value).format(defaultFmt);*/
                arr.push(value)
              }
            }
            seriesData.push({
              name: d.comment,
              type: type,
              areaStyle: {normal: {}},
              data: arr
            })
          }
        }
      }
      var option = {}
      if (this.customChart.style == 3) {
        option = {
          title: {
            text: this.customChart.name,
            x: 'center',
            y: 10,
            textStyle: {
              fontSize: 24
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: legendData
          },
          series: seriesData
        }
      } else {
        option = {
          title: {
            text: this.customChart.name,
            x: 'center',
            y: 10,
            textStyle: {
              fontSize: 24
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: legendData,
            y: 50
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            y: 110,
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false, //类目起始和结束两端空白策略，默认为true留空，false则顶头
              data: xAxisData
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: seriesData
        }
        //柱状图的时候两端留空。避免柱状图挡住y轴。折线图则不留空，
        if (this.customChart.style == 2) option.xAxis[0]['boundaryGap'] = true
        if (this.customChart.conf) {
          var obj = JSON.parse(this.customChart.conf)
          if (obj.yMin == 2) option.yAxis[0]['min'] = 'dataMin'
          if (obj.xShowAll == 2)
            option.xAxis[0]['axisLabel'] = {
              interval: 0, //横轴信息全部显示
              rotate: 30
            }
        }
        if (
          (this.customChart.style == 2 || this.customChart.style == 1) &&
          data.length > 20
        ) {
          option.dataZoom = [
            {
              type: 'inside',
              start: 0,
              end: 10
            },
            {
              start: 0,
              end: 10,
              handleIcon:
                'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
              handleSize: '80%',
              handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
              }
            }
          ]
          option.grid.bottom = 50
        } else {
          option.grid.bottom = '3%'
          delete option.dataZoom
        }
      }
      myChart.setOption(option)
    },
    //回车查询
    searchEnterFun: function(e) {
      var keyCode = window.event ? e.keyCode : e.which
      if (keyCode == 13) {
        this.search()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.conditiondiv {
  display: inline-block;
  padding-top: 10px;
}

.conditiondiv > div > span {
  display: inline-block;
  margin-right: 8px;
  width: 60px;
  text-align: right;
}

::v-deep .el-tabs__item {
  height: 30px;
  line-height: 30px;
}

.todo-subject {
  cursor: pointer;
}

.todo-subject {
  color: $--theme-color;
}

::v-deep .el-tabs__header {
  margin: 0px;
}
</style>
