<template>
  <div class="app-container-Lift">
    <div id="LiftChart" :style="{height:height,width:width}"></div>
    <el-dialog  :close-on-click-modal="false" :title="title" :visible.sync="openDt" width="85%" >
      <el-button
        type="warning"
        icon="el-icon-download"
        size="mini"
        @click="handleExportDt"
      >{{ $t('导出') }}</el-button>
      <el-table  ref="deviceTable" :data="specDtList"
                 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="docno" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('名称')" align="center"  fixed="left" prop="devname" width="130" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('设备代码')" align="center" fixed="left"  prop="regno" width="100" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('型号')" align="center" fixed="left"  prop="model" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('额定载重量')+'(kg)'" align="center" prop="capacity" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('层站数')" align="center" prop="floor" :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="location" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('维保承包商')" align="center" prop="maintContractor" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('初检日期')" align="center" prop="firstWarnDate" width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.firstWarnDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <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="checkUnit" :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="remarks" :show-overflow-tooltip="true"/>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getDtList"
      />
    </el-dialog>
    <el-dialog  :close-on-click-modal="false" :title="title" :visible.sync="openCc" width="85%" >
      <el-button
        type="warning"
        icon="el-icon-download"
        size="mini"
        @click="handleExportCc"
      >{{ $t('导出') }}</el-button>
      <el-table  ref="deviceTable" :data="specCcList"
                 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="useDept" :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="carNo" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('档案号')" align="center"  fixed="left" prop="docno" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('发动机号')" align="center" prop="engineNo" :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="color" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('工作能力')+'(Ton)'" align="center" prop="capacity" :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="engineType" :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="frameNo" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('产品编号')" align="center" prop="productNo" :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="exUnit" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('防爆级别')" align="center" prop="exGrade" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('初检日期')" align="center" prop="firstWarnDate" width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.firstWarnDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('检验策略')" align="center" prop="checkStrategy" :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="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="assetOwner" :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="getCcList"
      />
    </el-dialog>
    <el-dialog  :close-on-click-modal="false" :title="title" :visible.sync="openDzsb" width="85%" >
      <el-button
        type="warning"
        icon="el-icon-download"
        size="mini"
        @click="handleExportDzsb"
      >{{ $t('导出') }}</el-button>
      <el-table  ref="deviceTable" :data="specDzsbList"
                 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="devname" :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="docno" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('设备型号')" align="center" prop="model" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('起吊重量')+'(Ton)'" align="center" prop="capacity" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('使用地点')" align="center" prop="location" :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="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="createUnit" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('是否防爆')" align="center" prop="isEx" :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="checkStrategy" :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="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="remarks" :show-overflow-tooltip="true"/>
      </el-table>

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

