<template>
    <div class="home_wrapper">
        <div class="header_main">
            统计填报
            <div class="return_btn" @click="onClickLeft"></div>
        </div>
        <div class="template_main">
            <div class="title_wrap">
                <div class="icon"></div>
                <div class="title">模板</div>
            </div>
            <div class="search_wrap" @click="templateClick">
                <div class="title">{{templateValue}}</div>
                <div class="xs_icon"></div>
            </div>
        </div>
        <div class="choose_main">
            <div class="search_wrap">
                <div class="title">申报类型</div>
                <div class="content" @click="typeDeclarationClick">
                    <div class="text">{{declarationTypeValue}}</div>
                    <div class="xs_icon"></div>
                </div>
            </div>
            <div class="search_wrap">
                <div class="title">负责人</div>
                <div class="content">
                    <div class="text">
                       <input v-model="from.principalName" type="text" class="fzr" placeholder="请输入">
                    </div>
                    <div class="xs_icon"></div>
                </div>
            </div>
        </div>


        <!--div class="table_main">
            <div class="head_wrap">
               <div class="project_name">项目名称</div>
               <div class="unit_count">计数单位</div>
               <div class="numerical_value">数值</div>
            </div>
            <div class="thead_wrap">
                <div class="basic_info">
                    <div class="basic_title">
                        <div class="s_title">合作社发展基本情况</div>
                    </div>
                    <div class="type_wrap">
                        <div class="industry_list">

                            <div class="subdivision_list">
                                <div class="subdivision_title">行业分布</div>
                                <div class="subdivision_main">
                                    <div class="planting_flex">
                                        <div class="subclass">大豆种植</div>
                                        <div class="unit_munt">个</div>
                                        <div class="number_value">
                                            <van-stepper v-model="stepperValue" />
                                        </div>
                                    </div>
                                    <div class="planting_flex">
                                        <div class="subclass">大豆种植</div>
                                        <div class="unit_munt">个</div>
                                        <div class="number_value">
                                            <van-stepper v-model="stepperValue" />
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="industry_list">
                            <div class="type_project">各类合作社总数各类合</div>
                            <div class="unit_munt">个</div>
                            <div class="number_value">
                                <van-stepper v-model="stepperValue" />
                            </div>
                        </div>
                        <div class="industry_list">
                            <div class="type_project">牧业</div>
                            <div class="unit_munt">个</div>
                            <div class="number_value">
                                <van-stepper v-model="stepperValue" />
                            </div>
                        </div>

                    </div>
                </div>
                <div class="basic_info">
                    <div class="basic_title">
                        <div class="s_title">合作社发展基本情况</div>
                    </div>
                    <div class="type_wrap">
                        <div class="industry_list">

                            <div class="subdivision_list">
                                <div class="subdivision_title">行业分布</div>
                                <div class="subdivision_main">
                                    <div class="planting_flex">
                                        <div class="subclass">大豆种植</div>
                                        <div class="unit_munt">个</div>
                                        <div class="number_value">
                                            <van-stepper v-model="stepperValue" />
                                        </div>
                                    </div>
                                    <div class="planting_flex">
                                        <div class="subclass">大豆种植</div>
                                        <div class="unit_munt">个</div>
                                        <div class="number_value">
                                            <van-stepper v-model="stepperValue" />
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="industry_list">
                            <div class="type_project">各类合作社总数各类合</div>
                            <div class="unit_munt">个</div>
                            <div class="number_value">
                                <van-stepper v-model="stepperValue" />
                            </div>
                        </div>
                        <div class="industry_list">
                            <div class="type_project">牧业</div>
                            <div class="unit_munt">个</div>
                            <div class="number_value">
                                <van-stepper v-model="stepperValue" />
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div-->

        <div class="table_main">
            <div class="head_wrap">
               <div class="project_name">项目名称</div>
               <div class="unit_count">单位</div>
               <div class="numerical_value">数值</div>
            </div>
            <div class="thead_wrap">
                <!---1-->
                <div class="basic_info" v-for="(item,index) in tEntityStatisticsNumberList" :key="index" >
                    <div class="basic_title">
                        <div class="s_title">{{item.projectName}}</div>
                    </div>
                    <div class="type_wrap">
                        <!---2--->
                        <div class="industry_list"  v-for="(data,idx) in item.children" :key="idx">
                            <div v-if="data.children && data.children!=null" class="industry_block">
                                <div class="subdivision_list">
                                    <div class="subdivision_title">{{data.projectName}}</div>
                                    <div class="subdivision_main">
                                        <!---3--->
                                        <div class="planting_flex" v-for="(val,num) in data.children" :key="num">
                                            <div class="subclass">{{val.projectName}}</div>
                                            <div class="unit_munt">{{val.measuringUnit}}</div>
                                            <div class="number_value">
                                                <!-- <van-stepper v-model="val.currentYearNumber"   min="0"/>
                                                <input type=""> -->
                                                <van-field v-model="val.currentYearNumber" type="number" />
                                            </div>
                                        </div>


                                    </div>
                                </div>
                            </div>
                            <div v-else  class="industry_block">
                                <div class="type_project">{{data.projectName}}</div>
                                <div class="unit_munt">{{data.measuringUnit}}</div>
                                <div class="number_value">
                                    <!-- <van-stepper v-model="data.currentYearNumber" min="0" />  -->
                                    <van-field v-model="data.currentYearNumber" type="number" />
                                </div>
                            </div>


                        </div>


                    </div>
                </div>

            </div>
        </div>

        <div class="submit_btn">
            <van-button type="info" @click="submitFrom" size="normal">保存填报信息</van-button>
        </div>

        <van-action-sheet v-model="popObj.typeDeclarationVisibile" duration="0.2" >
            <van-picker
                title="申报类型"
                :columns="declarationTypeIdOptions"
                show-toolbar
                @confirm="declarationTypeIdConfirm"
                @cancel="declarationTypeIdCancel"
            >
                <template #option="option">
                <div style="display: flex; flex-direction: column; align-items: center;">
                    <div>{{ option.dictLabel }}</div>
                    <!-- <div>年龄：{{ option.age }}</div> -->
                </div>
                </template>
            </van-picker>
        </van-action-sheet>

        <van-action-sheet v-model="popObj.templateVisbile" duration="0.2" >
            <van-cascader
                v-model="cascaderValue"
                title="请选择所在地区"
                :options="statisticsProject"
                @close="popObj.templateVisbile = false"
                @finish="projectOnFinish"
                @change="projectOnChange"
                :field-names="fieldNames"
            />
        </van-action-sheet>
    </div>
