<!-- 采购到货看版 -->
<template>
  <div class="box">
    <div class="title">采购到货看版</div>
    <div class="table">
      <table border class="table">
        <thead>
          <tr>
            <th></th>
            <th>
              <div>9-15</div>
              <div>8:00</div>
            </th>
            <th>
              <div></div>
              <div>9:00</div>
            </th>
            <th>
              <div></div>
              <div>10:00</div>
            </th>
            <th>
              <div></div>
              <div>11:00</div>
            </th>
            <th>
              <div></div>
              <div>12:00</div>
            </th>
            <th>
              <div></div>
              <div>13:00</div>
            </th>
            <th>
              <div></div>
              <div>14:00</div>
            </th>
            <th>
              <div></div>
              <div>15:00</div>
            </th>
            <th>
              <div></div>
              <div>16:00</div>
            </th>
            <th>
              <div></div>
              <div>17:00</div>
            </th>
            <th>
              <div></div>
              <div>18:00</div>
            </th>
            <th>
              <div></div>
              <div>19:00</div>
            </th>
            <th>
              <div></div>
              <div>20:00</div>
            </th>
            <th>
              <div></div>
              <div>21:00</div>
            </th>
            <th>
              <div></div>
              <div>22:00</div>
            </th>
            <th>
              <div></div>
              <div>23:00</div>
            </th>
            <th>
              <div>9-15</div>
              <div>0:00</div>
            </th>
            <th>
              <div></div>
              <div>1:00</div>
            </th>
            <th>
              <div></div>
              <div>2:00</div>
            </th>
            <th>
              <div></div>
              <div>3:00</div>
            </th>
            <th>
              <div></div>
              <div>4:00</div>
            </th>
            <th>
              <div></div>
              <div>5:00</div>
            </th>
            <th>
              <div></div>
              <div>6:00</div>
            </th>
            <th>
              <div></div>
              <div>7:00</div>
            </th>
          </tr>
        </thead>
        <tBody>
          <tr v-for="(item, index) in tableData" :key="index">
            <td class="flist-col">{{ item.name }}</td>
            <template v-for="(cur, key) in item.dock" :key="key">
              <td :colspan="cur.span"  v-if="cur.backgroundColor">
                <div :style="{ background: cur.backgroundColor }">{{cur.num1}}</div>
              </td>
              <td  v-if="!cur.backgroundColor"></td>
            </template>
          </tr>
        </tBody>
      </table>
    </div>
    <div class="list mt-16px">
      <dv-scroll-board ref="scrollBoard" :config="config" style="width:100%;height:100%" @mouseover="mouseoverHandler" @click="clickHandler" />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ScrollBoard } from '@kjgl77/datav-vue3/index'
