<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">工程建设进度</div>
        <div class="icon flex">
          <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 bus from '@/bus';
import {
  projectInfoNew,
  selectSpongeOneMapByProjectType,
  selectSpongeOneMapByBuildStatus,
  projectAnnualStatisticsYear,
  selectAllProjectYearByStartTimeAndEndTime,
} from '@/api/sponeScreen/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 = {}) {
  gclxDialogConfig.visible = true;
  const curTab = gclxDialogConfig.tabs.find(item => item.title === data.name);
  gclxDialogConfig.activeTab = curTab?.name || '';
  // console.log(curTab,8888);
  // bus.emit(
  //   "mapClick",
  //   {  gisType: "project",id:curTab.id },
  //   1
  // ); //给弹窗
}

function jdClickCallBack(data = {}) {
  console.log(data, 333);
  gcjdDialogConfig.visible = true;
  const curTab = gcjdDialogConfig.tabs.find(item => item.title === data.name);
  gcjdDialogConfig.activeTab = curTab?.name || '';
  //  bus.emit(
  //   "mapClick",
  //   {  gisType: "project",id:curTab.id },
  //   1
  // ); //给弹窗
}
//工程建设类型统计
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',
      id: i.propertyCode,
    });
  });
  isTble.value = 1;
}
// 工程建设进度
const propertyNameTwo = ref([]);
async function selectSpongeOneMapByBuildStatusD() {
  let { data } = await selectSpongeOneMapByBuildStatus();
  // console.log(data,'111datadata');
  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',
      id: i.propertyCode,
    });
  });
  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);
  bus.emit('setProjects', res);
  bus.emit('getTuLiData');
};
// 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: 0;
  .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: 50px;
    }
    .unit_cont {
      position: absolute;
      right: 2px;
      bottom: 25px;
      color: #6e8098;
      font-size: 12px;
    }
  }
  .icon {
    padding: 23px;
    img {
      margin-left: 30px;
    }
  }
  .foot {
    .year {
      margin-left: 50px;
    }
  }
}
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex_around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.flex_center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>