<template>
  <div class="content_right">
    <div class="top">
      <div class="left">
        <div class="xmys">项目预审</div>
      </div>
      <div v-for="item in cardList" class="card">
        <div class="label">
          {{ item.label }}
        </div>
        <div class="value" @click="openDialog(item)">
          {{ item.value }}
        </div>
      </div>
    </div>
    <div class="right">
      <div class="left JSZJ">
        <div class="xmys">建设资金</div>
      </div>
      <gctopEcharts @click-call-back="jdClickCallBack" v-if="echarts" :yDate="echarYData" :data="echartData"></gctopEcharts>
      <el-select v-model="curProjectNo" class="elSelect" placeholder="请选择" size="small" @change="ALLoptChange">
        <el-option label="全部" value="" />
        <el-option v-for="item in ALLoptions" :key="item.projectNo" :label="item.projectName" :value="item.projectNo" />
      </el-select>
    </div>
    <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="gcypgDialogConfig.visible"
      :title="gcypgDialogConfig.title"
      width="1400px"
      :append-to-body="true"
      :destroy-on-close="true"
      :before-close="gcypgDialogConfig.close.bind(gcypgDialogConfig)"
      :draggable="true"
    >
      <dynamicTabs v-if="gcypgDialogConfig.visible" v-model:activeTab="gcypgDialogConfig.activeTab" :tabs="gcypgDialogConfig.tabs" />
    </el-dialog>
  </div>
</template>

<script setup name="content_left">
import { ref, reactive, toRefs, onMounted } from 'vue';
import {
  selectProjectBuildMoneyStatistics,
  getProjectInfoNewProjectList,
  getProjectInfoNewSelectProjectInquiry,
} from '@/api/sponeScreen/gcpjApi';
import dynamicTabs from './gongcheng_components/dynamicTabs';

import gctopEcharts from './gctopEcharts.vue';
const AllData = reactive({});
const curProjectNo = ref('');
const echarts = ref(false);
const cardList = ref([
  { label: '径流总量不达标', value: '0', type: '1' },
  { label: '污染控制率不达标', value: '0', type: '2' },
  { label: '硬质地面不达标', value: '0', type: '3' },
  { label: '分布不合理', value: '0', type: '4' },
  { label: '投资不理性', value: '0', type: '5' },
]);
const ALLoptions = ref([]);
const gcjdDialogConfig = reactive({
  visible: false,
  title: '建设资金统计',
  activeTab: '',
  tabs: [],
  close: function () {
    this.visible = false;
    this.activeTab = '';
  },
});
const gcypgDialogConfig = reactive({
  visible: false,
  title: '预审统计',
  activeTab: '',
  tabs: [],
  close: function () {
    this.visible = false;
    this.activeTab = '';
  },
});

const openDialog = data => {
  gcypgDialogConfig.visible = true;
  const curTab = gcypgDialogConfig.tabs.find(item => item.name === data.type);
  gcypgDialogConfig.activeTab = curTab?.name || '';
};

function ALLoptChange(v) {
  console.log(v);
  selectProjectBuildMoneyStatisticsD();
}
const echartData = ref([]);
const echarYData = ref([]);
const propertyNameTwo = ref([]);

async function selectProjectBuildMoneyStatisticsD() {
  echarts.value = false;
  let { data } = await selectProjectBuildMoneyStatistics({
    projectNo: curProjectNo.value,
  });
  propertyNameTwo.value = data;
  gcjdDialogConfig.tabs = [];
  echartData.value = [];
  echarYData.value = [];
  propertyNameTwo.value.forEach(i => {
    echartData.value.push(i.yearMonth);
    echarYData.value.push(i.totalMoney);
    gcjdDialogConfig.tabs.push({
      title: i.yearMonth + '资金使用',
      name: i.yearMonth,
      componentName: 'jianshezijinTable',
      projectNo: curProjectNo,
    });
  });
  echarts.value = true;
}
function jdClickCallBack(data = {}) {
  console.log(data);
  gcjdDialogConfig.visible = true;
  const curTab = gcjdDialogConfig.tabs.find(item => item.name === data.name);
  gcjdDialogConfig.activeTab = curTab?.name || '';
}

const getProjectInfoNewProjectListFn = async () => {
  const res = await getProjectInfoNewProjectList({
    dataScope: '1',
  });
  if (res?.code !== 200) return;
  ALLoptions.value = res.data;
};

const getProjectInfoNewSelectProjectInquiryFn = async () => {
  const res = await getProjectInfoNewSelectProjectInquiry();
  if (res?.code !== 200) return;
  console.log(res.data);
  cardList.value[0].value = res.data.runoffTotalControlRateCount || '0';
  cardList.value[1].value = res.data.pollutionRemovalStandardsCount || '0';
  cardList.value[2].value = res.data.hardGroundStandardsCount || '0';
  cardList.value[3].value = res.data.verticalRationalityCount || '0';
  cardList.value[4].value = res.data.investmentRationalityRateCount || '0';
  gcypgDialogConfig.tabs = cardList.value.map(item => ({
    title: item.label,
    name: item.type,
    componentName: 'yuPingGuTable',
  }));
};
onMounted(() => {
  selectProjectBuildMoneyStatisticsD();
  getProjectInfoNewProjectListFn();
  getProjectInfoNewSelectProjectInquiryFn();
});
</script>

<style lang="scss" scoped>
.content_right {
  width: 99.97%;
  height: 120px;
  display: flex;
  .top,
  .right {
    flex: 1;
    width: 692px;
    height: 120px;
    background: linear-gradient(0deg, #011431 0%, rgba(1, 20, 49, 0.8) 100%);
    border-radius: 4px;
    display: flex;
    position: relative;
    .left {
      width: 36px;
      height: 120px;
      background: linear-gradient(90deg, #328660 0%, rgba(50, 134, 96, 0.2) 100%);
      border-radius: 4px 0px 0px 4px;
      justify-content: center;
      align-items: center;
      display: flex;
      .xmys {
        font-size: 16px;
        width: 12px;
      }
    }
    .JSZJ {
      background: linear-gradient(90deg, #ffce65 0%, rgba(255, 206, 101, 0.2) 100%);
    }
    .card {
      flex: 1;
      height: 100px;
      background: #041c40;
      margin: 10px 5px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-direction: column;
      .label {
        font-size: 14px;
        color: #eaeaff;
      }
      .value {
        font-size: 24px;
        color: #54a8ff;
        cursor: pointer;
      }
    }
  }
  .right {
    margin-left: 25px;
  }
  :deep(.el-input__inner) {
    // position: absolute;
    // color: #fff;
    // background: transparent;
    // border-color: rgba(8, 106, 255, 1);
  }
  .elSelect {
    position: absolute;
    // left: 120px;
    right: 20px;
    top: 5px;
    width: 200px;
  }
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>