<template>
    <div>
        <div style="width: 100vh;height: 100vh;background-color:rgba(255,255,255,.2);z-index: 9999999999999;
        position: fixed" v-show="deptLoading"></div>
        <div>
            <div style="width: 23%;height:100vh;position: fixed;overflow: hidden;background: #eee;">
                <div style="overflow: hidden;width:100%;height:8vh;margin: 0 auto;text-align: center;line-height: 8vh;">
                <i class="el-icon-arrow-left" style="float: left;width: 100%;height:8vh;line-height: 8vh;"
                   @click="back"></i>
                </div>
                <el-radio-group v-model="radio1" class="a_v_e" v-if="editableTabs.length>0"
                                @change="radioChange">
                    <el-badge :value=" editableTabs[radioIndex].check === true ? 1:0"
                              :type=" editableTabs[radioIndex].check === true ? 'success':'danger'" class="bage">
                        <el-radio-button label="老年人信息"></el-radio-button>
                    </el-badge>
                    <el-badge :value=" editableTabs[radioIndex].childrenCheck === true ? 1:0"
                              :type=" editableTabs[radioIndex].childrenCheck === true ? 'success':'danger'" class="bage">
                        <el-radio-button label="子女信息"></el-radio-button>
                    </el-badge>
                    <el-badge :value=" editableTabs[radioIndex].othersCheck === true ? 1:0"
                              :type=" editableTabs[radioIndex].othersCheck === true ? 'success':'danger'" class="bage">
                        <el-radio-button label="其他赡养义务人信息"></el-radio-button>
                    </el-badge>
                    <el-badge :value=" editableTabs[radioIndex].patrolCheck === true ? 1:0"
                              :type=" editableTabs[radioIndex].patrolCheck === true ? 'success':'danger'" class="bage">
                        <el-radio-button label="巡访联系人信息"></el-radio-button>
                    </el-badge>
                </el-radio-group>
            </div>
            <div style="width:75%;margin-left: 23%;" >
                <el-tabs v-model="editableTabsValue"
                         type="card"
                         class="tabs"
                         addable
                         @edit="handleTabsEdit"
                         @tab-click ="clickTab"
                         @tab-remove ="removeTab"
                >
                    <el-tab-pane
                            :key="item.name"
                            v-for="(item, index) in editableTabs"
                            :label="item.title"
                            :name="item.name"
                            :closable="!(countlist[index]&&countlist[index].status=='3')"
                    >

                        <span slot="label" :style="editableTabs[index].check==true&&editableTabs[index].childrenCheck==true&&editableTabs[index].othersCheck==true&&editableTabs[index].patrolCheck==true?'color:#67C23A':''">{{item.title}}</span>

                        <el-col :span="5" style="text-align: center ;background-color:#eee; margin-top: -2%;">

                        </el-col>
                        <!--                        <el-col :span="19" style="line-height: 8vh;text-align: left">-->
                        <!--                            -->
                        <!--                        </el-col>-->

                        <el-popover
                                v-if="countlist && countlist[index] && countlist[index].remark"
                                placement="bottom"
                                title="驳回理由"
                                width="200"
                                trigger="click"
                                :content="countlist[index].remark">
                            <el-button  style="color: #F56C6C;text-align: center;width: 100%"
                                        slot="reference">审核失败，点击查看驳回理由</el-button>
                        </el-popover>
                        <el-card v-show="a" class="box-card">
                            <olds :oId = oId
                                  :OldName=OldName
                                  :oldsColor=oldsColor
                                  @oName="oName"
                                  @isColor="isColor"
                                  :clickTabIndex=index
                                  :oldData="countlist[index]">

                            </olds>
                        </el-card>
                        <el-card v-show="b" class="box-card">
                            <Children3 :id = oId
                                       :clickTabIndex=index
                                       @childrenisColor="childrenisColor"
                                       :childrenData="countlist[index]">

                            </Children3>
                        </el-card>
                        <el-card v-show="c" class="box-card">
                            <others :id = oId
                                    :clickTabIndex=index
                                    @otherisColor="otherisColor"
                                    :othersData="countlist[index]">
                            </others>
                        </el-card>
                        <el-card v-show="d" class="box-card">
                            <patrol :id = oId
                                    :clickTabIndex=index
                                    @patrolisColor="patrolisColor"
                                    :patrolData="countlist[index]" >
                            </patrol>
                        </el-card>

                    </el-tab-pane>



                </el-tabs>
            </div>
            <!--<div v-if="!isYes" style="height: 100vh;line-height: 100vh;text-align: center;">-->
            <!--点击右上角+号添加-->
            <!--</div>-->

        </div>
    </div>
