<template>
    <div class="indicatorItem">
        <el-dialog title="指标项配置管理" v-model="editEvaluaVisible" width="70vw" :close-on-click-modal="false">
            <div class="indicatorItemAll">
                <div class="indicatorItemBtn">
                    <div class="PeriodBtn">
                        <el-row :gutter="10" style="padding-left: 10px;">
                            <el-col :span="1.5">
                                <el-button
                                type="primary"
                                size="mini"
                                :disabled="!isChild"
                                @click="handleAdd"
                                >
                                <img :src="addW" style="margin-right: 10px">
                                <span>新增</span>
                                </el-button>
                            </el-col>
                            <el-col :span="1.5">
                                <el-button
                                type="success"
                                size="mini"
                                @click="handleSave"
                                >
                                <img :src="saveW" style="margin-right: 10px">
                                <span>保存</span>
                                </el-button>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="indicatorItemTableData">
                        <div class="datasMsg" v-if="indicatoroptions.length>0" >
                            <el-collapse accordion>
                                <el-collapse-item v-for="item in indicatoroptions" :key="item" :name="item.id">
                                    <template #title>
                                        <div style="display:flex;height:30px">
                                            <div style="display:flex;height:30px">
                                                <span class="nameTit">子指标名称：</span>
                                                <el-input v-model="item.childName" v-if="!isSave" placeholder="请输入子指标项名称"></el-input>
                                            </div>
                                            <div style="display:flex">
                                                <span class="nameTit">子指标编码：</span>
                                                <el-input v-model="item.childCode" v-if="!isSave" placeholder="请输入子指标项编码"></el-input>
                                            </div>
                                        </div>
                                    </template>
                                    <div style="padding:10px 20px">
                                        <el-row :gutter="10">
                                            <el-col :span="1.5">
                                                <el-button
                                                style="margin-bottom:5px"
                                                type="primary"
                                                icon="Plus"
                                                size="mini"
                                                @click="handleAddTableChild(item)"
                                                >新增</el-button>
                                            </el-col>
                                        </el-row>
                                        <el-table :data="item.list">
                                            <el-table-column label="序号" type="index"  align="center" />
                                            <el-table-column label="指标项名称" prop="optionName">
                                                <template #default="scope">
                                                    <el-select v-model="scope.row.optionName" filterable  v-if="!isSave" placeholder="请选择指标项名称" @change="(val)=>changeOptionName(val,scope.row)">
                                                        <el-option
                                                            v-for="item in indicItemoptions"
                                                            :key="item.keyValue"
                                                            :label="item.keyName"
                                                            :value="item.keyName">
                                                        </el-option>
                                                    </el-select>
                                                    <span v-else>{{scope.row.optionName}}</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="指标项编码" prop="optionCode">
                                                <template #default="scope">
                                                    <span>{{scope.row.optionCode}}</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="描述">
                                                <template #default="scope">
                                                    <el-input v-model="scope.row.des" :rows="1" type="textarea" placeholder="请输入描述"></el-input>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="操作" width="100">
                                                <template #default="scope">
                                                    <p class="indicitem" @click="handleDelete(item, scope.row)">删除</p>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </div>
                        <div v-else>
                            <span class="emptyData">暂无数据</span>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import addW from '../../assets/btnIcon/addW.png'