</template>

<script>
import {entityStatisticsTemplate ,entityStatisticsSave ,entityStatisticsDetail} from "@/api/sunVillage_info/fixedAssets";
import {getInfo} from "../../api/login";
export default {
  name: "statisticalReportEdit",
  data() {
    return {
        from:{
            applyTime:null,
            applyUserId:null,
            applyUserName:null,
            auditStatus:null,
            createBy:null,
            createTime:null,
            deptId:null,
            id:null,
            instanceId:null,
            processKey:null,
            remark:null,
            statisticsTypeId:null,
            templateId:null, //模板id
            updateBy:null,
            updateTime:null,
            templateName:null,  //模板名称
            declarationTypeId:null, //申报类型 1
            principalName:null, //单位负责人  1
            preparer:null, //填表人  1
            preparerDeptName:'', //填报单位 1
            time:this.format(new Date(),'yyyy-MM-dd'), //填报时间
            tEntityStatisticsNumberList:[]

        },
        //当前选中模板列表
        tEntityStatisticsNumberList:[],
        //选择模板标题
        templateValue :'请选择模板',

        popObj:{
            typeDeclarationVisibile:false,
            templateVisbile:false
        },
        // 申报类型ID字典
        declarationTypeIdOptions: [],
        declarationTypeValue:'请选择',
        loading:true,
        //模板list
        //申报大项--列表
        statisticsProject:[],
        cascaderValue:null,
        fieldNames:{
            text: 'dictLabel',
            value: 'dictValue',
            children: 'children',
        }



    };
  },
  created() {
    this.getDicts("declaration_type_id").then(response => {
        let content = response.data
        this.declarationTypeIdOptions = content;

        if(content.length>0){
            this.from.declarationTypeId = content[0].dictValue;
            this.declarationTypeValue = content[0].dictLabel;
        }


    });
  },
  mounted(){
    getInfo().then(response => {
        this.from.preparer = response.user.nickName
        this.from.preparerDeptName = response.user.dept.deptName
    });
    let query = this.$route.query;
    if(query&& query.id){
        this.loading =true;
        //編輯
        let oId = this.$route.query.id;
        entityStatisticsDetail(oId).then((res)=>{

            if(res.code == 200){
                let content = res.data;
                // let obj = {
                //     applyTime:content.content,
                //     applyTime:content.applyTime,
                //     applyUserId:content.pplyUserId,
                //     applyUserName:content.applyUserName,
                //     auditStatus:content.auditStatus,
                //     createBy:content.createBy,
                //     createTime:content.createTime,
                //     deptId:content.deptId,
                //     id:content.id,
                //     instanceId:content.instanceId,
                //     processKey:content.processKey,
                //     remark:content.remark,
                //     statisticsTypeId:content.statisticsTypeId,
                //     templateId:content.templateId, //模板id
                //     updateBy:content.updateBy,
                //     updateTime:content.updateTime,
                //     templateName:content.templateName,  //模板名称
                //     declarationTypeId:content.declarationTypeId, //申报类型 1
                //     principalName:content.principalName, //单位负责人  1
                //     preparer:content.preparer, //填表人  1
                //     preparerDeptName:content.preparerDeptName, //填报单位 1
                //     time:content.time,
                //     tEntityStatisticsNumberList:content.tEntityStatisticsNumberList
                // }

                //当前选择模板
                this.tEntityStatisticsNumberList = content.tEntityStatisticsNumberList;
                //申报类型
                let declarationTypeObj = this.declarationTypeIdOptions.find((account) => {
                    //model就是上面的数据源
                    return account.dictValue == content.declarationTypeId; //筛选出匹配数据
                });
                //请选择模板
                this.templateValue = content.templateName

                // this.loading =false;
                this.declarationTypeValue = declarationTypeObj.dictLabel;
                this.from = res.data;
            }


        })
    }

    this.getDicts("statistics_template_type").then(res => {
        if(res.code == 200){
            let content = res.data;
            content.forEach((v)=>{
                v.children = [];
            })
            this.statisticsProject = content;
        }
    });

  },
  methods: {
    projectOnFinish(data){

        let content = data.selectedOptions[data.selectedOptions.length -1]
        console.log(content)

        this.tEntityStatisticsNumberList = content.templateForm.tEntityStatisticsNumberList;
        this.templateValue = content.dictLabel;
        // // this.from.templateName = data.label;
        this.from = content.templateForm;
        this.popObj.templateVisbile = false;
    },
    projectOnChange(value){
        if(value.tabIndex == 0){
           //查看
            entityStatisticsTemplate({statisticsTypeId:value.selectedOptions[0].dictValue}).then((response)=>{
                if(response.code == 200){
                    let content = response.data;

                    this.statisticsProject[Number(value.value)-1].children = content.map(item => {
                        const recursionFileMap = obj => {
                            obj.forEach((v,i)=>{

                                if(v.currentYearNumber == null){
                                    v.currentYearNumber = 0;
                                }
                                if (v.children && v.children != null) {
                                    recursionFileMap(v.children)
                                }
                            })
                        }
                        recursionFileMap(item.tEntityStatisticsNumberList)

                        return {
                            dictLabel:item.templateName,
                            dictValue: item.templateId,
                            templateForm:item,
                            // templateForm:{
                            //     templateId:item.id,
                            //     templateName:item.templateName,
                            //     declarationTypeId:item.declarationTypeId,
                            //     tEntityStatisticsNumberList:item.tEntityStatisticsNumberList
                            // }
                        };
                    });
                    this.loading =false;

                }
            })
        }
    },
    submitFrom(){
        this.from.tEntityStatisticsNumberList = this.tEntityStatisticsNumberList;
        this.from.tentityStatisticsNumberList = this.tEntityStatisticsNumberList;
        if(this.from.templateName == null){
            this.$notify({
                message:'请选择模板!',
                type: 'danger'
            });

            return false;
        }else if(this.from.declarationTypeId == null){
            this.$notify({
                message:'请选择申报类型!',
                type: 'danger'
            });
            return false;
        }else if(this.from.principalName == null){
            this.$notify({
                message:'请填写负责人!',
                type: 'danger'
            });
            return false;
        }
        entityStatisticsSave(this.from).then((res)=>{
            if(res.code == 200){
                this.$notify({
                    message:'保存成功!',
                    type: 'success'
                });
                setTimeout(()=>{
                    this.$router.push('/sunVillage_info/statistical_report')
                },1500)
            }

        })
    },
    typeDeclarationClick(){
        this.popObj.typeDeclarationVisibile = true;
    },
    declarationTypeIdConfirm(value,index){
        this.from.declarationTypeId = value.dictValue;
        this.declarationTypeValue = value.dictLabel
        this.popObj.typeDeclarationVisibile = false;
    },
    declarationTypeIdCancel(){
        this.popObj.typeDeclarationVisibile = false;
    },
    templateClick(){
        this.popObj.templateVisbile = true;
    }

  },
}
</script>

