<template>
    <div v-loading="loading">
        <div class="white-box">
            <div class="filter-box">
                <filter-user :filter-types="filterTypes" @select-value="handleFilterUser"></filter-user>
            </div>
            <el-table class="table-box" ref="multipleTable" :data="tableData" stripe style="width: 100%;"
                      @selection-change="handleSelectionChange"
                      :height="tool.getTableHeight()">
              <!--  <el-table-column type="selection" width="70" v-if="tableHeaders"></el-table-column>-->
                <el-table-column v-for="(tableHeader, key) in tableHeaders" :key="key" :label="tableHeader.header" :width="tableHeader.other.width ? tableHeader.other.width : ''" :prop="tableHeader.other.prop ? tableHeader.other.prop : null">
                    <template slot-scope="scope">
                        <template v-if="scope.row[tableHeader.index].other.tag" >
                            <el-tag :type="scope.row[tableHeader.index].other.tag.type ? scope.row[tableHeader.index].other.tag.type : null" :size="scope.row[tableHeader.index].other.tag.size ? scope.row[tableHeader.index].other.tag.size : null" :class="scope.row[tableHeader.index].other.tag.class ? scope.row[tableHeader.index].other.tag.class : null" >{{scope.row[tableHeader.index].value}}</el-tag>
                        </template>
                        <template v-else>
                            <div v-html="scope.row[tableHeader.index].value"></div>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="180">
                    <template slot-scope="scope">
                        <el-dropdown size="small" trigger="click" v-if="permission.hasPermission(`shop/package-get`)">
                            <el-button type="primary" size="small" @click.stop="">
                                操作该数据<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="package-get" @click.native="handleEditShow(scope.row)">修改数据
                                </el-dropdown-item>
                                <el-dropdown-item command="del" @click.native="handleDel(scope.row.ID)"
                                                  v-show="permission.hasPermission(`shop/goods-delete`)">删除数据
                                </el-dropdown-item>
                                <el-dropdown-item command="goods-edit" @click.native="handleGoodUp(scope.row.ID)">商品上架 </el-dropdown-item>
                                <el-dropdown-item command="goods-edit" @click.native="handleGoodDown(scope.row.ID)">商品下架 </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>

            <div class="white-box-footer">
                <el-button type="primary" size="small" @click="handlestate" icon="el-icon-plus"
                           v-if="permission.hasPermission(`shop/package-add`)">新增套餐
                </el-button>
                <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"></pagination>
            </div>
        </div>
        <el-dialog title="修改套餐" :visible.sync="dialogEditFormVisible">
            <el-form :model="form" label-width="250px" class="form-dialog" v-loading="dialogEditLoading">

                <el-form-item label="套餐名称">
                    <el-input v-model="form.packageName"></el-input>
                </el-form-item>
                <el-form-item label="套餐编号">
                    <el-input v-model="form.packageNo"></el-input>
                </el-form-item>
                <el-form-item label="套餐金额">
                    <el-input v-model="form.amount"></el-input>
                </el-form-item>
                <el-form-item label="套餐PV">
                    <el-input v-model="form.amountPv"></el-input>
                </el-form-item>
                <el-form-item label="报单级别ID">
                    <el-select v-model="form.levelId" placeholder="请选择报单级别">
                        <el-option v-for="(item,index) in allDecLevel" :key="index" :label="item.LEVEL_NAME"
                                   :value="item.ID"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="套餐内容">
                    <el-input v-model="form.packageContent"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogEditFormVisible = false">取 消</el-button>
                <el-button type="primary" @click.native="handleEdit">修 改</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import network from '@/utils/network'
    import tool from '@/utils/tool'
    import baseInfo from '@/utils/baseInfo'
    import FilterUser from '@/components/FilterUser'
    import permission from '@/utils/permission'
    import Pagination from '@/components/Pagination'
    import filterHelper from '@/utils/filterHelper'

    export default {
        name: 'package',
        components: {FilterUser, Pagination},
        mounted() {
            this.getData()
        },
        data() {
            return {
                tableHeaders: null,
                tableData: null,
                tableHeight: window.innerHeight - 310,
                loading: true,
                multipleSelection: [],
                currentPage: 1,
                totalPages: 1,
                totalCount: 1,
                pageSize: 20,
                tool: tool,
                permission: permission,
                baseDecLevels: baseInfo.decLevels(),
                baseEmpLevels: baseInfo.empLevels(),
                filterTypes: null,
                filterModel: {},
                dialogVisible: false,
                dialogLoading: false,
                statuses: null,
                filterData: null,
                dialogEditFormVisible: false,
                dialogEditLoading: false,
                allDecLevel: baseInfo.decLevels(),
                form: {
                    selectedIds: [],
                    statusValue: [],
                    sendType: null,
                    remark: null,
                },
            }
        },
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            handleCurrentChange(page) {
                this.getData(page, this.pageSize)
            },
            handleSizeChange(pageSize) {
                this.getData(this.currentPage, pageSize)
            },
            handleFilterUser(filterData) {
                filterHelper.handleFilterUser(this, filterData)
            },


            handlestate(){
                this.$router.push({path: `/shop/package-add`})
            },
            handleEditShow(row) {
                this.dialogEditLoading = true
                this.auditId = row.ID
                this.dialogEditFormVisible = true
                let vueObj = this
                network.getData('shop/package-get', {id: this.auditId}).then(response => {
                    console.log(response)
                    vueObj.dialogEditLoading = false
                    vueObj.form = response
                })
            },
            handleEdit() {
                this.dialogEditFormVisible = false
                this.$message({
                    message: '正在修改数据',
                    type: 'info'
                })
                let path = 'shop/package-get'
                network.postData(path, this.form).then(response => {
                    this.$message({
                        message: response,
                        type: 'success'
                    })
                    this.getData(this.currentPage, this.pageSize)
                }).catch(response => {
                })
            },

            handleDel(id = null) {
                let obj = this
                this.$confirm('确定删除选定的数据？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let selectedIds = []
                    if (id === null) {
                        for (let val of obj.multipleSelection) {
                            selectedIds.push(val.ID)
                        }
                    } else {
                        selectedIds.push(id)
                    }
                    return network.postData(`shop/package-delete`, {
                        selected: selectedIds
                    })
                }).then(response => {
                    this.$message({
                        message: response,
                        type: 'success'
                    })
                    obj.getData(obj.currentPage, obj.pageSize)
                }).catch(response => {

                })
            },
            getData(page, pageSize) {
                let filterData = this.filterModel
                network.getPageData(this, 'shop/package', page, pageSize, filterData, response => {
                    console.log(response)
                    this.filterTypes = response.filterTypes
                    this.allData = response
                })
            },
            handleGoodUp(id){
                console.log(id);
                network.postData('shop/package-status',{selectedIds:id,status:1})
                    .then(response=>{
                        this.$message({
                            message: response,
                            type: 'success'
                        })
                        this.getData(this.currentPage, this.pageSize)
                    })
            },
            handleGoodDown(id){
                network.postData('shop/package-status',{selectedIds:id,status:0})
                    .then(response=>{
                        this.$message({
                            message: response,
                            type: 'success'
                        })
                        this.getData(this.currentPage, this.pageSize)
                    })
            }

        }
    }

</script>

<style scoped>
</style>
