<template>
    <div>
        <div class="flex selectbox">
            <div class="flex div goAreahome ai-c jc-c cursor" @click="navsAllClick">市总平台</div>
            <div class="flex flex-1 div ai-c jc-c nowrap cursor" :class="roleInfo.navsIndex==index?'active':''" @click="navsClick(item,index)" v-for="(item, index) in roleInfo.areasArr">{{item.name}}</div>
        </div>
      <div class="flex mt-3 common-box" style="padding: 40px 20px;">
        <div class="swiper-container">
            <el-carousel height="550px">
                <el-carousel-item v-for="item in roleInfo.newsImgData" :key="item">
                    <img class="max-w max-h" :src="item" />
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="flex flex-1 ml-2 column news-container jc-sb">
            <div>
                <div class="flex mb-2 ai-c jc-sb news-title">
                    <span class="ml-1 fw-b fz-20" style="color:#B91410">新闻动态</span>
                    <!-- <span class="cursor fz-16" @click="moreClick('4')">更多》</span> -->
                </div>
                <div v-for="(item,index) in roleInfo.newsData">
                    <div class="flex news-li jc-sb ai-c cursor" @click="newsClick(item)">
                        <div class="flex flex-1 labelsli ai-c jc-c row">
                            <el-icon><CaretRight /></el-icon>
                            <span class="label">{{ item.title }}</span>
                        </div>
                        <div class="time">{{ item.date }}</div>
                    </div>
                </div>
            </div>
        </div>
      </div>
      <div class="mt-3 common-box">
        <div class="flex mb-2 ta-l fz-20 fw-b jc-sb ai-c">
            <span class="commontitle">商品展示</span>
            <spam class="more-common" @click="moreClick('1')">更多+</spam>
        </div>
        <div class="line-common"></div>
        <div class="flex wrap jc-sb">
            <div class="mb-2 goodsli-common cursor" v-for="item in roleInfo.goodsData"  @click="godetails(item, '1')">
                <div class="img">
                    <img class="max-w max-h" v-if="item.src" :src="item.src" />
                    <img class="max-w max-h" v-else src="/public/images/goodsno.png" />
                </div>
                <div class="flex label fz-16 ai-c">{{ item.name }}</div>
            </div>
        </div>
      </div>
      <div class="mt-3 common-box">
        <div class="flex mb-2 ta-l fz-20 fw-b jc-sb ai-c">
            <span class="commontitle">农资服务</span>
            <spam class="more-common" @click="moreClick('2')">更多+</spam>
        </div>
        <div class="line-common"></div>
        <div class="flex wrap jc-sb">
            <div class="flex mb-2 materialli-common cursor" v-for="item in roleInfo.servesData" @click="godetails(item, '2')">
                <div style="width: 150px;">
                    <img class="max-w max-h" v-if="item.src" :src="item.src" />
                    <img class="max-w max-h" v-else src="/public/images/serverno.png" />
                </div>
                <div class="flex flex-1 max-h column jc-sb label">
                    <p class="fz-18 fw-b ta-l">{{ item.name }}</p>
                    <p class="fz-16">{{ item.owerhzs }}</p>
                </div>
                <div class="viewDetail">查看详情<el-icon><Right /></el-icon></div>
            </div>
        </div>
      </div>
      <div class="mt-3 common-box">
        <div class="flex mb-2 ta-l fz-20 fw-b jc-sb ai-c">
            <span class="commontitle">金融信息</span>
            <spam class="more-common" @click="moreClick('4')">更多+</spam>
        </div>
        <div class="line-common"></div>
        <div class="flex mb-3 jrimgbox wrap jc-sb">
            <div class="financialicommon" v-for="item in roleInfo.financialData" @click="godetails(item, '4')">
                <div class="fz-26 fw-b">{{item.name}}</div>
                <div class="mt-2 lilv">贷款利率</div>
                <div class="mt-2 lilvnum">{{ item.nhll }}</div>
                <div class="mt-2">担保方式：<div class="typejr">{{ item.dbfs }}</div></div>
                <div class="mt-2 fz-18">额度：{{ item.rzed }}</div>
            </div>
        </div>
      </div>
      <div class="flex mt-3 common-box map-container column">
        <div class="flex mb-2 ta-l fz-20 fw-b jc-sb ai-c">
            <span class="commontitle">帮扶成果</span>
        </div>
        <div class="line-common"></div>
        <div class="flex map-box ai-c jc-c">
            <div class="mapimg pos-r max-h">
                <!-- <div v-for="item in roleInfo.pointArr1">
                    <div class="point background1 pos-a " :style="{'left': item.left + 'px', 'top': item.top + 'px'}"></div>
                </div>
                <div v-for="item in roleInfo.pointArr2">
                    <div class="point background2 pos-a " :style="{'left': item.left + 'px', 'top': item.top + 'px'}"></div>
                </div>
                <div v-for="item in roleInfo.pointArr3">
                    <div class="point background3 pos-a " :style="{'left': item.left + 'px', 'top': item.top + 'px'}"></div>
                </div>
                <img class="max-w" src="/public/images/mapimg.png" /> -->
                <MapBox></MapBox>
            </div>
            <div class="flex cgbox column ta-l fz-24 fw-b">
                <div class="mt-3 mb-3 ta-l">
                    <span class="spanbf color1">数字乡村公司</span>
                </div>
                <div class="mt-3 mb-3 ta-l">
                    <span class="spanbf cursor color2" @click="bfcgClick()">订单服务型帮扶模式</span>
                </div>
                <div class="mt-3 mb-3 ta-l">
                    <span class="spanbf color3">东蒙全流程服务型帮扶模式</span>
                </div>
            </div>
        </div>
      </div>
    </div>
  </template>
  <script>
  import { defineComponent, reactive, onMounted, toRefs } from "vue";
  import { postMethodCommon, getMethodCommon } from "../../api/common";
  import { BASE_API } from "/public/config/server.js";
  import MapBox from "./widget/map.vue";
  import LinYiDeptJson from "../../../public/config/临沂市行政区.json";
  export default defineComponent({
    name: "Index",
    components: {
        MapBox
    },
    setup(props, context) {
      let data = reactive({
        roleInfo:{
            navsIndex: null,
            areasArr:["市总平台", "兰山区", "罗庄区", "河东区", "郯城县", "兰陵县", "莒南县", "沂水县", "蒙阴县", "平邑县", "费县", "沂南县", "临沭县", "高新区", "沂河新区"],
            goodsData:[],
            servesData:[],
            navsArr: [],
            areasOption: [],
            newsData:[],
            newsImgData:[],
            financialData: [],
            pointArr1:[
                {left: 260 , top: 500}, {left: 239 , top: 520}, {left: 440 , top: 470}, {left: 430 , top: 530}, {left: 460 , top: 510},
            ],
            pointArr2:[
                {left: 260 , top: 460}, {left: 370 , top: 530}, {left: 620 , top: 510}, {left: 280 , top: 703}, {left: 230 , top: 677},
                {left: 240 , top: 650}, {left: 270 , top: 690}, {left: 280 , top: 686}, {left: 310 , top: 680}, {left: 280 , top: 610},
                {left: 303 , top: 660}, {left: 233 , top: 690}, {left: 338 , top: 604}, {left: 358 , top: 633}, {left: 270 , top: 300},
                {left: 410 , top: 400}, {left: 380 , top: 370}, {left: 367 , top: 411}, {left: 347 , top: 352}, {left: 370 , top: 320},
                {left: 340 , top: 310}, {left: 330 , top: 295}, {left: 446 , top: 341}, {left: 437 , top: 232},
            ],
            pointArr3:[
                {left: 224 , top: 510}
            ]
        }   
    });
      onMounted(() => {
        let depeArr = LinYiDeptJson.RECORDS
        data.roleInfo.areasArr = []
        depeArr.forEach(item =>{
            if(item.ParentId == "371300"){
                data.roleInfo.areasArr.push({
                    name: item.Name,
                    id: item.Id
                })
            }
        })
        
        methods.getNewsData()
        methods.getGoodsData()
        methods.getServersData()
        methods.getFiancialData()
        methods.getCodeType()
        methods.getAreaCode()
      });
      let methods = {
        navsClick(item,index){   
            let depeArr = LinYiDeptJson.RECORDS         
            if(!item.pId){
                data.roleInfo.navsIndex = null
                data.roleInfo.areasArr = []
                depeArr.forEach(val =>{
                    if(val.ParentId == item.id){
                        data.roleInfo.areasArr.push({
                            name: val.Name,
                            id: val.Id,
                            pId: val.ParentId
                        })
                    }
                })
            }else{
                data.roleInfo.navsIndex = index
            }
            methods.getGoodsData(item)
            methods.getServersData(item)
        },
        navsAllClick(){
            data.roleInfo.navsIndex = null
            let depeArr = LinYiDeptJson.RECORDS         
            data.roleInfo.areasArr = []
            depeArr.forEach(item =>{
                if(item.ParentId == "371300"){
                    data.roleInfo.areasArr.push({
                        name: item.Name,
                        id: item.Id
                    })
                }
            })
            methods.getGoodsData()
            methods.getServersData()
        },
        // 获取字典
        getCodeType(){
            let param = {
            page: 1,
            limit: 100,
                code: "PRODUCT_TYPE"
            }
            data.roleInfo.navsArr = []
            getMethodCommon("/SysDataItemDetail/Load", param).then(res =>{
            let rel = res.data.result
            rel.forEach(item =>{
                data.roleInfo.navsArr.push({
                name: item.itemName,
                value: item.itemValue
                })
            })
            })
        },
        //获取地区
        getAreaCode(){
            let param = {
            page: 1,
            limit: 100,
            code: "AREA_CODE"
            }
            data.roleInfo.areasOption = []
            getMethodCommon("/SysDataItemDetail/Load", param).then(res =>{
            let rel = res.data.result
            rel.forEach(item =>{
                data.roleInfo.areasOption.push({
                label: item.itemName,
                value: item.itemValue
                })
            })
            })
        },
        //新闻动态
        getNewsData(){
            let param = {
                id: window.newsId || "6de0e31c-2fda-4c3c-8580-68997ef6d6df",
                mid: window.newsMid || "35861221-3686-47be-9703-a55c986a14f6",
                paginationInputDto: {
                    page: 1,
                    rows: 6
                },
            }
            data.roleInfo.newsData = []
            data.roleInfo.newsImgData = []
            postMethodCommon("/FormScheme/GetFormDataPage?id=" + param.id + "&mid="+param.mid, param).then(res =>{
                let rel = res.data.result.items
                rel.forEach(item =>{
                    if(item.uploadImg){
                        item.src = BASE_API + item.uploadImg.split(',')[0] || null
                        data.roleInfo.newsImgData.push(item.src)
                    }
                    if(item.time){
                        item.date = item.time.split(' ')[0]
                    }else{
                        item.date = ''
                    }
                })
                rel.sort(function(a, b) {
                    return a.sort - b.sort;
                });
                data.roleInfo.newsData = rel
            })
        },
        //产品
        getGoodsData(val){
            let serach = {}
            if(val){
                if(val.pId){
                    serach.town = val.name
                }else{
                    serach.county = val.name
                }              
            }
            let param = {
                id: window.goodsId || "64bf1a9b-528f-4337-91e0-81a95f6524f0",
                mid: window.goodsMid || "074d0217-2c28-4c32-be54-24dbe010b9b6",
                paginationInputDto: {
                    page: 1,
                    rows: 8
                },
                queryJson: JSON.stringify(serach)
            }
            data.roleInfo.goodsData = []
            postMethodCommon("/FormScheme/GetFormDataPage?id=" + param.id + "&mid="+param.mid, param).then(res =>{
                let rel = res.data.result.items
                rel.forEach(item =>{
                    if(item._image_upload_6dac9b2e6816498bafdafdc2afc0dc53){
                      data.roleInfo.goodsData.push({
                          name: item._input_80b4fa2f7f7546fab7ef300e2efeaa7a,
                          src: BASE_API + item._image_upload_6dac9b2e6816498bafdafdc2afc0dc53.split(',')[0] || null,
                          time: item._modify_time_9fbd11b18c9d41629a55f8ff37b5109d,
                          label: item._input_83f2bb43d50d4f8facb3c8d046acfcf9,
                          details: item._input_text_area_be9296152c444608ae874a808c242d63,
                          county: item.county,
                          town: item.town,
                          type: item._select_8f4db93a317145c788c978c1365523c5,
                          greatName: item.greatName,
                          value: item.value
                      })
                  }else{
                      data.roleInfo.goodsData.push({
                          name: item._input_80b4fa2f7f7546fab7ef300e2efeaa7a,
                          src: null,
                          time: item._modify_time_9fbd11b18c9d41629a55f8ff37b5109d,
                          label: item._input_83f2bb43d50d4f8facb3c8d046acfcf9,
                          details: item._input_text_area_be9296152c444608ae874a808c242d63,
                          county: item.county,
                          town: item.town,
                          type: item._select_8f4db93a317145c788c978c1365523c5,
                          greatName: item.greatName,
                          value: item.value
                      })
                  }  
                })
            })
        },
        //供需
        getServersData(val){
            let serach = {}
            if(val){
                if(val.pId){
                    serach.town = val.name
                }else{
                    serach.county = val.name
                }     
            }
            let param = {
                id: window.supplyId || "c3f59b58-168d-4663-9dbc-3b6616e46f08",
                mid: window.supplyMid || "196514f9-ba78-47f3-b4ce-31e4ed04f488",
                paginationInputDto: {
                    page: 1,
                    rows: 6
                },
                queryJson: JSON.stringify(serach)
            }
            data.roleInfo.servesData = []
            postMethodCommon("/FormScheme/GetFormDataPage?id=" + param.id + "&mid="+param.mid, param).then(res =>{
                let rel = res.data.result.items
                rel.forEach(item =>{
                    if (item._image_upload_6ef4229fad0f4d4ba56561d26d71c357) {
                        data.roleInfo.servesData.push({
                            name: item._input_3892f6e0bb6146aaad369b9e7fb74c25,
                            src:
                            BASE_API +
                                item._image_upload_6ef4229fad0f4d4ba56561d26d71c357.split(
                                ","
                                )[0] || null,
                            time: item._modify_time_68d02ed08d66492ba116fb8e682f29cd,
                            owerhzs: item._input_30c6c60ea8c040efa8b16190a89c83db,
                            details: item._input_text_area_41db31bf108a4cca909e498a59bfb26d,
                            county: item.county,
                            town: item.town,
                            type: item._select_58acbd1176e64cc1829fc15beae082e5,
                            type1: item._radio_group_d4dc9d5ca439493db18d34a4c95d24dd,
                        });
                    } else {
                        data.roleInfo.servesData.push({
                            name: item._input_3892f6e0bb6146aaad369b9e7fb74c25,
                            src: null,
                            time: item._modify_time_68d02ed08d66492ba116fb8e682f29cd,
                            owerhzs: item._input_30c6c60ea8c040efa8b16190a89c83db,
                            details: item._input_text_area_41db31bf108a4cca909e498a59bfb26d,
                            county: item.county,
                            town: item.town,
                            type: item._select_58acbd1176e64cc1829fc15beae082e5,
                            type1: item._radio_group_d4dc9d5ca439493db18d34a4c95d24dd,
                        });
                    }
                })
            })
        },
        //金融
        getFiancialData(){
            let param = {
                id: window.fiancialId || "0cb3dd4d-d5fa-4479-9acc-05fdb734a801",
                mid: window.fiancialMid || "45d5a21d-daa4-4e71-80cb-1476ae1a80a3",
                paginationInputDto: {
                    page: 1,
                    rows: 4
                },
            }
            data.roleInfo.financialData = []
            postMethodCommon("/FormScheme/GetFormDataPage?id=" + param.id + "&mid="+param.mid, param).then(res =>{
                let rel = res.data.result.items
                if(rel){
                    data.roleInfo.financialData = rel
                }
                
            })
        },
        moreClick(e){
            context.emit('moreclick', e)
        },
        newsClick(e){
            context.emit('newsClick', e)
        },
        bfcgClick(){
            context.emit('bfcgClick')
        },
        godetails(e,i){
            let emitData = e
            if(i==1){
                data.roleInfo.navsArr.forEach(item =>{
                    if(item.value == e.type){
                        emitData.typeName = item.name
                    }
                })
            }
            if( i==2 ){
                let navsType = [
                    { name: "物资供需", value: "1" },
                    { name: "服务供需", value: "2" },
                ]
                let navsType1 = [
                    { name: "提供", value: "1" },
                    { name: "需求", value: "2" },
                ]
                navsType1.forEach(item =>{
                    if(item.value == e.type1){
                        emitData.Type1Name = item.name
                    }
                })
                navsType.forEach(item =>{
                    if(item.value == e.type){
                        emitData.TypeName = item.name
                    }
                })           
            }
            
            let obj = {
                index: i,
                record: emitData
            }
            context.emit('godetails', obj)
        }
      };
      return {
        ...methods,
        ...toRefs(data),
      };
    },
  });
  </script>
  
  <style scoped>
    .common-box{
        width: 1240px;
        background: #FFFFFF;
        box-shadow: 0px 2px 10px 2px rgba(0,0,0,0.06);
        border-radius: 6px;
        padding: 20px;
    } 
    .swiper-container{
        width: 60%;
        height: 550px;
        border: 1px solid #DEE2E7;
        padding: 5px;
    }
    .news-container{
        width: 40%;
    }
    .news-title{
        font-size: 18px;
        height: 42px;
        background: url("/public/images/newstitle.png");
        background-size: 100% 100%;
    }
    .news-li{
        height: 70px;
        border-bottom: 1px dotted  #577086;
    }
    .news-li .time{
        font-weight: 500;
        font-size: 14px;
        width: 160px;
        text-align: right;
    }
    .news-li .labelsli{
        font-weight: 550;
        font-size: 20px;
        line-height: 30px;
    }
    .news-li .labelsli .label{
        width: 365px;
        display: inline-block;
        font-weight: 550;
        line-height: 30px;
        font-size: 20px;
        text-align: left;
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        -moz-line-clamp: 2;
        -moz-box-orient: vertical;
        margin-left: 4px;
    }
    .selectbox{
        width: 1260px;
        height: 56px;
        padding: 0 10px;
        background: #FFFFFF;
        box-shadow: 0px 2px 10px 2px rgba(0,0,0,0.06);
        border-radius: 6px;
    }
    .selectbox .active{
        color: #E5150C;
    }
    .selectbox .div:hover{
        color: #E5150C;
    }
    .goodsli-common{
        width: 23.5%;
        height: 211px;
        border-radius: 10px;
        overflow: hidden;
    }
    .goodsli-common .img{
        height: 169px;
    }
    .goodsli-common .label{
        display: block;
        width: calc(100% - 15px);
        height: 40px;
        line-height: 40px;
        padding-left: 15px;
        background: #FDFDFD;
        text-align: left;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        border-bottom: 1px solid #E17474;
    }
    .materialli-common{
        width: 32%;
        height: 150px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #DEE2E7;
        overflow: hidden;
    }
    .materialli-common .img{
        width: 150px;
        height: 150px;
    }
    .materialli-common .label{
        align-items: flex-start;
        padding: 25px 20px;
        height: calc(100% - 50px);
    }
    .materialli-common .viewDetail{
        width: 45px;
        background: #D1241E;
        font-size: 15px;
        color: #fff;
        line-height: 45px;
        writing-mode: vertical-rl;
        letter-spacing: 8px;
    }

    .more-common{
        display: inline-block;
        width: 92px;
        height: 42px;
        background: #FFFFFF;
        box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.06);
        border-radius: 21px;
        border: 1px solid #979797;
        cursor: pointer;
        color: #1C1C1C;
        font-size: 16px;
        text-align: center;
        line-height: 42px;
    }
    .financeli-common{
        width: 599px;
        height: 92px;
        border-radius: 8px;
        border: 1px solid #DEE2E7;
        padding: 13px 55px 13px 25px;
    }
    .financeli-common .span{
        width: 10px;
        height: 10px;
        border-radius: 10px;
        background: #0E5DF9;
        margin-right: 10px;
        margin-top: 6px;
    }
    .financeli-common .p{
        width: 575px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .map-container{
        background: #FCFBFB;
        box-shadow: 0px 2px 10px 2px rgba(0,0,0,0.06);
        border-radius: 6px;
    }
    .map-box{
        height: 1012px;
        background: #fff;
        position: relative;
    }
    .point{
        width: 10px;
        height: 10px;
        border-radius: 10px;
    }
    .mapimg{
        width: 60%;
    }
    .cgbox{
        width: 35%;
        margin-left: 5%;
        color: #1692E4;
    }
    .cgbox .spanbf{
        border: 1px solid #6BD1E5;
        background: #F8FAFA;
        padding: 5px 15px;
        border-radius: 4px;
    }
    .jrimgbox{
        width: 100%;
        position: relative;
    }
    .financialicommon{
        width: 242px;
        height: 300px;
        background: url("/public/images/moneybg.png");
        background-size: 100% 100%;
        box-shadow: 0px 2px 10px 2px rgba(0,0,0,0.06);
        margin: 20px 0 30px;
        padding: 30px 20px;
        text-align: left;
    }
    .financialicommon .lilv{
        color: #546e7a;
        font-size: 18px;
    }
    .financialicommon .lilvnum{
        color: #fd6040;
        font-size: 24px;
    }
    .financialicommon .typejr{
        color: #90a4ae;
        background: #f2f3f9;
        padding: 5px 10px;
        display: inline-block
    }
    .goAreahome{
        width: 115px;
        font-size: 18px;
    }
    .color1{
        color: #F805F1;
    }
    .background1{
        background: #F805F1;
    }
    .color2{
        color: #fd6040;
    }
    .background2{
        background: #fd6040;
    }
    .color3{
        color: #F5CE06;
    }
    .background3{
        background: #F5CE06;
    }
    .commontitle{
        width: 165px;
        height: 58px;
        background: url("/public/images/commontitle.png");
        background-size: 100% 100%;
        font-weight: 500;
        font-size: 26px;
        color: #FFFFFF;
        line-height: 48px;
        text-align: center;
        margin-left: -28px;
    }
    .line-common{
        height: 2px;
        background: linear-gradient( 270deg, #EAE6E6 0%, #F6F4F4 100%);
        margin-bottom: 25px;
    }
  </style>