<script setup lang="ts">
import VChart from 'vue-echarts'
import { useChart1, useChart22, useChart21, useChart3, useChart23 } from './HomeData'
import AppHeadUserInfo from '@/components/AppHeadUserInfo.vue'
import { NSelect } from 'naive-ui'
import News from './components/New.vue'
import { homePageMarket, homePageRate, report, getHomeList, amountList } from '@/api/daikin/base'
import { useUserStore } from '@/stores/modules/user'
const store = useUserStore()

const isUpPwds = ref(false)
const userCode = ref(false)
watchEffect(() => {
  userCode.value = ['admin', 'cd_dandang', 'tech_service'].some((item) =>
    store.user.roleCode?.includes(item)
  )
  isUpPwds.value = store.user.isUpPwd === 2 ? true : false
})
const activeCard5NavKey = ref('DIS')
const Card5Navs = [
  { key: 'DIS', name: 'DIS' },
  { key: 'DSZ', name: 'DSZ' },
  { key: 'DISH', name: 'DISH' }
]
const ailists = ref()
const culists = ref()
const itemLists = ref()
const timeA = ref()
const timeB = ref()

const disList = ref<any>([{}, {}, {}, {}])
const dszList = ref<any>([{}, {}, {}, {}])
const dishList = ref<any>([{}, {}, {}, {}])
const month_1 = ref()
const month_2 = ref()
const month_3 = ref()
let now = new Date().getMonth() + 13
month_2.value = (now - 2) % 12
month_1.value = (now - 1) % 12
const dataDIS = ref()
const dataDSZ = ref()
const dataDISH = ref()
const addDSZ1 = ref()
const addDIS1 = ref()
const addDISH1 = ref()
const addDSZ2 = ref()
const addDIS2 = ref()
const addDISH2 = ref()
const addDSZ3 = ref()
const addDIS3 = ref()
const addDISH3 = ref()
const timeObj = ref<any>({})
onMounted(async () => {
  try {
    const {
      data: { ailist, culist, lastUTime },
      data
    } = await homePageMarket() //市况
    const {
      data: { itemList, lastUTime: _lastUTime }
    } = await homePageRate() //汇率
    const { data: _disList } = await getHomeList({ number: 'DIS' }) //汇率
    const { data: _dszList } = await getHomeList({ number: 'DSZ' }) //汇率
    const { data: _dishList } = await getHomeList({ number: 'DISH' }) //汇率
    const { data: fazhu } = await amountList()
    fazhu.forEach((i: { number: string; amount: any }) => {
      // timeObj.value[i.number] = i.modifyTime?.substring(0, 10) || ''
      timeObj.value[i.number] = i.updateDate || ''
      if (i.number == 'DIS') {
        dataDIS.value = i.amount
      }
      if (i.number == 'DSZ') {
        dataDSZ.value = i.amount
      }
      if (i.number == 'DISH') {
        dataDISH.value = i.amount
      }
    })
    ailists.value = ailist
    culists.value = culist
    itemLists.value = itemList
    timeA.value = lastUTime
    timeB.value = _lastUTime
    disList.value = _disList
    dszList.value = _dszList
    dishList.value = _dishList
    month_1.value = _disList[0].monthDate?.split('-')[1]
    month_2.value = _dszList[0].monthDate?.split('-')[1]
    month_3.value = _dishList[0].monthDate?.split('-')[1]

    addDIS1.value = _disList.reduce((previousValue: any, currentValue: { budget: any }) => {
      const sum = parseFloat(currentValue.budget) + parseFloat(previousValue)
      // return sum > 0 ? sum.toFixed(2) : 0
      return sum
    }, 0)
    if (_disList[0].budget == _disList[1].budget && addDIS1.value > 0) {
      addDIS1.value -= _disList[0].budget
      addDIS1.value > 0 ? (addDIS1.value = addDIS1.value.toFixed(2)) : 0
    }
    addDSZ1.value = _dszList.reduce((previousValue: any, currentValue: { budget: any }) => {
      const sum = parseFloat(currentValue.budget) + parseFloat(previousValue)
      // return sum > 0 ? sum.toFixed(2) : 0
      return sum
    }, 0)
    if (_dszList[0].budget == _dszList[1].budget && addDSZ1.value > 0) {
      addDSZ1.value -= _dszList[0].budget
      addDSZ1.value > 0 ? (addDSZ1.value = addDSZ1.value.toFixed(2)) : 0
    }
    addDISH1.value = _dishList.reduce((previousValue: any, currentValue: { budget: any }) => {
      const sum = parseFloat(currentValue.budget) + parseFloat(previousValue)
      // return sum > 0 ? sum.toFixed(2) : 0
      return sum
    }, 0)
    if (_dishList[0].budget == _dishList[1].budget && addDISH1.value > 0) {
      addDISH1.value -= _dishList[0].budget
      addDISH1.value > 0 ? (addDISH1.value = addDISH1.value.toFixed(2)) : 0
    }
    addDIS2.value = _disList.reduce((previousValue: any, currentValue: { monthOne: any }) => {
      const sum = parseFloat(currentValue.monthOne) + parseFloat(previousValue)
      // return sum > 0 ? sum.toFixed(2) : 0
      return sum
    }, 0)
    if (_disList[0].monthOne == _disList[1].monthOne && addDIS2.value > 0) {
      addDIS2.value -= _disList[0].monthOne
      addDIS2.value > 0 ? (addDIS2.value = addDIS2.value.toFixed(2)) : 0
    }
    addDSZ2.value = _dszList.reduce((previousValue: any, currentValue: { monthOne: any }) => {
      const sum = parseFloat(currentValue.monthOne) + parseFloat(previousValue)
      // return sum > 0 ? sum.toFixed(2) : 0
      return sum
    }, 0)
    if (_dszList[0].monthOne == _dszList[1].monthOne && addDSZ2.value > 0) {
      addDSZ2.value -= _dszList[0].monthOne
      addDSZ2.value > 0 ? (addDSZ2.value = addDSZ2.value.toFixed(2)) : 0
    }
    addDISH2.value = _dishList.reduce((previousValue: any, currentValue: { monthOne: any }) => {
      const sum = parseFloat(currentValue.monthOne) + parseFloat(previousValue)
      // return sum > 0 ? sum.toFixed(2) : 0
      return sum
    }, 0)
    if (_dishList[0].monthOne == _dishList[1].monthOne && addDISH2.value > 0) {
      addDISH2.value -= _dishList[0].monthOne
      addDISH2.value > 0 ? (addDISH2.value = addDISH2.value.toFixed(2)) : 0
    }
    addDIS3.value = _disList.reduce((previousValue: any, currentValue: { monthTwo: any }) => {
      const sum = parseFloat(currentValue.monthTwo) + parseFloat(previousValue)
      // return sum > 0 ? sum.toFixed(2) : 0
      return sum
    }, 0)
    if (_disList[0].monthTwo == _disList[1].monthTwo && addDIS3.value > 0) {
      addDIS3.value -= _disList[0].monthTwo
      addDIS3.value > 0 ? (addDIS3.value = addDIS3.value.toFixed(2)) : 0
    }
    addDSZ3.value = _dszList.reduce((previousValue: any, currentValue: { monthTwo: any }) => {
      const sum = parseFloat(currentValue.monthTwo) + parseFloat(previousValue)
      // return sum > 0 ? sum.toFixed(2) : 0
      return sum
    }, 0)
    if (_dszList[0].monthTwo == _dszList[1].monthTwo && addDSZ3.value > 0) {
      addDSZ3.value -= _dszList[0].monthTwo
      addDSZ3.value > 0 ? (addDSZ3.value = addDSZ3.value.toFixed(2)) : 0
    }
    addDISH3.value = _dishList.reduce((previousValue: any, currentValue: { monthTwo: any }) => {
      const sum = parseFloat(currentValue.monthTwo) + parseFloat(previousValue)
      // return sum > 0 ? sum.toFixed(2) : 0
      return sum
    }, 0)
    if (_dishList[0].monthTwo == _dishList[1].monthTwo && addDISH3.value > 0) {
      addDISH3.value -= _dishList[0].monthTwo
      addDISH3.value > 0 ? (addDISH3.value = addDISH3.value.toFixed(2)) : 0
    }
    if (isUpPwds.value) {
      ElMessageBox.alert('为了您的帐号安全,此次登录必须更改密码', '重要提醒', {
        confirmButtonText: 'OK',
        showClose: false,
        showCancelButton: false
      }).then(() => {
        push({ name: 'modifys' })
      })
    }
    report({ moduleCode: 'App_Home' })
  } catch (error) {}
})
const { push } = useRouter()
const route = useRoute()
const timeNow = useDateFormat(useNow(), 'YYYY-MM-DD')

