<template>
    <div class="report-variety-page">
        <div class="top-wrap">
            <el-button type="primary" v-permission="permissionBtn.enChartPermission.enChartPermission_save"
                @click="showEditBreed=true;getParentVarietyList()">添加品种</el-button>
            <el-input placeholder="品种名称" v-model="searchVal" style="max-width: 520px; float: right" @change="handleSearch" clearable>
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
        </div>
        <div class="main-wrap">
            <el-table 
                style="border:1px solid #eaeaea;" 
                :data="tableData" 
                v-loading="listLoading"
                element-loading-text="数据加载中..."
                row-key="EnPermissionId" 
                :tree-props="{children:'Child',hasChildren:'hasChildren'}"
            >
                <el-table-column prop="EnPermissionName" label="一级品种">
                    <template slot-scope="scope">
                        <span>{{scope.row.ParentId==0?scope.row.EnPermissionName:''}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="EnPermissionName" label="二级品种">
                    <template slot-scope="scope">
                        <span>{{scope.row.ParentId!=0?scope.row.EnPermissionName:''}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <span class="editsty" v-permission="permissionBtn.enChartPermission.enChartPermission_save"
                            style="margin-right:20px;display:inline-block" @click="handleEditBreedItem(scope.row)">编辑</span>
                        <span v-permission="permissionBtn.enChartPermission.enChartPermission_del"
                            class="deletesty" @click="handleDelBreedItem(scope.row)">删除</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 品种编辑弹窗 -->
        <el-dialog 
            :modal-append-to-body='false' 
            :title="!editBreedData.id?'新增分类':'编辑分类'" 
            :visible.sync="showEditBreed" 
            :close-on-click-modal="false"
            :center="true" 
            v-dialogDrag
            width="600px"
        >
            <div class="edit-variety-wrap" style="padding-bottom:30px">
                <el-form>
                    <el-form-item label="品种名称">
                        <el-input placeholder="请输入品种名称" v-model="editBreedData.name" style="width:400px"></el-input>
                    </el-form-item>
                    <el-form-item label="上级品种">
                        <el-select v-model="editBreedData.parentId" placeholder="请选择" style="width:400px">
                            <el-option
                                v-for="item in parentVarietyOpts"
                                :key="item.EnPermissionId"
                                :label="item.EnPermissionName"
                                :value="item.EnPermissionId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="后台排序">
                        <el-input placeholder="后台排序" v-model="editBreedData.sort" type="number" style="width:400px"></el-input>
                    </el-form-item>
                </el-form>
                <div style="text-align: center;margin-top:40px">
                    <el-button type="primary" plain @click="showEditBreed=false">取消</el-button>
                    <el-button type="primary" @click="handleConfirmEidtBreed">确定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {reportVarietyENInterence} from '@/api/api'
export default {
    watch: {
        showEditBreed(n){
            if(!n){
                this.editBreedData={
                    id:0,
                    name:'',
                    sort:0,
                    parentId:0,
                }
            }
        }
    },
    data() {
        return {
            searchVal:'',
            tableData:[],
            listLoading:false,

            parentVarietyOpts:[],
            showEditBreed:false,
            editBreedData:{
                id:0,
                name:'',
                sort:0,
                parentId:0,
            },
        }
    },
    created(){
        this.getList()
        this.getParentVarietyList()
    },
    methods: {
        async getList(){
            this.listLoading=true
            const res=await reportVarietyENInterence.varietyList({Keyword:this.searchVal})
            this.listLoading=false
            if(res.Ret===200){
                this.tableData=res.Data||[]
            }
        },

        getParentVarietyList(isEidtLevelOne){
            reportVarietyENInterence.parentVarietyList({}).then(res=>{
                if(res.Ret===200){
                    const arr=res.Data||[]
                    if(isEidtLevelOne){
                        this.parentVarietyOpts=[
                            {
                                EnPermissionName:'无',
                                EnPermissionId:0,
                            }
                        ]
                    }else{
                        this.parentVarietyOpts=[
                            {
                                EnPermissionName:'无',
                                EnPermissionId:0,
                            },
                            ...arr
                        ]
                    }
                }
            })
        },

        handleSearch(){
            this.getList()
        },

        async handleConfirmEidtBreed(){
            if(!this.editBreedData.name){
                this.$message.warning('请填写品种名称')
                return
            }
            let params={
                EnPermissionName:this.editBreedData.name,
                ParentId:this.editBreedData.parentId,
                Sort:Number(this.editBreedData.sort)
            }
            if(this.editBreedData.id){
                params.EnPermissionId=this.editBreedData.id
            }
            const res=this.editBreedData.id?await reportVarietyENInterence.editVariety(params):await reportVarietyENInterence.addVariety(params)
            if(res.Ret===200){
                this.$message.success(`${this.editBreedData.id?'编辑':"新增"}成功`)
                this.getList()
                this.showEditBreed=false
                this.getParentVarietyList()
            }
        },

        handleEditBreedItem(item){
            this.editBreedData={
                id:item.EnPermissionId,
                name:item.EnPermissionName,
                sort:item.Sort,
                parentId:item.ParentId||0
            }
            this.getParentVarietyList(item.ParentId?false:true)
            this.showEditBreed=true
        },

        // 删除品种
        handleDelBreedItem(item){
            this.$confirm('确认删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                reportVarietyENInterence.delVariety({
                    EnPermissionId:item.EnPermissionId
                }).then(res=>{
                    if(res.Ret===200){
                        this.$message.success('删除成功')
                        this.getList()
                        this.getParentVarietyList()
                    }
                })
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.top-wrap{
    background: #FFFFFF;
    border-radius: 4px;
    padding: 20px 30px;
}
.main-wrap{
    margin-top: 30px;
    background: #FFFFFF;
    border-radius: 4px;
    padding: 20px 30px;
}
</style>