<script setup>
import { ref, reactive, nextTick } from "vue";

import { onLoad, onShow, onTabItemTap } from "@dcloudio/uni-app";

import { getOverdueNum } from "@/api/work/overdue.js";

import {
  getannouncementList,
  getUnwriteReportList,
  getHomeStatsABC,
  getHomeStatsLeader,
  getBanner,
} from "@/api/home.js";

import {
  getJSDDlist,
  getZJLYlist,
  getHYFLlist,
} from "@/api/work/projectInfo.js";

import { getMessageNum } from "@/api/work/message.js";

import store from "@/store";

import { checkRoleById } from "@/utils/permission.js";
import iconEnterpriseInfo from "@/static/func/enterpriseInfos.svg";
import tzfxIcon from "@/static/images/homeIcon/tzfx-icon.svg";
import blxmIcon from "@/static/images/homeIcon/blxm-icon.svg";
import xcyxIcon from "@/static/images/homeIcon/xcyx-icon.svg";
import xmtzIcon from "@/static/images/homeIcon/xmtz-icon.svg";
import { setAmt,getInt,getFloat } from "@/utils/common.js";
import cuOverdue from "./components/cu-overdue.vue";
import dayjs from "dayjs";

// 项目信息
let projectYear = ref(dayjs().year());

// 选择年
let yearShow = ref(false);
let defaultIndex = ref([0]);
let yearColumns = ref([
  [
    "2000",
    "2001",
    "2002",
    "2003",
    "2004",
    "2005",
    "2006",
    "2007",
    "2008",
    "2009",
    "2010",
    "2011",
    "2012",
    "2013",
    "2014",
    "2015",
    "2016",
    "2017",
    "2018",
    "2019",
    "2020",
    "2021",
    "2022",
    "2023",
    "2024",
    "2025",
    "2026",
    "2027",
    "2028",
    "2029",
    "2030",
    "2031",
    "2032",
    "2033",
  ],
]);
const yearShowChoose = function () {
  yearShow.value = true;
};
const yearClose = function (e) {
  if (e) {
    projectYear.value = e.value[0];
    // 获取最新数据
    getProjectInfo();
  }

  yearShow.value = false;
};

// 选择分类
let projectKind = ref(null);
let projectKindId = null;
let kindShow = ref(false);
let kindColumns = ref([]);
const kindShowChoose = function () {
  kindShow.value = true;
};
const kindClose = function (e) {
  if (e) {
    projectKind.value = e.value[0];
    projectKindId = hyflFull.find(
      (item) => item.value === projectKind.value
    ).key;
    // 获取最新数据
    getProjectInfo();
  }

  kindShow.value = false;
};
let hyflFull = [];
const getHYFL = function () {
  getHYFLlist().then((res) => {
    hyflFull = res.data.list;
    hyflFull.push({
      key: null,
      value: "所有分类",
    });
    kindColumns.value = [res.data.list.map((item) => item.value)];
    kindColumns.value[0].unshift("所有分类");
  });
};

// 选择地点
let projectArea = ref(null);
let projectAreaId = null;
let areaShow = ref(false);
let areaColumns = ref([]);
const areaShowChoose = function () {
  areaShow.value = true;
};
const areaClose = function (e) {
  if (e) {
    projectArea.value = e.value[0];
    projectAreaId = jsddFull.find(
      (item) => item.value === projectArea.value
    ).key;
    // 获取最新数据
    getProjectInfo();
  }

  areaShow.value = false;
};
let jsddFull = [];
const getJSDD = function () {
  getJSDDlist().then((res) => {
    jsddFull = res.data.list;
    jsddFull.push({
      key: 0,
      value: "所有地区",
    });

    areaColumns.value = [res.data.list.map((item) => item.value)];
    areaColumns.value[0].unshift("所有地区");
  });
};

// 资金来源
let projectAmt = ref(null);
let projectAmtId = null;
let zjlyShow = ref(false);
let zjlyColumns = ref([]);
const zjlyShowChoose = () => {
  zjlyShow.value = true;
};
const zjlyClose = (e) => {
  if (e) {
    projectAmt.value = e.value[0];
    projectAmtId = zjlyFull.find((item) => item.value === projectAmt.value).key;
    // 获取最新数据
    getProjectInfo();
  }
  zjlyShow.value = false;
};
let zjlyFull = [];
const getZJLY = () => {
  getZJLYlist().then((res) => {
    zjlyFull = res.data.list;
    zjlyFull.unshift({
      key: null,
      value: "所有来源",
    });

    zjlyColumns.value = [res.data.list.map((item) => item.value)];
  });
};

