<template>
    <div>
        <!-- 筛选框 -->
        <el-card class="box-card" :body-style="{ padding: '20px 20px 0 20px' }">
            <el-form ref="form" :inline="true" :model="form">
                <el-form-item label="模块:" style="margin-right: 40px">
                    <el-select v-model="form.module" clearable @change="query(1)">
                        <el-option v-for="item in mouduleOptions" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="操作:" style="margin-right: 40px">
                    <el-select v-model="form.action" clearable @change="query(1)">
                        <el-option v-for="item in actionOptions" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="目标类型:" style="margin-right: 40px">
                    <el-select v-model="form.target_type" clearable @change="query(1)">
                        <el-option v-for="item in target_ypeOptions" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类别:" style="margin-right: 40px">
                    <el-select v-model="form.targetField" clearable @change="query(1)">
                        <el-option v-for="item in target_fieldOptions" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="操作人:" style="margin-right: 40px">
                    <el-select v-model="form.userId" placeholder="输入操作人" clearable @change="query(1)">
                        <el-option v-for="item in userOptions" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="时间:">
                    <el-date-picker v-model="value1" type="datetimerange" range-separator="-" start-placeholder="起"
                        end-placeholder="止" value-format="yyyy-MM-dd HH:mm:ss" style="width: 340px;" @change="query(1)">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="query(1)">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 表格 -->
        <el-card style="margin-top: 10px" class="box-card">
            <el-table v-loading="loading" :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="序号" width="75"> </el-table-column>
                <el-table-column prop="module" label="模块" width="70"> </el-table-column>
                <el-table-column prop="action" label="操作" width="70"> </el-table-column>
                <el-table-column prop="target_type" label="目标类型" width="100"> </el-table-column>
                <el-table-column prop="target_id" label="目标ID" width="70"> </el-table-column>
                <el-table-column prop="target_field" label="类别" width="100"> </el-table-column>
                <el-table-column label="操作前">
                    <template slot-scope="scope">
                        <div style="height:45px">
                            {{ scope.row.before_update }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作后">
                    <template slot-scope="scope">
                        <div style="height:45px">
                            {{ scope.row.after_update }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="信息" width="300">
                    <template slot-scope="scope">
                        <div style="overflow-x: hidden;white-space: nowrap;">
                            {{ scope.row.message }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="user.name" label="操作人" width="120"></el-table-column>
                <el-table-column label="操作时间" width="100">
                    <template slot-scope="scope">
                        <p>{{ scope.row.created_at }}</p>
                    </template>
                </el-table-column>
            </el-table>

            <div class="page-pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="current_page" :page-sizes="[15, 50, 100]" :page-size="per_page"
                    layout="total, sizes, prev, pager, next, jumper" :total="Paginationdata.total">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import { recordList } from "../../api/record";
import { userList } from "../../api/user";
export default {
    data() {
        return {
            target_fieldOptions: [
                {
                    value: "add",
                    label: "创建",
                },
                {
                    value: "status",
                    label: "状态",
                },
                {
                    value: "name",
                    label: "名称",
                },
                {
                    value: "title",
                    label: "标题",
                },
                {
                    value: "import",
                    label: "导入",
                },
                {
                    value: "export",
                    label: "导出",
                },
                {
                    value: "set",
                    label: "设置",
                },
                {
                    value: "cost",
                    label: "成本",
                },
                {
                    value: "stock",
                    label: "库存",
                },
                {
                    value: "inventory",
                    label: "库存盘点",
                },
                {
                    value: "reserve",
                    label: "预留量",
                },
                {
                    value: "timingInventory",
                    label: "7点盘点",
                },
                {
                    value: "pdd.ktt.goods.query.list",
                    label: "快团团下载绑定商品",
                },
                {
                    value: "arrived_today_num",
                    label: "今日到货",
                },
                {
                    value: "loss_num",
                    label: "损耗",
                },
                {
                    value: "pdd.pop.auth.token.create",
                    label: "快团团授权",
                },
                {
                    value: "reference_price",
                    label: "参考价格",
                },
                {
                    value: "update",
                    label: "更新",
                },
                {
                    value: "pdd.ktt.goods.incr.quantity",
                    label: "快团团库存同步",
                },
                {
                    value: "pdd.ktt.order.list",
                    label: "快团团下载订单",
                },
                {
                    value: "pdd.ktt.increment.order.query",
                    label: "快团团增量下载订单",
                },
                {
                    value: "sale_stock",
                    label: "在售库存",
                }
            ], //类别
            mouduleOptions: [
                {
                    value: "menu",
                    label: "菜单",
                },
                {
                    value: "goods",
                    label: "商品",
                },
                {
                    value: "file",
                    label: "文件",
                },
                {
                    value: "permission",
                    label: "权限",
                },
                {
                    value: "role",
                    label: "角色",
                },
                {
                    value: "user",
                    label: "用户",
                },
                {
                    value: "plat",
                    label: "平台",
                },
            ],//模块
            actionOptions: [
                {
                    value: "POST",
                    label: "新增",
                },
                {
                    value: "PATCH",
                    label: "更新",
                },
                {
                    value: "DELETE",
                    label: "删除",
                },
                {
                    value: "GET",
                    label: "查看",
                },
            ],//操作
            target_ypeOptions: [
                {
                    value: "upload",
                    label: "上传",
                },
                {
                    value: "goods_sku",
                    label: "商品规格",
                },
                {
                    value: "goods_brand",
                    label: "商品品牌",
                },
                {
                    value: "goods_type",
                    label: "种类",
                },
                {
                    value: "menu",
                    label: "菜单",
                },
                {
                    value: "role",
                    label: "角色",
                },
                {
                    value: "permission",
                    label: "权限",
                },
                {
                    value: "user",
                    label: "用户",
                },
                {
                    value: "kuaituantuan",
                    label: "快团团",
                },
                {
                    value: "miaoxuan",
                    label: "秒选",
                },
                {
                    value: "goods",
                    label: "商品",
                },
                {
                    value: "sku_stock_purchase",
                    label: "入库采购",
                },
                {
                    value: "sku_stock_loss",
                    label: "报损记录",
                },
                {
                    value: "sku_stock_inventory",
                    label: "盘点记录",
                },
            ],//目标类型
            userOptions: [], //查询用户列表
            form: {
                module: '',//模块 goods-商品(单个商品记录必传),'menu' => '菜单',file-文件,permission-权限,role-角色,user-用户,plat-平台
                action: '',//操作 POST-新增,PATCH-更新,DELETE-删除,'GET' => '查看',
                target_type: '',//目标类型 upload-上传,goods_sku商品规格,goods_brand-商品品牌,goods_type-商品种类,menu-菜单,permission-权限,role-角色,user-用户,kuaituantuan-快团团,miaoxuan-妙选,'goods' => '商品',
                targetField: "",//影响字段
                userId: "",//操作人id(用户列表)
            },
            value1: "", //筛选时间变量
            loading: false,
            tableData: [], //列表数据
            Paginationdata: {}, //分页相关数据
            current_page: 1, //当前页
            per_page: 15, //每页显示数量
        };
    },
    methods: {
        //请求列表数据
        getList() {
            this.loading = true;
            let page = {
                page: this.current_page,
                per_page: this.per_page,
            };
            recordList(page).then((res) => {
                this.tableData = res.data.data;
                this.Paginationdata = res.data.meta;
                this.loading = false;
            }).catch(() => {
                this.loading = false;
            })
            
        },

        // 获取用户列表
        getUser() {
            userList().then((res) => {
                this.userOptions = res.data.data;
            });
        },

        // 查询
        query(page) {
            this.loading = true;
            let queryData = {
                page: page,
                per_page: this.per_page,
                module: this.form.module,
                action: this.form.action,
                target_type: this.form.target_type,
                target_id: this.$route.query.id ? this.$route.query.id : '',
                target_field: this.form.targetField ? this.form.targetField : '',
                user_id: this.form.userId,
                start_time: this.value1[0] ? this.value1[0] : '',
                end_time: this.value1[1] ? this.value1[1] : '',
            };

            recordList(queryData).then((res) => {
                this.tableData = res.data.data;
                this.Paginationdata = res.data.meta;
                this.loading = false;
            }).catch(() => {
                this.loading = false;
            })
        },

        //分页功能
        handleSizeChange(val) {
            //当前条数
            this.per_page = val;
            this.query(1);
        },
        handleCurrentChange(val) {
            //当前页
            this.current_page = val;
            this.query(this.current_page);
        },
    },
    mounted() {
        this.getList();
        this.getUser();
    },
};
</script>

<style lang="scss" scoped>

</style>