const { chartRef: chartRef1, option: chartOption1 } = useChart1()
const { chartRef: chartRef2, option: chartOption2, state } = useChart21()
const { chartRef: chartRef22, option: chartOption22 } = useChart22()
const { chartRef: chartRef23, option: chartOption23 } = useChart23()
const { chartRef: chartRef3, option: chartOption3 } = useChart3()
const displayDiffValue = (diffValue: number) => {
  if (diffValue > 0) {
    return `+${diffValue} %`
  } else if (diffValue < 0) {
    return `-${Math.abs(diffValue)} %`
  } else {
    return `${diffValue} %`
  }
}

async function setModule(codes: any, names: any) {
  const moduleCode = codes
  console.log(codes, names)
  push({ name: names })
  const { code } = await report({ moduleCode })
}
const selectData = ref('原材料')
const option = [
  {
    label: '全部数据',
    value: 'quanbu'
  },
  {
    label: '原材料',
    value: 'yuancailiao'
  },
  {
    label: '加工品',
    value: 'jiagongping'
  },
  {
    label: '机能部品',
    value: 'jineng'
  }
]

const thisSelect = (e) => {
  console.log(e)
  state.title = e
}

function formatNumber(num = 0) {
  num = +num
  const roundedNum: string = num.toFixed(2)
  const [wholePart, decimalPart] = roundedNum.split('.')
  const formattedDecimalPart = decimalPart.padEnd(2, '0')
  return `${wholePart}.${formattedDecimalPart}`
}
</script>

