<!--
 * @Company: 沈阳信诚科技
 * @Email: html_venustar@163.com
 * @Author: Liuqiming
 * @Description: 生产过程监控表格组件
 * @LastEditors: Liuqiming
 * @LastEditTime: 2024-03-13 11:23:39
 * @Date: 2024-03-11 11:15:29
-->
<template>
  <div class="moni-table">
    <div class="table-header table-tr">
      <template v-for="item in columns" :key="item.field">
        <div
          class="table-header-td"
          :style="{width: item?.width ? `calc(100vw * ${item?.width} / 1920)` : `calc(${(100 / columns.length)}% - 1px)`}"
        >{{ item.label }}</div>
      </template>
    </div>
    <div class="table-content table-tr">
      <div class="table-content-trs" v-for="tr,t in tableData" :key="t" :style="{height: `calc(100vh * ${trHeight} / 1080)`, lineHeight: `calc(100vh * ${trHeight} / 1080)`}">
        <template v-for="field in fieldList">
          <div class="table-content-td"
            :style="{width: currentField(field)?.width ? `calc(100vw * ${currentField(field)?.width} / 1920)` : `calc(${(100 / columns.length)}% - 1px)`}"
          >
            <el-button v-if="currentField(field).btn" link type="warning" class="table-btn" @click="
              () => {handlerClick(tr,field, tr[field])}
            ">{{ tr[field] }}</el-button>
            <span v-else :style="currentField(field).style">
              <i class="cell-tip"
                v-if="tr.tip && tr.tip[0].split(',').find(item => item === field)"
                :class="{ 'tip-success': (tr.tip[1][field] === 0),
                'tip-error': (tr.tip[1][field] === 1) }"
              ></i>
              <span :style="{color: tr.color && tr.color[1][tr.color[0].split(',').find(item => item === field)]}">{{ tr[field] }}</span>
            </span>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  columns: {
    type: Array,
    default: () => [
      {label:'到站时间1',field: 'time1'},
      {label:'到站时间2',field: 'time2'},
      {label:'到站时间3',field: 'time3', style: {color: '#fff'}, },
      {label:'到站时间4',field: 'time4'},
    ]
  },
  tableData: {
    type: Array,
    default: () => [
      {time1:'到站时间1',time2: 'time1',time3: 'asd',time4: 'timzxczxe1', color: ['time4','#f0f'], tip: ['time3', 0]},
      {time1:'到站时间1',time2: 'time1',time3: 'asd',time4: 'timzxczxe1'},
      {time1:'到站时间1',time2: 'time1',time3: 'asd',time4: 'timzxczxe1'},
      {time1:'到站时间1',time2: 'time1',time3: 'asd',time4: 'timzxczxe1'},
    ]
  },
  trHeight: {
    type: Number,
    default: 32
  }
});
const emit = defineEmits();
const fieldList = computed(() => {
  let arr = []
  props.columns.forEach(item => {
    arr.push(item.field)
  })
  return arr
})
const currentField = computed(() => (field) => {
  // console.log(field, props.columns.find(item => item.field === field))
  return props.columns.find(item => item.field === field)
})
const handlerClick = (row, field, val) => {
  emit('tableClick', row, field, val)
}
</script>

<style lang="scss" scoped>
.moni-table{
  width: 100%;
  height: 100%;
  .table-tr{
    width: 100%;
  }
  .table-header{
    height: h(32);
    line-height: h(32);
    margin-bottom: h(3);
    display: flex;
    justify-content: space-between;
    .table-header-td{
      background: linear-gradient(to bottom, rgba(0, 138, 255, 0.64), rgba(0, 138, 255, 0.32), rgba(0, 138, 255, 0.64));
      text-align: center;
      color: rgba(230, 243, 255, 1);
      font-size: w(14);
      backdrop-filter: blur(4px);
    }
  }
  .table-content{
    width: 100%;
    height: calc(100% - h(35));
    .table-content-trs{
      margin-bottom: h(2);
      display: flex;
      text-align: center;
      justify-content: space-between;
      font-size: w(14);
    }
    .table-content-td{
      height: 100%;
      background: rgba(0, 138, 255, 0.2);
      backdrop-filter: blur(4px);
      .table-btn{
        color: #FFDE4D;
        font-size: w(14) !important;
      }
      :deep(.el-button>span){
        border-bottom: 1px solid #FFDE4D;
      }
      .cell-tip{
        display: inline-block;
        width: w(10);
        height: h(10);
        border-radius: 50%;
        margin-right: w(4);
      }
      .tip-success{
        background-color: rgba(6, 247, 161, 1);
        box-shadow: 0 0 8px 2px rgba(6, 247, 161, 0.3);
      }
      .tip-error{
        background-color: rgba(255, 24, 24, 1);
        box-shadow: 0 0 8px 2px rgba(255, 24, 24, 0.4);
      }
    }
  }
}
</style>