<template>
   <div>
      <!--搜索条件-->
      <div class="from-container" >
         <el-form ref="queryFromRef" label-width="82px" :model="queryFrom" >
            <el-row :gutter="0">
               <el-col :span="7">
                  <el-form-item label="创建时间" prop="crtTime">
                     <el-date-picker v-model="queryFrom.crtTime" type="daterange" unlink-panels range-separator="-" 
                     start-placeholder="开始时间" end-placeholder="结束时间" 
                     :default-value="[XEUtils.getWhatMonth(new Date(), 0, 'first'), new Date()]"  :clearable="false"/>
                  </el-form-item>
               </el-col>
               <el-col :span="7">
                  <el-form-item label="状态" prop="state" >
                     <el-select v-model="queryFrom.state" placeholder="请选择状态" clearable>
                        <el-option
                           v-for="item in stateOptions"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"
                        />
                     </el-select>
                  </el-form-item>
               </el-col>
               <el-col :span="9" class="ab-text-right" >
                  <el-button type="primary" @click="useTableQueryReload(tableRef)">查询</el-button>
               </el-col>
            </el-row>
         </el-form>
      </div>
      <!--表格-->
      <div class="table-container">
         <vxe-grid ref="tableRef" v-bind="tableOptions">
         <template #module="{ row }">
            {{ row.menu }}/{{ row.module }}
         </template>
         <template #state="{ row }">
            <el-text v-if="1===row.state" type="primary">处理中</el-text>
            <el-text v-else-if="2===row.state" type="success">成功</el-text>
            <el-text v-else-if="-1===row.state" type="danger">失败</el-text>
            <el-text v-else>待处理</el-text>
         </template>
         <template #progress="{ row }">
            <el-text v-if="row.progress">{{row.progress}}%</el-text>
            <el-text v-else></el-text>
         </template>
         <template #operate="{ row }">
            <el-link v-if="row.address" type="primary"  :underline="false" @click="downloadFile(row.address)" title="下载"><el-icon size="20"><Download /></el-icon></el-link>
            <el-text v-else></el-text>
         </template>
         </vxe-grid>
      </div>
   </div>
</template>
<script lang="ts">
</script>
<script setup lang="ts">
import XEUtils from 'xe-utils'
import { useQueryParamsHandle,useTableQueryReload } from '@/framework/hooks/useVxeTableHandle'
import type { FormInstance } from 'element-plus'
import {queryAsyncEvents} from '@/framework/api/sms/index'
import { gridDefaultProps } from '@/framework/utils/standard/vxe.ts'
import { useUserStore } from "@/framework/store/modules/user";

const userStore = useUserStore()

const stateOptions = [{ value: '0', label: '待处理', }, { value: '1', label: '处理中', }, { value: '2', label: '成功', }, { value: '-1', label: '失败', }]

const downloadFile = (address) => {
   if(XEUtils.startsWith(address, '/')){
      window.location.href=address
   }else{
      window.location.href='/'+address
   }
}

const queryFromRef = ref<FormInstance>()
const queryFrom=reactive({ state:'', crtTime:ref<[Date, Date]>([XEUtils.getWhatMonth(new Date(), 0, 'first'),new Date(),]) })
/**表格初始化 */
// const tableData = ref([])
const tableRef = ref<VxeGridInstance>()//表格对象
const tableOptions = reactive<VxeGridProps>(gridDefaultProps({
  params: reactive<VxeTableParam>({
    clientPage: false, //是否客户端分页
  }),
  rowConfig: {keyField: 'id'},//自定义行数据唯一主键的字段名
  pagerConfig: { enabled: true, pageSize: 10, pageSizes: [10, 20, 50, 100] },//分页配置
  proxyConfig: {
    seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
    sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
    filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
    props: { result: 'data', total: 'total' },// 对应响应结果，按照后台服务PageResult对象配置
    ajax: {
      // 接收 Promise 对象
      query: ({ page, sorts, filters }) => {
         const params={state:queryFrom.state,startdate:'',enddate:''}
         if(''!==queryFrom.crtTime){
            params.startdate=XEUtils.toDateString(queryFrom.crtTime[0], 'yyyy-MM-dd')
            params.enddate=XEUtils.toDateString(queryFrom.crtTime[1], 'yyyy-MM-dd')
         }
         const queryParams = useQueryParamsHandle(params, page, sorts, filters)//请求参数处理
         return queryAsyncEvents(queryParams) //服务端分页查询
      },
    }
  },
  columns: [
   { type: 'seq', title: '序号',width:'50px',align:'center'},
   { field: 'businessName', title: '业务类型' },
   { field: 'businessCode', title: '业务码' },
   // { field: 'module', title: '模块',slots: {default: 'module'},},
   { field: 'state', title: '状态',align:'center', width:'80px',slots: {default: 'state'},},
   { field: 'progress', title: '进度',align:'center', width:'80px',slots: {default: 'progress'},},
   { field: 'crtTime',title: '创建时间' ,align:'center', width:'160px'},
   { field: 'reason', title: '失败原因'  },
   { field: '', title: '操作',slots: {default: 'operate'},align:'center'},//操作类居中显示 
  ]
}))
</script>

<style lang="scss" scoped>

</style>