<template>
  <ChartsContainer name="班组级任务明细">
    <template #describe>
      完成情况：{{ `${tableData.notStartedCount || 0}/${tableData.inProgressCount || 0}/${tableData.completedCount || 0}` }}
    </template>
    <template #other>
      <span style="margin-right: 10px; font-size: 14px; white-space: nowrap;">{{ tableData.taskName || '' }} 每日{{ tableData.ruleTypeNum || 1 }}次</span>
      <CustomStyleSelect :options="selectList" v-model="selectActive"/>
    </template>
    <div style="height: 100%;">
      <el-table  v-auto-scroll :data="tableData.checkLargeScreenInspectionExecuteItemDtoList" border style="width: 100%" height="100%">
        <el-table-column prop="userName" label="姓名" width="90" />
        <el-table-column prop="completionPercentage" label="今日完成比例">
          <template #default="scope">
            <el-progress
              :text-inside="true"
              :stroke-width="16"
              :percentage="scope.row.completionPercentage"
              style="--el-border-color-lighter: #fff"
              color="#58A55C"
            />
          </template>
        </el-table-column>
        <el-table-column prop="checkOrderCount" label="整改单数" width="90" />
        <el-table-column prop="rectificationOrderCount" label="不合格项数" width="100" />
      </el-table>
    </div>
  </ChartsContainer>
</template>

<script setup>
import ChartsContainer from '../ChartsContainer.vue';
import CustomStyleSelect from './CustomStyleSelect.vue'
import { computed, ref } from 'vue';

const props = defineProps({
  tableData: {
    type: Array,
    default: []
  }
})
const selectActive = ref('')
const selectList = computed(() => { 
  const options = props.tableData.map(item => {
    return ({ label: item.taskName, value: item.taskCode })
  }) 
  selectActive.value = options[0] ? options[0].value : ''
  return options || []
})

const tableData = computed(() => {
  return props.tableData.find(item => item.taskCode === selectActive.value) || {}
})

</script>

<style lang="scss" scoped></style>