<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: 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: 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>