<template>
  <div style="flex: 1">
    <Container name="重点工作/三大攻坚战" icon="cockpitItemIcon" size="bottomBasic" topSize="basic">
      <div class="kpi-content"
        style="padding: 14px 16px; display: flex;flex-direction: column; width: 100%;height: 280px;">
        <div class="bottom"
          style="display: flex;padding: 14px 16px;flex-direction: column; background-color: rgba(249, 252, 255, 1);">
          <div class="legend-group" style="justify-content: end;">
            <div class="legend-item">
              <span class="legend-dot done"></span>
              <span class="legend-text">已完成</span>
            </div>
            <div class="legend-item">
              <span class="legend-dot pending"></span>
              <span class="legend-text">未完成</span>
            </div>
          </div>
          <base-table style="height: 204px;" :page="1" :limit="10000" :show-index="true" :beilv="1"
            :tableConfig="tableProps" :table-data="tableData" />
        </div>
      </div>
    </Container>
  </div>
</template>

<script>
import Container from './container.vue'
import baseTable from './baseTable.vue'
import finishDiv from './finishDiv.vue'

export default {
  name: 'ProductionStatus',
  components: { Container, baseTable },
  props: {
    importantWork: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      tableData: [],
      tableProps: [
        { prop: 'index', label: '攻坚指标', align: 'center',width:150 },
        { prop: 'target', label: '攻坚预算', align: 'center' },
        { prop: 'real', label: '当月实际', align: 'center' },
        { prop: 'total', label: '累计', align: 'center', subcomponent: finishDiv },
      ]
    }
  },
  watch: {
    importantWork: {
      handler(newVal) {
        this.tableData = this.transformData(newVal);
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    transformData(rawData) {
      return rawData.map((item, index) =>{
        return {
          ...item,
          id: index + 1,
          status: (item.rate >= 100) ? 'done' : 'pending'
        };
      })  
    }
  }
}
</script>

<style lang='scss' scoped>
.legend-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
}

.legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  border-radius: 2px;
}

.legend-dot.done {
  background-color: #4CAF50;
}

.legend-dot.pending {
  background-color: #FF9800;
}

.legend-text {
  font-size: 14px;
  color: #333;
}
</style>