const tableData = [
  {
    name: 'dock1',
    dock: [
      {
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span: 2,
        backgroundColor: '#529b2f',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:'',
        backgroundColor: '',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:3,
        backgroundColor: '#dfa041',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:'',
        backgroundColor: '',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:4,
        backgroundColor: '#3275b9',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:'',
        backgroundColor: '',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:'',
        backgroundColor: '',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:3,
        backgroundColor: '#3275b9',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:4,
        backgroundColor: '#3275b9',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:'',
        backgroundColor: '',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:'',
        backgroundColor: '',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:2,
        backgroundColor: '#3275b9',
        num1: '234'
      }
    ]
  }, {
    name: 'dock2',
    dock: [
      {
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:'',
        backgroundColor: '',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:'',
        backgroundColor: '',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:2,
        backgroundColor: '#f46c6c',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:'3',
        backgroundColor: '#e6a23d',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:"",
        backgroundColor: '',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:1,
        backgroundColor: '#3275b9',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:'',
        backgroundColor: '',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:'',
        backgroundColor: '',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:'',
        backgroundColor: '',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:'3',
        backgroundColor: '#90939a',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:3 ,
        backgroundColor: '#3275b9',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:'',
        backgroundColor: '',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:3 ,
        backgroundColor: '#3275b9',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:'',
        backgroundColor: '',
        num1: '234'
      }
    ]
  }, {
    name: 'dock3',
    dock: [
      {
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:'',
        backgroundColor: '',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:2,
        backgroundColor: '#529b2f',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:'2',
        backgroundColor: '#e6a23d',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:"",
        backgroundColor: '',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:3,
        backgroundColor: '#3275b9',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:'',
        backgroundColor: '',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:'',
        backgroundColor: '',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:2,
        backgroundColor: '#3275b9',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:'',
        backgroundColor: '', 
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:4,
        backgroundColor: '#3275b9',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:'',
        backgroundColor: '',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:'',
        backgroundColor: '',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:3,
        backgroundColor: '#3275b9',
        num1: '234'
      },{
        time: '9:00',
        startTime: '8:00',
        endTime: '10:00',
        span:'',
        backgroundColor: '',
        num1: '234'
      }
    ]
  }
]
const config = reactive({
  header: ['状态', '流水号', '月台号', '供应商', '发货单', '车牌号', '计划到货时间', '实际到货时间'],
  data: [
    ['<span style="background:#529b2f;width:100%;height:100%;display:block">行1列1</span>', '行1列2', '行1列3', '行1列4', '行1列5', '行1列6', '行1列7', '行1列8'],
    ['<span style="background:#529b2f;width:100%;height:100%;display:block">行2列1</span>', '行2列2', '行2列3', '行2列4', '行2列5', '行2列6', '行2列7', '行2列8'],
    ['<span style="background:#f46c6c;width:100%;height:100%;display:block">行3列1</span>', '行3列2', '行3列3', '行3列4', '行3列5', '行3列6', '行3列7', '行3列8'],
    ['<span style="background:#e6a23d;width:100%;height:100%;display:block">行4列1</span>', '行4列2', '行4列3', '行4列4', '行4列5', '行4列6', '行4列7', '行4列8'],
    ['<span style="background:#e6a23d;width:100%;height:100%;display:block">行5列1</span>', '行5列2', '行5列3', '行5列4', '行5列5', '行5列6', '行5列7', '行5列8'],
    ['<span style="background:#e6a23d;width:100%;height:100%;display:block">行6列1</span>', '行6列2', '行6列3', '行6列4', '行6列5', '行6列6', '行6列7', '行6列8'],
    ['<span style="background:#3275b9;width:100%;height:100%;display:block">行7列1</span>', '行7列2', '行7列3', '行7列4', '行7列5', '行7列6', '行7列7', '行7列8'],
    ['<span style="background:#3275b9;width:100%;height:100%;display:block">行8列1</span>', '行8列2', '行8列3', '行8列4', '行8列5', '行8列6', '行8列7', '行8列8'],
    ['<span style="background:#3275b9;width:100%;height:100%;display:block">行9列1</span>', '行9列2', '行9列3', '行9列4', '行9列5', '行9列6', '行9列7', '行9列8'],
    ['<span style="background:#3275b9;width:100%;height:100%;display:block">行10列1</span>', '行10列2', '行10列3', '行10列4', '行10列5', '行10列6', '行10列7', '行10列8'],
  ],
  index: false,
  // columnWidth: [50],
  align: ['center','center','center','center','center','center','center','center'],
  rowNum:8,
  headerHeight:50,
  headerBGC:'#616267',
  oddRowBGC:'#303133',
  evenRowBGC:'#303133',
  
})
</script>
<style lang="scss" scoped>
.box {
  width: 98vw;
  height: 96vh;
  background: #303133;
  padding: 2vh 1vw;
  display: flex;
  flex-direction: column;
}
.title {
  color: #9d9f9e;
  font-size: 30px;
  text-align: center;
  line-height: 7vh;
  width: 100%;
}
.table {
  width: 98vw;
  border-collapse: collapse;
  border-spacing: 0;
  tr {
    color: #b3b4b8;
  }
  td {
    width: calc(92vw / 24);
    text-align: center;
    div {
      width: calc(100% - 16px);
      height: 28px;
      margin: 8px;
      line-height: 28px;
      color: white;
      text-align: left;
      text-indent: 10px;
    }
    &.flist-col {
      width: 6vw;
    }
  }
  thead {
    tr {
      text-indent: -100%;
      border-left: 1px solid rgba(255, 255, 255, 0);
      border-top: 1px solid rgba(255, 255, 255, 0);
      border-right: 1px solid rgba(255, 255, 255, 0);
    }
    th {
      font-size: 14px;
      font-weight: normal !important;
      height: 6vh;
      div {
        height: 2.5vh;
        line-height: 2.5vh;
      }
    }
  }
}
.list{
  flex: 1;
  width: 100%;
}
::v-deep(.row-item){
  border-bottom: 1px solid rgba(255,255,255,0.5);
}
::v-deep(.ceil){
  border-right: 1px solid rgba(255,255,255,0.5);
  padding: 0px!important;
}
::v-deep(.dv-scroll-board){
  border-top: 1px solid rgba(255,255,255,0.5);
  border-left: 1px solid rgba(255,255,255,0.5);
  border-bottom: 1px solid rgba(255,255,255,0.5);
}
::v-deep(.header-item){
  border-right: 1px solid rgba(255,255,255,0.5);
}
</style>
