<template>
    <div class="right_con">
       <div class="staff_fgx fl basicAfterIcon"></div>
        <p class="fl staff_list">基础设置</p>
        <div class="clear"></div>
        <div class="content account_content">
            <Tabs type="card">
                <TabPane label="基础设置">
                    <Form ref="basicForm" :model="basicForm" :label-width="120" class="add-adminguild-form">
                        <div>
                            <FormItem prop="" :label="'每日鼓励语'+NumberList[index]" v-for="(item,index) in ratioGroup" :key="'ratioGroup'+index" >
                            <div class="fl" @click="ratioCanDelete(index,$event)">
                                <Input v-model="item.add_oil" type="text" class="wid_347 fl" @on-keyup="clearArrayList('ratioGroup',index,true,item.add_oil)">
                                </Input>
                            </div>
                            <div style="display:inline" class="candelete" v-if="isdelete&&index==ratioIndex">
                                <img src="../../../static/image/yes.png" alt :class="ratioGroup.length?'mar_T_8 mar_L_5 yesimg':'mar_L_5 mar_T_7 yesimg'" @click="isdelete=false">
                                <img src="../../../static/image/no.png" alt :class="ratioGroup.length?'mar_T_8 noimg':'noimg mar_T_6'" @click="deleteRatiogroup">
                            </div>
                            <div v-if="index===ratioGroup.length-1&&!isdelete">
                                <img src="../../../static/image/add.png" alt='+' :class="ratioGroup.length?'mar_T_3 mar_L_5':'mar_L_5 mar_T_2'" v-if="is_addratioGroup" @click="addratioGroup('')">
                                <div v-else style="display:inline">
                                <img src="../../../static/image/yes.png" alt :class="ratioGroup.length?'mar_T_8 mar_L_5':'mar_L_5 mar_T_7'" @click="editRatioGroup(item.add_oil,index)" >
                                <img src="../../../static/image/no.png" alt :class="ratioGroup.length?'mar_T_7':'mar_T_6'" @click="deleteRatioGroup(index)">
                                </div>
                            </div>
                            </FormItem>
                            <FormItem :label="'每日鼓励语一'"  v-if="ratioGroup.length===0">
                            <Input v-model="basicForm.add_oil" type="text" readonly class="wid_347 fl" @on-keyup="clearArrayList('ratioGroup',index,true,basicForm.add_oil)">
                            </Input>
                            <img src="../../../static/image/add.png" alt='+' :class="ratioGroup.length?'mar_T_3 mar_L_5':'mar_L_5 mar_T_2'" v-if="is_addratioGroup" @click="addratioGroup('')">
                            <div v-else style="display:inline">
                                <img src="../../../static/image/yes.png" alt :class="ratioGroup.length?'mar_T_8 mar_L_5':'mar_L_5 mar_T_7'" @click="editRatioGroup(index)" >
                                <img src="../../../static/image/no.png" alt :class="ratioGroup.length?'mar_T_8':'mar_T_6'" @click="deleteRatioGroup(index)">
                            </div>
                            </FormItem>
                        </div>
                      <FormItem class="form_btn">
                        <Button type="primary" @click="confirmFinal()">确认</Button>
                      </FormItem>
                    </Form>
                </TabPane>  
            </Tabs>
        </div>
    </div>
</template>

<script>
import {stringNumber} from '@/assets/js/common'
export default {
    name: "basicAdd_oil",
    data() {
        return {
            basicForm: {
                add_oil:''
            },
            NumberList:stringNumber,
            is_addratioGroup:true,
            ratioGroup:[],
            isdelete:false,
        }
    },
    methods:{
        confirmFinal() {
            if(this.ratioGroup.length === 0) {
                this.$Message.warning('请填写每日鼓励语')
                return false
            }else {
                for(let [key,value] of Object.entries(this.ratioGroup)) {
                    if(value.add_oil == '') {
                        console.log('fsfsjfkfjoffjoe')
                        this.$Message.warning('请填写每日鼓励语')
                        return false
                    }
                }
            }
            this.$api.setBasicData({add_oil:this.ratioGroup}).then(response => {
                if(response.code == 200) {
                    this.$Message.success(response.msg)
                    this.getData()
                }else {
                    this.$Message.error(response.msg)
                    return
                }
            })
        },
        translate(){
            if(this.ratioGroup.length === 0) {
                this.$Message.warning('请填写每日鼓励语')
                return false
            }else {
                for(let [key,value] of Object.entries(this.ratioGroup)) {
                    if(value.add_oil == '') {
                        console.log('fsfsjfkfjoffjoe')
                        this.$Message.warning('请填写每日鼓励语')
                        return false
                    }
                }
            }
           
        },
        getData() {
            this.$api.getBasicData().then(response => {
                if(response.code == 200) {
                    if(response.data.add_oil.length == 0) {
                        this.basicForm.add_oil = ''
                        return
                    }
                    this.basicForm.add_oil = response.data.add_oil[0].add_oil
                    this.ratioGroup = response.data.add_oil
                }else {
                    this.$Message.error(response.msg)
                    return
                }
            })
        },
        addratioGroup(){
            this.ratioGroup.push({add_oil:''})
            this.is_addratioGroup = false
        },
        editRatioGroup(e,index) {
            if(e&&index) {
                this.is_addratioGroup = true
            }else {
                if(index == 0) {
                    this.ratioGroup[index].add_oil = this.basicForm.add_oil
                    this.is_addratioGroup = true;
                    return  false
                }
                this.is_addratioGroup = true;
                this.ratioGroup.splice(index, 1);
            }
            
        },
        deleteRatioGroup(index){
            this.ratioGroup.splice(index, 1);
            this.is_addratioGroup = true;
        },
        // input判断
       clearArrayList(array,index,btn,isNum){
            if(index == 0) {
                   this.basicForm.add_oil = isNum
                    this.ratioGroup[index].add_oil = isNum
                   this.is_addratioGroup = false
                   return
            }
           if(isNum && index) {
                this.ratioGroup[index].add_oil = isNum
                this.is_addratioGroup = false
           }else {
               if(index < this.ratioGroup.length) {
                   this.ratioGroup[index].add_oil = isNum
                   return
               }
                this.ratioGroup.splice(index, 1)
                this.is_addratioGroup = false
           }
        },
        ratioCanDelete(index,event){
            this.ratioIndex==index?this.isdelete=!this.isdelete:this.ratioIndex=index;this.isdelete=true
        },
        deleteRatiogroup(){
            this.ratioGroup.splice(this.ratioIndex,1)
            this.isdelete=false
        },
    },
    created() {
        this.getData()
    }
}
</script>

<style>
.staff_list {
    width: 120px;
    margin-top: 15px;
    margin-left: 5px;
    font-size: 15px;
}
.content {
  padding-top: 20px;
}
</style>