<template>
    <a-tabs v-model:activeKey="activeKey" @change="onTabChange" style="width: 100%; margin-top: 10px;">
      <a-tab-pane key="" tab="全部"></a-tab-pane>
      <a-tab-pane key="0" tab="待处理" force-render></a-tab-pane>
      <a-tab-pane key="1" tab="处理中"></a-tab-pane>
      <a-tab-pane key="2" tab="已处理"></a-tab-pane>
    </a-tabs>
    <a-form
        :label-col="{ xl: 7, lg: 5, md: 7, sm: 4 }"
        :wrapper-col="{ xl: 17, lg: 19, md: 17, sm: 20 }"
      >
        <a-row :gutter="8">
            <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <a-form-item label="反馈时间">
                <a-range-picker v-model:value="queryform.backTime" :placeholder="['反馈时间起','反馈时间止']" />
                </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
            <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
                <a-space>
                <a-button type="primary" style="background-color: #5cc750" @click="search"
                    >查询</a-button
                >
                <!-- <a-button>重置</a-button> -->
                </a-space>
            </a-form-item>
            </a-col>
        </a-row>
    </a-form>
    <!-- 表格 -->
    <a-spin
        :spinning="spinning"
        :tip="tipContent"
    >
        <a-table
            :pagination="pagination"
            @change="handleTableChange"
            bordered
            :columns="columns"
            :dataSource="dataSource"
        >
            <template #headerCell="{ column }">
            <template v-if="column.key === 'action'">
                <SettingOutlined style="margin-right: 5px" />{{ column.title }}
            </template>
            </template>
            <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'dealState'">
                    {{ record.dealState == '0' ? '未处理' : record.dealState == '1' ? '处理中' : record.dealState == '2' ? '已处理' : '' }}
                </template>
                <template v-if="column.key === 'action'">
                    <a-space v-if="record.dealState == '0'">
                      <a @click="handleDeal(record)">处理</a>
                    </a-space>
                    <a-space v-if="record.dealState == '1'">
                      <a @click="handleDeal(record)">完成处理</a>
                    </a-space>
                    <!-- <a-divider type="vertical" /> -->
                </template>
            </template>
        </a-table>
    </a-spin>
    <!-- 处理停车点申请 -->
    <a-modal
      v-model:open="open"
      :title="openTitle"
      @ok="handleOkModal"
      @cancel="handleCancelModal"
      width="800px"
      :maskClosable="false"
    >
      <BackSiteForm ref="formModel"></BackSiteForm>
    </a-modal>
  </template>
  <script setup>
  import { ref, reactive, onMounted, nextTick } from 'vue';
  import { callOrder } from '@/apis/call.js'
  import { message } from 'ant-design-vue'
  import config from '@/utils/config.js'
  import { dataFormat } from '@/utils/tools'
import { getCache } from '@/utils/authority';
  import BackSiteForm from '@/views/form/backsite/BackSiteForm.vue'
  const activeKey = ref('');

  const open = ref(false);
  const openTitle = ref('处理停车点申请');
  const formModel = ref(null);

  const spinning = ref(false);
  const tipContent = ref("加载中...");
  // 表格行数据
  const dataSource = ref([]);
  const data = ref([])
  // 查询相关
  const queryform = ref({
    regionId: '',
    state: '',
    startTime: '',
    endTime: '',
    backTime: [
        '',
        ''
    ],
    pageParam: {
      pageNum: config.pageParam.pageNum,
      pageSize: config.pageParam.pageSize
    }
  })

  //对于每页数据的管理
  let pagination = reactive({
    total: dataSource.value.length,
    current: queryform.value.pageParam.pageNum,
    pageSize: queryform.value.pageParam.pageSize,
    showSizeChanger: true,
    pageSizeOptions: config.pageParam.pageSizeOptions,
    showQuickJumper: true
  })

  // 表格列配置
  const columns = ref([
    {
      title: '序号',
      key: 'index',
      width: 70,
      align: 'center',
      dataIndex: 'index'
    },
    {
      key: 'applySource',
      title: '上报来源',
      dataIndex: 'applySource',
      align: 'center'
    },
    {
      key: 'applyNickname',
      title: '昵称',
      dataIndex: 'applyNickname',
      align: 'center'
    },
    {
      key: 'applyPhone',
      title: '手机号',
      dataIndex: 'applyPhone',
      align: 'center'
    },
    {
      key: 'applyTime',
      title: '反馈时间',
      dataIndex: 'applyTime',
      align: 'center'
    },
    {
      key: 'dealState',
      title: '处理状态',
      dataIndex: 'dealState',
      align: 'center'
    },
    {
      key: 'applyPosition',
      title: '反馈位置',
      dataIndex: 'applyPosition',
      align: 'center'
    },
    {
      key: 'applyReason',
      title: '申请原因',
      dataIndex: 'applyReason',
      align: 'center'
    },
    {
      key: 'dealNotes',
      title: '操作备注',
      dataIndex: 'dealNotes',
      align: 'center'
    },
    {
      key: 'dealUser',
      title: '操作人',
      dataIndex: 'dealUser',
      align: 'center'
    },
    {
      key: 'dealTime',
      title: '处理时间',
      dataIndex: 'dealTime',
      align: 'center'
    },
    {
      title: '操作',
      key: 'action',
      width: 320,
      align: 'center'
    }
  ])

  //获取用户列表数据并格式化字段
  onMounted(async () => {
    getData();
  })

  const getData = async () => {
    spinning.value = true;
    let queryparams = queryform.value;
    if (queryparams.backTime && queryparams.backTime[0] != '') {
      queryparams.startTime = dataFormat(queryparams.backTime[0], 'yyyy-MM-dd HH:mm:ss');  
    }
    if (queryparams.backTime && queryparams.backTime[1]!= '') {
      queryparams.endTime = dataFormat(queryparams.backTime[1], 'yyyy-MM-dd HH:mm:ss'); 
    }
    delete queryparams.backTime;
     //获取默认区域
    const userdefultoperation = getCache('ebike-userdefultoperation');
    queryparams.regionId = userdefultoperation.regionId;
    const res = await callOrder("/ebikeUserBacksite/page", queryparams);
    spinning.value = false;
    if (res.code != 200) {
      message.error(res.message)
      dataSource.value = []
      data.value = []
      pagination.total = 0
      return
    }
    data.value = res.data.records
    data.value = data.value.map((item, index) => {
      index++
      return { ...item, index }
    })
    dataSource.value = data.value
    pagination.total = res.data.totalRow
  }

  // 对每页数据显示的交互
  let handleTableChange = (pagina) => {
    pagination.current = pagina.current
    pagination.pageSize = pagina.pageSize
    queryform.value.pageParam.pageNum = pagina.current
    queryform.value.pageParam.pageSize = pagina.pageSize
    getData()
  }
  
  const search = () => {
    getData()
  }

  const onTabChange = (key) => {
    activeKey.value = key;
    queryform.value.state = key;
    getData()
  }

  const handleDeal = async (record) => {
    open.value = true;
    nextTick(() => {
      if (formModel.value) {
        formModel.value.openForm({ ...record });
      } else {
        console.log('formModel is not ready yet');
      }
    });
  }

  /**
  * 处理停车点申请modal确定
  */
  const handleOkModal = () => {
    formModel.value.formSave(bres => {
      open.value = false;
      if(bres){
        getData()
      }
    });
  }

  const handleCancelModal = () => {
    formModel.value.resetAll(bres => {
      if(bres) open.value = false;
    });
  }
  </script>