<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.class_name"
                                placeholder="请输入分类名称"></el-input>
                        </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="add">新增</el-button>
                    </el-row>

                    <el-table :data="tableData" border style="width: 100%;margin-top:20px">
                        <el-table-column prop="member_days" label="会员时长:">
                            <template #default="scope">
                                <span v-if="scope.row.member_days < 30">{{ scope.row.member_days }}天</span>
                                <span v-else-if="scope.row.member_days == 365">1年</span>
                                <span v-else>{{ scope.row.member_days / 30 }}个月</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="price" label="价格(元)" />
                        <el-table-column prop="discount_price" label="折扣价格(元)" />
                        <el-table-column prop="reduction_amount" label="首单立减金额(元)" />

                        <el-table-column prop="is_member" label="折扣截至时间">
                            <template #default="scope">
                                <span>{{ formatDate(scope.row.discount_end_time) }}</span>
                            </template>
                        </el-table-column>


                        <el-table-column label="操作" width="80">
                            <template #default="scope">

                                <el-button size="small" type="primary"
                                    @click="openDetail(scope.row.system_member_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-tab-pane label="参数设置" name="1">
                    <!-- <el-row>
                        <el-button type="success" @click="addItem">新增</el-button>
                    </el-row> -->

                    <el-table :data="itemData" border style="width: 100%;margin-top:20px">
                        <el-table-column prop="system_member_id" label="单项配置id">
                        </el-table-column>
                        <el-table-column prop="first_time_price" label="首单价格(元)" />
                        <el-table-column prop="valid_days" label="购买后有效天数" />
                        <el-table-column label="操作" width="80">
                            <template #default="scope">

                                <el-button size="small" type="primary"
                                    @click="openItemDetail(scope.row.system_member_id)">修改</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="隐私协议" name="2">
                    <el-row>
                        <el-button type="success" @click="addAgree">新增</el-button>
                    </el-row>
                    <el-table :data="agreeData" border style="width: 100%;margin-top:20px">
                        <el-table-column prop="agreement_title" label="标题:">
                           
                        </el-table-column>
                        <el-table-column prop="price" label="内容" >
                            <template #default="scope">
                                <div class="content" v-html="scope.row.agreement_content"></div>
                            </template>
                        </el-table-column>
                       

                        <el-table-column prop="created_at" label="创建时间">
                            <template #default="scope">
                                <span>{{ formatDate(scope.row.created_at) }}</span>
                            </template>
                        </el-table-column>


                        <el-table-column label="操作" width="80">
                            <template #default="scope">
                                <el-button size="small" type="primary"
                                    @click="openAgreeDetail(scope.row.agreement_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>
        <vipSettingDetail ref="vipSettingDetailRef" @refreshList="refreshList"></vipSettingDetail>
        <itemSettingDetail ref="itemSettingDetailRef"  @refreshList="refreshList"></itemSettingDetail>
        <agreeDetail ref="agreeDetailRef"  @refreshList="refreshList"></agreeDetail>
    </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(() => {
    getUserList();
})
// 用户数据
let tableData = ref([]);
let itemData = ref([]);
const agreeData = ref([]);
let total = ref(0);
// 搜索条件
const searchForm = reactive({
    
})
const pageFrom = reactive({
    page: 1,
    page_size: 10,
})
const vipSettingDetailRef = ref(null);
const itemSettingDetailRef = ref(null);
const agreeDetailRef = ref(null);
const openDetail = (id) => {
    vipSettingDetailRef.value.init('edit', id)
}
const openItemDetail = (id) => {
   itemSettingDetailRef.value.init('edit', id)
}
const openAgreeDetail = (id) => {
   
   agreeDetailRef.value.init('edit', id)
}
const handleClick = (tab) => {
    activeName.value=tab.props.name;
    if(tab.props.name==0){
        getUserList();
       
    }else if(tab.props.name==1){
        getitemList();
    }else{
        pageFrom.page=1;
        getList();
    }
}
const refreshList = () => {
    if(activeName.value==0){
        getUserList();
    }else if(activeName.value==1){
        getitemList();
    }else if(activeName.value==2){
        getList();
    }
}
const add = (id) => {
    vipSettingDetailRef.value.init('view', '')
}
const addItem = (id) => {
    itemSettingDetailRef.value.init('view', '')
}
const addAgree = (id) => {
    agreeDetailRef.value.init('view', '')
}
// 获取用户列表
const getUserList = async () => {
    const res = await userApi.getVipSettingList({ ...searchForm, ...pageFrom });
    console.log(res.data);
    tableData.value = res.data;
}
const getList = async () => {
  const res = await userApi.getAgreeList({ ...searchForm, ...pageFrom });
  console.log(res.data);
  agreeData.value = res.data.data;
  total.value = res.data.total;
}
const getitemList = async () => {
    const res = await userApi.getItemSettingList({ ...searchForm, ...pageFrom });
    itemData.value = res.data;
   
}
const handleUpdateItem = (id, status) => {
    userApi.updateClassifyStatus(id, {
        class_status: status == 1 ? 2 : 1
    }).then(res => {
        getUserList()
        ElMessage.success("操作成功")
    })
}
const handleSizeChange = (size) => {
    pageFrom.page_size = size;
    getList();
}
const handleCurrentChange = (current) => {
    pageFrom.page = current;
    getList();
}
const search = () => {
    pageFrom.page = 1;
    getList();
}
</script>

<style lang="scss" scoped>
.content{
    width:99%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.el-form-item {
    margin-bottom: 0;

}
</style>