<template>
    <div class="app-container">

        <div class="filter-container">
            <el-select v-model="listQuery.channelId" clearable style="width: 200px" class="filter-item" placeholder="请选择渠道">
                <el-option v-for="type in channels" :key="type.id" :label="type.name" :value="type.id" />
            </el-select>
            <el-button v-permission="['GET /admin/dmRefund/list']" class="filter-item" type="primary" icon="el-icon-search"
                @click="handleFilter">查找</el-button>
            <el-button v-permission="['POST /admin/dmRefund/create']" class="filter-item" type="primary" icon="el-icon-edit"
                @click="handleCreate">添加</el-button>
        </div>

        <!-- 查询结果 -->
        <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
            <el-table-column align="center" label="渠道名称" prop="channel">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.channel == 5?'':'success'">{{ scope.row.channel == 5 ? '商城' : '抖音' }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="退款项" prop="name" />
            <el-table-column align="center" label="显示排序" prop="sort" />
            <el-table-column align="center" label="状态" prop="deleted">
                <template slot-scope="scope">
                    <span v-if="scope.row.deleted == true">已停用</span>
                    <span v-else>正常</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="新增时间" prop="createTime" />

            <el-table-column align="center" label="操作" min-width="100" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button v-permission="['POST /admin/dmRefund/delete']" type="danger" size="mini"
                        @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            @pagination="getList" />

        <!-- 添加或修改对话框 -->
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
            <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px"
                style="width: 500px; margin-left:50px;">
                <el-form-item label="渠道" prop="channel">
                    <el-select v-model="dataForm.channel" clearable class="filter-item" placeholder="请选择渠道">
                        <el-option v-for="type in channels" :key="type.id" :label="type.name" :value="type.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="退款项名称" prop="name">
                    <el-input v-model="dataForm.name" placeholder="请输入退款项名称" />
                </el-form-item>
                <el-form-item label="显示排序" prop="sort">
                    <el-input v-model="dataForm.sort" type="number" placeholder="请输入sort" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button v-if="dialogStatus == 'create'" type="primary" @click="createData">确定</el-button>
                <el-button v-else type="primary" @click="updateData">确定</el-button>
            </div>
        </el-dialog>


    </div>
</template>
  
  
<script>
import { createRefundType, list, deleteRefundType } from '@/api/dmRefund'

export default {
    name: 'Topic',
    components: {},
    data() {
        return {
            list: [],
            total: 0,
            listLoading: true,
            listQuery: {
                page: 1,
                limit: 20,
                sort: 'create_time',
                order: 'desc'
            },
            channels: [
                { id: 26, name: "抖音" },
                { id: 5, name: "微信商城" }
            ],
            dataForm: {
                id: undefined,
                name: '',
                remark: undefined
            },
            dialogFormVisible: false,
            dialogStatus: '',
            textMap: {
                update: '编辑',
                create: '创建'
            },
            rules: {
                name: [{ required: true, message: '渠道不能为空', trigger: 'blur' }],
                channel: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
                sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }]
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            this.listLoading = true
            list(this.listQuery)
                .then(response => {
                    this.list = response.data.data.list
                    this.total = response.data.data.total
                    this.listLoading = false
                })
                .catch(() => {
                    this.list = []
                    this.total = 0
                    this.listLoading = false
                })
        },
        handleFilter() {
            this.listQuery.page = 1
            this.getList()
        },
        handleCreate() {
            this.resetForm()
            this.dialogStatus = 'create'
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
        },
        resetForm() {
            this.dataForm.id = '';
            this.dataForm.name = ''; 
        },
        createData() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    createRefundType(this.dataForm).then(response => {
                        this.list.unshift(response.data.data)
                        this.dialogFormVisible = false
                        this.$notify.success({
                            title: '成功',
                            message: '创建成功'
                        })
                    }).catch(response => {
                        this.$notify.error({
                            title: '失败',
                            message: response.data.errmsg
                        })
                    })
                }
            })
        },
        handleDelete(row) {
            deleteRefundType(row)
                .then(response => {
                    this.$notify.success({
                        title: '成功',
                        message: '停用退款类型成功'
                    })
                    const index = this.list.indexOf(row)
                    this.list.splice(index, 1)
                })
                .catch(response => {
                    this.$notify.error({
                        title: '失败',
                        message: response.data.errmsg
                    })
                })
        }
    }
}
</script>
  

  
<style>
.el-table th.gutter {
    display: table-cell !important;
}

.el-dialog {
    width: 800px;
}
</style>