<style scoped lang="scss">
.home_wrapper{
   background: #e9e9e9;
   min-height: 100vh;
   width: 100vw;
   .header_main {
       height: 116px;
       background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;
       background-size: 100% 100%;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       font-size: 36px;
       line-height: 116px;
       text-align: center;
       color: #fff;
       position: relative;

       .return_btn {
           width: 24px;
           height: 43.2px;
           background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
           background-size: 20px 36px;
           position: absolute;
           left: 38px;
           top: 36px;
       }


   }
   .template_main{
        padding:30px 24px 0;
        display: flex;
        margin-bottom: 20px;
        align-items: center;
        .title_wrap{
            display: flex;
            align-items: center;
            padding-right: 15px;
            .icon{
                width: 50px;
                height: 50px;
                border-radius: 50%;
                box-shadow: 4px 0px 7px rgba(63, 68, 75, 0.1);
                background:#2facfe url('../../assets/images/sunVillage_info/list_icon_11.png') center center no-repeat;
                background-size: 27px 27px;
                margin-right: 12px;
            }
            .title{
                font-size: 30px;
                color: #2facfe;
            }
        }
        .search_wrap{
            flex: 1;
            height: 64px;
            border-radius: 8px;
            box-shadow: 4px 4px 7px rgba(63, 68, 75, 0.1);
            background: #fff;
            display: flex;
            padding:0 26px 0 22px;
            align-items: center;
            justify-content: space-between;


            .title{
                width: 465px;
                height: 64px;
                line-height: 64px;
                font-size: 30px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #2b2b2b;
            }
            .xs_icon{
                width: 11px;
                height: 23px;
                background: url('../../assets/images/sunVillage_info/list_icon_12.png') center center no-repeat;
                background-size: 100% 100%;
            }


        }
   }
   .choose_main{
        padding:0 24px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 26px;
        .search_wrap{
            height: 64px;
            width: 48.5%;
            border-radius: 8px;
            box-shadow: 4px 4px 7px rgba(63, 68, 75, 0.1);
            background: #fff;
            display: flex;
            .title{
                width: 145px;
                font-size: 30px;
                color: #fff;
                background: #2facfe;
                border-top-left-radius: 8px;
                border-bottom-left-radius: 8px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .content{
                flex: 1;
                padding:0 20px 0 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .text{
                    width: 150px;
                    // line-height: 64px;
                    font-size: 30px;
                    white-space: nowrap;
                    text-align: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    .fzr{
                        width: 150px;
                    }
                }
                .xs_icon{
                    width: 11px;
                    height: 23px;
                    background: url('../../assets/images/sunVillage_info/list_icon_12.png') center center no-repeat;
                    background-size: 100% 100%;
                }
            }
        }

   }
   .table_main{
        padding:0px  24px 0 24px;
        div{
            box-sizing: border-box;
        }
        .head_wrap{
            height: 69px;
            display: flex;
            font-size: 30px;
            background: #fff;
            color: #2facfe;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
            .project_name,
            .unit_count,
            .numerical_value{
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .project_name{
                width: 359px;
                background: #2facfe;
                color: #fff;
                border-radius: 8px;
            }
            .unit_count{
                width: 140px;
                border-right: 1px solid #0469ab;
            }
            .numerical_value{
                width: 204px;
                border-right: 1px solid #0469ab;
            }
        }

        .thead_wrap{
            .basic_info{
                display: flex;
                .basic_title{
                   width: 63px;
                   display: flex;
                   align-items: center;
                   justify-content: center;
                   background: #6ac1fa;
                   border-right: 1px solid #0469ab;
                   border-bottom: 1px solid #0469ab;
                   .s_title{
                        width: 28px;
                        font-size: 28px;
                        padding:14px 0;
                   }
                }

                .type_wrap{
                    flex: 1;
                    display: flex;
                    flex-wrap: wrap;
                    .industry_list{
                        width: 100%;
                        display: flex;
                        border-bottom: 1px solid #0469ab;
                        min-height: 75px;
                        .industry_block{
                            flex: 1;
                            display: flex;
                        }
                        .type_project,
                        .unit_munt,
                        .number_value{
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }

                        .type_project{
                            width: 296px;
                            font-size: 28px;
                            background: #aad8f6;
                            padding:0 14px;
                            font-size: 28px;
                            border-right: 1px solid #0469ab;
                        }
                        .unit_munt{
                            width: 140px;
                            font-size: 28px;
                            border-right: 1px solid #0469ab;
                        }
                        .number_value{
                            width: 204px;
                            border-right: 1px solid #0469ab;
                           .van-cell {
                                padding:20px 16px;
                                background: none;

                           }



                        }


                        .subdivision_list{
                            flex: 1;
                            display: flex;
                            .subdivision_title{
                                width: 76px;
                                background: #aad8f6;
                                font-size: 28px;
                                display: flex;
                                align-items: center;
                                padding:0 8px;
                                justify-content: center;
                                border-right: 1px solid #0469ab;
                            }
                            .subdivision_main{
                                flex: 1;
                                display: flex;
                                flex-wrap: wrap;
                                .planting_flex{
                                    width: 100%;
                                    display: flex;
                                    min-height: 75px;
                                    border-bottom: 1px solid #0469ab;
                                    &:last-child{
                                        border-bottom: 0;
                                    }
                                    .subclass{
                                        width: 220px;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        font-size: 27px;
                                        padding:0 10px;
                                        background: #d7e8f3;
                                        border-right: 1px solid #0469ab;
                                    }
                                }
                            }
                        }









                        // <div class="subdivision_list">
                        //         <div class="subdivision_title">行业分布</div>
                        //         <div class="subdivision_main">
                        //             <!---3--->
                        //             <div class="planting_flex">
                        //                 大豆种植
                        //             </div>
                        //             <!---3--->
                        //             <div class="planting_flex">
                        //                 大豆种植
                        //             </div>

                        //         </div>


                        //     </div>









                    }

                }
            }
        }

   }
   .submit_btn{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
   }

   /deep/ {
        .van-stepper__minus,
        .van-stepper__plus{
            background: #2facfe;
            color: #fff;
        }
        .van-stepper__minus--disabled{
            color: #e9e9e9;
        }
        .van-stepper__input{
            margin:0;
            background: #e0f1fc;
            font-size: 30px;
            color: #2facfe;
        }
        .van-field__control{
            text-align: center;
        }
    }

}


</style>
