<template>
  <div>
  <div class="app-container-Pv">
    <div id="PvChart" :style="{height:height,width:width}"></div>
  </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="specYlrqList"
                 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>
        <el-table-column :label="$t('设备名称')" align="center" prop="devname" width="200" :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="vesselType" :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="nation" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('外形尺寸(直径*长(高)*厚(mm))')" align="center" prop="outSize" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('材料')" align="center" prop="material" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('介质')" align="center" prop="medium" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('设计压力MPa')" align="center" prop="desPressure" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('操作压力MPa')" align="center" prop="optPressure" :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('投用日期')" 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="isDanger" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('设计使用年限')" align="center" prop="desYear" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('是否达到设计使用年限')" align="center" prop="isOverlife" :show-overflow-tooltip="true"/>
        <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="safeClass" :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="reportNo" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('年度检查日期')" align="center" prop="yearWarnDate" width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.yearWarnDate, '{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="yearNextWarnDate" width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.yearNextWarnDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('年度检查报告编号')" align="center" prop="yearReportNo" :show-overflow-tooltip="true"/>
        <!--      <el-table-column :label="$t('部门编号')" align="center" prop="deptId" :show-overflow-tooltip="true"/>-->
        <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 {exportSpecYlrq , devYlrqData,devYlrqDataByYear} 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,
      specYlrqList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        orderByColumn:"id",
        isAsc:"desc",
        plantCode: null,
        unit: null,
        devname: null,
        devno: null,
        status: 1,
        approveStatus: null,
        hisReformTime: null,
        plantIds: null,
        unitIds: null,
        checkYear: null
      },
      optionYlrq: {
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: 20
          },
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
          }
        },
        /* 周围边距 */
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          top: '13%',
          containLabel: true
        },
        legend: {
          data: [this.$t('devTotalChart'), this.$t('usage')],
          textStyle: {
            fontSize: 20
          }
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              textStyle: {
                fontSize: 20
              }
            },
          }
        ],
        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('devTotalChart'),
            type: 'bar',
            barWidth: '80%',
            itemStyle: {
              normal: {
                barBorderRadius: [5, 5, 0, 0],
              }
            },
            stack: this.$t('devTotalChart'),
            data: [2.0, 4.9, 7.0, 23.2, 25.6]
          }
        ],
      },
    }
  },
  created() {
  },
  mounted() {
    this.chart = this.echarts.init(document.getElementById('PvChart'))

  },
  methods: {
    nowSize(val){
      //当前视口宽度
      let nowClientWidth = document.documentElement.clientWidth;
      //换算方法
        return val * (nowClientWidth/1920);
    },
    initChart() {
      this.optionYlrq.legend.textStyle.fontSize = this.nowSize(14)
      this.optionYlrq.tooltip.textStyle.fontSize = this.nowSize(16)
      this.optionYlrq.xAxis[0].axisLabel.textStyle.fontSize = this.nowSize(14)
      this.optionYlrq.yAxis[0].axisLabel.textStyle.fontSize = this.nowSize(14)
      this.optionYlrq.yAxis[0].nameTextStyle.fontSize = this.nowSize(13)
      // 基于准备好的dom，初始化echarts实例
      this.chart.clear()
      this.chart.setOption(this.optionYlrq)
      window.addEventListener('resize', () => {
        this.chart.resize()
      })
    },
    devYlrqData(plantIds ,unitIds ){
      this.queryParams.plantIds = plantIds.join()
      this.queryParams.unitIds = unitIds.join()
      let params = {
        'plantIds': plantIds,
        'unitIds': unitIds
      }
      devYlrqData(params).then(response => {
        this.optionYlrq.xAxis[0].data = response.data.ylrqData.yearList
        this.optionYlrq.series[0].data = response.data.ylrqData.countList
        this.initChart()
        let _this = this
        this.chart.on('click', function(params) {
          // 控制台打印数据的名称
          console.log(params);
          _this.open = true
          _this.queryParams.checkYear = params.name
          _this.getList()
        });
      });
    },
    /** 查询特种设备压力容器台账列表 */
    getList() {
      this.loading = true;
      devYlrqDataByYear(this.queryParams).then(response => {
        this.specYlrqList = 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 exportSpecYlrq(queryParams);
      }).then(response => {
        this.download(response.msg);
      })
    },
  }
}
</script>
