<template>
  <div class="box">
    <div class="inquire">
            <span>分区</span>
            <el-select v-model="formData.partitionId" placeholder="请选择" @change="getlistByPartition()">
                <el-option v-for="item in partitionOptions" :key="item.id" :label="item.desc" :value="item.id">
                </el-option>
            </el-select>
        </div>

        <div class="inquire">
            <span>国家</span>
            <el-select v-model="formData.regionId" placeholder="请选择">
                <el-option v-for="item in adminCountryArr" :key="item.id" :label="JSON.parse(item.name).zh"
                :value="item.id">
                </el-option>
            </el-select>
        </div>
        <div class="inquire">
            <span>用户ID</span>
            <el-input v-model="formData.erbanNo" placeholder="" class="input"></el-input>
        </div>
        <div class="inquire">
            <span class="demonstration">日期</span>
            <el-date-picker v-model="dataTime" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
        </div>

        <div class="inquire">
            <span class="demonstration">状态</span>
            <el-select v-model="formData.status" placeholder="请选择">
          <el-option label="全部" :value="-1"></el-option>
          <el-option label="未发放" :value="0"></el-option>
          <el-option label="已经发放" :value="1"></el-option>
        </el-select>
        </div>
        <el-button style="" type="primary" @click="getData()">查询</el-button>
        <el-button class="primary" type="primary" @click="resetFormData()">重置</el-button>
        <el-button class="primary" type="primary" @click="confirmExport2Excel()">导出</el-button>
         <!-- 表格数据 -->
         <el-table v-loading="tableData.loading" :data="tableData.data" ref="multipleTable"
            @selection-change="handleSelectionChange" border style="width: 100%; margin-top: 25px">
            <el-table-column prop="statDate" align="center" label="日期" />
            <el-table-column prop="erbanNo" align="center" label="房间ID" />
            <el-table-column prop="roomName" align="center" label="房间昵称" />
            <el-table-column prop="partitionIdDesc" align="center" label="分区" />
            <el-table-column prop="regionName" align="center" label="国家" />
            <el-table-column prop="diamondNum" align="center" label="钻石流水" />
            <el-table-column prop="rewardGold" align="center" label="对应流水发放金币" />
            <el-table-column prop="status" align="center" label="状态">
                <template #default="row">
                    <span>{{ row.row.status == 0?'未发放':'已经发放'}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="sendTime" align="center" label="发放时间" />
            <el-table-column align="center" label="操作" width="300">
                <template v-slot="scope" >
                    <el-button class="primary" type="primary" @click="
                        sendDiamond(scope.row);
                    " size="default" v-if='scope.row.status == 0'>发放</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="operator" align="center" label="操作人" />
        </el-table>
        <!-- 分页 -->
        <el-pagination style="margin-top: 10px" class="paginationClass" :current-page="formData.pageNo"
            :page-size="formData.pageSize" :page-sizes="[10, 20, 50, 100, 200]" layout="sizes, prev, pager, next"
            :total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
    </template>
    <script>
import { ref, onMounted ,reactive} from 'vue'
import { listPartitionInfo } from "@/api/common/partition";
import { dateFormat } from "@/utils/system-helper";
import { ElMessage ,ElMessageBox} from "element-plus";
import { formatDate } from "@/utils/relDate";
import {
  getlistByPartitionId,getroomDayDiamondList
  ,roomDayDiamondExport,sendroomDayDiamond
} from "@/api/relAgency/relAgency.js";
export default {
    name: "dailyDiamondFlow",
    setup() {
        const dataTime = ref('');
        const formData = reactive({
            partitionId: '',
            erbanNo:'',
            pageNo: 1,
            pageSize: 10,
             startTime: '',
            endTime: '',
            status:-1,
            regionId:''
        })
        const tableData = reactive({
            data: [],
            total: 0,
            loading: false,
        })
        const adminCountryArr = ref([])
        const partitionOptions = ref([]);
        const getlistByPartition = () =>{
            getlistByPartitionId({partitionId:formData.partitionId,containAll:true}).then((res) => {
        if (res.code == 200) {
          adminCountryArr.value = res.data;
        }
      });
    }
    const getData = () => {
        tableData.loading = true;
        if (dataTime.value && dataTime.value.length > 0) {
                formData.startTime = dateFormat(dataTime.value[0], "yyyy-MM-dd");
                formData.endTime = dateFormat(dataTime.value[1], "yyyy-MM-dd");
            } else {
                formData.startTime = dataTime.value
                formData.endTime = dataTime.value
            }
        getroomDayDiamondList(formData).then(res=>{
            if(res.code === 200){
                tableData.data = res.data.rows;
                tableData.total = res.data.total;
                tableData.loading = false;
            }else{
                tableData.loading = false;
                ElMessage.error(res.message);

            }
        })
    }
    const sendDiamond =(row) =>{
        const id = row.id;
        ElMessageBox.confirm('确认发放吗', "提示", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        sendroomDayDiamond({id}).then(res=>{
            if(res.code === 200){
                ElMessage.success('发放成功');
                getData();
            }else{
                ElMessage.error(res.message);
            }
        })
      })

        
    }
    // 导出
    const confirmExport2Excel = async () => {
            Object.assign(formData, { pageSize: 10000, pageNo: 1 });
            try {
                const res = await roomDayDiamondExport(formData)
                if (res) {
                    ElMessage({
                        message: '导出成功',
                        type: 'success',
                    });
                    let time = formatDate(new Date());
                    let alink = document.createElement("a");
                    alink.download = `每日钻石流水${time}.xls`;
                    alink.style.display = "none";
                    const blob = new Blob([res]);
                    alink.href = URL.createObjectURL(blob);
                    document.body.appendChild(alink);
                    alink.click();
                    URL.revokeObjectURL(alink.href);
                }

            } catch (error) {
                ElMessage({
                    message: error.message,
                    type: 'error',
                });
            }
        }
    //重置
    const resetFormData = () => {
            Object.assign(formData, {
                partitionId: '',
            erbanNo:'',
            pageNo: 1,
            pageSize: 10,
             startTime: '',
            endTime: '',
            status:-1,
            regionId:''
            });
            tableData.data = [];
            tableData.total =0;
            dataTime.value = '';
        };
    const handleSizeChange = (val) => {
            formData.value.pageSize = val;
            getData();
        };
        const handleCurrentChange = (val) => {
            formData.value.pageNo = val;
            getData();
        };
        onMounted(() => {
            listPartitionInfo().then(res => {
                partitionOptions.value = res.data;
                formData.partitionId = partitionOptions.value[0].id;
                getlistByPartition();
            });
        });
        return {
            formData,
            partitionOptions,
            adminCountryArr,
            getlistByPartition,
            dataTime,
            tableData,
            getData,
            handleSizeChange,
            handleCurrentChange,
            sendDiamond,
            resetFormData,
            confirmExport2Excel
        }
    },
}
</script>
<style lang="less" scoped>
.box {
  padding-top: 20px;
  background: #ecf0f5;

  .inquire {
    display: inline-block;
    margin-right: 20px;

    span {
      margin-right: 10px;
    }

    .input {
      width: 180px;
      margin-right: 10px;
    }
  }

  .dialogTableVisibleBut {
    display: block;
    margin: 30px 0 0 830px;
  }

  .paginationClass {
    margin: 15px 0 5px 0px;
  }
}
</style>