import saveW from '../../assets/btnIcon/saveW.png'
import {apiGetIndicatordictionaryList, apiGetdataZBXList,apiGetindicatorselectByCode, apiGetIndicatordicsaveList, apiGetIndicatordicdeleteList} from '../../api/api'
export default {
    data() {
        return {
            addW: addW,
            saveW: saveW,
            editEvaluaVisible: false,
            isSave: false,
            changeDateSelect: [],
            indicatoroptions: [],
            expends: [],
            indicItemoptions: [],
            evaluationIndexData:[],
            isChild: false,
            itemForm: {
                childName: '',
                childCode: '',
                list: [],
            },
            rules: {
                cName: [
                    { required: true, message: '请输入子指标名称', trigger: 'blur' }
                ],
                cCode: [
                    { required: true, message: '请输入子指标编码', trigger: 'blur' }
                ],
                optionName: [
                    { required: true, message: '请选择指标名称', trigger: 'change' }
                ]
            },
            page:{
                pagesize: 12,
                currentPage: 1,
                total: 0
            },
            rowevalradio: {}
        }
    },
    methods: {
        init(row) {
            this.editEvaluaVisible = true
            this.indicatoroptions = []
            this.indicItemoptions = []
            this.rowevalradio = row
            if (!row.isChild) {
                this.isChild = false
            } else {
                this.isChild = true
            }
            this.getIndicatorItemData(row)
            this.getindicItemData()
        },
        // 查询子指标数据
        getIndicatorItemData(row, type) {
            let that = this
            let params = {
                pageNum: 1,
                pageSize: 50,
                indicatorId: row.id
            }
            if (type) {
                params.optionName = that.indicItem
            }
            apiGetIndicatordictionaryList(params).then(datas =>{
                if (datas) {
                    that.indicatoroptions = datas
                    that.changeDateSelect = []
                    if (!this.isChild && datas.length === 0) {
                        this.getItemFromIndic(row)
                    }
                }
            })
        },
        // 查询指标项条目
        getindicItemData() {
            let that = this
            let params = {
                superKey: 'ZBX0001'
            }
            apiGetdataZBXList(params).then(datas =>{
                if (datas && datas.data) {
                    that.indicItemoptions = datas.data
                }
            })
        },
        //根据指标查询指标项
        getItemFromIndic(row) {
            let childitemForm = {
                childName: row.indicatorName,
                childCode: row.indicatorCode,
                list: []
            }
            this.indicatoroptions.push(childitemForm)
        },
        //新增子指标
        handleAdd() {
            this.isSave = false
            this.title = '新增指标项管理'
            this.$nextTick(() =>{
                let itemForm = {
                    childName: '',
                    childCode: '',
                    list: [],
                }
                this.indicatoroptions.push(itemForm)
            })
        },
        //新增子指标
        handleAddTableChild(row) {
            let childitemForm = {
                indicatorId: this.rowevalradio.id,
                optionName: '',
                optionCode: ''
            }
            row.list.push(childitemForm)
        },
        changeOptionName(val, row) {
            this.indicItemoptions.forEach(item =>{
                if (item.keyName === val) {
                    row.optionCode = item.keyValue
                }
            })
        },
        //新增/修改指标数据
        handleSave() {
            let that = this
            let startFn = false
            that.indicatoroptions.forEach(item =>{
                if (item.childName === '' || item.childCode === '') {
                    if (item.list.length>0) {
                        startFn = true
                    }
                }
            })
            if (!startFn) {
                let params = that.indicatoroptions
                apiGetIndicatordicsaveList(params).then(datas =>{
                    if (!that.isSave) {
                        that.$message({
                            message: '指标项新增成功',
                            type: 'success'
                        });
                    } else {
                        that.$message({
                            message: '指标项修改成功',
                            type: 'success'
                        });
                    }
                    that.getIndicatorItemData(that.rowevalradio)
                })
            } else {
                that.$message({
                    message: '请输入子指标名称和子指标编码',
                    type: 'error'
                });
            }
        },
        //删除指标数据
        handleDelete(data, row) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if (row.id) {
                    let that = this
                    let paramsArr = [row.id]
                    apiGetIndicatordicdeleteList(paramsArr.join(',')).then(datas =>{
                        that.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        that.changeDateSelect = []
                        that.getIndicatorItemData(that.rowevalradio)
                    })
                } else {
                    if (data.list && data.list.length>0) {
                        data.list.forEach((it,index) =>{
                            if (it.optionCode === row.optionCode) {
                                data.list.splice(index, 1)
                            }
                        })
                    }
                }
            })
        }
    }
}
</script>

<style lang="less">
.indicatorItem{
    .el-overlay{
        .el-dialog{
            margin-top: 5vh !important;
            .el-dialog__body{
                padding: 0 20px 30px 20px !important;
                .indicatorItemAll{
                    .el-select, .el-input{
                        width: 100%;
                    }
                    .indicatorItemBtn{
                        padding: 10px 20px 0 20px;
                        span{
                            font-size:14px;
                        }
                        .PeriodBtn{
                            display: flex;
                            justify-content: flex-end;
                            padding: 20px 0;
                            .el-button{
                                height: 30px;
                                padding: 0 30px ;
                                span{
                                    margin:0;
                                }
                            }
                            .is-disabled{
                                opacity: 0.5;
                            }
                        }
                        .indicatorItemTableData{
                            height: 55vh !important;
                            .datasMsg{
                                .el-collapse{
                                    .el-collapse-item{
                                        .el-collapse-item__header{
                                            .nameTit{
                                                display: inline-block;
                                                height: 20px;
                                                font-size: 12px;
                                                font-weight: bold;
                                                position: relative;
                                                top: -8px;
                                            }
                                            .el-input{
                                                width: 150px;
                                                margin-right: 10px;
                                            }
                                        }
                                        .el-table{
                                            .el-table__body-wrapper{
                                            }
                                            .el-input__inner{
                                                height: 30px !important;
                                            }
                                            .el-radio__label{
                                                display: none;
                                            }
                                        }
                                        .indicitem{
                                            color: #409EFF;
                                            font-size: 12px;
                                            margin-right: 20px;
                                            cursor:pointer;
                                            &:hover{
                                                text-decoration: underline;
                                            }
                                        }
                                        .el-pagination{
                                            margin-top: 20px;
                                            text-align: end;
                                            position: relative;
                                        }
                                        .el-button{
                                            height: 26px;
                                            padding: 0 15px ;
                                            span{
                                                margin:0;
                                            }
                                        }
                                    }
                                }
                            }
                            .emptyData{
                                display: inline-block;
                                width: 100%;
                                // border: 1px solid #d9d9d9;
                                text-align: center;
                                margin-top: 50px;
                            }
                        }
                    }
                    .onlyDialog{
                        .el-overlay{
                            .el-dialog{
                                margin-top: 10vh !important;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>