<template>
  <div class="left-content-order fix-table">
    <techy-table :page="1" :limit="8" :show-index="false" :table-config="tableProps" :table-data="tableData" />
  </div>
</template>

<script>
import TechyTable from './TechyTable.vue'

const ProcessCircle = {
  name: 'ProcessCircle',
  props: {
    injectData: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {},
  render: function(h) {
    return h('el-progress', {
      props: {
        type: 'circle',
        percentage: this.injectData.finished,
        width: 14,
        'stroke-width': 2,
        color: '#47FF27',
        'define-back-color': '#ffffff' // 背景色, 该选项不起作用，可能和 element ui 版本相关
      }
    })
  }
}

const tableProps = [
  { prop: 'orderCode', label: '订单编码', align: 'center', 'min-width': 120 },
  { prop: 'clientName', label: '客户名称', align: 'center', 'min-width': 100 },
  { prop: 'specs', label: '规格', align: 'center', 'min-width': 90 },
  { prop: 'finished', label: '完成度', align: 'center', 'min-width': 80, subcomponent: ProcessCircle }
]
const tableData = [
  { orderCode: 'ODFG20210724195124', clientName: '阿特斯阳光电力集团', specs: '3.2-1032*1747', finished: 72 },
  { orderCode: 'ODPG20220712231003', clientName: '阳光能源控股有限公司', specs: '2.0-1128*1716', finished: 67 },
  { orderCode: 'ODFG20210819002810', clientName: '浙江正泰新能源开发有限公司', specs: '3.2-1128*1716', finished: 46 },
  { orderCode: 'ODPG20201003193028', clientName: '阿特斯阳光电力集团', specs: '2.0-1128*2251', finished: 89 },
  { orderCode: 'ODPG20200113134639', clientName: '协鑫集成科技股份有限公司', specs: '3.2-1128*1718', finished: 54 },
  { orderCode: 'ODFG20211115145712', clientName: '晶科能源股份有限公司', specs: '3.2-1033*2089', finished: 93 },
  { orderCode: 'ODFG20211102234340', clientName: '浙江正泰新能源开发有限公司', specs: '3.2-1032*1747', finished: 57 },
  { orderCode: 'ODFG20200303145849', clientName: '晶澳太阳能科技股份有限公司', specs: '2.0-1128*2272', finished: 76 },
  { orderCode: 'ODFG20220208030640', clientName: '苏州中来光伏新材股份有限公司', specs: '2.0-1128*2251', finished: 62 },
  { orderCode: 'ODFG20200916123727', clientName: '常州亿晶光电科技有限公司', specs: '3.2-1128*1718', finished: 23 },
  { orderCode: 'ODFG20200117065400', clientName: '晶澳太阳能科技股份有限公司', specs: '3.2-1033*2089', finished: 75 },
  { orderCode: 'ODPG20211020214146', clientName: '英利绿色能源控股有限公司', specs: '3.2-1128*1716', finished: 44 },
  { orderCode: 'ODPG20221015223506', clientName: '阿特斯阳光电力集团', specs: '2.0-1128*2272', finished: 3 },
  { orderCode: 'ODFG20211112131234', clientName: '江苏赛拉弗光伏系统有限公司', specs: '3.2-1128*1716', finished: 90 },
  { orderCode: 'ODPG20200411040019', clientName: '阳光能源控股有限公司', specs: '3.2-1033*2089', finished: 4 },
  { orderCode: 'ODPG20220622002234', clientName: '苏州中来光伏新材股份有限公司', specs: '3.2-1128*1718', finished: 43 },
  { orderCode: 'ODPG20220806035106', clientName: '江苏赛拉弗光伏系统有限公司', specs: '3.2-1128*1716', finished: 60 },
  { orderCode: 'ODPG20220530081525', clientName: '晶科能源股份有限公司', specs: '2.0-1128*2272', finished: 21 },
  { orderCode: 'ODPG20210228222705', clientName: '阿特斯阳光电力集团', specs: '3.2-1128*1718', finished: 75 },
  { orderCode: 'ODPG20210408102029', clientName: '常州亿晶光电科技有限公司', specs: '3.2-1128*1718', finished: 99 }
]

export default {
  name: 'LeftContentOrder',
  components: { TechyTable },
  data() {
    return { tableData, tableProps }
  },
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style scoped>
.fix-table >>> .el-table td .cell {
  width: 70% !important;
  margin: auto;
  text-align: left;
}

.left-content-order >>> .el-progress-circle {
  position: relative;
  left: calc(24px * var(--beilv));
  width: calc(12px * var(--beilv)) !important;
  height: calc(12px * var(--beilv)) !important;
}

.left-content-order >>> .el-progress__text {
  font-size: calc(12px * var(--beilv)) !important;
  line-height: calc(14px * var(--beilv)) !important;
  left: calc(-2px * var(--beilv));
  color: #ffffffb3 !important;
}

.left-content-order >>> .el-progress-circle__track {
  stroke: #283851;
}
</style>
