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