function goToPage(url, permissionCode, type) {
  // if (permissionCode) {
  // 	let havePermission = checkRoleById([permissionCode])
  // 	if (!havePermission) return
  // }
  uni.$u.route({
    url: url,
    params: {
      type: type || null,
    },
  });
}

//轮播图
let bannerList = ref([]);

async function getBannerList() {
  getBanner().then((res) => {
    bannerList.value = res.data.pictureList;
  });
}

function bannerClick(e) {
  let result = {};
  for (let i = 0; i < bannerList.value.length; i++) {
    if (i == e) {
      result = bannerList.value[i];
    }
  }

  nextTick(() => {
    // uni.navigateTo({
    // 	url: `/pages/policy/detail/index?title=${result.title}&id=${result.id}`
    // })
    uni.$u.route({
      url: "/pages/policy/detail/index",
      params: {
        title: result.title,
        id: result.id,
      },
    });
  });
}

// 功能列表
let functionList = ref([
  {
    name: "分管项目",
    url: "/pages/projectBL/index",
    icon: blxmIcon,
    type: "jbxx",
    permissionCode: "711",
  },
  {
    name: "统计分析",
    url: "/pages/countAnalysis/newHeadAnalysis/index",
    icon: tzfxIcon,
    type: "jbxx",
    permissionCode: "711",
  },
  {
    name: "三库管理",
    url: "/pages/projectInfo/index",
    icon: xmtzIcon,
    type: "all",
    permissionCode: "711",
  },
  {
    name: "智联工地",
    url: "/pages/videoManage/list/index",
    icon: xcyxIcon,
    type: "jbxx",
    permissionCode: "711",
  },
]);

function newProjectClick(e, num) {
  if (num != 0) {
    let throughObj = {
      year: projectYear.value,
      indusKind: projectKindId,
      subjectId: projectAreaId,
      zjly: projectAmtId,
      queryTimeType: "4",
      queryType: 1,
    };
    let obj = {
		cbxm:{
			name: "储备项目",
			queryType: 5,
			isCb:true,
			isZj: "1",
		},
		axm:{
			name: "A类项目",
			queryType: 5,
			isZj: "1",
			isCb:true,
			abc:"A",
		},
		bxm:{
			name: "B类项目",
			queryType: 5,
			isZj: "1",
			isCb:true,
			abc:"B",
		},
		cxm:{
			name: "C类项目",
			queryType: 5,
			isZj: "1",
			isCb:true,
			abc:"C",
		},
      xmzs: {
        name: "项目总数",
			isZj: "1",
      },
      wkg: {
        name: "未开工",
			isZj: "1",
        otherStatus: "1,6",
      },
      ykg: {
        name: "已开工",
			isZj: "1",
        otherStatus: "7",
      },
      ywg: {
        name: "已竣工",
			isZj: "1",
        otherStatus: "A",
      },
      ztz: {
        name: "总投资",
      },
      ndjhtz: {
        name: "年度计划投资",
      },
      ndsjtz: {
        name: "年度实际投资",
      },
	  mjhtz: {
	    name: "投资",
	  },
	  mdttz: {
	    name: "投资",
	  },
	  mtzp: {
	    name: "投资",
	  },
    };

    throughObj = {
      ...throughObj,
      ...obj[e],
    };
    let url = "/pages/projectInfo/index?type=home&";

    for (let i in throughObj) {
      let item = null;
      item = (throughObj[i] ?? "") === "" ? `${i}=&` : `${i}=${throughObj[i]}&`;
      url = url += item;
    }

    url = url.substr(0, url.length - 1);

    uni.navigateTo({
      url,
    });
  } else {
    uni.showToast({
      icon: "none",
      title: "无该项数据",
    });
  }
}

