<style>
    .hotelProperty .hotelpro-Div{width:100%;height:48px;margin-top:20px;background-color:#F9F9F9;}
    .hotelProperty .hotel-nav div{float:left;width:130px;height:48px;text-align:center;font-size:14px;color:#666666;cursor:pointer;}
    .hotelProperty .selected{background-color:#fff;color:#000000!important;}
    .hotelProperty .hotelpro-Div span{display:inline-block;width:130px;margin-top:15px;}
    .hotelProperty .selected i{display:inline-block;width:20px;height:2px;background-color:#E95252; }
    .hotelProperty .hotel-service,.hotel-prolity{width:100%;min-height:500px;padding-bottom:40px;background-color:#fff;}
    .hotelProperty .elmWidth{width:200px;margin:15px 15px 0 0;float:left;}
    .serviceName{width:200px;float:left;margin:30px 0 0 30px;}
    .hotelProperty .first-ceng{width:100%;padding:15px 0 30px 30px;border-bottom:1px solid #F4F4F4;}
    .hotelProperty .add-describe{width:34px;height:34px;background-color:#F0EFEF;text-align:center;line-height: 34px;color:#E1E1E1;cursor: pointer; position:relative;top:10px;}
    .hotelProperty .add{width:80px;height:80px;background-color:#F0EFEF;color:#E1E1E1;text-align: center;line-height:80px;cursor:pointer;position:relative;top:20px;left:30px;}
    .hotelProperty .add span{position: absolute;width:100%;bottom:-20px;left:0;}
    .hotelProperty .add i{font-size:30px;position:absolute;top:-10px;left:25px;}
    .hotelProperty .service-name{padding-top:15px; font-size:12px; }
    .hotelProperty .Se{float:left;margin-top:5px;}
    .hotelProperty .inner-span{width:200px;height:30px; border:1px solid red;}
    .hotelProperty .hpmInput{padding:5px 10px;margin:20px 10px 0 0;position:relative;border:1px solid #fff;font-size:12px;}
    .hotelProperty .hpmInput:hover{border:1px dashed #E95252}
    .hotelProperty .el-icon-delete{font-size:18px;cursor:pointer;margin-left:20px;position:relative;top:2px;}
    .hotelProperty .el-icon-delete:hover{color:#E95252;}
    .hotelProperty .textDiv{float:left;position: relative;}
    .hotelProperty .delChild{position:absolute;right:5px;top:14px;cursor: pointer;color:#999;display: none;font-size:14px;}
    .hotelProperty .textDiv:hover .delChild{display:block;}
    .hotelProperty .delChild:hover{color:#E95252;}
    .hotelProperty .poliList{position:relative;display:inline-block;}
    .hotelProperty .poliList:hover .policyChild{display:block;}
    .hotelProperty .policyChild{position: absolute;top:-5px;right:-5px;cursor: pointer;color:#999;display:none;font-size:14px;}
    .hotelProperty .policyChild:hover{color:#E95252;}
    .hotelProperty .comInput{padding:5px 10px;width:auto; display:inline-block !important; display:inline;border:1px solid #fff;font-size:14px;}
    .hotelProperty .comInput:hover{border:1px dashed #E95252;}
    .hotelProperty .TitleOne:hover .Tchild{display:block;}
    .hotelProperty .TitleOne{position: relative;width:auto;display: inline-block;}
    .hotelProperty .Tchild{position: absolute;cursor: pointer;color:#999;top:7px;font-size:18px;right:-8px;display: none;}
    .hotelProperty .Tchild:hover{color:#E95252}
    .hotelProperty .polityDiv{padding: 5px 10px;position: relative;border: 1px solid #fff;font-size: 12px;}
    .hotelProperty .polityDiv:hover{border:1px dashed #E95252}
    .hotelProperty .polityInput{width:200px;float:left;margin-top:15px;}
</style>
<template>
            <div class="flexOne hotelProperty">
                <div class="hotelpro-Div">
                    <div class="hotel-nav">
                        <div @click="a=true,b=false,aa=true,bb=false" :class="{selected:aa}">
                            <span>{{$t('hotel.hotel_services')}}</span>
                            <i v-show="a"></i>
                        </div> 
                        <div @click="b=true,a=false,bb=true,aa=false" :class="{selected:bb}">
                            <span>{{$t('hotel.hotel_policy')}}</span>
                            <i v-show="b"></i>
                        </div>
                    </div>
                </div>
                <div class="hotel-service" v-show="a">
                    <div class="first-ceng" v-for="(item,index) in pageData" :key="item.subCode">
                        <div class="service-name TitleOne" v-if="item.ID!=0">
                            <div contenteditable="true" class="comInput" v-html="item.Content" @blur="item.Content=$event.target.innerHTML,changeItem(item.ID,item.Content)"></div>
                            <i class="el-icon-circle-close Tchild" @click="isdelete(item.ID)"></i>
                        </div>


                        <div v-if="item.ID==0">
                            <el-input class="elmWidth" :placeholder="$t('hotel.hotel_nameOf')" @keyup.enter.native="search(index)" v-model="pageData[index].Content"></el-input>
                        </div>
                        <div class="clearfix">
                            <div class="textDiv" v-for="(child,indexs) in item.list" :key="child.subCode">
                                <div contenteditable="true" class="hpmInput" v-if="child.ID!=0" v-html="item.list[indexs].Content" @blur="item.list[indexs].Content=$event.target.innerHTML,changeItem(item.list[indexs].ID,item.list[indexs].Content)"></div>
                                
                                <!-- <input class="hpmInput" type="text" :key="item.subCode" v-if="child.ID!=0" v-model="item.list[indexs].Content"  @blur="changeItem(item.list[indexs].ID,item.list[indexs].Content)"/> -->
                                <i class="el-icon-circle-close delChild" @click="isChildDel(1,item.list[indexs].ID)"></i>
                            </div>
                            <el-input v-for="(child,indexs) in item.list" v-model="item.list[indexs].Content" class="elmWidth" :key="child.subCode" :placeholder="$t('hotel.hotel_ServiceContent')" @keyup.enter.native="searchSecond(index,indexs)" v-if="child.ID==0"></el-input>
                            <div class="add-describe Se">
                                <i class="iconfont icon-img_haha" @click="addFir(index)"></i>
                            </div>
                        </div>                        
                    </div>
                    <div class="add" @click="addFir(-1)">
                        <i class="iconfont icon-img_haha"></i>
                        <span>{{$t('hotel.hotel_ClickOnAdd')}}</span>
                    </div>
                </div>
                <div class="hotel-prolity" v-show="b">
                    <div class="first-ceng clearfix" v-for="(item,index) in polity" :key="item.subCode">
                        <div class="service-name" v-if="item.ID!=0">
                            <div class="poliList">
                                <div contenteditable="true" class="polityDiv" v-html="polity[index].Content" @blur="polity[index].Content=$event.target.innerHTML,changeItem2(item.ID,polity[index].Content)"></div>
                                <!-- <input class="hpmInput" type="text" v-model="polity[index].Content" @blur="changeItem2(item.ID,polity[index].Content)"/> -->
                                <i class="el-icon-circle-close policyChild" @click="isChildDel(2,item.ID)"></i>
                            </div>
                        </div>
                        <div v-if="item.ID==0">
                            <el-input class="polityInput" :placeholder="$t('hotel.hotel_nameOf')" v-model="polity[index].Content" @keyup.enter.native="polityOne(index)"></el-input>
                        </div>
                    </div>
                    <div class="add" @click="addPoly(-1)">
                        <i class="iconfont icon-img_haha"></i>
                        <span>{{$t('hotel.hotel_ClickOnAdd')}}</span>
                    </div>
                </div>
            </div>
        
</template>

<script>
  export default {
    data() {
      return {
        total: 1,
        pageIndex:'1',
        pageSize:5,
        a:true,
        b:false,
        aa:true,
        bb:false,
        name:'',
        secondM:'',
        firTotal:0,
        selectSpan:[],
        aaa:'',
        code:'',
        pageData:[],
        polity:[]
      }
    },
    methods:{
        addPoly(index){
            var p={ID:0,Content:""}
            this.polity.push(p);  
        },
        polityOne(index){
            let msg = {
                "Code":null,
                "Content":this.polity[index].Content,
                "DictKey":"SK_HOTEL_POLICY"
            }
            this.apipost("dict_post_Set",msg,response=>{   
                this.polity[index].ID=response.data.data.ID;
            },null); 
        },
        polityTwo(index){
            let msg = {
                "Code":null,
                "Content":this.polity[index].policy,
                "DictKey":"SK_HOTEL_POLICY"
            }
            this.apipost("dict_post_Set",msg,response=>{   
            },null); 

        },
        addFir(index){                                      //添加一级服务
            if(index==-1){
                var p={ID:0,Content:"",list:[]}
                this.pageData.push(p);
            }else{
                if(this.pageData[index].ID!=0){
                    var p={ID:0,Content:""};
                    var isExsit=false;
                    this.pageData[index].list.forEach(element => {
                        if(element.ID==0){
                            isExsit=true;
                        }
                    });
                    if(!isExsit)
                        this.pageData[index].list.push(p);
                }
            }
        },
        changeItem2(ID,Name){                               //修改政策子类数据
           let msg = {
                "ID":ID,
                "Content":Name,
                "DictKey":"SK_HOTEL_POLICY"
            }
            this.apipost("dict_post_Set",msg,response=>{
                
            },null); 
        },
        changeItem(ID,Name){                                //修改服务子类数据
            let msg = {
                ID:ID,
                Content:Name,
                DictKey:"SK_HOTEL_SERVICE"
            }
            this.apipost("dict_post_Set",msg,response=>{
                
            },null); 
        },
        search(index){                                      //添加服务一级名称
            let msg = {
                "Code":null,
                "Content":this.pageData[index].Content,
                "DictKey":"SK_HOTEL_SERVICE"
            }
            this.apipost("dict_post_Set",msg,response=>{                    
                this.pageData[index].ID=response.data.data.ID;
            },null); 
        },
        searchSecond(index,secondIndex){                     //添加服务子类
            let msg = {
                "Code":this.pageData[index].ID,
                "Content":this.pageData[index].list[secondIndex].Content,
                "DictKey":"SK_HOTEL_SERVICE"
            }      
            this.apipost("dict_post_Set",msg,response=>{
                this.pageData[index].list[secondIndex].ID=response.data.data.ID;
            },null); 
        },
        initServices(){                                         //获取所有服务
             let msg = {
                    Key:"SK_HOTEL_SERVICE"
             }
             this.apipost("dict_post_GetList",msg,res=>{
                 if(res.data.resultCode==1){
                     this.pageData=res.data.data;
                 }
            },null); 
        },
        isdelete(ID){
            this.$confirm(this.$t('tips.shifoushanchu'),  this.$t('tips.tips'), {
            confirmButtonText: this.$t('pub.sureBtn'),
            cancelButtonText: this.$t('pub.cancelBtn'),
            type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: this.$t('tips.shanchuchenggong')
            });
            let msg = {
                dictID:ID
            }
            this.apipost("dict_post_Remove",msg,res=>{
                if(res.data.resultCode==1){
                    this.Success(this.$t('tips.shanchuchenggong'));
                    this.initServices();
                }else{
                    this.Error(res.data.message);
                }
            },null);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: this.$t('tips.cancleDelete')
                });
            });

        },
        isChildDel(type,ID){
            this.$confirm(this.$t('tips.shifoushanchu'),  this.$t('tips.tips'), {
            confirmButtonText: this.$t('pub.sureBtn'),
            cancelButtonText: this.$t('pub.cancelBtn'),
            type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: this.$t('tips.shanchuchenggong')
            });
            let msg = {
                dictID:ID
            }
            this.apipost("dict_post_Remove",msg,res=>{
                if(res.data.resultCode==1){
                    this.Success(this.$t('tips.shanchuchenggong'));
                    if(type==1){
                        this.initServices();
                    }else{
                        this.initPolicy();
                    }
                }else{
                    this.Error(res.data.message);
                }
            },null);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: this.$t('tips.cancleDelete')
                });
            });
        },
        initPolicy(){                                         //获取所有属性
             let msg = {
                    Key:"SK_HOTEL_POLICY"
             }
             this.apipost("dict_post_GetList",msg,res=>{
                 if(res.data.resultCode==1){
                     this.polity = res.data.data;
                 }
            },null); 
        },
    },
    mounted(){
      this.initServices();
      this.initPolicy();
    }
  }
</script>