<template>
  <div class="top flex items-center text-20px">
    <div class="flex-1 font-800 text-30px"></div>
    <AppHeadUserInfo />
  </div>
  <div class="page-wrapper h-full flex-1 flex flex-col flex-wrap">
    <div class="font-800 text-30px mt39px">
      <!-- FY23年度调达本部方针：创新实干，勇毅前行，以综合实力挑战变革，提升存在感 -->
      FY24年度公司方针：提升全员价值，直击一切困难
    </div>
    <div class="mt30px flex-1 flex flex-wrap justify-between">
      <News></News>

      <div class="card">
        <div
          class="card_title cursor-pointer hover:underline"
          @click="setModule('App_Market', 'Market')"
        >
          市况汇率 每日更新
        </div>
        <div class="card_nav card_nav2 !top--3px !right--1px">
          <div class="!text-14px w260px top--4px text-right leading-18px">
            出处：市况-SMM/LME<br />
            汇率-外汇管理局
          </div>
        </div>
        <!-- <div class="card_sub-title">责任者：调达中心 Device变革T/原材料变革T</div> -->

        <div class="card_content">
          <!-- <VChart :option="chartOption1" autoresize /> -->
          <div class="flex pl15px pr10px pt15px text-#898F9F-1 text-#152242">
            <div class="">
              <span class="icoT">市况</span>
              <span class="ml10px text-14px">更新时间：{{ timeA }}</span>

              <div class="h150px overflow-auto">
                <table class="history w-full text-center mt18px text-16px border-spacing-0 w219px">
                  <thead
                    style="
                      background-color: #417bef;
                      color: #fff;
                      height: 42px;
                      width: 220px;
                      border: 1px solid #417bef;
                    "
                  >
                    <tr class="h41px">
                      <th>铜</th>
                      <th>最新</th>
                      <th>前日差</th>
                    </tr>
                  </thead>
                  <tbody v-if="culists">
                    <tr
                      class="h45px"
                      v-for="(it, index) in culists"
                      :key="index"
                      :class="index % 2 !== 0 ? 'bg-#f9f9f9' : ''"
                    >
                      <td class="text-14px">{{ it.channel }}</td>
                      <td class="text-14px">{{ it.negAmount }}</td>
                      <td class="text-14px" :class="it.diffValue < 0 ? 'text-#63BF8D' : 'text-red'">
                        {{ displayDiffValue(it.diffValue) }}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="h150px overflow-auto">
                <table
                  class="history w-full text-center mt15px text-16px border-spacing-0 overflow-auto w219px"
                >
                  <thead
                    style="
                      background-color: #417bef;
                      color: #fff;
                      height: 42px;
                      width: 220px;
                      border: 1px solid #417bef;
                    "
                  >
                    <tr class="h41px">
                      <th>铝</th>
                      <th>最新</th>
                      <th>前日差</th>
                    </tr>
                  </thead>
                  <tbody v-if="ailists">
                    <tr
                      class="h45px"
                      v-for="(it, index) in ailists"
                      :key="index"
                      :class="index % 2 !== 0 ? 'bg-#f9f9f9' : ''"
                    >
                      <td class="text-14px">{{ it.channel }}</td>
                      <td class="text-14px">{{ it.negAmount }}</td>
                      <td class="text-14px" :class="it.diffValue < 0 ? 'text-#63BF8D' : 'text-red'">
                        {{ displayDiffValue(it.diffValue) }}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="ml10px">
              <span class="icoT">汇率</span>
              <span class="ml10px text-14px">更新时间：{{ timeB }}</span>
              <div class="h282px pt18px">
                <table class="history w-full text-center text-16px border-spacing-0 w219px">
                  <thead
                    style="
                      background-color: #417bef;
                      color: #fff;
                      height: 42px;
                      width: 220px;
                      border: 1px solid #417bef;
                    "
                  >
                    <tr class="h41px">
                      <th class="w75px">币种</th>
                      <th>最新</th>
                      <th class="w65px">前日差</th>
                    </tr>
                  </thead>
                  <tbody v-if="itemLists" class="h238px overflow-auto absolute">
                    <tr
                      class="h60px !text-14px"
                      v-for="(it, index) in itemLists"
                      :key="index"
                      :class="index % 2 !== 0 ? 'bg-#f9f9f9' : ''"
                    >
                      <td class="w75px text-center">
                        {{ it.currencyNameFrom }}-{{ it.currencyNameTo }}
                      </td>
                      <td class="w85px text-center">{{ it.negAmount }}</td>
                      <td
                        class="w65px text-center"
                        :class="it.diffValue < 0 ? 'text-#63BF8D' : 'text-red'"
                      >
                        {{ displayDiffValue(it.diffValue) }}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="card">
        <div
          class="card_title cursor-pointer hover:underline"
          @click="setModule('App_data_platform', 'CD')"
        >
          数据平台
        </div>
        <!-- <div class="card_sub-title">责任者：调达中心 企画变革T</div> -->
        <div class="card_nav card_nav1">
          <div
            class="card_nav_item cursor-pointer hover:underline"
            :class="activeCard5NavKey === i.key && 'active'"
            v-for="i in Card5Navs"
            :key="i.name"
            @click="() => (activeCard5NavKey = i.key)"
          >
            {{ i.name }}
          </div>
        </div>
        <div class="table-container">
          <el-button
            v-if="userCode"
            type="primary"
            class="button abs-top"
            @click="push({ name: 'dataPlatform' })"
            >数据管理</el-button
          >
          <div
            class="block p-[10px] pr-0 absolute top-[4px] right-[36px] font-normal h-[20px] !text-[16px] text-[#000]"
          >
            更新日：{{ timeObj[activeCard5NavKey] }}
          </div>
          <table class="data-table" border v-if="activeCard5NavKey === 'DIS'">
            <colgroup>
              <col width="20%" />
              <col width="20%" />
              <col width="20%" />
              <col width="20%" />
              <col width="20%" />
            </colgroup>
            <tr class="header">
              <th rowspan="2" colspan="2">拠点</th>
              <td colspan="3">
                <div class="tab-header">
                  <div class="tb-title">DIS</div>
                  <div class="tb-subtitle">发注金额：{{ dataDIS }}百万元</div>
                </div>
              </td>
            </tr>
            <tr class="header">
              <td>年初予算</td>
              <!-- <td>{{month_2}}月</td> -->
              <td>改订</td>
              <td>{{ +month_1 }}月</td>
            </tr>
            <tr>
              <th colspan="2">合计</th>
              <td>{{ formatNumber(addDIS1) }}%</td>
              <td>{{ formatNumber(addDIS2) }}%</td>
              <td>{{ formatNumber(addDIS3) }}%</td>
            </tr>
            <tr>
              <th rowspan="2">C/D</th>
              <th>交涉</th>
              <td :rowspan="disList[0].budget == disList[1].budget ? '2' : ''">
                {{ formatNumber(disList[0].budget) }}%
              </td>
              <td :rowspan="disList[0].monthOne == disList[1].monthOne ? '2' : ''">
                {{ formatNumber(disList[0].monthOne) }}%
              </td>
              <td :rowspan="disList[0].monthTwo == disList[1].monthTwo ? '2' : ''">
                {{ formatNumber(disList[0].monthTwo) }}%
              </td>
            </tr>
            <tr>
              <th>THEME</th>
              <td v-if="disList[1].budget != disList[0].budget">
                {{ formatNumber(disList[1].budget) }}%
              </td>
              <td v-if="disList[1].monthOne != disList[0].monthOne">
                {{ formatNumber(disList[1].monthOne) }}%
              </td>
              <td v-if="disList[1].monthTwo != disList[0].monthTwo">
                {{ formatNumber(disList[1].monthTwo) }}%
              </td>
            </tr>
            <tr>
              <th colspan="2">市况</th>
              <td>{{ formatNumber(disList[2].budget) }}%</td>
              <td>{{ formatNumber(disList[2].monthOne) }}%</td>
              <td>{{ formatNumber(disList[2].monthTwo) }}%</td>
            </tr>
            <tr>
              <th colspan="2">為替レート</th>
              <td>{{ formatNumber(disList[3].budget) }}%</td>
              <td>{{ formatNumber(disList[3].monthOne) }}%</td>
              <td>{{ formatNumber(disList[3].monthTwo) }}%</td>
            </tr>
          </table>
          <table class="data-table" border v-if="activeCard5NavKey === 'DSZ'">
            <colgroup>
              <col width="20%" />
              <col width="20%" />
              <col width="20%" />
              <col width="20%" />
              <col width="20%" />
            </colgroup>
            <tr class="header">
              <th rowspan="2" colspan="2">抛点</th>
              <td colspan="3">
                <div class="tab-header">
                  <div class="tb-title">DSZ</div>
                  <div class="tb-subtitle">发注金额：{{ dataDSZ }}百万元</div>
                </div>
              </td>
            </tr>
            <tr class="header">
              <td>年初予算</td>
              <!-- <td>{{month_2}}月</td> -->
              <td>改订</td>
              <td>{{ +month_2 }}月</td>
            </tr>
            <tr>
              <th colspan="2">合计</th>
              <td>{{ formatNumber(addDSZ1) }}%</td>
              <td>{{ formatNumber(addDSZ2) }}%</td>
              <td>{{ formatNumber(addDSZ3) }}%</td>
            </tr>
            <tr>
              <th rowspan="2">C/D</th>
              <th>交涉</th>
              <td :rowspan="dszList[0].budget == dszList[1].budget ? '2' : ''">
                {{ formatNumber(dszList[0].budget) }}%
              </td>
              <td :rowspan="dszList[0].monthOne == dszList[1].monthOne ? '2' : ''">
                {{ formatNumber(dszList[0].monthOne) }}%
              </td>
              <td :rowspan="dszList[0].monthTwo == dszList[1].monthTwo ? '2' : ''">
                {{ formatNumber(dszList[0].monthTwo) }}%
              </td>
            </tr>
            <tr>
              <th>THEME</th>
              <td v-if="dszList[1].budget != dszList[0].budget">
                {{ formatNumber(dszList[1].budget) }}%
              </td>
              <td v-if="dszList[1].monthOne != dszList[0].monthOne">
                {{ formatNumber(dszList[1].monthOne) }}%
              </td>
              <td v-if="dszList[1].monthTwo != dszList[0].monthTwo">
                {{ formatNumber(dszList[1].monthTwo) }}%
              </td>
            </tr>
            <tr>
              <th colspan="2">市况</th>
              <td>{{ formatNumber(dszList[2].budget) }}%</td>
              <td>{{ formatNumber(dszList[2].monthOne) }}%</td>
              <td>{{ formatNumber(dszList[2].monthTwo) }}%</td>
            </tr>
            <tr>
              <th colspan="2">為替レート</th>
              <td>{{ formatNumber(dszList[3].budget) }}%</td>
              <td>{{ formatNumber(dszList[3].monthOne) }}%</td>
              <td>{{ formatNumber(dszList[3].monthTwo) }}%</td>
            </tr>
          </table>
          <table class="data-table" border v-if="activeCard5NavKey === 'DISH'">
            <colgroup>
              <col width="20%" />
              <col width="20%" />
              <col width="20%" />
              <col width="20%" />
              <col width="20%" />
            </colgroup>
            <tr class="header">
              <th rowspan="2" colspan="2">抛点</th>
              <td colspan="3">
                <div class="tab-header">
                  <div class="tb-title">DISH</div>
                  <div class="tb-subtitle">发注金额：{{ dataDISH }}百万元</div>
                </div>
              </td>
            </tr>
            <tr class="header">
              <td>年初予算</td>
              <!-- <td>{{month_2}}月</td> -->
              <td>改订</td>
              <td>{{ +month_3 }}月</td>
            </tr>
            <tr>
              <th colspan="2">合计</th>
              <td>{{ formatNumber(addDISH1) }}%</td>
              <td>{{ formatNumber(addDISH2) }}%</td>
              <td>{{ formatNumber(addDISH3) }}%</td>
            </tr>
            <tr>
              <th rowspan="2">C/D</th>
              <th>交涉</th>
              <td :rowspan="dishList[0].budget == dishList[1].budget ? '2' : ''">
                {{ formatNumber(dishList[0].budget) }}%
              </td>
              <td :rowspan="dishList[0].monthOne == dishList[1].monthOne ? '2' : ''">
                {{ formatNumber(dishList[0].monthOne) }}%
              </td>
              <td :rowspan="dishList[0].monthTwo == dishList[1].monthTwo ? '2' : ''">
                {{ formatNumber(dishList[0].monthTwo) }}%
              </td>
            </tr>
            <tr>
              <th>THEME</th>
              <td v-if="dishList[1].budget != dishList[0].budget">
                {{ formatNumber(dishList[1].budget) }}%
              </td>
              <td v-if="dishList[1].monthOne != dishList[0].monthOne">
                {{ formatNumber(dishList[1].monthOne) }}%
              </td>
              <td v-if="dishList[1].monthTwo != dishList[0].monthTwo">
                {{ formatNumber(dishList[1].monthTwo) }}%
              </td>
            </tr>
            <tr>
              <th colspan="2">市况</th>
              <td>{{ formatNumber(dishList[2].budget) }}%</td>
              <td>{{ formatNumber(dishList[2].monthOne) }}%</td>
              <td>{{ formatNumber(dishList[2].monthTwo) }}%</td>
            </tr>
            <tr>
              <th colspan="2">為替レート</th>
              <td>{{ formatNumber(dishList[3].budget) }}%</td>
              <td>{{ formatNumber(dishList[3].monthOne) }}%</td>
              <td>{{ formatNumber(dishList[3].monthTwo) }}%</td>
            </tr>
          </table>
          <!-- <img  src="@/assets/images/xiaogouzi1.jpg"  class="w-full h-full cover" v-if="activeCard5NavKey === 'DSZ'"/>
        <img  src="@/assets/images/xiaogouzi2.jpg"  class="w-full h-full cover" v-if="activeCard5NavKey === 'DISH'"/> -->
          <!-- <img  src="@/assets/images/xiaogouzi3.jpg"  class="w-full h-full cover" v-if="activeCard5NavKey === 'DIS'"/> -->
        </div>
        <!-- <div class="card_content">
          <VChart ref="chartRef3" :option="chartOption3" autoresize />
        </div> -->
      </div>
      <div class="card" @click="setModule('App_BCP', 'BCP')">
        <div class="card_title cursor-pointer hover:underline">调达BCP管理</div>
        <div class="card_sub-title">责任者：调达部 加工品变革T</div>
        <div class="card_content">
          <img src="@/assets/images/img-11.png" class="w-full h-full object-cover" />
        </div>
      </div>
      <div class="card relative">
        <!-- <img src="@/assets/images/img-42.png" class="absolute top-10px right-0" /> -->
        <div class="card_title cursor-pointer hover:underline" @click="setModule('App_CSR', 'CSR')">
          SCM碳中和活动
        </div>
        <div class="card_sub-title" @click="setModule('App_CSR', 'CSR')">
          责任者：开发调达部 调达机能研究T
        </div>
        <div class="card_content px20px" @click="setModule('App_CSR', 'CSR')">
          <img src="../../assets/images/scmtzh@2x.png" class="w-full h-96% cover" />
          <!-- <div class="flex text-center">
            <div class="bg-#F4F8FF text-#000 h30px w-full pt5px font-bold">F25碳减排目标 <el-icon class="!text-#004DE1">
                <CaretTop />
              </el-icon>30%</div>
            <div class="bg-#F4F8FF text-#000 h30px w-full  pt5px font-bold">F23碳减排目标 <el-icon class="!text-#004DE1">
                <CaretTop />
              </el-icon>15%</div>
          </div>
          <div class="flex  text-center">
            <div class=" text-#677BB2 h30px w-full pt5px font-500">供方碳排放推移表</div>
            <div class=" text-#677BB2 h30px w-full  pt5px font-500 flex"><span>重点供方碳排放情况</span> 
              <n-select v-model:value="selectData" :options="option" class="w80px !text-12px h20px mt--4px" :show-checkmark="false"  size="tiny"
                @update:value="thisSelect" />
            </div>
          </div>
          <div class="flex w-full h-full">
            <div class="w150px h-full">
              <VChart :option="chartOption1" />
            </div>
            <div class="w280px h275px overflow-y-auto">
              <VChart :option="chartOption2" />
       
            </div>
          </div> -->

          <!-- <div class="mt25px text-#142142"> -->
          <!-- <img src="@/assets/images/tiad@2x.png" class="w100% h96%" /> -->
          <!-- <div class="text-#002fa7 text-18px">大金中国调达本部紧扣大金集团2050愿景中CO2“零”排放目标展开调达碳中和活动</div>
            <AppNewsBox class="mt10px" text="脱碳素供应链管理（原材料排放，部品加工·部品运输过程中的排放）