// function amtgoto(e) {
// 	let params = {
// 		indusKind: projectKindId,
// 		subjectId: projectAreaId,
// 		zjly: projectAmtId,
// 		isCurrMonth: null,
// 		year: null,
// 		key: null
// 	}
// 	if (e.key == 'amtJh') {
// 		params.year = projectYear.value
// 		params.key = 'year'
// 		params.name = '年度计划投资'
// 		uni.$u.route({
// 			url: '/pages/countAnalysis/through/index',
// 			params: params
// 		})

// 	} else if (e.key == 'amtSj') {
// 		params.year = projectYear.value
// 		params.key = 'ndjh'
// 		params.name = '年度实际投资'
// 		uni.$u.route({
// 			url: '/pages/countAnalysis/through/index',
// 			params: params
// 		})
// 	}
// }

//获取项目数据
let WKG = ref("");
let YKG = ref("");
let YWG = ref("");
let amtRate = ref("0");
let amtTotal = ref("0");
let endRate = ref("");
let openRate = ref("");
let totalNum = ref("");
let yearAmt = ref("");
let yearAmtSj = ref("");
let abc = ref({
  num_s_total: 0,
  num_s_1: 0,
  num_s_3: 0,
  num_s_4: 0,
  num_s_bl: 0,
  num_5:0,
});
const defaultMonthInfo = () => ({
  rate: 0,
  planAmt: 0,
  amt: 0,
  amtLast: 0,
});
let monthInfo = ref(defaultMonthInfo());
function getProjectInfo() {
  console.log({
    year: projectYear.value,
    indusKind: projectKindId,
    buildAddre: projectAreaId,
    zjly: projectAmtId,
  });
  getHomeStatsLeader({
    year: projectYear.value,
    month:
      new Date().getFullYear() +
      "" +
      (new Date().getMonth() + 1).toString().padStart(2, "0"),
    //month:"201001",
    indusKind: projectKindId,
    buildAddre: projectAreaId,
    zjly: projectAmtId,
  }).then((res) => {
    // WKG.value = res.data.WKG
    WKG.value =
      res.data.num_total - res.data.num_4 - res.data.num_5 - res.data.num_7;
    YKG.value = res.data.num_4;
    YWG.value = res.data.num_5;
    amtRate.value = res.data.amtInfo.outyear_zb;
    amtTotal.value = res.data.amtInfo.outyearamt_2;
    endRate.value = res.data.num_year_wgl_last2;
    openRate.value = res.data.num_year_kgl;
    totalNum.value = res.data.num_total;
    yearAmt.value = res.data.amtInfo.outyearamt_total;
    yearAmtSj.value = res.data.amtInfo.outyearamt_1;
    monthInfo.value = res.data.monthInfo || defaultMonthInfo();
    console.log(res, "数据");
  });
}

