<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: () => ({})
    }
  },
  mounted() {
    console.log('finished', this.injectData.finished)
  },
  methods: {},
  render: function(h) {
    return h('el-progress', {
      class: {
        'lb-progress-bar': true
      },
      props: {
        type: 'circle',
        percentage: this.injectData.finished,
        width: 14,
        'stroke-width': 2,
        color: '#47FF27'
      },
      style: {
        color: 'blue'
      }
    })
  }
}

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: 'DD202200910', clientName: '中建材', specs: '50cm', finished: 80 },
  { orderCode: 'DD202200911', clientName: '蚌埠研究院', specs: '5mm', finished: 40 },
  { orderCode: 'DD202200912', clientName: '中建材', specs: '50cm', finished: 77 },
  { orderCode: 'DD202200913', clientName: '国资委', specs: '50cm', finished: 66 },
  { orderCode: 'DD202200914', clientName: '合肥新能源', specs: '50cm', finished: 55 },
  { orderCode: 'DD202200915', clientName: '中信科技', specs: '50cm', finished: 77 },
  { orderCode: 'DD202200916', clientName: 'H', specs: '50cm', finished: 33 }
]

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;
}
</style>
