<template>
  <div class="content_left">
    <div class="top">
      <div class="top_1 flex_around">
        <div class="year">年度统计</div>
        <div class="year_c" :class="{ year_c_hover: activeClass == i }" v-for="i in yearList" @click="yearClick(i)">
          {{ i }}
        </div>
      </div>
      <div class="project">
        <div class="card flex_center" v-for="i in projectList">
          <img :src="i.img" alt="" />
          <div class="cont">
            <div class="unm">
              {{ i.num }}
              <span>{{ i.unit }}</span>
            </div>
            <span class="label"> {{ i.label }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="center">
      <div class="top_1 flex">
        <div class="year">工程建设类型统计</div>
        <div class='icon flex'>
          <div @click="isTble = 1">
            <img :src="tb_xz_con" v-if='isTble ==1' />
          <img :src="tb_wxz_icon" v-else />
        </div>
        <div @click="isTble = 2">
          <img :src="bg_xz_icon" v-if='isTble ==2' />
          <img :src="bg_wxz_icon" v-else />
        </div>
        </div>
      </div>
      <gcleftEcharts class="chart" v-if="isTble == 1" @click-call-back="lxClickCallBack" :myData='propertyName'  :classifyAreaProportion='classifyAreaProportion' :classifyInvestProportion='classifyInvestProportion'></gcleftEcharts>
      <gcplLeftTable class="table" :columnList="columnList" :tableData="tableData" @click-call-back="lxClickCallBack" v-else></gcplLeftTable>
      <div class="unit_cont" v-if="isTble == 1">单位%</div>
    </div>
    <div class="foot">
      <div class="top_1 flex">
        <div class="year" style='margin-left:30px'>工程建设进度</div>
        <div class='icon flex' style='margin-left:160px'>
          <div @click="TwoisTble = 1">
            <img :src="tb_xz_con" v-if='TwoisTble ==1' />
          <img :src="tb_wxz_icon" v-else />
        </div>
        <div @click="TwoisTble = 2">
          <img :src="bg_xz_icon" v-if='TwoisTble ==2' />
          <img :src="bg_wxz_icon" v-else />
        </div>
      </div>
      </div>
      <gcfootEcharts v-if="TwoisTble == 1" @click-call-back="jdClickCallBack" :myData='propertyNameTwo'></gcfootEcharts>
      <gcplLeftTableTwo :tableData="tableDataTwo" @click-call-back="jdClickCallBack" v-else></gcplLeftTableTwo>
    </div>
    <!-- 工程建设类型弹窗 -->
    <el-dialog
      class="pmpSitNewDialog"
      v-model="gclxDialogConfig.visible"
      :title="gclxDialogConfig.title"
      width="1400px"
      :append-to-body="true"
      :destroy-on-close="true"
      :before-close="gclxDialogConfig.close.bind(gclxDialogConfig)"
      :draggable="true"
    >
      <dynamicTabs
        v-if="gclxDialogConfig.visible"
        v-model:activeTab="gclxDialogConfig.activeTab"
        :tabs="gclxDialogConfig.tabs"
      />
    </el-dialog>

    <!-- 工程建设进度弹窗 -->
    <el-dialog
      class="pmpSitNewDialog"
      v-model="gcjdDialogConfig.visible"
      :title="gcjdDialogConfig.title"
      width="1400px"
      :append-to-body="true"
      :destroy-on-close="true"
      :before-close="gcjdDialogConfig.close.bind(gcjdDialogConfig)"
      :draggable="true"
    >
      <dynamicTabs
        v-if="gcjdDialogConfig.visible"
        v-model:activeTab="gcjdDialogConfig.activeTab"
        :tabs="gcjdDialogConfig.tabs"
      />
    </el-dialog>

     <!-- 综合弹窗 -->
     <el-dialog
      class="pmpSitNewDialog"
      v-model="dialogConfig.visible"
      :title="dialogConfig.title"
      width="1400px"
      :append-to-body="true"
      :destroy-on-close="true"
      :draggable="true"
    >
      <DialogTabs
        :dataID="dialogConfig.getSiteId"
        :SiteNo="dialogConfig.SiteNo"
        :comIDs="dialogConfig.comIDs"
        :customComponents="dialogConfig.customData"
        :RefName="dialogConfig.RefName"
      ></DialogTabs>
    </el-dialog>
  </div>
</template>

<script setup name="content_left">
import { ref, reactive, toRefs, onMounted,provide } from 'vue';
import {
  getStationList,
} from "@/api/dataAnalysis/syntherticData";
import bus from "@/bus";
import {projectInfoNew,selectSpongeOneMapByProjectType ,selectSpongeOneMapByBuildStatus,projectAnnualStatisticsYear,selectAllProjectYearByStartTimeAndEndTime} from '@/api/gcpjApi'
import gcleftEcharts from './gcleftEcharts';
import gcfootEcharts from './gcfootEcharts';
import gcplLeftTable from './gcplLeftTable';
import gcplLeftTableTwo from './gcplLeftTableTwo';
import prjectadd from '@/assets/images/gcpjimg/prjectadd.png';
import prjectjg from '@/assets/images/gcpjimg/prjectjg.png';
import bg_wxz_icon from '@/assets/images/gcpjimg/bg_wxz_icon.png';
import bg_xz_icon from '@/assets/images/gcpjimg/bg_xz_icon.png';
import tb_wxz_icon from '@/assets/images/gcpjimg/tb_wxz_icon.png';
import tb_xz_con from '@/assets/images/gcpjimg/tb_xz_con.png';
import projectCont from '@/assets/images/gcpjimg/projectCont.png';
import money from '@/assets/images/gcpjimg/money.png';
import dynamicTabs from './gongcheng_components/dynamicTabs'
import DialogTabs from '../DialogTabs/dialogTabs.vue'
const AllData = reactive({});
const yearList = ref([{ year: 2021 }, { year: 2022 }, { year: 2023 }]);
const projectList = ref([
  { label: '新增项目', img: prjectadd,  unit: '个',prop:'addProjectCount' },
  { label: '竣工项目', img: prjectjg,  unit: '个' ,prop:'endProjectCount'},
  { label: '项目总额', img: projectCont, unit: '万元' ,prop:'projectMoney'},
  { label: '资金使用比例', img: money,unit: '%',prop:'proportionFunds' },
]);
const activeClass = ref('2023');
const isTble = ref(0);
const TwoisTble = ref(0);
const tableData = ref([]);
const tableDataTwo = ref([
{
    date: "2016-05-03",
    name: "未立项",
    age: 20,
    province: "12",
    city: "23",
  },
]);
const dialogConfig = reactive({
  visible: false,
  getSiteId: "",
  SiteNo: "",
  data: {},
  comIDs: [
    'xxxx',
    'jdfx',
    'zjfx',
    'jsdb',
    'gckh',
    'zlfengxian',
    'aqfengxian',
    'xmxc',
    // 'xmzl'
  ],
  customData: [],
  RefName: "",
  title: "详情",
})
const columnList = [
  {
    prop: 'propertyName',
    label: '名称',
  },
  {
    prop: 'count',
    label: '数量',
  },
  {
    prop: 'classifyInvest',
    label: '投资额(万元)',
  },
  {
    prop: 'classifyProjectArea',
    label: '面积(㎡)',
  },
];
const gclxDialogConfig = reactive({
  visible: false,
  title: '工程建设类型信息',
  activeTab: '',
  tabs: [],
  close: function() {
    this.visible = false
    this.activeTab = ''
  }
})
const gcjdDialogConfig = reactive({
  visible: false,
  title: '工程建设进度信息',
  activeTab: '',
  tabs: [],
  close: function() {
    this.visible = false
    this.activeTab = ''
  }
})
provide('getProjectInfo', () => {
  return dialogConfig.data
})
function yearClick(i) {
  activeClass.value = i;
  projectAnnualStatisticsYearD(i)
}
function lxClickCallBack(data = {}) {
  console.log(data
  )
  gclxDialogConfig.visible = true
  const curTab = gclxDialogConfig.tabs.find(item => item.title === data.name)
  gclxDialogConfig.activeTab = curTab?.name || ''
}

function jdClickCallBack(data = {}) {
  console.log(data)
  gcjdDialogConfig.visible = true
  const curTab = gcjdDialogConfig.tabs.find(item => item.title === data.name)
  gcjdDialogConfig.activeTab = curTab?.name || ''
}
//工程建设类型统计
const propertyName=ref([])
const classifyAreaProportion=ref([])
const classifyInvestProportion=ref([])
async function selectSpongeOneMapByProjectTypeD() {
  let {data}=await selectSpongeOneMapByProjectType()
  tableData.value = data || []
  data.forEach((i)=>{
    propertyName.value.push(i.propertyName)
    classifyAreaProportion.value.push(i.classifyAreaProportion)
    classifyInvestProportion.value.push(i.classifyInvestProportion)
    gclxDialogConfig.tabs.push({
    title:i.propertyName,
    name:i.propertyCode,
    componentName: 'jianSheLeiXingTable'
  })
  })
   isTble.value=1
}
// 工程建设进度
const propertyNameTwo=ref([])
async function selectSpongeOneMapByBuildStatusD() {
  let {data}=await selectSpongeOneMapByBuildStatus()
 propertyNameTwo.value=data
 tableDataTwo.value = data || []
 propertyNameTwo.value.forEach((i)=>{
  i.name=i.propertyName
  i.legendname=i.propertyName
  i.value=i.count
  gcjdDialogConfig.tabs.push({
    title:i.name,
    name:i.propertyCode,
    componentName: 'jianSheJinDuTable'
  })
  })
   TwoisTble.value=1
}

async function projectAnnualStatisticsYearD(P) {
  let {data}=await projectAnnualStatisticsYear(P)
  let array=Object.keys(data)
  projectList.value.forEach((i)=>{
    array.forEach((k)=>{
      if(k==i.prop)  i.num=data[k]
    })
  })
}
async function selectAllProjectYearByStartTimeAndEndTimeD() {
  let {data}=await selectAllProjectYearByStartTimeAndEndTime()
  yearList.value=data
  projectAnnualStatisticsYearD(data[0])
}
//获取站点数据
const getStationData = async (stCode) => {
  let params = {
    // monitorTargetType: props.monitorTargetType,
    dataScope: stCode,
  };

  let res = await projectInfoNew(params);
  // let res = await getStationList(params);
  console.dir(res,123456);
  bus.emit("setProjects", res);
};
function  mapClick(v){
  console.log(v,777);
  dialogConfig.visible = true
  dialogConfig.data = v
}
onMounted(() => {
  selectSpongeOneMapByProjectTypeD()
  selectSpongeOneMapByBuildStatusD()
  selectAllProjectYearByStartTimeAndEndTimeD()
  getStationData(""); //获取列表
  bus.on("mapClick", mapClick)

});
</script>

<style lang="scss" scoped>
.content_left {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .top,
  .center,
  .foot {
    flex: 1;
    background: linear-gradient(0deg, #011431 0%, rgba(1, 20, 49, 0.8) 100%);
  }
  .top_1 {
    width: 100%;
    height: 38px;
    background: url('../../../assets/images/gcpjimg/xbt_img.png');
    background-size: 100% 100%;
  }
  .year {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
  }
  .year_c {
    font-size: 16px;
    color: #a4bfd9;
    cursor: pointer;
  }
  .year_c_hover {
    width: 60px;
    height: 26px;
    background: #0b3675;
    border-radius: 13px;
    text-align: center;
    line-height: 26px;
  }
  .project {
    display: flex;
    flex-wrap: wrap;
    .card {
      margin: 10px;
      flex: 0 0 45%;
      height: 105px;
      background: linear-gradient(90deg, #0c2f66 0%, rgba(4, 30, 71, 0.8) 100%);
      opacity: 0.8;
      .cont {
        margin: 0 10px;
        width:42.2%;
        .unm {
          font-size: 20px;
          color: #eaeaff;
          font-weight: bold;
          span {
            font-size: 14px;
            color: #47a2ff;
          }
          .label {
            font-size: 14px;
          }
        }
      }
    }
  }
  .center {
    position: relative;
    .year {
      margin-left: 30px;
    }
    .unit_cont {
      position: absolute;
      right: 2px;
      bottom: 25px;
      color: #6e8098;
      font-size: 12px;
    }

  }
  .icon{
      margin:5px 0 0 130px ;
      padding:23px;
      img{
        margin-left:30px;
      }

    }
}
.flex {
  display: flex;
  align-items: center;
}
.flex_around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.flex_center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>