</template>

<script>
    import Others from './type/Others'
    import Olds from './type/Olds'
    import Children3 from './type/Children3'
    import Patrol from './type/Patrol'
    import {addOlds,deleteOlds,listByfid} from '../api'
    import {decryptListData_ECB,decryptChildJsonData_ECB,decryptOtherJsonData_ECB} from "@/api/tool/sm4";
    import {mapState} from 'vuex'
    export default {
        name: 'info',
        components :{Others,Olds,Patrol,Children3},
        data() {
            return {
                oId:'',
                a:true,
                b:false,
                c:false,
                d:false,
                radio:'',
                isYes:false,
                childScroll:'',
                radio1:'老年人信息',
                loading: false,
                editableTabsValue:'',
                editableTabs:[],
                OldName:'',//添加老人的名字
                fid :'',//老人fid
                id:'',
                idData:[],
                idNumber:0,
                newIndex:'',
                clickTabIndex:null,
                tabIndex: 0,
                formData: {
                    name: '',
                    pwd: '',
                    idCard:'',
                    phone:'',
                },
                rules: {  //数据校验规则
                    name: [
                        {required: true, message: '请输入账号', trigger: 'blur'}
                    ],
                    pwd: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ],
                },
                peopleType:[
                    {title:"老年人信息"},{title:"子女信息"},{title:"其他赡养义务人信息"},{title:"巡访联系人信息"}
                ], // 请求的题
                isEdit:false,
                dialogVisible:false,//对话框
                title:'',
                list:{},
                countlist:[],
                oldColor:false,
                othersColor:false,
                patrolColor:false,
                childrenColor:false,
                oldsColor:[]
            }
        },
        methods: {
            childrenisColor(data,index){
                this.childrenColor=data;
                this.editableTabs[index].childrenCheck=data;
            },
            patrolisColor(data,index){
                this.patrolColor=data;
                this.editableTabs[index].patrolCheck=data;
            },
            otherisColor(data,index){
                this.othersColor=data;
                this.editableTabs[index].othersCheck=data;
            },
            isColor(data,index){
                this.oldColor=data;
                this.editableTabs[index].check=data;

            },
            back(){
                if (this.isEdit) {
                    this.$router.replace("/record/infoList");
                } else {
                    this.$router.replace("/main");
                }
            },
            removeTab(id){
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {

                    this.deleteOldOne(id);
                }).catch(() => {
                });

            },
            async addOlds (value) {
                // this.loading =true;
                this.loading = this.$loading();
                if (this.editableTabs.length === 0){
                    this.fid = ''
                }
                let result = await addOlds({
                    name : value,
                    fid : this.fid,
                });
                if (result.code === 0) {
                    this.oId =  result.data._id;
                    this.fid = result.data.fid;
                    this.OldName = value;
                    this.editableTabs.push({
                        title: value,
                        name: this.oId,
                        check:false,
                        childrenCheck:false,
                        othersCheck:false,
                        patrolCheck:false,
                    });
                    this.radio1='老年人信息';
                    this.a =true;
                    this.b =false;
                    this.c =false;
                    this.d =false;
                    this.editableTabsValue = this.oId;
                    // this.loading =false;
                    this.loading.close();
                }
            },
            async deleteOldOne (id) {
                // this.loading = true;
                this.loading = this.$loading();
                const  result = await deleteOlds({id:id});
                if (result.code === 0){
                    // this.loading = false;
                    this.loading.close();
                    this.$message({message: '恭喜你,该数据删除', type: 'success'});
                    this.editableTabs=this.editableTabs.filter(item=>{
                        return item.name!==id
                    });
                    if(this.editableTabs.length==0)
                    {
                        this.isYes=false;
                        this.back();
                    }
                    if(this.editableTabs[this.editableTabs.length-1].name) {
                        this.editableTabsValue = this.editableTabs[this.editableTabs.length-1].name;
                        this.oId=this.editableTabs[this.editableTabs.length-1].name;
                    }
                }
            },
            //老人的名字
            oName(oName,index){
                //老人id 和 名字
                this.editableTabs.forEach( value => {
                    if (value.name === index){
                        value.title = oName
                    }
                });
            },

            clickTab(value){
                this.oId = value.name;
                this.radio1 = '老年人信息';
                this.a =true;
                this.b =false;
                this.c =false;
                this.d =false;
            },
            handleTabsEdit(targetName, action) {
                if (action === 'add') {
                    this.isYes = true;
                    this.$prompt('请输入老人姓名', this.title, {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputValidator: this.title,
                        inputPattern:/^(?:[\u4e00-\u9fa5·]{2,16})$/,
                        inputErrorMessage:'请输入中文格式'
                    }).then(({value}) => {
                        this.addOlds(value);
                    }).catch(() => {
                    });
                }
            },
            radioChange(value){
                switch (value) {
                    case "老年人信息":
                        this.a =true;
                        this.b =false;
                        this.c =false;
                        this.d =false;
                        break;
                    case "子女信息":
                        this.b =true;
                        this.a =false;
                        this.c =false;
                        this.d =false;
                        break;
                    case "其他赡养义务人信息":
                        this.c =true;
                        this.a =false;
                        this.b =false;
                        this.d =false;
                        break;
                    case "巡访联系人信息":
                        this.d =true;
                        this.a =false;
                        this.c =false;
                        this.b =false;
                        break;
                }
            },
            async getList () {
                if (this.$route.query.id) {
                    this.isEdit = true;
                    // this.loading = true;
                    this.loading = this.$loading();
                    const result = await listByfid({fid: this.$route.query.id});
                    decryptListData_ECB(result.data,["name","phone","idNumber","partnerName","partnerIdNumber","mainLookName","mainLookPhone"])
                    decryptChildJsonData_ECB(result.data);
                    decryptOtherJsonData_ECB(result.data);
                    if (result.code === 0) {
                        let  data=result.data;
                        let fristIndex=data.findIndex((item)=>{
                            return this.$route.query.name==item.name;
                        });
                        let fristArray=data.filter((item)=>{
                            return this.$route.query.name==item.name;
                        });
                        data.splice(fristIndex,1);
                        data.unshift(fristArray[0]);
                        // this.id=result.data[0]._id;
                        this.clickTabIndex=0;
                        result.data.forEach((item) => {
                            this.editableTabs.push(
                                {
                                    title: item.name,
                                    name: item._id,
                                    check:false,
                                    childrenCheck:false,
                                    othersCheck:false,
                                    patrolCheck:false,
                                });
                        });
                        this.editableTabsValue = this.editableTabs[0].name;
                        this.id=this.editableTabs[0].name;
                        this.countlist = data;
                        // console.log(this.countlist,'this.countlist');
                        this.fid = this.countlist[0].fid;
                        this.isYes = true;
                        this.a = true;
                        this.b = false;
                        this.c = false;
                        this.d = false;
                        // this.loading = false;
                        this.loading.close();
                    }
                }else{
                    this.defaultShow();
                }
            },
            defaultShow(){
                this.$prompt('请输入老人姓名', this.title, {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValidator: this.title,
                    inputPattern:/^(?:[\u4e00-\u9fa5·]{2,16})$/,
                    inputErrorMessage:'请输入中文格式'
                }).then(({value}) => {
                    this.addOlds(value);
                }).catch(() => {
                    this.back();
                });
            }
        },
        computed:{
            ...mapState(['deptLoading']),
          radioIndex(){
              return this.editableTabs.findIndex((item)=>{
                  return item.name == this.editableTabsValue;
              });
          }
        },
        mounted() {
            this.getList ();

        }
    }
</script>
<style scoped>
    /*.tabs >>> .el-tabs__content {*/
    /*    position:absolute ;*/
    /*    left: 0;*/

    /*}*/
    .tabs >>>.el-tabs__header{
        margin: 0;
    }
    .tabs >>>.el-tabs__item.is-active {
        font-weight: 800;
        font-size: 16px;
    }
    .hhhhh >>> span.el-radio-button__inner {
        white-space: inherit !important;
        line-height: 15px;
        width: 98%;
        display: block;
        border: 0 !important;
        border-radius: 0;
        color: black;
    }
    .a_v_e >>> .el-radio-button__inner{
        white-space :normal;
    }
    .bage >>> .el-badge__content {
        position: absolute;
        top: 19px;
        right: 22px;
    }
    .bage >>>  .el-radio-button__inner{
        padding-bottom: 20px;
        border-radius: 0;
    }
    .box-card{
        width: 100%;
    }



</style>
