<template >
<!--  indexFormat：不是官方提供的api，是自己修改的，如果报错，需要将该目录下的scrollBoard.tpl内容将indexFormat：不是官方提供的api，是自己修改的，如果报错，需要将该目录下的scrollBoard组件的内容替换 -->
  <dv-scroll-board :indexFormat="onIndexHandler" :config="config" class="fireInspection"/>
</template>

<script>
import firstIcon from '@/assets/images/first.png';
import secondIcon from '@/assets/images/second.png';
import thirdIcon from '@/assets/images/third.png';

const createHeader = function(title) {
  return `<span style="font-size:.5vh;color:#85e9ff;">${title}</span>`
}

export default {
  name: 'FireInspection',
  data() {
    return {
      config: {
        header: [createHeader('区县'), createHeader('完成巡保单位'), createHeader('全部单位'), createHeader('完成率')],
        data: [
          ['渝北区', '30', '120', '20%'],
          ['渝北区', '30', '120', '20%'],
          ['渝北区', '30', '120', '20%'],
          ['渝北区', '30', '120', '20%'],
          ['渝北区', '30', '120', '20%'],
          ['渝北区', '30', '120', '20%'],
          ['渝北区', '30', '120', '20%'],
          ['渝北区', '30', '120', '20%'],
          ['渝北区', '30', '120', '20%'],
        ],
        index: true,
        indexHeader: createHeader('排名'),
        align: ['center'],
        headerBGC: '#0B2C8480',
        oddRowBGC: 'transparent',
        evenRowBGC: 'transparent',
        columnWidth: [50]
      }
    }
  },
  methods: {
    onIndexHandler: function(index) {
      if (index === 1) {
        return `<img style="margin-top: 1vh;" src="${firstIcon}"/>`
      }else if (index === 2) {
        return `<img style="margin-top: 1vh;" src="${secondIcon}"/>`
      } else if (index === 3) {
        return `<img style="margin-top: 1vh;" src="${thirdIcon}"/>`
      } else {
        return index
      }
    }
  }
}
</script>

<style scoped lang='less'>
.fireInspection {
  padding-top: 10px;
  width: 312px;
  height: 240px;
  /depp/ .index-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15px;
    height: 21px;
  }
}
</style>
