<template>
  <div style="flex: 1;">
    <Container name="订单完成情况" size="small" class="wholeOrder">
      <div style="width: 100%;padding: 10px; 20px">
        <el-table
        :header-cell-style="{background:'rgba(4, 74, 132, 0.8)',color:'#fff',height: '40px',lineHeight: '40px', padding: 0,fontSize:'16px'}"
        :row-style="setRowStyle"
        :data="list"
        height="225"
        border
        style="width: 100%; background: transparent"
      >
        <el-table-column
          v-for="item in tableProps"
          :key="item.prop"
          :show-overflow-tooltip="item.showOverflowtooltip"
          v-bind="item"
        >
          <template slot-scope="scope">
            <component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
            <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
          </template>
        </el-table-column>
        <slot name="content" />
      </el-table>
      </div>
    </Container>
  </div>
</template>
<script>
// :header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff'}"
const tableProps = [
    {
      prop: 'time',
      label: '添加时间',
      filter: parseTime,
      minWidth: 140
    },
    {
      prop: 'name',
      label: '订单名称',
      minWidth: 120,
      showOverflowtooltip: true
    },
    {
      prop: 'code',
      label: '订单编码',
      minWidth: 180
    },
    {
      prop: 'customerId',
      label: '客户',
      showOverflowtooltip: true
    }
  ]
import Container from '../components/Container.vue';
import { parseTime } from '@/utils/ruoyi'
export default {
  name: 'OrderStatus',
  filters: {
    commonFilter: (source, filterType = a => a) => {
      return filterType(source)
    }
  },
  components: { Container },
  data() {
    return {
      tableProps,
      list:[
        {time: '2023-12-12', name: '名称名称'},
        {time: '2023-12-13', name: '名称名称'},
        {time: '2023-12-14', name: '名称名称'},
        {time: '2023-12-15', name: '名称名称'},
        {time: '2023-12-16', name: '名称名称'},
        {time: '2023-12-17', name: '名称名称'},
        {time: '2023-12-18', name: '名称名称'},
        {time: '2023-12-19', name: '名称名称'},
        {time: '2023-12-20', name: '名称名称'},
        {time: '2023-12-21', name: '名称名称'}
      ]
    }
  },
  mounted() {
    
  },
  methods:{
    setRowStyle(v) {
      if (v.rowIndex % 2 === 0) {
        return {
          background: 'rgba(11, 84, 153, 0.5)',
          color: 'rgba(255,255,255,0.8)',
          height: '40px',
          lineHeight: '40px',
          padding: 0,
          fontSize: '16px'
        }
      } else {
        return {
          background: 'rgba(4, 74, 132, 0.5)',
          color: 'rgba(255,255,255,0.8)',
          height: '40px',
          lineHeight: '40px',
          padding: 0,
          fontSize: '16px'
        }
      }
    }
  }
}
</script>
<style lang='scss'>
.wholeOrder {
  .el-table {
    border: 0;
  }
  .el-table::before,.el-table--border::after {
    background-color: transparent;
  }
  .el-table th,td{
    border-color: #0D1728 !important;
    padding: 0;
  }
  .el-table tr {
    background: transparent;
  }
  .el-table__row:hover > td {
    background-color: rgba(79,114,136,0.29) !important;
    }

  .el-table__row--striped:hover > td {
    background-color: rgba(79,114,136,0.29) !important;
  }
  // .el-table {
  //   border: 0;
  // }
  // .el-table::before,.el-table--border::after {
  //   background-color: transparent;
  // }
  // .el-table th,td{
  //   border-color: #0D1728 !important;
  //   padding: 0;
  // }
  // .el-table tr {
  //   background: transparent;
  // }
  // .el-table__row:hover > td {
  //   background-color: rgba(79,114,136,0.29) !important;
  //   }

  // .el-table__row--striped:hover > td {
  //   background-color: rgba(79,114,136,0.29) !important;
  // }
  
}
</style>