<!-- data-list 简单列表页测试 -->
<template>
    <el-scrollbar class="vue-box">
        <div class="c-card">
            <!-- 提示 -->
            <el-alert
                type="info"
                title="这几个页面展示了各种表单组件的封装写法，数据全部为模拟数据，是为了方便你写代码时 ctrl + c、v 的，项目上线时将其配置为 { show: 'no' } 将不再显示。"
                style="margin: 10px 0; "
                show-icon>
            </el-alert>
            <h4 class="c-title">简单列表</h4>
            <!-- ------------- 查询条件 ------------- -->
            <el-form class="select-form" :inline="true" label-width="6.5em" @keyup.enter="state.p.pageNo = 1; f5();">
                <!-- <in-input name="数据 ID  ：" v-model="p.id"></in-input>-->
                <in-input name="商品名称：" v-model="state.p.name"></in-input>
                <in-item name="下拉参数：">
                    <el-select v-model="state.p.typeId">
                        <el-option label="不限" :value="0"></el-option>
                        <el-option v-for="type in state.typeList" :label="type.name" :value="type.id" :key="type.id"></el-option>
                    </el-select>
                </in-item>
                <in-item class="ok-item">
                    <el-button type="primary" icon="el-icon-Search" @click="state.p.pageNo = 1; f5();">查询</el-button>
                </in-item>
                <br>
                <in-item name="单选文字：">
                    <el-radio-group v-model="state.p.status" class="s-radio-text">
                        <el-radio :label="0">全部</el-radio>
                        <el-radio :label="1">新下单</el-radio>
                        <el-radio :label="2">已支付</el-radio>
                        <el-radio :label="3">已发货</el-radio>
                        <el-radio :label="4">已收货</el-radio>
                        <el-radio :label="5">已评价</el-radio>
                        <el-radio :label="11">取消中</el-radio>
                        <el-radio :label="21">退款中</el-radio>
                    </el-radio-group>
                </in-item>
            </el-form>
            <!-- ------------- 操作按钮 ------------- -->
            <!-- <com-fast-btn show="add,get,delete,export,reset"></com-fast-btn>-->
            <!-- ------------- 数据表格 ------------- -->
            <el-table :data="state.dataList" class="data-table" ref="data-table">
                <td-info type="selection"></td-info>
                <td-info name="商品id" prop="id"></td-info>
                <td-info name="商品名称" prop="name"></td-info>
                <td-info name="商品库存" prop="count" type="num"></td-info>
                <td-info name="商品图标" prop="icon" type="icon"></td-info>
                <td-info name="显示价格" prop="money" type="money-f"></td-info>
                <td-info name="文本域" prop="intro" type="textarea"></td-info>
                <td-info name="富文本" prop="intro" type="rich-text"></td-info>
                <td-info name="显示链接" prop="avatar" type="link" width="220px"></td-info>
                <td-info name="链接按钮" prop="name" type="link-btn" @click="s => sa.msg('点击了：' + s.row.name)"></td-info>
                <td-info name="评分" prop="rate" type="rate" width="200px"></td-info>
                <td-info name="日期" prop="create_time" type="date" width="100px"></td-info>
                <td-info name="日期时间" prop="create_time" type="datetime" width="160px"></td-info>
                <el-table-column label="操作" fixed="right" width="180px">
                    <template #default="s">
                        <el-link type="primary" @click="get(s.row)">查看</el-link> &nbsp;
                        <el-link type="primary" @click="update(s.row)">修改</el-link> &nbsp;
                        <el-link type="primary" @click="del(s.row)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- ------------- 分页按钮 ------------- -->
            <div class="page-box">
                <el-pagination
                    background layout="total, prev, pager, next, sizes, jumper"
                    v-model:current-page="state.p.pageNo" v-model:page-size="state.p.pageSize" :total="state.dataCount"
                    :page-sizes="[1, 10, 20, 30, 40, 50, 100]"
                    @current-change="f5()" @size-change="f5()">
                </el-pagination>
            </div>
        </div>
    </el-scrollbar>
</template>

<script setup name="data-list">
import {getCurrentInstance, onMounted, reactive} from "vue";
const { proxy } = getCurrentInstance();
import { getMockDataList } from './mock-data-list';
import {useAppStore} from "../../store/app";
let appStore = useAppStore();


// ------------------ 数据 ------------------
const state = reactive({
    p: {    // 查询条件 
        id: '',
        name: '',
        typeId: 0,
        intro: '',
        single: 1,
        single2: 1,
        status: 0,
        checkbox_1: true,
        checkbox_2: true,
        checkbox_3: false,
        checkbox_4: false,
        checkbox_5: false,
        checkbox_6: false,
        sortType: 'id',
        pageNo: 1,
        pageSize: 10,
    },
    dataCount: 0,   // 数据总数 
    dataList: [],  // 数据表格 
    typeList: [  // 类型数组  
        {id: 1, name: '类型1'},
        {id: 2, name: '类型2'},
        {id: 3, name: '类型3'},
        {id: 4, name: '类型4'},
    ],
})

// 组件加载时执行函数
onMounted(function () {
    f5();
})

// ------------------ 函数 ------------------

// 查找数据 
const f5 = () => {
    sa.ajax2('/SysGoods/getList', function (res) {
        state.dataList = res.data;
        state.dataCount = 1000;// mockDataList.data.length;
    }, {res: getMockDataList()})
};

// 查看
const get = function(data) {
    sa.showTempView('data-info-' + data.id, '数据详情-' + data.id, import('./data-info.vue'), {id: data.id});
};
// 修改
const update = function (data) {
    sa.showTempView('data-update-' + data.id, '商品编辑-' + data.id, import('./data-add.vue'), {id: data.id});
};
// 删除
const del = function (data) {
    sa.confirm('是否删除，此操作不可撤销', function() {
        sa.ajax2('/goods/delete?id=' + data.id, function(res) {
            sa.arrayDelete(state.dataList, data);
            sa.ok('删除成功');
        })
    });
};

</script>

<style scoped lang="scss">
.submit-box--page{
    max-width: 800px;
}
</style>