function getProjectABC() {
  console.log({
    year: projectYear.value,
    indusKind: projectKindId,
    buildAddre: projectAreaId,
    zjly: projectAmtId,
  });
  getHomeStatsABC({
    year: projectYear.value,
    isZj: 1,
  }).then((res) => {
    abc.value = res.data;
    console.log(abc.value, "数据");
  });
}
const kindType = ref(1);
onLoad(() => {
  let kind = uni.getStorageSync("userKind");
  kindType.value = kind;
  let list = [
    {
      index: 0,
      pagePath: "pages/home/headHome",
      iconPath: "../../static/images/tabbar/home.png",
      selectedIconPath: "../../static/images/tabbar/home_.png",
      visible: false,
      text: "首页",
    },
    {
      index: 1,
      pagePath: "pages/home/oversawHome",
      iconPath: "../../static/images/tabbar/home.png",
      selectedIconPath: "../../static/images/tabbar/home_.png",
      visible: false,
      text: "首页",
    },
    {
      index: 2,
      pagePath: "pages/home/companyHome",
      iconPath: "../../static/images/tabbar/home.png",
      selectedIconPath: "../../static/images/tabbar/home_.png",
      visible: false,
      text: "首页",
    },
    {
      index: 3,
      pagePath: "pages/message/index",
      iconPath: "../../static/images/tabbar/message.png",
      selectedIconPath: "../../static/images/tabbar/message_.png",
      text: "消息",
    },
    {
      index: 4,
      pagePath: "pages/mine/index",
      iconPath: "../../static/images/tabbar/mine.png",
      selectedIconPath: "../../static/images/tabbar/mine_.png",
      text: "我的",
    },
  ];
  //kind 1 监管单位， 2公司端 ， 3 领导端
  if (kind == "2") {
    list[0].visible = false;
    list[1].visible = false;
    list[2].visible = true;
    console.log(list, "监管端");
    for (let i = 0; i < list.length; i++) {
      uni.setTabBarItem(list[i]);
    }
    uni.switchTab({
      url: "/pages/home/companyHome",
    });
  } else if (kind == "1") {
    list[0].visible = false;
    list[1].visible = true;
    list[2].visible = false;
    for (let i = 0; i < list.length; i++) {
      uni.setTabBarItem(list[i]);
    }
    uni.switchTab({
      url: "/pages/home/oversawHome",
    });
  } else if (kind == "3") {
    list[0].visible = true;
    list[1].visible = false;
    list[2].visible = false;
    for (let i = 0; i < list.length; i++) {
      uni.setTabBarItem(list[i]);
    }
  }

  if (kind == "3") {
    let now = new Date();
    projectYear.value = now.getFullYear();
    defaultIndex.value = [projectYear.value - 2000];
    // // judgeFuncList(); //判断权限
    // getAnnounceMent(); //获取公告
    getHYFL(); //获取行业分类
    getJSDD(); //获取建设地点
    getZJLY(); // 获取资金来源
    getProjectInfo(); //获取项目数据
    getProjectABC(); //获取项目ABC类
    // getOverdue(); //获取逾期数量
    // // getUnwirteList(); //获取未填写周报月报信息
    getBannerList(); //获取轮播图数据
    // getMessageCount(); //获取未读消息数量
  }
});
</script>

