<template>
  <a-layout>
    <a-layout-content>
      <div style="padding: 0 10px; height: 80vh; position:relative">
        <vxe-grid
          size="small"
          ref="tableRef"
          height="auto"
          v-bind="gridOptions"
          :loading="loading"
          :radio-config="{ highlight: true }"
          :columnConfig="{ resizable: true }"
          :row-config="{ isCurrent: true, isHover: true}"
        >
          
        <template #toolbar_buttons>
          <vxe-button mode="text" status="primary" @click="handleCreateReport()">生成报告</vxe-button>
        </template>
        
          <template #item_default="{ row }">
            <vxe-button mode="text" status="primary" @click="handleEdit(row)">
              <div class="cell-content">{{ row.item }}</div>
            </vxe-button>
          </template>
          
          <template #operate="{ row }">
            <vxe-button mode="text" size="small" content="填写报告" @click="handleEdit(row)" :disabled="row.itemNum==0"/>
          </template>
        </vxe-grid>
      </div>
    </a-layout-content>
  </a-layout>
  <CheckItem ref="refCheckItemList" @callBack="callBackCheckItem"/>
  <CheckReport ref="refCheckReportList"/>
</template>

<script lang="ts" setup>
  import { ref, nextTick, reactive } from 'vue';
  import { useRouter } from 'vue-router';
  import { VXETable } from 'vxe-table';
  import { useModal } from '/@/components/Modal';
  import { VxeSelectEvents, VxeTablePropTypes, VxeColumnPropTypes, VxeTableInstance, VxeTableEvents } from 'vxe-table';

  import { saveProjectCheck,queryAllTaskForCurrentUser } from './components/api/AuditTask.api';
  import { getAllCheckMethodFiles } from './components/api/AuditCheckMethodItem.api';
  import CheckItem from './components/CheckItem.vue';
  import CheckReport from './components/CheckReport.vue';

  const refCheckItemList = ref();
  const refCheckReportList = ref();
  const tableRef = ref()

  const loading = ref(false);
  const fileList = ref([])
 
  const realNameList = ref([])

  const filterMethod: VxeColumnPropTypes.FilterMethod = ({ value, row }) => {
    return row['fileId'] == value;
  };

  const nameFilterRender: VxeColumnPropTypes.FilterRender = {
    name: 'VxeInput'
  }

  function textFilterMethod ({ option, row, column }) {
    if (option.data) {
      return `${row[column.field]}`.indexOf(option.data) > -1
    }
    return true
  }

  const gridOptions = reactive({
    border: true,
    autoresize:true,
    keepSource: true,
    showOverflow: true,
    loading: false,
    checkboxConfig: { checkStrictly: false },
    columnConfig: {
      useKey: false,
      resizable: true,
    },
    printConfig: {},
    importConfig: {},
    exportConfig: {},
    columns: [
      { type: 'radio', visible: true, width: '50', showOverflow: false },
      { field: 'content', title: '检查项', sortable: true,filters: [{ data: '' }], filterMethod:textFilterMethod,filterRender: nameFilterRender },
      { field: 'fileName', title: '参考文件', showOverflow: 'title', sortable: true, width:"20%", filters:fileList,filterMethod:filterMethod,filterMultiple:true},
      { field: 'caNames', title: '控制项', sortable: true, width:"15%",visible:false},
      { field: 'realname', title: '填报人', sortable: true, width:"10%",visible:true,filters:realNameList},
      { title: '操作', align: 'center', width: '10%', visible: true, fixed: 'right', slots: { default: 'operate' } },
      { field: 'itemNum', title: '项目数', sortable: true, width:"10%",visible:true},
    ],
    toolbarConfig: {
      refresh: false,
      zoom: true,
      custom: true,
      export: true,
      print: true,
      slots: {
        buttons: 'toolbar_buttons',
      },
    },
    scrollY: {
      enabled: true,
      gt: 50,
    },
    data: [],
  });
  const emit = defineEmits(['callBack']);

  async function iniData() {
    const retData = await queryAllTaskForCurrentUser({});
    gridOptions.data = retData;
    fileList.value = await getAllCheckMethodFiles('');
    const $table = tableRef.value;
    if($table) {
      $table.setFilter('fileName',fileList.value)
      setUserFilterOptions(retData)
    }
  }

  
  async function handleEdit(row) {
    refCheckItemList.value.iniData(row)
  }


  function handleCreateReport() {
    refCheckReportList.value.iniData();
  }

  async function setUserFilterOptions(data) {
    const names = await data.map(item => item.realname);  
    if(!names||names.length==0) return;
    const uniqueNames = [...new Set(names)]; 
    let filterUserOptions = []
    uniqueNames.forEach(function (ele) {
      let options = {label:ele,value:ele}
      filterUserOptions.push(options)
    });
    const $table = tableRef.value;
    $table.setFilter('realname',filterUserOptions)
  }

 function handleSearch() {}
 function refresh() {}
 function callBackCheckItem() {}

  defineExpose({
    iniData,
    handleSearch,
    refresh,
  });
</script>

<style scope>
  .layout {
    background: #fff;
    height: calc(90vh - 120px);
    margin: 0px 0px 0px 0px;
    overflow: hidden;
    min-height: 400px;
  }
  .ant-descriptions-item-label {
    width: 150px;
  }

  .cell-content {  
      text-align: left;
      white-space: normal; /* 允许文本换行 */  
      word-wrap: break-word; /* 按单词折行 */  
      overflow-wrap: break-word; /* 按单词折行 */  
      max-width: 100%; /* 根据需要设置最大宽度 */  
  } 
</style>
