<template>
    <div class="voice-plate-wrap">
        <div>
            <el-button type="primary" @click="handelShowAdd">新建板块</el-button>
        </div>
        <div style="margin-top:30px">
            <el-table
                :data="tableData"
                border
                style="width: 100%"
            >

                <el-table-column
                    prop="SectionName"
                    label="版块名称"
                    align="center"
                />
                <el-table-column
                    prop="VarietyName"
                    label="品种"
                    width="200"
                    align="center"
                />
                <el-table-column
                    prop="Status"
                    label="状态"
                    width="200"
                    align="center"
                >
                    <template slot-scope="scope">
                        <span :style="{color:scope.row.Status===1?'':'#ef0000'}">{{scope.row.Status===1?'启用':'禁用'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    width="200"
                    align="center"
                >
                    <template #header>
                        <el-tooltip 
                            effect="dark" 
                            content="禁用后不可选择该版块新增语音播报，不影响历史数据；" 
                            placement="top-start"
                        >   
                            <div>
                                <span>操作</span>
                                <i class="el-icon-question"></i>
                            </div>
                        </el-tooltip>
                    </template>
                    <template slot-scope="scope">
                        <span style="color:#409EFF;cursor:pointer;margin-right:5px" @click="handleEdit(scope.row)">编辑</span>
                        <span :style="{color:scope.row.Status===1?'#ef0000':'#409EFF',cursor:'pointer'}" @click="handleOptItem(scope.row)">{{scope.row.Status===1?'禁用':'启用'}}</span>
                    </template>
                </el-table-column>
                <template slot="empty">
                    <div style="margin:50px 0">
                        <img style="width:150px" src="~@/assets/img/cus_m/nodata.png" alt="">
                        <div>暂无数据~</div>
                    </div>
                </template>
            </el-table>
            <el-pagination
				layout="total,prev,pager,next,jumper" 
				background
				:current-page="page_no"
				@current-change="handleCurrentChange"
				:page-size="pageSize" 
				:total="totals"
				style="float:right;margin-top:20px">
			</el-pagination>
        </div>

        <!-- 新增板块弹窗 -->
        <el-dialog
            :visible.sync="showAdd"
            :close-on-click-modal="false"
            :modal-append-to-body='false'
            custom-class="dialog"
            center
            width="700px"
            v-dialogDrag
            :title="isEdit?'编辑板块':'新建版块'"
        >
            <div >
                <el-form
                    ref="diaForm"
                    label-position="left"
                    hide-required-asterisk
                    label-width="80px"
                    :model="formData"
                    :rules="formRules"
                >
                    <el-form-item 
                        label="版块名称" 
                        prop="name"
                    >
                        <el-input
                            style="width:400px"
							v-model="formData.name"
							placeholder="请输入板块名称"
                        />
                    </el-form-item>
                    <el-form-item 
                        label="品种" 
                        prop="classify"
                    >
                        <el-cascader 
                            class="voice-plate-cascader"
                            v-model="formData.classify"
                            placeholder="请选择品种"
                            :options="classifyArr" 
                            :props="{value:'ChartPermissionId',label:'ClassifyName',children:'Items',emitPath:false}"
                            :show-all-levels="false"
                            ref="cascader"
                            :disabled="isEdit"
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item 
                        label="分享图片" 
                        prop="shareImg"
                    >
                        <el-input
                            style="width:400px"
							v-model="formData.shareImg"
							placeholder="请上传分享图片"
                            readonly
                        />
                        <el-upload
                            style="display: inline-block;margin-left:5px"
                            action=""
                            accept="image/*"
                            :http-request="handleUpload"
                            :show-file-list="false"
                        >
                            <el-button type="primary">选择图片</el-button>
                        </el-upload>
                    </el-form-item>
                    <div style="text-align:center;margin:30px 0">
                        <el-button type="primary" plain style="width:100px" @click="showAdd=false">取消</el-button>
                        <el-button type="primary" style="margin-left:30px;width:100px" @click="handleAdd">保存</el-button>
                    </div>
                </el-form>
            </div>

        </el-dialog>
    </div>
</template>

<script>
import { interactiveInterface } from '@/api/api'
import { customInterence } from '@/api/api.js'
export default {
    data() {
        return {
            tableData:[],
            page_no:1,
            pageSize:15,
            totals:0,

            showAdd:false,
            isEdit:false,
            formData:{
                name:'',
                classify:'',
                shareImg:'',
                item:null
            },
            classifyArr:[]
        }
    },
    created () {
        this.getTableList()
        this.getClassifyList()
    },
    methods: {
        handleCurrentChange(e){
            this.page_no=e 
            this.getTableList()
        },

        async getTableList(){
            const res=await interactiveInterface.voiceList({
                CurrentIndex: this.page_no,
				PageSize:this.pageSize
            })
            if(res.Ret!==200) return
            const { List,Paging } = res.Data;

			this.tableData = List || [];
			this.totals = Paging.Totals;
        },

        //获取品种数据
        async getClassifyList(){
            const res=await customInterence.getvariety({CompanyType:"ficc"})
            if(res.Ret!==200) return 
            this.classifyArr=res.Data.List||[]
        },

        handelShowAdd(){
            this.formData.name=''
            this.formData.classify=''
            this.formData.shareImg=''
            this.isEdit=false
            this.showAdd=true
        },

        handleEdit(item){
            this.formData.name=item.SectionName
            this.formData.classify=item.VarietyId
            this.formData.shareImg=item.ImgUrl
            this.formData.item=item
            this.isEdit=true
            this.showAdd=true
        },

        // 新增板块
        async handleAdd(){
            if(!this.formData.name){
                this.$message.warning('请输入板块名称')
                return
            }
            if(!this.formData.classify){
                this.$message.warning('请选择品种')
                return
            }
            if(!this.formData.shareImg){
                this.$message.warning('请上传分享图片')
                return
            }

            //如果是编辑
            if(this.isEdit){
                this.handleEditItem()
                return
            }

            //获取选择的分类品种名称
            let VarietyName=this.$refs.cascader.getCheckedNodes()[0].label
            const res=await interactiveInterface.addVoiceSection({
                SectionName:this.formData.name,
                VarietyId:Number(this.formData.classify),
                VarietyName:VarietyName,
                ImgUrl:this.formData.shareImg
            })
            if(res.Ret===200){
                this.$message.success('新增成功')
                this.showAdd=false
                this.getTableList()
            }
        },

        //编辑
        async handleEditItem(){
            const res=await interactiveInterface.editVoiceSection({
                SectionId:Number(this.formData.item.SectionId),
                SectionName:this.formData.name,
                ImgUrl:this.formData.shareImg
            })
            if(res.Ret===200){
                this.$message.success('编辑成功')
                this.showAdd=false
                this.getTableList()
            }
        },

        //启用/禁用 
        async handleOptItem(item){
            const res=await interactiveInterface.editVoiceSection({
                SectionId:Number(item.SectionId),
                Enable:item.Status==1?0:1
            })
            if(res.Ret===200){
                this.$message.success(`${item.Status==1?'禁用':'启用'}成功`)
                this.getTableList()
            }
        },

        // 上传图片
        handleUpload(e){
            let form = new FormData();
		    form.append('file',e.file);
            customInterence.upload(form).then(res=>{
                if(res.Ret===200){
                    this.formData.shareImg=res.Data.ResourceUrl
                }
            })
        }

    },
}
</script>

<style lang="scss">
    .voice-plate-cascader{
        width: 400px;
        .el-input{
            width: 100% !important;
        }
    }
</style>
<style lang="scss" scoped>

</style>