<template>
    <div>
        <el-card>
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="系统优惠券" name="0">
                    <el-form :model="searchForm" label-width="auto" :inline="true">
                        <el-form-item label="优惠券名称：">
                            <el-input style="width:230px" clearable v-model="searchForm.coupon_name"
                                placeholder="请输入优惠券名称"></el-input>
                        </el-form-item>
                        <el-form-item label="优惠券状态：">
                            <el-select style="width:210px" v-model="searchForm.coupon_status" placeholder="请选择优惠券状态"
                                clearable>
                                <el-option label="正常" :value="1" />
                                <el-option label="强制失效" :value="2" />
                                <el-option label="结束" :value="3" />
                                <el-option label="删除" :value="4" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="适用范围：">
                            <el-select style="width:210px" v-model="searchForm.application_scope" placeholder="请选择适用范围"
                                clearable>
                                <!-- 1:全场通用 2:单项 3:会员 -->
                                <el-option label="全场通用" :value="1" />
                                <el-option label="单项" :value="2" />
                                <el-option label="会员" :value="3" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="优惠券类型：">
                            <el-select style="width:210px" v-model="searchForm.coupon_type" placeholder="请选择优惠券类型"
                                clearable>
                                <!-- 优惠券类型（1:无门槛 2:满减） -->
                                <el-option label="无门槛" :value="1" />
                                <el-option label="满减" :value="2" />
                               
                            </el-select>
                        </el-form-item>
                        <el-form-item label="">
                            <el-button type="primary" @click="search">查询</el-button>
                        </el-form-item>
                    </el-form>
                    <el-divider />
                    <el-row>
                        <el-button type="success" @click="addSysCoupon">新增</el-button>
                    </el-row>

                    <el-table :data="tableData" border style="width: 100%;margin-top:20px">
                        <el-table-column prop="coupon_name" label="优惠卷名称" width="95">

                        </el-table-column>
                        <el-table-column prop="coupon_type" label="优惠卷类型" width="95">
                            <template #default="scope">
                                <span>{{ scope.row.coupon_type==1 ? '无门槛' : '满减' }}</span>
                            </template>
                        </el-table-column>
                       
                        <el-table-column prop="coupon_type" label="状态">
                            <template #default="scope">
                                <span v-if="scope.row.coupon_status == 1">正常</span>
                                <span v-else-if="scope.row.coupon_status == 2">强制失效</span>
                                <span v-else-if="scope.row.coupon_status == 3">结束</span>
                                <span v-else>删除</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="application_scope" label="适用范围" width="85">
                            <template #default="scope">
                                <span v-if="scope.row.application_scope == 1">全场通用</span>
                                <span v-else-if="scope.row.application_scope == 2">单项</span>
                                <span v-else-if="scope.row.application_scope == 3">会员</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="is_mutex" label="是否互斥" width="85">
                            <template #default="scope">
                                <span v-if="scope.row.is_mutex == 1">是</span>
                                <span v-else-if="scope.row.is_mutex == 0">否</span>

                            </template>
                        </el-table-column>
                        <el-table-column prop="coupon_count" label="发放数量" width="85" />
                        <el-table-column prop="coupon_take_count" label="已领取数量" width="95" />
                        <el-table-column prop="coupon_used_count" label="已使用数量" width="95" />
                        <el-table-column prop="coupon_price" label="优惠卷金额" width="100" />
                        <el-table-column prop="is_member" label="有效天数" width="100">
                            <template #default="scope">
                                <span v-if="scope.row.valid_days">{{scope.row.valid_days}}</span>
                                <span v-else>—</span>
                            </template>

                        </el-table-column>
                        <el-table-column prop="is_member" label="优惠时间" width="320">
                            <template #default="scope">
                                <span>{{ formatDate(scope.row.valid_start_time) + '~' +
                                    formatDate(scope.row.valid_end_time)}}</span>
                            </template>

                        </el-table-column>


                        <el-table-column fixed="right" label="操作" width="150">
                            <template #default="scope">
                                <el-button size="small" type="primary"
                                    @click="openDetail(scope.row.coupon_id)">详情</el-button>
                                <el-button size="small" v-if="scope.row.coupon_status == 1"
                                    :type="scope.row.coupon_status != 1 ? 'success' : 'danger'"
                                    @click="updateSysCouponStatus(scope.row.coupon_id, scope.row.coupon_status)">{{
                                        scope.row.coupon_status!=1?'启用':'禁用' }}</el-button>

                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <el-pagination style="margin-top:20px" :current-page="pageFrom.page" :page-size="pageFrom.page_size"
                        :page-sizes="[10, 20, 30, 40]" layout="->,total, sizes, prev, pager, next, jumper"
                        :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </el-tab-pane>
                <el-tab-pane label="用户优惠券" name="1">
                    <el-form :model="searchUserForm" label-width="auto" :inline="true">
                        <el-form-item label="优惠券名称：">
                            <el-input style="width:230px" clearable v-model="searchUserForm.coupon_name"
                                placeholder="请输入优惠券名称"></el-input>
                        </el-form-item>
                        <el-form-item label="用户姓名：">
                            <el-input style="width:230px" clearable v-model="searchUserForm.user_name"
                                placeholder="请输入用户姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="用户电话：">
                            <el-input style="width:230px" clearable v-model="searchUserForm.user_mobile"
                                placeholder="请输入用户电话"></el-input>
                        </el-form-item>
                        <el-form-item label="优惠券状态：">
                            <el-select style="width:210px" v-model="searchUserForm.user_coupon_status" placeholder="请选择优惠券状态"
                                clearable>
                                <el-option label="未使用" :value="0" />
                                <el-option label="已使用" :value="1" />
                                <el-option label="已过期" :value="3" />
                              
                            </el-select>
                        </el-form-item>
                        <el-form-item label="适用范围：">
                            <el-select style="width:210px" v-model="searchUserForm.application_scope" placeholder="请选择适用范围"
                                clearable>
                                <!-- 1:全场通用 2:单项 3:会员 -->
                                <el-option label="全场通用" :value="1" />
                                <el-option label="单项" :value="2" />
                                <el-option label="会员" :value="3" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="优惠券类型：">
                            <el-select style="width:210px" v-model="searchUserForm.coupon_type" placeholder="请选择优惠券类型"
                                clearable>
                                  <!-- 优惠券类型（1:无门槛 2:满减） -->
                                  <el-option label="无门槛" :value="1" />
                                <el-option label="满减" :value="2" />
                               
                            </el-select>
                        </el-form-item>
                        <el-form-item label="">
                            <el-button type="primary" @click="search">查询</el-button>
                        </el-form-item>
                    </el-form>
                    <!-- <el-row>
                        <el-button type="success" @click="addUserCoupon">新增</el-button>
                    </el-row> -->

                    <el-table :data="userData" border style="width: 100%;margin-top:20px">
                        <el-table-column prop="coupon_name" label="优惠券名称">
                            <template #default="scope">
                                <span>{{ scope.row.coupon.coupon_name }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="coupon_name" label="优惠券类型">
                            <template #default="scope">
                                <span>{{ scope.row.coupon.coupon_type == 1 ? '无门槛' : '满减' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="coupon_type" label="用户姓名" width="100">
                            <template #default="scope">
                                <span v-if="scope.row.user">{{scope.row.user.user_name}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="coupon_type" label="用户手机" width="120">
                            <template #default="scope">
                                <span v-if="scope.row.user">{{scope.row.user.mobile}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="coupon_name" label="优惠券状态">
                            <template #default="scope">
                                <!-- （0:未使用 1:已使用 3:已过期） -->
                                <span v-if="scope.row.user_coupon_status == 0 ">未使用</span>
                                <span v-else-if="scope.row.user_coupon_status == 1">已使用</span>
                                <span v-else-if="scope.row.user_coupon_status == 3">已过期</span>
                               
                            </template>
                        </el-table-column>
                        <el-table-column prop="coupon_name" label="是否已弹窗">
                            <template #default="scope">

                                <span>{{ scope.row.coupon.is_windows == 1 ? '是' : '否' }}</span>

                            </template>
                        </el-table-column>
                        <el-table-column prop="coupon_name" label="优惠券金额">
                            <template #default="scope">

                                <span>{{ scope.row.coupon.coupon_price }}</span>

                            </template>
                        </el-table-column>
                        <el-table-column prop="coupon_name" label="优惠券适用范围" width="160">
                            <template #default="scope">

                                <span v-if="scope.row.coupon.application_scope == 1">全场通用</span>
                                <span v-else-if="scope.row.coupon.application_scope == 2">单项</span>
                                <span v-else-if="scope.row.coupon.application_scope == 3">会员</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="coupon_name" label="优惠券类型" width="160">
                            <template #default="scope">

                                <span v-if="scope.row.coupon.valid_type == 1">绝对时效</span>
                                <span v-else-if="scope.row.coupon.valid_type == 2">相对时效</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="is_member" label="有效天数" width="100">
                            <template #default="scope">
                                <span v-if="scope.row.coupon.valid_days">{{scope.row.coupon.valid_days}}</span>
                                <span v-else>—</span>
                            </template>

                        </el-table-column>
                        <el-table-column prop="is_member" label="优惠时间" width="320">
                            <template #default="scope">
                                <span>{{ formatDate(scope.row.coupon.valid_start_time) + '~' +
                                    formatDate(cvalid_end_time)}}</span>
                            </template>

                        </el-table-column>
                        <el-table-column prop="is_member" label="发放时间" width="170">
                            <template #default="scope">
                                <span>{{ formatDate(scope.row.created_at)}}</span>
                            </template>

                        </el-table-column>
                        <el-table-column prop="is_member" label="使用时间" width="170">
                            <template #default="scope">
                                <span>{{ formatDate(scope.row.coupon_use_date)}}</span>
                            </template>

                        </el-table-column>
                        <!-- c -->

                        <!-- <el-table-column fixed="right" label="操作" width="80">
                            <template #default="scope">
                                <el-button size="small" type="warning"
                                    @click="confirmDel(scope.row.user_coupon_id)">删除</el-button>
                            </template>
                        </el-table-column>  -->
                    </el-table>
                    <el-pagination style="margin-top:20px" :current-page="pageFrom.page" :page-size="pageFrom.page_size"
                        :page-sizes="[10, 20, 30, 40]" layout="->,total, sizes, prev, pager, next, jumper"
                        :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </el-tab-pane>
            </el-tabs>
        </el-card>
        <sysCouponDetail ref="sysCouponDetailRef" @refreshList="refreshList"></sysCouponDetail>

    </div>
</template>

<script setup>
const activeName = ref('0');

import userApi from "../../api/user";
import { onMounted, reactive, ref } from "vue";
import { ElMessage, ElMessageBox} from 'element-plus';
import { useRouter } from 'vue-router'
import { formatDate } from "../../utils/format";
const router = useRouter();
// Dom 挂载之后
onMounted(() => {
    getList()
})
// 用户数据
let tableData = ref([]);

const userData = ref([]);
let total = ref(0);
// 搜索条件
const searchForm = reactive({

})
const searchUserForm= reactive({

});
const pageFrom = reactive({
    page: 1,
    page_size: 10,
})
const sysCouponDetailRef = ref(null);
const itemSettingDetailRef = ref(null);
const agreeDetailRef = ref(null);
const openDetail = (id) => {
    sysCouponDetailRef.value.init('look', id)
}
const openItemDetail = (id) => {
    itemSettingDetailRef.value.init('edit', id)
}
const openAgreeDetail = (id) => {

    agreeDetailRef.value.init('edit', id)
}
const handleClick = (tab) => {
    pageFrom.page = 1;
    activeName.value = tab.props.name;
    if (tab.props.name == 0) {
        getList()
    } else if (tab.props.name == 1) {
        getUserCouponList();
    }
}
const refreshList = () => {
    if (activeName.value == 0) {
        getList()
    } else if (activeName.value == 1) {
        getUserCouponList();
    }
}
const addSysCoupon = (id) => {
    sysCouponDetailRef.value.init('view', '')
}
const addUserCouponList = (id) => {
    itemSettingDetailRef.value.init('view', '')
}

const getList = async () => {
    if(!searchForm.mobile){
        delete searchForm.mobile
    }
    if(!searchForm.coupon_type){
        delete searchForm.coupon_type
    }
    if(searchForm.coupon_status===''){
        delete searchForm.coupon_status
    }
    if(!searchForm.application_scope){
        delete searchForm.application_scope
    }
    if(!searchForm.valid_type){
        delete searchForm.valid_type
    }
    const res = await userApi.getSysCouponList({ ...searchForm, ...pageFrom });
    tableData.value = res.data.data;
    total.value = res.data.total;
}
const confirmDel=(id)=>{
    ElMessageBox.confirm(
    '确定删除该优惠券?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        delUserCouponStatus(id)
    })
    .catch(() => {
     
    })
}

const getUserCouponList = async () => {
    if(!searchUserForm.coupon_type){
        delete searchUserForm.coupon_type
    }
    if(searchUserForm.user_coupon_status===''){
        delete searchUserForm.user_coupon_status
    }
    if(!searchUserForm.application_scope){
        delete searchUserForm.application_scope
    }
    if(!searchUserForm.valid_type){
        delete searchUserForm.valid_type
    }
    const res = await userApi.getUserCouponList({ ...searchUserForm, ...pageFrom });
    userData.value = res.data.data;
    total.value = res.data.total;
}
const updateSysCouponStatus = (id, status) => {
    userApi.updateSysCouponStatus(id, {
        coupon_status: status == 1 ? 2 : 1
    }).then(res => {
        getList()
        ElMessage.success("操作成功")
    })
}
const delUserCouponStatus = (id) => {
    userApi.delUserCouponStatus(id, {}).then(res => {
        getUserCouponList();
        ElMessage.success("删除成功")
    })
}
const handleSizeChange = (size) => {
    pageFrom.page_size = size;
    if (activeName.value == 0) {
        getList()
    } else if (activeName.value == 1) {
        getUserCouponList();
    }
}
const handleCurrentChange = (current) => {
    pageFrom.page = current;
    if (activeName.value == 0) {
        getList()
    } else if (activeName.value == 1) {
        getUserCouponList();
    }
}
const search = () => {
       pageFrom.page = 1;
    if (activeName.value == 0) {
        getList()
    } else if (activeName.value == 1) {
        getUserCouponList();
    }
}
</script>

<style lang="scss" scoped>
.content {
    width: 99%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>