<template>
  <div>
    <!-- <a-table 
      :columns="tableColumns" 
      :data-source="data" 
      bordered
      :pagination="false"
      :scroll="{ x: 2000 }">
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.key === 'action'">
          <span>
            <a @click="editData(record)">编辑</a>
            <a-divider type="vertical" />
            <a @click="delData(record)">删除</a>
          </span>
        </template>
      </template>
      <template #title>
        <a-date-picker v-model:value="selectYear" picker="year" @change="changeYearData" valueFormat="YYYY" />
        <div class="buttonGroup">
          <a-button type="primary" @click="addNewData">新增</a-button>
          <a-button type="primary">导入</a-button>
          <a-button type="primary">导出</a-button>
          <a-button type="primary">模板下载</a-button>
          <a-button type="primary" @click="uploadVoucher">上传凭证</a-button>
          <a-button type="primary">凭证下载</a-button>
        </div>
      </template>
    </a-table> -->
    <ns-view-list-table v-bind="tableConfig" :model="data" ref="mainRef" :scroll="{ x: 1500}" />
      <!-- <a-pagination 
        :current="queryParams.pageNum"
        :total="total"
        :page-size="queryParams.pageSize"
        style="display: flex;justify-content: center;margin-top: 16px;"
        :show-size-changer="true"
        :show-quick-jumper="true"
        @change="onChange" /> -->
    <!-- 新增数据库数据 -->
    <a-drawer
      :width="500"
      :visible="visible"
      :body-style="{ paddingBottom: '80px' }"
      :footer-style="{ textAlign: 'right' }"
      destroyOnClose
      @close="onClose">
      <a-form
        ref="formRef"
        :model="formState"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-item ref="name" label="能源种类" name="energyType">
          <a-input v-model:value="formState.energyType" placeholder="请输入能源种类" />
        </a-form-item>
        <a-form-item label="计量单位" name="unit">
          <a-cascader v-model:value="formState.unit" :options="measurementUnit" />
        </a-form-item>
        <a-form-item label="自动采集节点" name="collectionNode">
          <a-tree-select
            v-model:value="formState.collectionNode"
            :tree-line="true"
            :tree-data="treeData"
          >
          </a-tree-select>
        </a-form-item>
        <a-form-item label="计算碳排" name="isComputeCarbon">
          <a-radio-group v-model:value="formState.isComputeCarbon" @change="changeRadio">
            <a-radio :value="0">是</a-radio>
            <a-radio :value="1">否</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="排放类型" name="emissionType" :required="isRequired">
          <a-select v-model:value="formState.emissionType" placeholder="请选择排放类型">
            <a-select-option v-for="(item, index) in emissionTypeDic" :key="index" :value="item.id">
              {{ item.cnValue }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-row>
          <a-col :span="24" style="display:flex;justify-content: space-around;">
            <a-form-item label="1月" name="janFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
              <a-switch v-model:checked="formState.janFlag" :checked-value="1" :unCheckedValue="0" />
            </a-form-item>
            <a-form-item label="2月" name="febFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
              <a-switch v-model:checked="formState.febFlag" :checked-value="1" :unCheckedValue="0" />
            </a-form-item>
            <a-form-item label="3月" name="marFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
              <a-switch v-model:checked="formState.marFlag" :checked-value="1" :unCheckedValue="0" />
            </a-form-item>
          </a-col>
          <a-col :span="24" style="display:flex;justify-content: space-around;">
            <a-form-item label="4月" name="aprFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
              <a-switch v-model:checked="formState.aprFlag" :checked-value="1" :unCheckedValue="0" />
            </a-form-item>
            <a-form-item label="5月" name="mayFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
              <a-switch v-model:checked="formState.mayFlag" :checked-value="1" :unCheckedValue="0" />
            </a-form-item>
            <a-form-item label="6月" name="junFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
              <a-switch v-model:checked="formState.junFlag" :checked-value="1" :unCheckedValue="0" />
            </a-form-item>
          </a-col>
          <a-col :span="24" style="display:flex;justify-content: space-around;">
            <a-form-item label="7月" name="julFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
              <a-switch v-model:checked="formState.julFlag" :checked-value="1" :unCheckedValue="0" />
            </a-form-item>
            <a-form-item label="8月" name="augFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
              <a-switch v-model:checked="formState.augFlag" :checked-value="1" :unCheckedValue="0" />
            </a-form-item>
            <a-form-item label="9月" name="sepFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
              <a-switch v-model:checked="formState.sepFlag" :checked-value="1" :unCheckedValue="0" />
            </a-form-item>
          </a-col>
          <a-col :span="24" style="display:flex;justify-content: space-around;">
            <a-form-item label="10月" name="octFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
              <a-switch v-model:checked="formState.octFlag" :checked-value="1" :unCheckedValue="0" />
            </a-form-item>
            <a-form-item label="11月" name="novFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
              <a-switch v-model:checked="formState.novFlag" :checked-value="1" :unCheckedValue="0" />
            </a-form-item>
            <a-form-item label="12月" name="decFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
              <a-switch v-model:checked="formState.decFlag" :checked-value="1" :unCheckedValue="0" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <template #footer>
        <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
        <a-button type="primary" @click="onSubmit">确定</a-button>
      </template>
    </a-drawer>
    <!-- 上传凭证弹窗 -->
    <a-modal :visible="openUpload" title="凭证上传" @ok="handleOk" @cancel="closeOpenUpload">
      <a-upload-dragger
        v-model:fileList="fileList"
        name="file"
        :multiple="true"
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        @change="handleChange"
        @drop="handleDrop"
      >
        <p class="ant-upload-drag-icon">
          <inbox-outlined></inbox-outlined>
        </p>
        <p class="ant-upload-hint" style="display: flex;flex-direction: column;">
          <p>1.仅支持pdf格式文件或文件夹</p>
          <p>2.文件命名规则为【能源种类_年份】</p>
          <p>3.每次上传自动覆盖</p>
        </p>
      </a-upload-dragger>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
  import { ref,reactive, toRaw } from 'vue';
  import type { UnwrapRef } from 'vue';
  import type { Rule } from 'ant-design-vue/es/form';
  import { Pagination,message,Modal   } from 'ant-design-vue';
  import { InboxOutlined } from '@ant-design/icons-vue';
  import type { CascaderProps,TreeSelectProps,UploadChangeParam } from 'ant-design-vue';
  import { NsMessage } from '/nerv-lib/component';
  import dayjs, { Dayjs } from 'dayjs';
  import { http } from '/nerv-lib/util/http';
  import { tableColumns } from '../config';
  import { energyConsumption,carbonEmissionFactorLibrary } from '/@/api/carbonEmissionFactorLibrary';
  import { group } from '/@/api/deviceManage';
  import { dict } from '/@/api';
  defineOptions({
    energyType: 'EnergyConsumption', // 与页面路由name一致缓存才可生效
    components: {
      'a-pagination': Pagination,
    },
  });
  const orgId = ref('');
  const result = JSON.parse(sessionStorage.getItem('ORGID')!);
  orgId.value = result;
  const fetch = (api, params = { orgId } ) => {
    return http.post(api, params);
  };
  const selectYear = ref<Dayjs>(dayjs( new Date().getFullYear().toString()));
  const total = ref<number>()
  const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    orgId: orgId.value,
    year: selectYear.value.format('YYYY')
  })
  const isRequired = ref(false);
  const visible = ref(false);
  const openUpload = ref<boolean>(false);
  const data = ref([]);
  interface FormState {
    energyType: string;
    unit: string;
    collectionNode: string;
    emissionType: string | undefined;
    isComputeCarbon: string;
    janFlag: string;
    febFlag: string;
    marFlag: string;
    aprFlag: string;
    mayFlag: string;
    junFlag: string;
    julFlag: string;
    augFlag: string;
    sepFlag: string;
    octFlag: string;
    novFlag: string;
    decFlag: string;
  }
  const formRef = ref();
  const labelCol = { span: 5 };
  const wrapperCol = { span: 19 };
  const switchLabelCol = { span: 10 };
  const switchWrapperCol = { span: 14 };
  const formState = ref({})
  // 定义form表单的必填
  const rules: Record<string, Rule[]> = {
    energyType: [{ required: true, message: '请输入能源种类', trigger: 'change' }],
    isComputeCarbon: [{ required: true, message: '请选择是否计算碳排', trigger: 'change' }]
  };
  // 排放类型的变量
  const emissionTypeDic = ref()
  // 计量单位的变量
  const measurementUnit = ref([])
  // 定义自动采集节点数的变量
  const treeData = ref<TreeSelectProps['treeData']>([]);
  // 年份选择改变触发
  const changeYearData = () => {
    queryParams.value.year = selectYear.value
    getTableList()
  }
  const mainRef = ref();
  const year = selectYear.value.format('YYYY')
  const tableConfig = ref({
    title: '能耗统计',
    api: energyConsumption.pageList,
    params: queryParams.value,
    headerActions: [
      {
        label: '新增',
        name: 'userAdd',
        type: 'primary',
        handle: () => {
          getDictList()
          visible.value = true
        },
      },
      {
        label: '导入',
        type: 'primary',
        name: 'userImport',
        handle: () => {},
      },
      {
        label: '导出',
        type: 'primary',
        name: 'userExports',
      },
      {
        label: '模板下载',
        type: 'primary',
        name: 'userExports',
      },
      {
        label: '上传凭证',
        type: 'primary',
        handle: () => {
          openUpload.value = true;
        },
      },
      {
        label: '凭证下载',
        type: 'primary',
        name: 'userExports',
      },
    ],
    columns: [
      {
        title: '序号',
        customRender: (text: any) => {
          return text.index + 1;
        },
      },
      {
        title: '能源种类',
        dataIndex: 'energyType',
      },
      {
        title: '计量单位',
        className: 'unit',
        dataIndex: 'unit',
      },
      {
        title: '全年',
        dataIndex: 'yearly',
      },
      {
        title: '1月',
        dataIndex: 'jan',
        // customRender: ({ text, record }) => ({
        //   children: text,
        //   attrs: {
        //     style: record.janFlag === 1 ? 'color: red' : 'color: blue'
        //   }
        // })
      },
      {
        title: '2月',
        dataIndex: 'feb',
      },
      {
        title: '3月',
        dataIndex: 'mar',
      },
      {
        title: '4月',
        dataIndex: 'apr',
      },
      {
        title: '5月',
        dataIndex: 'may',
      },
      {
        title: '6月',
        dataIndex: 'jun',
      },
      {
        title: '7月',
        dataIndex: 'jul',
      },
      {
        title: '8月',
        dataIndex: 'aug',
      },
      {
        title: '9月',
        dataIndex: 'sep',
      },
      {
        title: '10月',
        dataIndex: 'oct',
      },
      {
        title: '11月',
        dataIndex: 'nov',
      },
      {
        title: '12月',
        dataIndex: 'dec',
      },
    ],
    columnActions: {
      title: '操作',
      actions: [
        {
          label: '编辑',
          name: 'userEdit',
          handle: (record: any) => {
            getDictList()
            visible.value = true
            fetch(energyConsumption.findById , {id : record.id }).then((res) => {
              if(res.data.unit){
                res.data.unit = res.data.unit.split(',')
              }
              formState.value = res.data
            });
          },
        },
        {
          label: '删除',
          name: 'userDelete',
          dynamicParams: { id: 'id' },
          confirm: true,
          isReload: true,
          api: energyConsumption.del,
        },
      ],
    },

    formConfig: {
      schemas: [
        {
          field: 'year',
          label: '年份',
          component: 'NsDatePicker',
          componentProps: {
            picker: 'year',
            valueFormat: 'YYYY',
            defaultValue: selectYear.value.format('YYYY'),
          },
        },
      ],
      params: {},
    },
    rowKey: 'id',
  });
  // 获取表格数据
  const getTableList = () => {
    fetch(energyConsumption.pageList , queryParams.value).then((res) => {
      data.value = res.data.records
    });
  };
  // 分页器
  const onChange = (pageNumber: number,size: number) => {
    queryParams.value.pageNum = pageNumber;
    queryParams.value.pageSize = size;
    mainRef.value?.nsTableRef.reload();
  };
  // 计算碳排切换
  const changeRadio = (e) => {
    if(e.target.value === 0){
      isRequired.value = true
    }else{
      isRequired.value = false
    }
  };
  // 点击确定提交
  const onSubmit = () => {
    formRef.value
      .validate()
      .then(() => {
        console.log('values', formState, toRaw(formState));
        if(formState.value.unit){
          formState.value.unit = formState.value.unit.join(',')
        }
        if(formState.value.id){
          fetch(energyConsumption.update , formState.value).then((res) => {
            visible.value = false
            formState.value = {}
            message.success('操作成功！');
            mainRef.value?.nsTableRef.reload();
          });
        }else{
          fetch(energyConsumption.creat , formState.value).then((res) => {
            if(res.data === '新增数据已存在'){
              visible.value = false
              NsMessage.warning(res.data);
            }else{
              visible.value = false
              formState.value = {}
              message.success('操作成功！');
              mainRef.value?.nsTableRef.reload();
            }
          });
        }
      })
      .catch(error => {
        console.log('error', error);
      });
  };
  // 获取字典值
  const getDictList = () => {
    // 获取排放类型的数据
    fetch(energyConsumption.getDicList , {grp: 'EMISSION_TYPE'}).then((res) => {
      emissionTypeDic.value = res.data
    });
    // 获取计量单位的数据
    fetch(carbonEmissionFactorLibrary.dictionaryUnitManagement, { grp: 'MEASUREMENT_UNIT'}).then((res) => {
      measurementUnit.value = res.data
      measurementUnit.value = measurementUnit.value.map(item => ({
        value: item.id,
        label: item.cnValue,
        children: item.children ? item.children.map(child => ({
            value: child.id,
            label: child.cnValue
        })) : []
      }));
    });
    // 获取自动采集节点的数据
    fetch(group.queryDeviceGroupTree, { energyType: 'ELECTRICITY_USAGE',orgId: orgId.value }).then((res) => {
      treeData.value = res.data
      treeData.value = treeData.value.map(item => ({
        value: item.id,
        label: item.pointName,
        children: item.children ? item.children.map(child => ({
            value: child.id,
            label: child.pointName
        })) : []
      }));
    });
  }
  // 点击新增按钮
  const addNewData = () => {
    getDictList()
    visible.value = true
  }
  // 点击编辑按钮
  const editData = (record) =>{
    getDictList()
    visible.value = true
    fetch(energyConsumption.findById , {id : record.id }).then((res) => {
      if(res.data.unit){
        res.data.unit = res.data.unit.split(',')
      }
      formState.value = res.data
    });
  };
  // 点击删除
  const delData = (record) => {
    Modal.confirm({
      title: '警告',
      content: '确定要删除吗?',
      okText: '确定',
      okType: 'primary',
      cancelText: '取消',
      onOk() {
        fetch(energyConsumption.del , {id : record.id }).then((res) => {
          message.success('操作成功！');
          mainRef.value?.nsTableRef.reload();
        });
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  // 关闭新增抽屉
  const onClose = () => {
    visible.value = false;
    formState.value = {}
    formRef.value.resetFields();
  };
  // 点击上传凭证按钮
  const uploadVoucher = () => {
    openUpload.value = true;
  };
  // 上传凭证弹窗点击确定
  const handleOk = (e: MouseEvent) => {
    console.log(e);
    openUpload.value = false;
  };
  // 上传凭证相关方法及变量
  const fileList = ref([]);
  const handleChange = (info: UploadChangeParam) => {
    const status = info.file.status;
    if (status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (status === 'done') {
      message.success(`${info.file.name} 文件上传成功`);
    } else if (status === 'error') {
      message.error(`${info.file.name} 文件上传失败`);
    }
  };
  function handleDrop(e: DragEvent) {
    console.log(e);
  }
  // 关闭上传凭证弹窗
  const closeOpenUpload = () =>{
    openUpload.value = false;
  };
</script>
<style scoped lang="less">
  ::v-deep .ant-table-title{
    display: flex;
  }
  ::v-deep .ant-table-container{
    padding: 0px 16px;
  }
  .buttonGroup{
    margin-left: 1vw;
    width: 30vw;
    display: flex;
    justify-content: space-around;
  }
</style>
<style scoped>
  th.column-money,
  td.column-money {
    text-align: right !important;
  }
</style>