<template>
  <dv-loading v-if="!showPage" style="width: 100%; height: 100%" class="the-loading">Loading...</dv-loading>
  <div v-else class="quality">
    <div>
      <div class="top">
        <item-title title="质量巡检"></item-title>
        <div class="box" ref="chart1"></div>
      </div>
      <div class="bottom">
        <item-title title="现场巡检"></item-title>
        <ListImg class="box" :height="310" :list="lstXJ" />
      </div>
    </div>
    <div>

      <item-title title="质量亮点"></item-title>
      <div class="zhiliang-images">
        <div>
          <img src="@/assets/image/zhiliang/1.png" />
        </div>
        <div>
          <img src="@/assets/image/zhiliang/4.jpg" />
        </div>
        <div>
          <img src="@/assets/image/zhiliang/5.jpg" />
        </div>
        <div>
          <img src="@/assets/image/zhiliang/6.jpg" />
        </div>
      </div>

    </div>
    <div>
      <item-title title="质量验收记录"></item-title>
      <div class="table-rank">
        <dv-scroll-board :config="yanshoujilu_config" style="width: 100%; height: 100%" />
      </div>
    </div>
  </div>
</template>

<script>
import ItemTitle from '@/components/ItemTitle.vue'
import ListImg from '@/components/ListImg.vue'
import * as echarts from 'echarts'
import dayjs from 'dayjs'
import axios from 'axios'

export default {
  name: 'quality',
  components: {
    ItemTitle,
    ListImg
  },
  data () {
    return {
      showPage: true,
      zhiliangwenti_config: {
        oddRowBGC: 'rgba(4, 24, 45,0.4)',
        evenRowBGC: '#0d1732',
        waitTime: 5000,
        rowNum: 5,
        align: ['center', 'center', 'center'],
        headerBGC: '#0b375d',
        header: ['问题描述', '检查时间', '处理时间'],
        data: [

        ]
      },
      yanshoujilu_config: {
        oddRowBGC: 'rgba(4, 24, 45,0.4)',
        evenRowBGC: '#0d1732',
        waitTime: 5000,
        rowNum: 10,
        align: ['center', 'center', 'center', 'center', 'center'],
        headerBGC: '#0b375d',
        header: ['验收项目', '验收部位', '验收结论'],
        data: [
          ['外墙旧涂层铲除验收', '19号楼外墙', '合格'], ['外墙旧涂层铲除验收', '27号楼外墙', '合格'], ['外墙旧涂层铲除验收', '36号楼外墙', '合格'], ['楼梯间旧涂层铲除验收', '36号楼楼梯间', '合格'], ['楼梯间旧涂层铲除验收', '40号楼楼梯间', '合格'], ['外墙界面剂验收', '19号楼外墙', '合格'], ['外墙界面剂验收', '27号楼外墙', '合格'], ['外墙保温粘贴验收', '19号楼外墙', '合格'], ['外墙保温粘贴验收', '27号楼外墙', '合格'], ['外墙保温刮胶验收', '19号楼外墙', '合格'], ['外墙保温刮胶验收', '27号楼外墙', '合格'], ['彩钢坡屋面除锈验收', '40号楼屋面', '合格'], ['彩钢坡屋面除锈验收', '27号楼屋面', '合格'], ['外墙旧涂层铲除验收', '22号楼外墙', '合格'], ['外墙旧涂层铲除验收', '23号楼外墙', '合格'], ['外墙界面剂验收', '22号楼外墙', '合格'], ['外墙界面剂验收', '23号楼外墙', '合格'], ['外墙保温粘贴验收', '22号楼外墙', '合格'], ['外墙保温粘贴验收', '23号楼外墙', '合格'], ['外墙保温刮胶验收', '23号楼外墙', '合格']
        ]
      },
      lstXJ: []
    }
  },

  methods: {
    initChart () {
      const option = {
        xAxis: {
          type: 'category',
          data: ['本月巡检', '上月巡检'],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        },
        series: [
          {
            data: [
              {
                value: 16,
                itemStyle: {
                  color: '#91cc75'
                }
              },
              {
                value: 26,
                itemStyle: {
                  color: '#fac858'
                }
              }
            ],
            type: 'bar'
          }
        ]
      }
      const chart1 = echarts.init(this.$refs.chart1)
      window.onresize = chart1.resize //在窗口大小改变时，相应的元素能够适应新的窗口尺寸。
      chart1.setOption(option)
    },
    getXJ () {
      axios.get('http://static.harbinxiaoshi.cn/daping/' + process.env.VUE_APP_TITLE + '/json/xianchangxuncha.json?t=' + dayjs()).then(res => {
        this.lstXJ = res.data
      })
    }
  },

  mounted () {
    this.initChart()
    this.getXJ()
  }
}
</script>

<style lang="scss" scoped>
.quality {
  margin-top: px2rem(20);
  height: calc(100% - #{px2rem(58+78 + 20)});
  width: 100%;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: px2rem(30);
  padding: 10px 20px;
  overflow: hidden;
}

.top {
  height: 40%;
  width: 100%;
}

.bottom {
  margin-top: px2rem(10);
  width: 100%;
  height: 48%;
}

.zhiliang-images {
  display: grid;
  margin-top: px2rem(10);
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  grid-gap: px2rem(10);
  width: 100%;
  height: calc(100% - #{px2rem(160)});

  &>div>img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius: 10px;
  }
}

.table-rank {
  width: 100%;
  margin-top: px2rem(10);
  height: calc(100% - #{px2rem(60)});

  ::v-deep .row-item {
    cursor: pointer;
  }
}

.zhiliang-table {
  height: calc(100% - #{px2rem(70)});
}

.box {
  width: 100%;
  margin-top: px2rem(10);
  height: calc(100% - #{px2rem(50)});
}
</style>