<template>
  <view class="container">
    <view class="top-back-pie"> </view>
    <view class="content-layer">
      <view class="top-layer">
        <view class="project-title"> 哈密市项目管理智慧平台 </view>
        <view class="search-layer">
          <view class="search-input">
            <view class="search-icon"></view>
            <input
              @click="goToPage('/pages/search/index')"
              placeholder="项目、领导电话..."
              placeholder-style="color: #343434;font-size:28rpx;"
            />
          </view>
          <view class="search-line"> </view>
          <view class="search-focus" @click="goToPage('/pages/focus/index')">
            <view class="search-focus-icon"></view>
            <text class="text">关注</text>
          </view>
        </view>
      </view>
      <view class="banner-box">
        <u-swiper
          :list="bannerList"
          indicator
          indicatorMode="line"
          keyName="coverImg"
          circular
          radius="20rpx"
          height="254rpx"
          @click="bannerClick"
        ></u-swiper>
      </view>


      <view class="button-layer">
        <view
          class="btn-item"
          v-for="(item, index) in functionList"
          :key="index"
          @click="goToPage(item.url, item.permissionCode, item.type)"
        >
          <image :src="item.icon" class="item-icon" mode=""></image>
          <view class="item-text">
            {{ item.name }}
          </view>
        </view>
      </view>


      <view class="stats-layer" style="margin-top: 20rpx">
        <view class="stats-list">
          <view class="stats-item" @click="newProjectClick('cbxm', abc.num_s_total)">
            <view class="item-num">
              <text class="number">{{ abc.num_s_total }}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name"> 储备项目 </view>
          </view>
          <view class="line"></view>
          <view class="stats-item" @click="newProjectClick('axm', abc.num_s_1)">
            <view class="item-num">
              <text class="number">{{ abc.num_s_1 }}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name"> A类项目 </view>
          </view>
          <view class="line"></view>
          <view class="stats-item" @click="newProjectClick('bxm', abc.num_s_3)">
            <view class="item-num">
              <text class="number">{{ abc.num_s_3 }}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name"> B类项目 </view>
          </view>
          <view class="line"> </view>
          <view class="stats-item" @click="newProjectClick('cxm', abc.num_s_4)">
            <view class="item-num">
              <text class="number">{{ abc.num_s_4 }}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name"> C类项目 </view>
          </view>
        </view>
        <view class="stats-layer-bar">
          <view class="bar-layer">
            <view class="line-progress">
              <u-line-progress
                :percentage="abc.num_s_bl"
                inactiveColor="#E9F2FF"
                activeColor="#6EAAF7"
                :showText="false"
                height="16rpx"
              ></u-line-progress>
            </view>
          </view>
 <!--         <view class="v-info">
            <view class="item-text" @click="newProjectClick('ywg', abc.num_5)">
              <view class="text-name">已完成的项目</view>
              <view class="text-rote"> {{ abc.num_5 }}个 </view>
            </view>
            <view class="item-text">
              <view class="text-name">转化率</view>
              <view class="text-rote"> {{ abc.num_s_bl }}% </view>
            </view>
          </view> -->
        </view>
      </view>





      <view class="sub-title"> 项目建设总体情况 </view>
      <view class="project-info-select">
        <view class="choose-year" @click="yearShowChoose()">
          {{ projectYear ?? "年度" }}
          <image src="../../static/home-choose-iocn.svg" mode=""></image>
        </view>

        <view class="choose-year" @click="kindShowChoose()">
          {{ projectKind ?? "行业分类" }}
          <image src="../../static/home-choose-iocn.svg" mode=""></image>
        </view>

        <view class="choose-year" @click="areaShowChoose()">
          {{ projectArea ?? "建设地点" }}
          <image src="../../static/home-choose-iocn.svg" mode=""></image>
        </view>

        <view class="choose-year" @click="zjlyShowChoose()">
          <view class="choose-year-text">{{ projectAmt ?? "资金来源" }}</view>
        </view>
      </view>
      <view class="stats-layer">
    <!--    <view class="bar-layer">
          <view class="bar-item">
            <view class="item-text">
              <view class="text-name"> 总建设开工率 </view>
              <view class="text-rote"> {{ openRate }}% </view>
            </view>
            <view class="line-progress">
              <u-line-progress
                :percentage="openRate"
                inactiveColor="#E9F2FF"
                activeColor="#6EAAF7"
                :showText="false"
                height="16rpx"
              ></u-line-progress>
            </view>
          </view>
          <view class="bar-item">
            <view class="item-text">
              <view class="text-name"> 总建设竣工率 </view>
              <view class="text-rote"> {{ endRate }}% </view>
            </view>
            <view class="line-progress">
              <u-line-progress
                :percentage="endRate"
                inactiveColor="#E9F2FF"
                activeColor="#6EAAF7"
                :showText="false"
                height="16rpx"
              ></u-line-progress>
            </view>
          </view>
        </view> -->
        <view class="stats-list">
          <view class="stats-item" @click="newProjectClick('xmzs', totalNum)">
            <view class="item-num">
              <text class="number">{{ totalNum }}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name"> 项目总数 </view>
          </view>
          <view class="line"> </view>
          <view class="stats-item" @click="newProjectClick('wkg', WKG)">
            <view class="item-num">
              <text class="number">{{ WKG }}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name"> 未开工 </view>
          </view>
          <view class="line"> </view>
          <view class="stats-item" @click="newProjectClick('ykg', YKG)">
            <view class="item-num">
              <text class="number">{{ YKG }}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name"> 已开工 </view>
          </view>
          <view class="line"> </view>
          <view class="stats-item" @click="newProjectClick('ywg', YWG)">
            <view class="item-num">
              <text class="number">{{ YWG }}</text>
              <text class="unit">个</text>
            </view>
            <view class="item-name"> 已竣工 </view>
          </view>
        </view>
        <view class="space-bg-yellow">
          <view class="bar-layer">
            <view class="bar-item">
              <view class="item-text">
                <view class="text-name"> 上月投资完成率 </view>
                <view class="text-rote">{{ monthInfo.rate }}% </view>
              </view>
              <view class="line-progress">
                <u-line-progress
                  :percentage="monthInfo.rate"
                  inactiveColor="#E9F2FF"
                  activeColor="#6EAAF7"
                  :showText="false"
                  height="16rpx"
                ></u-line-progress>
              </view>
            </view>
          </view>
          <view class="stats-list">
            <view
              class="stats-item"
              @click="newProjectClick('mjhtz', monthInfo.planAmt)"
            >
              <view class="item-num">
            <text class="number">{{
              getInt(monthInfo.planAmt)
            }}</text>
            <text class="unit"
              >{{
              getFloat(monthInfo.amtLast)
            }}亿元</text
            >
              </view>
              <view class="item-name"> 年初计划投资 </view>
            </view>
            <view class="line"> </view>
            <view
              class="stats-item"
              @click="newProjectClick('mdttz', monthInfo.amt)"
            >
              <view class="item-num">
            <text class="number">{{
              getInt(monthInfo.amt)
            }}</text>
            <text class="unit"
              >{{
              getFloat(monthInfo.amt)
            }}亿元</text
            >
              </view>

              <view class="item-name"> 本月动态计划投资 </view>
            </view>
            <view class="line"> </view>
            <view
              class="stats-item"
              @click="newProjectClick('mtzp', monthInfo.amtLast)"
            >
              <view class="item-num">
                <text class="number">{{
				  getInt(monthInfo.amtLast)
                }}</text>
                <text class="unit"
                  >{{
				  getFloat(monthInfo.amtLast)
                }}亿元</text
                >
              </view>
              <view class="item-name"> 上月完成投资 </view>
            </view>
          </view>
        </view>
        <view class="bar-layer">
          <view class="bar-item">
            <view class="item-text">
              <view class="text-name"> 年度投资完成率 </view>
              <view class="text-rote"> {{ amtRate }}% </view>
            </view>
            <view class="line-progress">
              <u-line-progress
                :percentage="amtRate"
                inactiveColor="#E9F2FF"
                activeColor="#6EAAF7"
                :showText="false"
                height="16rpx"
              ></u-line-progress>
            </view>
          </view>
        </view>
        <view class="stats-list">
          <view class="stats-item" @click="newProjectClick('ztz', amtTotal)">
            <view class="item-num">
              <text class="number">{{ setAmt(amtTotal * 10000)[0] }} </text>
              <text class="unit"
                >{{ setAmt(amtTotal * 10000)[1]
                }}{{ setAmt(amtTotal * 10000)[2] }}</text
              >
            </view>
            <view class="item-name"> 总投资 </view>
          </view>
          <view class="line"> </view>
          <view class="stats-item" @click="newProjectClick('ndjhtz', yearAmt)">
            <view class="item-num">
              <text class="number">{{ setAmt(yearAmt * 10000)[0] }}</text>
              <text class="unit"
                >{{ setAmt(yearAmt * 10000)[1]
                }}{{ setAmt(yearAmt * 10000)[2] }}</text
              >
            </view>

            <view class="item-name"> 年度计划投资 </view>
          </view>
          <view class="line"> </view>
          <view
            class="stats-item"
            @click="newProjectClick('ndsjtz', yearAmtSj)"
          >
            <view class="item-num">
              <text class="number">{{ setAmt(yearAmtSj * 10000)[0] }}</text>
              <text class="unit"
                >{{ setAmt(yearAmtSj * 10000)[1]
                }}{{ setAmt(yearAmtSj * 10000)[2] }}</text
              >
            </view>
            <view class="item-name"> 年度实际投资 </view>
          </view>
        </view>
      </view>
      <cu-overdue v-if="kindType==3"></cu-overdue>
    </view>
    <!-- 年度选择 -->
    <u-picker
      :show="yearShow"
      :defaultIndex="defaultIndex"
      :columns="yearColumns"
      @confirm="yearClose"
      @cancel="yearClose"
      @close="yearClose"
      closeOnClickOverlay
    ></u-picker>

    <!-- 行业选择 -->
    <u-picker
      :show="kindShow"
      :columns="kindColumns"
      @confirm="kindClose"
      @cancel="kindClose"
      @close="kindClose"
      closeOnClickOverlay
    ></u-picker>

    <!-- 地点选择 -->
    <u-picker
      :show="areaShow"
      :columns="areaColumns"
      @confirm="areaClose"
      @cancel="areaClose"
      @close="areaClose"
      closeOnClickOverlay
    ></u-picker>

    <!-- 资金来源 -->
    <u-picker
      :show="zjlyShow"
      :columns="zjlyColumns"
      @confirm="zjlyClose"
      @cancel="zjlyClose"
      @close="zjlyClose"
      closeOnClickOverlay
    ></u-picker>
  </view>
</template>

<style lang="scss">
.v-info {
  width: 100%;
  padding: 0 25px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

</style>