<script>
import {devOtherData, devDtDataByYear,devDzsbDataByYear,devCcDataByYear,exportSpecCc,exportSpecDt,exportSpecDzsb} 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,
      openDt: false,
      openCc: false,
      openDzsb: false,
      title: '设备列表',
      // 总条数
      total: 0,
      specCcList: [],
      specDtList: [],
      specDzsbList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        status: 1,
        plantIds: null,
        unitIds: null,
        checkYear: null
      },
      optionOther: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          textStyle: {
            fontSize: 20
          },
        },
        toolbox: {
          feature: {
          }
        },
        /* 周围边距 */
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          top: '13%',
          containLabel: true
        },
        legend: {
          data: [this.$t('叉车'), this.$t('起重机械') , this.$t('电梯')],
          textStyle: {
            fontSize: 20
          }
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisPointer: {
              type: 'shadow'
            },
            //设置字体倾斜
            axisLabel: {
              interval: 0,
              rotate: 45,
              //倾斜度 -90 至 90 默认为0
              margin: 2,
              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('叉车'),
            type: 'bar',
            barWidth: '80%',
            itemStyle: {
              normal: {
                barBorderRadius: [5, 5, 5, 5],
              }
            },
            stack: this.$t('devTotalChart'),
            data: [2.0, 4.9, 7.0, 23.2, 25.6]
          },
          {
            name: this.$t('起重机械'),
            type: 'bar',
            barWidth: '80%',
            itemStyle: {
              normal: {
                barBorderRadius: [5, 5, 5, 5],
              }
            },
            stack: this.$t('devTotalChart'),
            data: [2.0, 4.9, 7.0, 23.2, 25.6]
          },
          {
            name: this.$t('电梯'),
            type: 'bar',
            barWidth: '80%',
            itemStyle: {
              normal: {
                barBorderRadius: [5, 5, 5, 5],
              }
            },
            stack: this.$t('devTotalChart'),
            data: [2.0, 4.9, 7.0, 23.2, 25.6]
          }
        ],
      },
    }
  },
  mounted() {
    this.chart = this.echarts.init(document.getElementById('LiftChart'))
  },
  methods: {
    nowSize(val){
      //当前视口宽度
      let nowClientWidth = document.documentElement.clientWidth;
      //换算方法
      return val * (nowClientWidth/1920);
    },
    initChart() {
      this.optionOther.legend.textStyle.fontSize = this.nowSize(14)
      this.optionOther.tooltip.textStyle.fontSize = this.nowSize(16)
      this.optionOther.xAxis[0].axisLabel.textStyle.fontSize = this.nowSize(14)
      this.optionOther.yAxis[0].axisLabel.textStyle.fontSize = this.nowSize(14)
      this.optionOther.yAxis[0].nameTextStyle.fontSize = this.nowSize(13)
      this.chart.clear()
      this.chart.setOption(this.optionOther)
      window.addEventListener('resize', () => {
        this.chart.resize()
      })
    },
    devOtherData(plantIds ,unitIds ){
      let params = {
        'plants': plantIds,
        'unitIds': unitIds
      }
      this.queryParams.plantIds = plantIds.join()
      this.queryParams.unitIds = unitIds.join()
      devOtherData(params).then(response => {
        this.optionOther.xAxis[0].data = response.data.otherDevData.monthList
        this.optionOther.series[0].data = response.data.otherDevData.ccList
        this.optionOther.series[1].data = response.data.otherDevData.dzsbList
        this.optionOther.series[2].data = response.data.otherDevData.dtList
        this.initChart()
        let _this = this
        this.chart.on('click', function(params) {
          // 控制台打印数据的名称
          console.log(params);
          _this.queryParams.checkYear = params.name
           if (params.seriesName == '起重机械') {
             _this.openDzsb = true
             _this.getDzsbList()
           }else if (params.seriesName == '叉车') {
             _this.openCc = true
             _this.getCcList()
           }else if (params.seriesName == '电梯') {
             _this.openDt = true
             _this.getDtList()
           }
        });
      });
    },
    getDzsbList() {
      this.loading = true;
      devDzsbDataByYear(this.queryParams).then(response => {
        this.specDzsbList = response.rows;
        this.total = response.total;
        this.$nextTick(() => {
          this.$refs.deviceTable.doLayout(); // 解决表格错位
        });
        this.loading = false;
      });
    },
    getDtList() {
      this.loading = true;
      devDtDataByYear(this.queryParams).then(response => {
        this.specDtList = response.rows;
        this.total = response.total;
        this.$nextTick(() => {
          this.$refs.deviceTable.doLayout(); // 解决表格错位
        });
        this.loading = false;
      });
    },
    /** 查询特种设备压力容器台账列表 */
    getCcList() {
      this.loading = true;
      devCcDataByYear(this.queryParams).then(response => {
        this.specCcList = response.rows;
        this.total = response.total;
        this.$nextTick(() => {
          this.$refs.deviceTable.doLayout(); // 解决表格错位
        });
        this.loading = false;
      });
    },
    /** 导出按钮操作 */
    handleExportCc() {
      const queryParams = this.queryParams;
      this.$confirm(this.$t('是否确认导出所有特种设备叉车台账数据项?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: "warning"
      }).then(function() {
        return exportSpecCc(queryParams);
      }).then(response => {
        this.download(response.msg);
      })
    },
    /** 导出按钮操作 */
    handleExportDt() {
      const queryParams = this.queryParams;
      this.$confirm(this.$t('是否确认导出所有特种设备电梯台账数据项?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: "warning"
      }).then(function() {
        return exportSpecDt(queryParams);
      }).then(response => {
        this.download(response.msg);
      })
    },
    /** 导出按钮操作 */
    handleExportDzsb() {
      const queryParams = this.queryParams;
      this.$confirm(this.$t('是否确认导出所有特种设备起重机械台账数据项?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: "warning"
      }).then(function() {
        return exportSpecDzsb(queryParams);
      }).then(response => {
        this.download(response.msg);
      })
    },
  }
}
</script>
