<template>
  <PageWrapper dense>
    <Row>
      <!-- 左边部门选择 -->
      <Col v-bind="{ xs: 24, sm: 24, md: 24, lg: 4 }" class="h-[calc(100vh-80px)]">
        <DeptTree
          v-model:selectDeptId="selectDeptId"
          v-model:searchValue="searchValue"
          @select="reloadMenu"
        />
      </Col>
      <Col v-bind="{ xs: 24, sm: 24, md: 24, lg: 20 }">
        <div
          style="
            background-color: white;
            border-radius: 8px;
            margin: 8px;
            padding: 16px 16px 16px 16px;
          "
        >
          <BasicForm @register="registerForm"> </BasicForm>
          <div style="width: 100%; display: flex; justify-content: flex-end">
            <a-button type="default" style="margin-right: 8px" @click="handleCancle">重置</a-button>
            <a-button type="primary" @click="handleSubmit">搜索</a-button>
          </div>
        </div>

        <div style="margin-left: 8px">
          <BasicTable @register="registerTable" :showLayout="true">
            <template #showEcharts>
              <div>
                <VisitRadar ref="visitRef" :sData="sData" :loading="loading"></VisitRadar>
              </div>
            </template>
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'ratio'">
                <div> {{ record.ratio }}{{ record.ratio && record.ratio * 1 > 0 ? '%' : '' }} </div>
              </template>
              <template v-if="column.key === 'action'"> </template>
            </template>
          </BasicTable>
        </div>
      </Col>
    </Row>
  </PageWrapper>
</template>

<script setup lang="ts">
import { Row, Col } from 'ant-design-vue';
import { BasicForm, useForm } from '@/components/Form';
import { elevatorBadDeviceExport } from '@/api/basicInfo/evaDeviceRelation';
import { downloadExcel } from '@/utils/file/download';
import { PageWrapper } from '@/components/Page';
import { BasicTable, useTable } from '@/components/Table';
import { evaBadadList, evaBrandList, infoList } from '@/api/basicInfo/elevator';
import { formSchemas, columns } from './info.data';
import { onMounted, ref, toValue } from 'vue';
import DeptTree from './DeptTree.vue';
import VisitRadar from './VisitRadar.vue';
defineOptions({ name: 'Info' });
// 左边部门用
const selectDeptId = ref<string[]>([]);
const searchValue = ref<string>('');
const echartsXData = ref<any>([]);
const sData = ref<any>([]);
const loading = ref<boolean>(false);
const visitRef = ref<InstanceType<typeof VisitRadar> | null>(null);
const [registerTable, { reload, getForm, setTableData }] = useTable({
  title: '品牌统计表',
  // api: evaBadadList,
  afterFetch(data) {
    console.log(data, 'data');
    return data;
  },
  showIndexColumn: false,
  rowKey: 'id',
  useSearchForm: false,
  formConfig: {
    schemas: formSchemas,
    baseColProps: {
      xs: 24,
      sm: 24,
      md: 24,
      lg: 8,
    },
    resetFunc: async () => {
      selectDeptId.value = [];
      searchValue.value = '';
      await reload();
    },
  },
  columns: columns,
  // 需要添加上部门参数
  beforeFetch(params: Recordable) {
    params.faultTypeKey = 'fault_type';
    return params;
  },

  // actionColumn: {
  //   width: 100,
  //   title: "操作",
  //   key: "action",
  // },
});
const [
  registerForm,
  { setFieldsValue, resetForm, validate, updateSchema, setProps, getFieldsValue },
] = useForm({
  labelWidth: 100,
  showActionButtonGroup: false,
  baseColProps: { span: 8 },
  schemas: formSchemas,
});
onMounted(() => {
  getAllData({});
});
const reloadMenu = ()=>{
  const data = getFieldsValue();
  getAllData(data);
}
const getAllData = async (data) => {
  const res = await evaBrandList({ ...data, deptId: toValue(selectDeptId)[0] });
  console.log(res, 'res');
  setTableData(res);

  sData.value = res.map((item) => {
    return {
      value: item.brandTotal,
      name: item.brand,
    };
  });
  console.log(sData.value, 'ressssss');
};
function handleCancle() {
  resetForm();
  selectDeptId.value = []
  getAllData({});
}
function handleSubmit() {
  const data = getFieldsValue();
  getAllData(data);
}
</script>

<style scoped></style>
