<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%;" :height="tool.getTableHeight()" @selection-change="handleSelectionChange">
                 <el-table-column fixed type="selection" width="55" v-if="tableHeaders" :selectable="checkSelectable"></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/goods-edit`)||permission.hasPermission(`shop/goods-delete`)">
                            <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="goods-edit" @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-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="success" size="small" @click="handleGroupManage(scope.row)" >
                            状态管理
                        </el-button>
                    </template></el-table-column>-->

            </el-table>
            <div class="white-box-footer">

               <!-- <el-dropdown size="small" trigger="click">
                    <el-button type="primary" size="small">
                        所选数据<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="delete" @click.native="handleMuliDel()">上架</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>-->
                <el-button type="primary" size="small" @click="handlestate" icon="el-icon-plus"
                           v-if="permission.hasPermission(`shop/goods-add`)">商品添加
                </el-button>

                <el-button type="success" size="small" @click="handleExport" v-show="permission.hasPermission(`shop/goods-list-export`)">导出Excel</el-button>
                <!-- <el-button-group>
                    <el-button type="success" size="mini" @click.native="handleup(scope.row.ID)">上架</el-button>
                    <el-button type="danger" size="mini">下架</el-button>
                </el-button-group> -->
                <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.goodsName"></el-input>
                    </el-form-item>
                    <el-form-item label="商品类型">
                        <el-select v-model="form.type">
                            <el-option v-for="(item,index) in goodsType" :key="index" :label="item.name"
                                       :value="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="出售方式">
                         <el-checkbox  v-for="(value,index) in sell_type" v-model="value.checked" :key="index" >{{value.name}}</el-checkbox>
                    </el-form-item>

                    <el-form-item label="商品编号">
                        <el-input v-model="form.goodsNo"></el-input>
                    </el-form-item>
                    <el-form-item label="单位">
                        <el-input v-model="form.unit"></el-input>
                    </el-form-item>
                    <el-form-item label="市场价格">
                        <el-input v-model="form.marketPrice"></el-input>
                    </el-form-item>
                    <el-form-item label="销售价格" p>
                        <el-input v-model="form.sellPrice"></el-input>
                    </el-form-item>
                    <el-form-item label="价格PV	">
                        <el-input v-model="form.pricePv"></el-input>
                    </el-form-item>
                    <el-form-item label="兑换积分" v-show="false">
                        <el-input v-model="form.point"></el-input>
                    </el-form-item>
                    <el-form-item label="库存">
                        <el-input v-model="form.storeNums"></el-input>
                    </el-form-item>
                    <el-form-item label="商品详情">
                        <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="form.content">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input v-model="form.sort"></el-input>
                    </el-form-item>

                    <el-form-item label="上传图片">
                       <div class='up_load'>
                           <!-- <img v-if="form.cover&&img_show" :src="form.cover" alt=""> -->
                            <leo-uploader
                                @on-success='upLoadSuccess'
                                :request-route="'shop/upload'"
                                ref='up_load'
                                :defaultImageUrl='form.cover'
                            ></leo-uploader>
                        </div>
                    </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'
    import {FRONTEND_SERVER} from '@/utils/config'
    import store from './../../utils/vuexStore'
     import LeoUploader from '@/components/Uploader';
    export default {
        name: 'index',
        components: {FilterUser,Pagination,LeoUploader},
        mounted () {
            this.getData();
            // this.$refs.up_load.successImageUrl='';
        },

        data () {
            return {
                tableHeaders: null,
                tableData: null,
                loading: true,
                currentPage: 1,
                totalPages: 1,
                totalCount: 1,
                pageSize: 20,
                multipleSelection: [],
                tool: tool,
                permission: permission,
                baseDecLevels: baseInfo.decLevels(),
                baseEmpLevels: baseInfo.empLevels(),
                filterTypes: null,
                dialogVisible: false,
                dialogLoading: false,
                filterModel: {},
                value:[],
                selectedIds:'',
                dialogEditFormVisible: false,
                dialogEditLoading: false,
                form:{
                  sellType:[],
                     goodsName:'',
                    type:'',
                    goodsNo:'',
                    unit:'',
                    marketPrice:'',
                    sellPrice:'',
                    pricePv:'',
                    point:'',
                    storeNums:'',
                    content:'',
                    sort:'',
                    discount:'',
                    cover:'',
                    textarea:'',
                },
                submitButtonStat: false,
                goodsType:[],
                sellType:null,
                sell_type:[],
                img_show:true
            }
        },
        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)
            },
            checkSelectable(row) {
                return row.DONT_DEL !== '1'
            },
            handleFilter() {
                this.getData()
            },
            handlestate(){
                this.$router.push({path: `/shop/goods-add`})
            },
            upLoadSuccess(file){
                this.form.cover=file;
                this.img_show=false;
            },
            handleEditShow(row) {
                this.dialogEditLoading = true
                this.auditId = row.ID
                this.dialogEditFormVisible = true
                let vueObj = this
                network.getData('shop/goods-edit', {id: this.auditId}).then(response => {
                    console.log(response)
                    vueObj.dialogEditLoading = false
                    vueObj.goodsType=response.goodsType
                    let sell=response.goodsInfo.SELL_TYPE;
                    let sell_type=response.sellType;
                    let sellType=[];
                    if(sell.length>0){
                        for(let i in sell_type){
                            sellType.push({key:i,name:sell_type[i].name,checked:false})
                            sell.map((item,index)=>{
                                if(item==i){
                                    sellType[index].checked=true;
                                }
                            }) 
                        }
                    }
                    vueObj.sell_type=sellType;
                    vueObj.form.goodsName=response.goodsInfo.GOODS_NAME
                    vueObj.form.goodsNo=response.goodsInfo.GOODS_NO
                    vueObj.form.type=response.goodsInfo.TYPE
                    vueObj.form.unit=response.goodsInfo.UNIT
                    vueObj.form.marketPrice=response.goodsInfo.MARKET_PRICE
                    vueObj.form.sellPrice=response.goodsInfo.SELL_PRICE
                    vueObj.form.pricePv=response.goodsInfo.PRICE_PV
                    vueObj.form.point=response.goodsInfo.POINT
                    vueObj.form.storeNums=response.goodsInfo.STORE_NUMS
                    vueObj.form.content=response.goodsInfo.CONTENT
                    vueObj.form.sort=response.goodsInfo.SORT
                    vueObj.form.id=response.goodsInfo.ID
                    vueObj.form.cover=response.goodsInfo.COVER
                    // vueObj.form.sellType=vueObj.form.sellType.map((item,index)=>{
                    //   return response.goodsInfo.SELL_TYPE.some(val=>(index+1).toString()==val)
                    //   })
                    
                    this.$forceUpdate()

                })
            },
            handleEdit() {
                this.dialogEditFormVisible = false
                this.$message({
                    message: '正在修改数据',
                    type: 'info'
                })
                let path = 'shop/goods-edit'
                /*let postData = {
                    goodsName: this.form.goodsName,
                    discount: this.form.type.discount,
                    type: this.form.type,
                    sellType: this.form.sellType,
                    goodsNo: this.form.goodsNo,
                    unit: this.form.unit,
                    marketPrice: this.form.marketPrice,
                    sellPrice: this.form.sellPrice,
                    pricePv: this.form.pricePv,
                    point: this.form.point,
                    storeNums: this.form.storeNums,
                    content: this.form.content,
                    sort: this.form.sort,
                    cover: this.form.cover,
                    id: this.form.id,
                }*/

                let sen_sell=[];
                    this.sell_type.map((item,index)=>{
                        if(item.checked){
                            sen_sell.push(item.key);
                        }
                    })
                    this.form.sellType=sen_sell;
                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/goods-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
                /*this.allData = response*/
                network.getPageData(this, 'shop/index', page, pageSize, this.filterModel, response=>{
                    console.log(response)
                    this.filterTypes = response.filterTypes

                })
            },
            handleGoodUp(id){
                console.log(id);
                network.postData('shop/goods-status',{selectedIds:id,status:1})
                .then(response=>{
                    this.$message({
                        message: response,
                        type: 'success'
                    })
                    this.getData(this.currentPage, this.pageSize)
                })
            },
            handleGoodDown(id){
                network.postData('shop/goods-status',{selectedIds:id,status:0})
                .then(response=>{
                    this.$message({
                        message: response,
                        type: 'success'
                    })
                    this.getData(this.currentPage, this.pageSize)
                })
            },

            handleExport(){
                this.$confirm(`确定要导出当前数据吗？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    return network.getData(`shop/goods-list-export`, this.filterModel)
                }).then(response => {
                    this.$message({
                        message: response,
                        type: 'success'
                    })
                }).catch(response => {

                })
            },
        },

    }

</script>

<style scoped>
    .table-box .el-form-item__label {
        width: 100px;
        color: #99a9bf;
    }

    .table-box .el-form-item {
        width: 30%;
        margin-right: 0;
        margin-bottom: 0;
    }
</style>
