<template>
  <div class="page-div">
    <!-- <Header @reload="reload" @setPagination="setPagination" @getSelectRows="getSelectRows"></Header> -->
    <div class="report-content filter-container" style="display:flex;overflow:auto;height:50px; background-color:#f8f8f8;align-items: center;
      justify-content: flex-end;padding-right: 20px;">
      <div style="margin-right:10px;">
        <a-range-picker :presets="rangePresets" @change="onRangeChange" >
        </a-range-picker>
      </div>
      <div style="margin-right:10px">
        <a-input v-model:value="content" placeholder="请输入举报内容" />
      </div>
      <a-button style="background-color: #0076c8;" type="primary" :icon="h(SearchOutlined)" @click="searchTable">查询</a-button>
      <a-button style="background-color: #409167; margin-left:10px" type="primary" 
        :icon="h(VerticalAlignBottomOutlined)" @click="distribute">下发</a-button>
    </div>
    <div class="content">
      <BasicTable rowKey="id" @register="registerTable">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'isDistribute'">
            <a-tag  v-if="record.isDistribute" color="success">是</a-tag>
            <a-tag v-else color="error">否</a-tag>
          </template>
          <template v-if="column.key === 'action'">
            <a-button @click="openInfo(record)">详情</a-button>
          </template>
        </template>
      </BasicTable>
    </div>
    <a-modal style="width: 80vw;height:600px" v-model:open="modal" title="案件详情" :mask="true" 
      :maskClosable="false" :keyboard="false" :afterClose="closeModal">
      <InfoComponent v-if="modal" :showInfoId="showInfoId"></InfoComponent>
    </a-modal>
  </div>
  
</template>

<script setup lang="ts">
// import Header from './header/index.vue'
// import Table from './Table/index.vue'
import InfoComponent from './InfoComponent/index.vue'
import dayjs, {Dayjs} from 'dayjs';
import {ref, h, } from "vue"
import { SearchOutlined, VerticalAlignBottomOutlined  } from '@ant-design/icons-vue';
import {BasicTable, useTable} from '@/components/Table'
import { getLoadPage } from '@/api/sys/leadreporting';
import {message,} from 'ant-design-vue'
type RangeValue = [Dayjs, Dayjs];
let beginDate = ref()
let endDate = ref()
let content = ref()
let modal = ref(false)
let showInfoId = ref()
const rangePresets = ref([
  { label: '今天', value: [dayjs(), dayjs()] },
  { label: '最近一周', value: [dayjs().add(-1, 'w'), dayjs()] },
  { label: '最近一个月', value: [dayjs().add(-1, 'M'), dayjs()] },
  { label: '最近三个月', value: [dayjs().add(-3, 'M'), dayjs()] },
  { label: '最近六个月', value: [dayjs().add(-6, 'M'), dayjs()] },
  { label: '最近一年', value: [dayjs().add(-1, 'y'), dayjs()] },
]);
const columns = [
  {
    title: '举报人',
    dataIndex: 'name',
  },
  {
    title: '手机号',
    dataIndex: 'phone',
  },
  {
    title: '地点',
    dataIndex: 'address',
  },
  {
    title: '举报内容',
    dataIndex: 'content',
  },
  {
    title: '举报时间',
    dataIndex: 'createTime',
  },
  {
    title: '是否下发',
    dataIndex: 'isDistribute',
  },

];
const onRangeChange = (dates: RangeValue, dateStrings: string[]) => {
  if (dates) {
    beginDate.value = dateStrings[0]
    endDate.value = dateStrings[1]
  } else {
    beginDate.value = null
    endDate.value = null
  }
}
const [registerTable,{reload, setPagination,getSelectRows}] = useTable({
  beforeFetch: (params) => {
    console.log(params)
    let useParams = {...params}
    if(beginDate.value) useParams = {...useParams,beginDate:beginDate.value}
    if(endDate.value) useParams = {...useParams,endDate:endDate.value}
    if(content.value) useParams = {...useParams,content:content.value}
    return useParams
  },
  api:getLoadPage,
  columns,
  showIndexColumn: false,
  rowSelection: {
    type: 'checkbox',
  },
  actionColumn:{
    width: 80,
    title: '操作',
    dataIndex: 'action',
  }
})
const distribute = () => {
  const selectList = getSelectRows()
  if(selectList.length == 1){
    if(selectList[0].isDistribute){
      message.warning('已经下发的不能再次下发')
      return
    }
    let query = {id: selectList[0].id}
    // TODO request  暂时不下发
    Promise.resolve("success").then(res => {
      message.success(res)
    })
    reload()
  }else{
    message.warning('选中一个进行下发')
  }
  console.log(selectList)
}
const searchTable = () => {
  setPagination({current:1,pageSize:10})
  reload()
}
const openInfo = (info) => {
  modal.value = true
  showInfoId.value = info.id
}
const closeModal = () => {
  modal.value = false
  showInfoId.value = null
}
</script>

<style lang="scss" scoped>
.content{
  width: calc(100% - 20px);
  margin: auto;
  height: 823px;
  background-color: #fff;
  padding: 10px;
  overflow: hidden;
}
.page-div{
  background-color: #efefef;
}
.amap-wrapper {
  width: 100%;
height: 100%;

}

.desc-container {
  overflow-y: scroll;
}

/* 滑道样式 */
.desc-container::-webkit-scrollbar {
  width: 5px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
}

/* 定义滑块的样式 */
.desc-container::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.3);
}

/* 定义滑块鼠标移入时的样式 */
.desc-container::-webkit-scrollbar-thumb:hover {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.4);
}
</style>