空调解决方案（部品碳足迹管理，贩促活动，案例情报共享）" date="2023-05-22" /> -->
          <!-- </div> -->
          <!-- <div class="mt25px text-#142142">
            <div class="text-#002fa7 text-18px">人材育成</div>
            <AppNewsBox class="mt10px" text="FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来" date="2023-05-22" />
          </div>
          <div class="mt25px text-#142142">
            <div class="text-#002fa7 text-18px">工作模式变革</div>
            <AppNewsBox class="mt10px" text="FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来" date="2023-05-22" />
          </div> -->
        </div>
      </div>

      <div class="card topics">
        <div class="card_title cursor-pointer hover:underline">重点Theme取组</div>
        <div class="card_content p20px pt10px">
          <div
            class="w-full h-full flex flex-wrap content-between justify-between text-18px font-bold"
          >
            <div class="item !h-188px cursor-pointer" @click="setModule('App_Quality', 'Quality')">
              <div class="item_title hover:underline">品质</div>
              <div class="item_sub-title">责任者：调达部 企画管理T</div>
              <!-- <img src="@/assets/images/img-45.svg" class="item_img pb13px pr20px" /> -->
              <img src="@/assets/images/img-41.png" class="item_img b !bottom--20px" />
            </div>
            <div class="item !h-188px cursor-pointer" @click="setModule('App_Lab', 'Diffspace')">
              <div class="item_title hover:underline">AI差别化LAB</div>
              <div class="item_sub-title">责任者：开发调达部</div>
              <div class="item_sub-title">差别化研究T</div>
              <img src="@/assets/images/img-43.png" class="item_img" />
            </div>
            <div
              class="item !w-full flex flex-col cursor-pointer"
              @click="push({ name: 'StrategicPlanning' })"
            >
              <div class="item_title hover:underline">战略企划</div>
              <div class="item_sub-title">责任者：调达本部 管理G</div>
              <!-- <img src="./images/home-1.svg" /> -->
              <div class="flex mt20px items-center justify-center">
                <div class="bg-#0038BE w210px px15px py7px rounded-30px">
                  <img src="@/assets/images/biaoq2@2x.png" class="w25px h21px" />
                  重点Theme管理
                </div>
                <span class="text-#000 font-thin underline-text mx23px hover:underline-solid"
                  >开发调达部</span
                >
                <span class="text-#000 font-thin underline-text hover:underline-solid">调达部</span>
                <!-- <VChart :option="chartOption2" autoresize /> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.tab-header {
  display: flex;
  .tb-title {
    margin: 0 auto;
  }
  .tb-subtitle {
    margin-right: 8px;
    font-size: 0.75em;
  }
}
.table-container {
  padding: 0 36px;
  padding-top: 40px;
  position: relative;
}
.data-table {
  width: 100%;
  color: #808696;
  border-collapse: collapse;
  line-height: 2.3rem;
  text-align: center;
  border-color: #e0e0e0;
  background: white;
}
.table-container .abs-top {
  position: absolute;
  left: 36px;
  top: 4px;
}
.data-table tr:nth-child(2n + 1) {
  background: #f9f9f9;
}
.data-table th {
  background: #f4f5ff;
  color: #142142;
}
.data-table tr.header,
.data-table tr.header th {
  background: #417bef;
  color: white;
}
::-webkit-scrollbar {
  width: 1px;
}
::v-deep .n-base-select .n-base-select-option {
  font-size: 12px; /* 设置字体大小 */
}
.naive-select .n-select-dropdown {
  font-size: 12px; /* 设置字体大小 */
}
.underline-text {
  border-bottom: 1px solid black;
  padding-bottom: 2px;
}

