<template>
  <div style="height: 100%;padding: 10px;">
    <a-row style="height: 100%;" :gutter="[8, 8]">
      <a-col :span="5">
        <a-card title="" :bordered="true" style="width:100%;height:100%;">
         <Left @searchData="setDataList"></Left>
        </a-card>
      </a-col>
      <a-col :span="19">
        <vxe-grid v-bind="gridOptions" ref="tableRef">
          <template #toolbarButtons>
            <div style="margin:2px 20px;size:15px">指标填报列表：</div>
            <vxe-button size="small"  @click="handleApproval(1)">审批通过</vxe-button>
            <vxe-button size="small"  @click="handleApproval(2)">审批未通过</vxe-button>

            <div style="margin:auto">
              共搜索到 <span class="count-number">{{ totalRecords }}</span> 条记录
            </div>
           
          </template>
          <template #active="{ row }">
              <vxe-button mode="text" status="primary" @click="saveApproval(row.reportId,1)">通过</vxe-button>
              <vxe-button mode="text" status="error"  @click="saveApproval(row.reportId,2)">退回</vxe-button>
          </template>
          
        </vxe-grid>
      </a-col>
  </a-row>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted,ref } from 'vue'
import type { VxeGridProps } from 'vxe-table'
import { dataApprovalList,batchSaveApproval } from '../MetricReport.api';
import Left from './left.vue'

interface RowVO {
  id: number
  name: string
  role: string
  sex: string
  age: number
  address: string
}

const tableRef = ref()
const totalRecords = ref()
const gridOptions = reactive<VxeGridProps<RowVO>>({
  border: true,
  showOverflow: true,
  keepSource: true,
  height: "auto",
  exportConfig: {},
  columnConfig: {
    resizable: true
  },

  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },
  cellStyle ({ row, column }) {
    if (column.field === 'appSta') {
      if (row.appSta == '通过') {
        return {
          color: 'blue'
        }
      } else if (row.appSta == '未通过') {
        return {
          color: 'red'
        }
      
      } else if (row.appSta == '未审批') {
        return {
          backgroundColor: ''
        }
      }
    } else if (column.field === 'riskLevel') {
      if (row.riskLevel == '低风险') {
        return {
          color: '#73D13D'
        }
      } else if (row.riskLevel == '中风险') {
        return {
          color: '#FA8C16'
        }
      
      } else if (row.riskLevel == '高风险') {
        return {
          color: '#CF1322'
        }
      }
    }
  },
  columns: [
    { type: 'seq', width: 50 },
    { type: 'checkbox', width: 50 },
    
    { field: 'reportId', title: 'id', visible:false },
    { field: 'mtrcNo', title: '指标编码', sortable: true },
    { field: 'mtrcName', title: '指标名称', showOverflow: true },
    { field: 'collFreq', title: '采集频率', },
    { field: 'timeName', title: '填报时间' },
    { field: 'riskLevel', title: '风险等级' },
    { field: 'domainName', title: '所属领域', showOverflow: true },
    { field: 'mtrcCtp', title: '指标类型' },
    { field: 'fillVals', title: '填报值' },
    { field: 'appSta', title: '状态', },
    { field: 'active', title: '审批', width: 150, fixed: 'right', slots: { default: 'active' } }
  ],
  toolbarConfig: {
    refresh: true,
    export: true,
    zoom: true,
    custom: true,
    slots: {
      buttons: 'toolbarButtons',
    },
  },
  data: []
})

async function setDataList(params) {
  gridOptions.loading = true
  try {
    const res = await dataApprovalList(params);
    gridOptions.data = res || []
    totalRecords.value = res.length
  } catch (error) {
    console.error('加载数据失败:', error)
    gridOptions.data = []
  } finally {
    gridOptions.loading = false
  }
}

const handleApproval = async (appSta)=> {
  const ids = await getSelectIds();
  if(ids.length == 0){
    return;
  }
  batchSaveApproval({
    ids:ids,
    appSta:appSta
  },setDataList)
}

const saveApproval = async (id,sta)=> {
  batchSaveApproval({
    ids:[id],
    appSta:sta
  },function(){
    
  })

}

async function getSelectIds() {
  let ids = [];
  const $table = tableRef.value;
  if ($table) {
    const selRecords = $table.getCheckboxRecords();
    selRecords.forEach(function (ele) {
      ids.push(ele.reportId);
    });
  }
  return ids;
}

onMounted(async () => {
  await setDataList({});
})

defineExpose({
  setDataList,
})
</script>

<style scoped>
.custom-bottom {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-top: 1px solid #e1e4e8;
}

.record-count {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background: white;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  color: #606266;
}

.record-count i {
  margin-right: 8px;
  color: #409eff;
}

.count-number {
  font-weight: bold;
  color: #409eff;
  font-size: 16px;
  margin: 0 4px;
}

</style>