<template>
  <div class="app-container-Boiler">
    <div id="BoilerChart" :style="{height:height,width:width}"></div>
    <el-dialog  :close-on-click-modal="false" :title="title" :visible.sync="open" width="85%" >
      <el-button
        type="warning"
        icon="el-icon-download"
        size="mini"
        @click="handleExport"
      >{{ $t('导出') }}</el-button>
      <el-table  ref="deviceTable" :data="specGlList"
                 border >
        <el-table-column :label="$t('装置')" align="center" fixed="left"  prop="plantCode" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('单元')" align="center"  fixed="left" prop="unit" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('装置维修组')" align="center" fixed="left"  prop="plantMaint" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('装置维修工程师')" align="center" fixed="left"  prop="engineer" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('位号')" align="center"  fixed="left" prop="devno" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('设备名称')" align="center" prop="devname" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('型号')" align="center" prop="model" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('使用证号码')" align="center" prop="useno" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('设备代码')" align="center" prop="regno" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('制造单位')" align="center" prop="createUnit" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('燃烧方式')" align="center" prop="burnMode" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('水处理方式')" align="center" prop="waterMode" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('燃烧种类')" align="center" prop="burnKind" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('额定出力')" align="center" prop="ratedPower" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('设计温度')+'℃'" align="center" prop="desTemp" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('操作温度')+'℃'" align="center" prop="optTemp" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('设计压力')+'MPa(G)'" align="center" prop="desPressure" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('操作压力')+'MPa(G)'" align="center" prop="optPressure" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('投用日期')" align="center" prop="submitdate" width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.submitdate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('检验单位')" align="center" prop="checkUnit" :show-overflow-tooltip="true"/>

        <el-table-column :label="$t('本次内部检验日期')" align="center" prop="warnDate" width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.warnDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('内部检查结论')" align="center" prop="checkConclusion" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('内部检验报告编号')" align="center" prop="reportNo" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('下次内部检验日期')" align="center" prop="nextWarnDate" width="100" sortable="custom">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.nextWarnDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('本次外部检验日期')" align="center" prop="outWarnDate" width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.outWarnDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('外部检验结论')" align="center" prop="outCheckConclusion" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('外部检验报告编号')" align="center" prop="outReportNo" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('下次外部检验日期')" align="center" prop="outNextWarnDate" width="100" sortable="custom">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.outNextWarnDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('备注')" align="center" prop="remarks" :show-overflow-tooltip="true"/>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-dialog>
  </div>
</template>

<script>
import {devGlData, devGlDataByYear,exportSpecGl} from "@/api/sems/home";

export default {
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '3.3rem'
    },
    year: {
      type: Number,
    }
  },
  data() {
    return {
      chart: null,
      open: false,
      title: '设备列表',
      // 总条数
      total: 0,
      specGlList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        orderByColumn:"id",
        isAsc:"desc",
        plantCode: null,
        unit: null,
        devname: null,
        approveTime: null,
        changeTime: null,
        plantMaint: null,
        status: 1,
        plantIds: null,
        unitIds: null,
        checkYear: null,
        hiType: null
      },
      optionGl: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          textStyle: {
            fontSize: 20
          },
        },
        toolbox: {
          feature: {
          }
        },
        /* 周围边距 */
        grid: {
          left: '5%',
          right: '3%',
          bottom: '1%',
          top: '13%',
          containLabel: true
        },
        legend: {
          data: [this.$t('internalInspection'), this.$t('externalInspection')],
          textStyle: {
            fontSize: 20
          }
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              textStyle: {
                fontSize: 20
              }
            },
          },
          {
            type: 'category',
            data: [],
            axisPointer: {
              type: 'shadow'
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: this.$t('devTotalChart'),
            nameTextStyle: {
              fontSize: 20
            },
            min: 0,
            minInterval: 1,// 最小单位是1
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                fontSize: 20
              }
            }
          }
        ],
        series: [
          {
            name: this.$t('internalInspection'),
            type: 'bar',
            barWidth: '40%',
            itemStyle: {
              normal: {
                barBorderRadius: [5, 5, 0, 0],//柱状图圆弧角度
              }
            },
            stack: this.$t('internalInspection'),
            data: [2.0, 4.9, 7.0, 23.2, 25.6]
          },
          {
            name: this.$t('externalInspection'),
            type: 'bar',
            barWidth: '40%',
            itemStyle: {
              normal: {
                barBorderRadius: [5, 5, 0, 0],
              }
            },
            stack: this.$t('externalInspection'),
            data: [2.0, 4.9, 7.0, 23.2, 25.6]
          }
        ],
      },
    }
  },
  mounted() {
    this.chart = this.echarts.init(document.getElementById('BoilerChart'))
  },
  methods: {
    nowSize(val){
      //当前视口宽度
      let nowClientWidth = document.documentElement.clientWidth;
      //换算方法
      return val * (nowClientWidth/1920);
    },
    initChart() {
      this.optionGl.legend.textStyle.fontSize = this.nowSize(14)
      this.optionGl.tooltip.textStyle.fontSize = this.nowSize(16)
      this.optionGl.xAxis[0].axisLabel.textStyle.fontSize = this.nowSize(14)
      this.optionGl.yAxis[0].axisLabel.textStyle.fontSize = this.nowSize(14)
      this.optionGl.yAxis[0].nameTextStyle.fontSize = this.nowSize(13)
      // 基于准备好的dom，初始化echarts实例
      this.chart.clear()
      this.chart.setOption(this.optionGl)
      window.addEventListener('resize', () => {
        this.chart.resize()
      })
    },
    devGlData(plantIds, unitIds) {
      let params = {
        'plantIds': plantIds,
        'unitIds': unitIds
      }
      this.queryParams.plantIds = plantIds.join()
      this.queryParams.unitIds = unitIds.join()
      devGlData(params).then(response => {
        this.optionGl.xAxis[0].data = response.data.GlData.yearList
        this.optionGl.series[0].data = response.data.GlData.countList
        this.optionGl.series[1].data = response.data.GlData.countList2
        this.initChart()
        let _this = this
        this.chart.on('click', function(params) {
          // 控制台打印数据的名称
          console.log(params.seriesName);
          if (params.seriesName == '内检') {
            _this.queryParams.hiType = 1
          }else {
            _this.queryParams.hiType = 2
            }
          _this.open = true
          _this.queryParams.checkYear = params.name
          _this.getList()
        });
      });
    },
    /** 查询特种设备锅炉台账列表 */
    getList() {
      this.loading = true;
      devGlDataByYear(this.queryParams).then(response => {
        this.specGlList = response.rows;
        this.total = response.total;
        this.$nextTick(() => {
          this.$refs.deviceTable.doLayout(); // 解决表格错位
        });
        this.loading = false;
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm(this.$t('是否确认导出所有特种设备锅炉台账数据项?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: "warning"
      }).then(function() {
        return exportSpecGl(queryParams);
      }).then(response => {
        this.download(response.msg);
      })
    },
  }
}
</script>