.icoT {
  padding: 5px;
  color: #fff;
  background-color: #002aae;
  border-radius: 5px;
}

.top {
  position: absolute;
  right: 30px;
  top: -70px;
}

.page-wrapper {
  .card {
    // width: 480px;
    // height: 428px;
    width: 480px;
    height: 395px;
    border-radius: 18px;
    overflow: hidden;

    background-color: #fff;
    // border: 1px solid #e7ebf5;
    box-shadow: 1px 2px 12px rgba(14, 86, 221, 0.32);
    position: relative;
    display: flex;
    flex-direction: column;
    position: relative;

    &::after {
      content: ' ';
      background-image: url('@/assets/images/bg-card.svg');
      pointer-events: none;
      display: block;
      width: 100%;
      height: 127px;
      background-size: cover;
      position: absolute;
      left: 0;
      top: -1px;
    }

    .card_title {
      flex-shrink: 0;
      font-size: 28px;
      color: #142142;
      padding: 20px;
      padding-bottom: 0;
    }

    .card_sub-title {
      color: rgba(128, 134, 150, 0.8);
      font-size: 16px;
      padding: 0 20px;
      padding-bottom: 0;
      margin-top: 10px;
    }

    .card_nav1 {
      background-image: url('@/assets/images/bg-card-nav.svg');
    }

    .card_nav2 {
      background-image: url('@/assets/images/youj@2x.png');
    }

    .card_nav {
      position: absolute;
      top: 0;
      right: 0;
      width: 276px;
      height: 66px;

      background-position: top right;
      background-repeat: no-repeat;
      background-size: contain;

      font-size: 20px;
      color: #fff;

      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding-left: 38px;
      padding-right: 22px;
      padding-bottom: 20px;

      .card_nav_item {
        width: 80px;
        height: 36px;
        text-align: center;
        padding-top: 8px;
        cursor: pointer;

        &.active {
          color: #032fa0;
          background-image: url('@/assets/images/bg-card-nav-item.svg');
          background-position: bottom;
          background-repeat: no-repeat;
          background-size: contain;
        }
      }
    }

    .card_content {
      flex: 1;
      margin-top: 10px;
    }
  }

  .topics {
    .item {
      border-radius: 8px;
      width: 210px;
      height: 155px;
      box-shadow: inset 1.4px 1.4px 0px 0px rgba(255, 255, 255, 0.004);
      overflow: hidden;

      background-image: url('@/assets/images/bg-card4.svg');
      background-position: -2px -2px;
      background-repeat: no-repeat;
      background-size: 215px 165px;
      position: relative;

      .item_title {
        padding-left: 16px;
        padding-top: 22px;
        color: #002fa7;
        position: relative;
        // z-index: 9;
      }

      .item_sub-title {
        color: rgba(128, 134, 150, 0.8);
        font-size: 12px;
        font-weight: normal;
        padding: 0 16px;
        padding-bottom: 0;
        margin-top: 10px;
        z-index: 9;
      }

      .item_img {
        position: absolute;
        bottom: -10px;
        right: 0;
        // z-index: 5;
        transition: transform 0.3s;

        &:hover {
          transform: scale(1.2);
        }
      }
    }
  }

  .news {
    .card_content {
      padding: 20px;
      padding-top: 0;
    }

    .news_card {
      // width: 442px;
      height: 180px;
      padding: 16px;
      font-size: 14px;

      background-repeat: no-repeat;

      background-size: 100% 100%;

      position: relative;
    }
  }
}
</style>
