<template>
  <div class="home-bg" v-if="AuthStore.roles.length">
    <el-row gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="17" :xl="17">
        <div class="top-left" id="topLeft">
          <el-card shadow="never">
            <div class="notice-title">早上好，小i提醒您<span>有<span>{{ taskTabList[0].num }}</span>个审批待立项</span></div>
            <el-row class="statistics">
              <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(item,index) in taskTabList" :key="index">
                <div class="block" :style="{'background-image':'url('+getImgUrl(item.icon)+')'}"
                     @click="clickGotoListPage(item)">
                  <div class="block-right">
                    <span>{{ item.num }}<span>个</span></span>
                    <span>{{ item.title }}</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-card>
          <el-card shadow="never" class="todo-bg" @tab-add="refreshTodoOrDoneList(activeName)">
            <el-tabs v-model="activeName" editable>
              <template #add-icon>
                刷新一下
                <div style="width: 31px"></div>
              </template>
              <el-tab-pane :label="'待办（'+(todoList?.length||0) +'）'" name="first">
                <div class="todo-top">
                  <div class="bell">
                    <el-icon size="20" color="#F55815">
                      <BellFilled/>
                    </el-icon>
                    <span>您有{{ todoList?.length || 0 }}条待办需要处理</span>
                  </div>
                  <div class="todo-more">
                    <span>查看更多</span>
                    <el-icon color="#1F63E6" size="18">
                      <ArrowRight/>
                    </el-icon>
                  </div>
                </div>
                <div class="todo-content">
                  <div v-if="todoList&&todoList.length==0" style="width: 100%">
                    <el-empty image-size="88" description="暂无待办数据~"/>
                  </div>
                  <div v-for="item in todoList" class="todo-border">
                    <div v-if="item.targetState !== null|| item.targetState !== undefined" style="margin-bottom: 10px">
                      <Tag dictType="todo_type" :value="item.targetState"/>
                    </div>
                    <div v-else></div>
                    <div class="target-name">{{ item.targetState == '00' ? '征集名称' : '项目名称' }}：{{
                        item.targetName
                      }}
                    </div>
                    <div class="black-text">发起人：{{ item.initiatorName }}</div>
                    <div class="black-text">当前节点：{{ item.taskName }}</div>
                    <div class="gray-time">
                      <div>
                        <div class="title">
                          <svg-icon name="home-time" :class-name="'home-time'"/>
                          <span>提交时间：</span>
                        </div>
                        <div class="time"> {{ item.submitTime }}</div>
                        <!--                        <div class="time">时间要求 {{ item.totalTime }}天</div>-->
                      </div>
                      <div class="view" @click="handleView(item)">查看</div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane :label="'已办（' + (doneList?.length||0) + '）'" name="second">
                <div class="todo-top">
                  <div class="bell">
                    <el-icon size="20" color="#F55815">
                      <BellFilled/>
                    </el-icon>
                    <span>您有{{ todoList.length }}条待办需要处理</span>
                  </div>
                  <div class="todo-more">
                    <span>查看更多</span>
                    <el-icon color="#1F63E6" size="18">
                      <ArrowRight/>
                    </el-icon>
                  </div>
                </div>
                <div class="todo-content">
                  <div v-if="doneList&&doneList.length==0" style="width: 100%">
                    <el-empty image-size="88" description="暂无已办数据~"/>
                  </div>
                  <div v-for="item in doneList" class="todo-border">
                    <div v-if="item.targetState !== null|| item.targetState !== undefined" style="margin-bottom: 14px">
                      <Tag dictType="todo_type" :value="item.targetState"/>
                    </div>
                    <div v-else></div>
                    <div class="target-name">{{ item.targetState == '00' ? '征集名称' : '项目名称' }}：{{
                        item.targetName
                      }}
                    </div>
                    <div class="black-text">发起人：{{ item.initiatorName }}</div>
                    <!--                    <div class="black-text">当前节点：{{ item.taskName }}</div>-->
                    <div class="gray-time">
                      <div>
                        <div class="title">
                          <svg-icon name="home-time" :class-name="'home-time'"/>
                          <span>提交时间：</span>
                        </div>
                        <div class="time"> {{ item.submitTime }}</div>
                        <!--                        <div class="time">时间要求 {{ item.totalTime }}天</div>-->
                      </div>
                      <div class="view" @click="handleView(item)">查看</div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="7" :xl="7">
        <div class="right">
          <div class="right-top ">
            <div class="title-block">
              <div class="title">
                <div class="tag"></div>
                <span>通知公告</span>
              </div>
              <div class="more" @click="goToArticleList">
                <span>更多</span>
                <el-icon color="#1F63E6" size="18">
                  <ArrowRight/>
                </el-icon>
              </div>
            </div>
            <div class="notice-block">
              <div v-if="noticeList&&noticeList.length==0">
                <el-empty image-size="135" description="暂无通知公告~"/>
              </div>
              <div v-for="(item,index) in noticeList" class="notice" @click="handleGoToArticleDetail(item)">
                <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.articleTitle }}
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row gutter="10" style="margin-top: 10px">
      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
        <div class="right bottom">
          <div class="right-top ">
            <div class="title-block">
              <div class="title">
                <div class="tag"></div>
                <span>专项资金项目</span>
              </div>
              <div class="more" @click="goToSpecialFund">
                <span>更多</span>
                <el-icon color="#1F63E6" size="18">
                  <ArrowRight/>
                </el-icon>
              </div>
            </div>
            <div>
              <div class="container">
                <div id="fundPie" ref="fundPie"></div>
              </div>
            </div>
            <div class="fund-pie">专项资金项目统计图</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <div class="right  bottom">
          <div class="right-top " style="position:relative;">
            <div class="title-block">
              <div class="title">
                <div class="tag"></div>
                <span>研发投入资金</span>
              </div>
              <div class="more" @click="goToResearchFund">
                <span>更多</span>
                <el-icon color="#1F63E6" size="18">
                  <ArrowRight/>
                </el-icon>
              </div>
            </div>
            <div style="position:absolute;top: 65px;right: 20px;z-index: 99">
              <el-date-picker
                  v-model="researchFundYear"
                  type="year"
                  placeholder="年份"
                  style="width: 80px"
                  value-format="YYYY"
                  size="small"
                  @change="changeResearchFundDataByYear"
              />
            </div>
            <div v-if="moneyData&&moneyData.length==0" style="margin-top: 30px">
              <el-empty image-size="135" description="暂无研发投入资金信息~"/>
            </div>
            <div class="money-block" v-else>
              <div class="money-container">
                <div id="moneyPie" ref="moneyPie"></div>
              </div>
              <div class="legend-block">
                <div class="total-money">总资金：{{ toThousands(totalMoney) }}</div>
                <div v-for="(item,index) in moneyData" class="legend">
                  <div style="display: flex;align-items: center">
                    <div class="money-dot" :style="{'background-color': moneyColorList[index]}"></div>
                    <div class="company-name">{{ item.name }}</div>
                  </div>
                  <div>{{ toThousands(item.value) }}</div>
                </div>
              </div>
            </div>
            <div class="fund-pie" v-if="totalMoney" style="text-align: left;margin-left: 70px;margin-top: 10px">
              研发投入资金统计图
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
        <el-card shadow="never" class="todo-bg">
          <el-tabs v-model="docActiveTab" editable @tab-add="goToArticleList">
            <template #add-icon>
              <div style="white-space: nowrap;display: flex;align-items: center">
                更多
                <el-icon color="#1F63E6" size="18">
                  <ArrowRight/>
                </el-icon>
              </div>
              <div style="width: 15px"></div>
            </template>
            <el-tab-pane label="规章制度" name="first">
              <div class="notice-block rules-block">
                <div v-if="rulesList&&rulesList.length==0">
                  <el-empty image-size="135" description="暂无规章制度~"/>
                </div>
                <div v-for="(item,index) in rulesList" class="notice" @click="handleGoToArticleDetail(item)">
                  <!--                  <div>-->
                  <!--                    <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}-->
                  <!--                  </div>-->
                  <div :style="{'color': item.isRead ? '#1F63E6' : 'rgba(0,0,0,0.5)'}">
                    <span>{{ item.articleTitle }}</span>
                    <span class="dot" v-if="item.isRead"></span>
                  </div>
                  <div> {{ item.articleTime }}</div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="帮助文档" name="second">
              <div class="notice-block rules-block">
                <div v-if="helpDocList&&helpDocList.length==0">
                  <el-empty image-size="135" description="暂无帮助文档~"/>
                </div>
                <div v-for="(item,index) in helpDocList" class="notice" @click="handleGoToArticleDetail(item)">
                  <!--                  <div>-->
                  <!--                    <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}-->
                  <!--                  </div>-->
                  <div>
                    {{ item.articleTitle }}
                  </div>
                  <div> {{ item.articleTime }}</div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="常见问题" name="third">
              <div class="notice-block rules-block">
                <div v-if="problemList&&problemList.length==0">
                  <el-empty image-size="135" description="暂无常见问题~"/>
                </div>
                <div v-for="(item,index) in problemList" class="notice" @click="handleGoToArticleDetail(item)">
                  <!--                  <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>-->
                  <div>
                    {{ item.articleTitle }}
                  </div>

                  <div> {{ item.articleTime }}</div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <div v-else style="display: flex; justify-content: center; align-items: center; height: 100%;">
    您没有任何角色， 请联系管理员！
  </div>
</template>

<script setup lang="jsx">
import 'element-plus/theme-chalk/display.css'
import {useAuthStore} from '@/stores/userstore.js'
import * as echarts from 'echarts'
import {toThousands} from "@/utils/changePrice.js";
import {ElNotification} from "element-plus";
import {getHomeTaskInfo, getDoneTaskInfo,getHomeStatistics, getSpecialFundChart} from "@/api/home";
import {getResearchFundChart} from "@/api/research-fund";
import {getArticle} from "@/api/article";

const AuthStore = useAuthStore()
const router = useRouter()
const researchFundYear = ref(new Date().getFullYear() + '')
const activeName = ref('first')
const docActiveTab = ref('first')
const totalMoney = ref('45000')
const moneyData = ref([
  {
    companyName: '智汇未来科技公司',
    money: '30000',
  },
  {
    companyName: '云航信息技术公司',
    money: '10000',
  },
  {
    companyName: '融智投资管理公司',
    money: '5000',
  },
])
const taskTabList = ref([
  {
    title: '待立项',
    color: '#CEE8FA',
    textColor: '#0043C5',
    icon: 'home1.png',
    num: 0,
    type: 'pending'
  },
  {
    title: '已立项',
    color: '#DCCEFA',
    textColor: '#8600C5',
    icon: 'home2.png',
    num:0,
    type: 'approved'
  },
  {
    title: '实施中',
    color: '#FAE6CE',
    textColor: '#F47D0E',
    icon: 'home3.png',
    num: 0,
    type: 'carryout'
  },
  {
    title: '已验收',
    color: '#CEFAD8',
    textColor: '#01A089',
    icon: 'home4.png',
    num: 0,
    type: 'check'
  }
])
const todoList = ref([])
const noticeList = ref([])
const rulesList = ref([])
const helpDocList = ref([])
const problemList = ref([])
const doneList = ref([])
const reportNum = ref(0)

const data = reactive({
  fundPieCharts: null,
  moneyPieCharts: null,
})

const moneyColorList = ref(['#5c60ca', '#a159da', '#5cdcd3', '#4bd566', '#a965ff', '#3BA272', '#ef6567', '#9A60B4', '#f9c956',])
const fundPieOption = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: 'top',
    orient: 'vertical',
    left: '0',
    bottom: '20',
    align: 'left',
    icon: 'circle',
    textStyle: {
      color: 'rgba(0,0,0,0.6)',
      fontSize: '12px'
    },
    // formatter: function (name) {
    //   let data = fundPieOption.value.series[0].data
    //   let total = 0
    //   let tarValue
    //   for (let i = 0; i < data.length; i++) {
    //     total += data[i].value
    //     if (data[i].name == name) {
    //       tarValue = data[i].value
    //     }
    //   }
    //   let v = tarValue
    //   let p = ((tarValue / total) * 100).toFixed(2)
    //   return `${name}     ${v}     ${p}%`
    // },
  },
  graphic: {       //图形中间图片
    elements: [{
      type: 'image',
      style: {
        image: "people.png",//你的图片地址
        width: 70,
        height: 70
      },
      left: 'center',
      right: 'center',
      top: '42%'
    }]
  },
  series: [
    {
      type: 'pie',
      radius: [65, 90],
      center: ['50%', '50%'],
      top: '10%',
      left: '8',
      label: {
        show: true,
        formatter: '{b}\n{d}%'
        // formatter: params => {
        // console.log(params)
        // },
      },
      itemStyle: {
        normal: {
          borderWidth: 8,//设置边框粗细
          borderColor: '#fff',
          color: function (params) {
            const colorList = [
              ['#6101ff', '#a965ff'],
              ['#5cdcd3', '#5cdcd3'],
            ];
            const index = params.dataIndex;
            return new echarts.graphic.LinearGradient(0, 0, 1, 1,
                [{
                  offset: 0,
                  color: colorList[index][0]
                },
                  {
                    offset: 1,
                    color: colorList[index][1]
                  }
                ]);
          }
        }
      },
      data: [
        {value: 75, name: '专项资金', label: {color: '#6201FF'}},
        {value: 20, name: '非专项资金', label: {color: '#1AA4AD'}, selected: true},
      ],
    },
    {
      name: '',
      type: 'pie',
      top: '10%',
      left: '8',
      clockWise: false,
      hoverAnimation: false,
      radius: ['70%', '70%'],//边框大小
      center: ['50%', '50%'],//边框位置
      tooltip: {
        show: false
      },
      label: {
        show: false
      },
      emphasis: {
        show: false
      },
      data: [{
        value: 0,
        itemStyle: {
          normal: {
            borderWidth: 1,//设置边框粗细
            borderColor: 'rgba(0,0,0,0.1)'//边框颜色
          }
        }
      }]
    }
  ]
})
const moneyPieOption = ref({
  tooltip: {
    show: false,
    trigger: 'item'
  },
  // color: moneyColorList.value,
  series: [
    {
      type: 'pie',
      radius: [0, 90],
      center: ['50%', '50%'],
      label: {
        normal: {
          show: true,
          position: 'inner',
          formatter: function (data) {
            return toThousands(data.value)
          }
        },
      },
      itemStyle: {

        normal: {
          borderWidth: 8,//设置边框粗细
          borderColor: '#fff',
          color: function (colors) {
            const colorList = moneyColorList.value;

            return colorList[colors.dataIndex];
          }
        },

      },
      data: [
        {value: 5000, name: '智汇未来科技公司',},
        {value: 3000, name: '云航信息技术公司'},
        {value: 12345, name: '融智投资管理公司'},
      ],
    },
  ]
})

onMounted(async () => {
  getTaskStatistics()
  getTodoList()
  getDoneList()
  await getFundChart()
  await getResearchChart()
  noticeList.value = await getArticleList(0)
  rulesList.value = await getArticleList(1)
  helpDocList.value = await getArticleList(2)
  problemList.value = await getArticleList(3)
})
const handleGoToArticleDetail = (row) => {
  router.push({
    name: 'Article/detail',
    query: {
      id: row.articleId
    }
  })
}
const goToArticleList = () => {
  router.push({
    name: 'Manage',
  })
}
const goToResearchFund = () => {
  router.push({
    name: 'Dev'
  })
}
const goToSpecialFund = () => {
  router.push({
    name: 'Fund'
  })
}
const refreshTodoOrDoneList = (name) => {
  console.info("🚀 ~method:refreshTodoOrDoneList -----", name)
  // getTodoList()
  // getDoneList()
}
const initFundCharts = () => {
  data.fundPieCharts = echarts.init(document.getElementById('fundPie')).setOption(fundPieOption.value)
}
const initMoneyCharts = () => {
  data.moneyPieCharts = echarts.init(document.getElementById('moneyPie')).setOption(moneyPieOption.value)
}

const getTaskStatistics = () => {
  getHomeStatistics().then(res => {
    if (res.code === 1000) {
      taskTabList.value[0].num = res.data.stayInitiation||0
      taskTabList.value[1].num = res.data.approvedProject||0
      taskTabList.value[2].num = res.data.implementation||0
      taskTabList.value[3].num = res.data.acceptanceCheck||0
    } else {
      ElNotification({
        title: '提示',
        message: res.msg,
        type: 'error'
      })
    }
  })
}
const getTodoList = () => {
  getHomeTaskInfo().then(res => {
    if (res.code === 1000) {
      todoList.value = res.data.rows
      // todoNum.value=res.data.total
    } else {
      ElNotification({
        title: '提示',
        message: res.msg,
        type: 'error'
      })
    }
  })
}
const getDoneList = () => {
  getDoneTaskInfo().then(res => {
    if (res.code === 1000) {
      doneList.value = res.data.rows
      // todoNum.value=res.data.total
    } else {
      ElNotification({
        title: '提示',
        message: res.msg,
        type: 'error'
      })
    }
  })
}
const changeResearchFundDataByYear = (year) => {
  if (year) {
    getResearchChart(year)

  }
}
const getFundChart = () => {
  getSpecialFundChart().then(res => {
    if (res.code === 1000) {
      moneyData.value = res.data
      if (res.data?.length == 0) return;
      if (fundPieOption.value.series && fundPieOption.value.series?.length > 0) {
        fundPieOption.value.series[0].data[0].value = res.data[0].value
        fundPieOption.value.series[0].data[0].name = res.data[0].name
        fundPieOption.value.series[0].data[1].value = res.data[1].value
        fundPieOption.value.series[0].data[1].name = res.data[1].name
        nextTick(() => {
          initFundCharts()
        })
      }
    } else {
      ElNotification({
        title: '提示',
        message: res.msg,
        type: 'error'
      })
    }
  })
}
const getResearchChart = (year) => {
  getResearchFundChart(year).then(res => {
    if (res.code === 1000) {
      totalMoney.value = res.data.totalAmount
      moneyData.value = res.data.rdCompanyList
      if (res.data.rdCompanyList?.length == 0) return;

      if (moneyPieOption.value.series && moneyPieOption.value.series?.length > 0) {
        moneyPieOption.value.series[0].data = res.data.rdCompanyList
        nextTick(() => {
          initMoneyCharts()
        })
      }
    } else {
      ElNotification({
        title: '提示',
        message: res.msg,
        type: 'error'
      })
    }
  })
}

const getArticleList = async (articleType) => {
  let {data, code, msg} = await getArticle({articleType: articleType})
  if (code === 1000) {
    return data.rows
  } else {
    ElNotification({
      title: '提示',
      message: msg,
      type: 'error'
    })
  }
}
window.addEventListener('resize', () => {
  console.info("🚀 ~method:resize -----")
  data.fundPieCharts = null
  data.moneyPieCharts = null
  initFundCharts()
  initMoneyCharts()
})

const clickGotoListPage = (item) => {
  console.info("🚀 ~method:clickGotoListPage -----", item.type)
  if (item.type === 'pending') {
    router.push({
      name: 'Initiation',
      query: {
        state: 0
      }
    })
  } else if (item.type === 'approved') {
    router.push({
      name: 'Initiation',
      query: {
        state: 4
      }
    })
  } else if (item.type === 'carryout') {
    router.push({
      name: 'Implementation',
      query: {
        state: 0
      }
    })
  } else if (item.type === 'check') {
    router.push({
      name: 'Implementation',
      query: {
        state: 4
      }
    })
  }
}

const getImgUrl = (name) => {
  return new URL('/' + name, import.meta.url).href
}

const handleDetail = (row) => {
  router.push({
    name: 'Requirement/detail',
    query: {
      id: row.requirementId
    }
  })
}
const handleReport = (row) => {
  router.push({
    name: 'Summary/add',
    query: {
      id: row.requirementId
    }
  })
}
const getReportNumTotal = (val) => {
  reportNum.value = val
}
const handleView = (row) => {
  if (row.targetState == '00' && row.targetId) {
    router.push({
      name: 'Requirement/detail',
      query: {
        id: row.targetId,
        source: 'home'
      }
    })
  } else if (row.targetState == '10' && row.targetId) {
    router.push({
      name: 'Summary/detail',
      query: {
        projectId: row.targetId,
        state: row.state,
        source: 'home'
      }
    })
  } else if (row.targetState == '20' || row.targetState == '40' || row.targetState == '50') {
    router.push({
      name: 'Implementation/detail',
      query: {
        projectId: row.targetId,
        state: row.state,
        step: row.targetState,
        source: 'home'
      }
    })
  } else if (row.targetState == '70' && row.targetId) {
    router.push({
      name: 'Fund/detail',
      query: {
        id: row.targetId,
        state: row.state,
        source: 'home'
      }
    })
  } else if (row.targetState == '80' && row.targetId) {
    router.push({
      name: 'Share/detail',
      query: {
        id: row.targetId,
        state: row.state,
        source: 'home'
      }
    })
  } else if (row.targetState == '90' && row.targetId) {
    router.push({
      name: 'Phase/detail',
      query: {
        projectId: row.targetId,
        source: 'home'
      }
    })
  }
}
</script>

<style lang="scss" scoped>
@media (min-width: 1200px) and (max-width: 1918px) {
  //.right-top {
  //  height: 684px !important;
  //}
  //.home-bg .notice-block {
  //  height: 624px !important;
  //}
  //.todo-bg {
  //  margin-top: 10px;
  //}
  .block {
    width: 300px !important;
  }
}

@media only screen and (max-width: 1800px) {
  .statistics {
    .block {
      width: 280px !important;
    }
  }

}

@media only screen and (max-width: 1720px) {
  .statistics {
    .block {
      width: 260px !important;
      //height: 140px!important;
    }
  }
  //.right-top {
  //  height: 670px !important;
  //}
  //.home-bg .notice-block {
  //  height: 624px !important;
  //}
}

@media only screen and (max-width: 1620px) {
  .statistics {
    .block {
      width: 240px !important;
    }
  }

}

@media only screen and (max-width: 1500px) {
  .statistics {
    .block {
      width: 220px !important;
      //height: 120px!important;
    }
  }

}

//@media only screen and (max-width: 1420px) {
//  .statistics {
//    .block {
//      width: 280px !important;
//    }
//  }
//
//}

//@media only screen and (max-width: 1344px) {
//  .statistics {
//    .block {
//      width: 260px !important;
//    }
//  }
//
//}
//
//@media only screen and (max-width: 1270px) {
//  .statistics {
//    .block {
//      width: 240px !important;
//    }
//  }
//
//}

@media only screen and (max-width: 1200px) {
  .right {
    margin-top: 10px;
  }
  :deep(.el-table) {
    height: 300px !important;
  }
  .todo-bg {
    margin-top: 10px;
  }
  .statistics {
    .block {
      width: 350px !important;
    }
  }
}


@media only screen and (max-width: 1000px) {
  .right {
    margin-top: 10px;
  }
  :deep(.el-table) {
    height: 300px !important;
  }
  .todo-bg {
    margin-top: 10px;
  }
}

@media only screen and (max-width: 888px) {
  .statistics {
    .block {
      width: 320px !important;
    }
  }
}

@media only screen and (max-width: 820px) {
  .statistics {
    .block {
      width: 300px !important;
    }
  }
}

@media only screen and (max-width: 767px) {
  .right {
    margin-top: 10px;
  }
  :deep(.el-table) {
    height: 300px !important;
  }
  .todo-bg {
    margin-top: 10px;
  }
  .statistics {
    .block {
      width: 350px !important;
    }
  }
}

* {
  font-family: Source Sans Pro, Source Sans Pro;
}

.money-block {
  display: flex;
  align-items: center;
  position: relative;
  padding-top: 49px;
  padding-right: 10px;

  .total-money {
    height: 25px;
    font-weight: 400;
    font-size: 15px;
    color: #000000;
    line-height: 18px;
  }

  .legend-block {
    height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;

    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    // 滚动条轨道
    &::-webkit-scrollbar-track {
      background: rgb(239, 239, 239);
      border-radius: 2px;
    }

    // 小滑块
    &::-webkit-scrollbar-thumb {
      background: rgba(80, 81, 82, 0.29);
      border-radius: 10px;
    }
  }

  .legend {
    margin-top: 14px;
    display: flex;
    flex-direction: column;

    > div:last-child {
      font-weight: 400;
      font-size: 15px;
      color: #000000;
      letter-spacing: 1px;
      margin-left: 28px;
    }

    .company-name {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.6);
      letter-spacing: 1px;
      margin-left: 10px;
      //margin-right: 30px;
      //white-space: nowrap;
    }

    .money-dot {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      border-radius: 50%;
    }
  }
}

.money-container {
  //height: calc((100vh / 2) - 200px);
  display: flex;
  justify-content: center;
  align-items: center;
  //margin-top: 49px;
  width: 250px;

  > div {
    height: 250px;
    flex: 1;
  }
}

.container {
  //height: calc((100vh / 2) - 200px);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;

  > div {
    height: 300px;
    flex: 1;
  }
}

:deep(.el-card__body) {
  padding: 0 5px !important;
}

:deep(.el-tabs__nav-wrap:after) {
  background-color: #D9D9D9 !important;
  height: 2px !important;
}

:deep(.el-tabs__active-bar) {
  height: 2px !important;
  background-color: #1476E3 !important;
}

:deep(.el-tabs__new-tab ) {
  width: auto !important;
  border: none !important;
  color: #1476E3;
  font-size: 14px;
  line-height: 51px !important;
  height: 51px !important;
  margin: 0 0 0 -93px !important;
  z-index: 99;
  position: relative;

  &:hover {
    text-decoration: underline;
  }
}

:deep(.el-card) {
  border-radius: 10px !important;
}

:deep(.is-icon-close) {
  display: none;
}

:deep(.el-tabs__nav-scroll) {
  .el-tabs__nav {
    .el-tabs__item {
      flex: 1;
      font-size: 16px;
      width: 120px;
      //font-weight: 600;
      height: 51px;
      color: rgba(0, 0, 0, 0.5);
    }

    .el-tabs__item.is-active {
      color: #1F63E6;
    }

    //#1476E3
  }
}


.home-bg {
  height: calc(100vh - 130px);
  max-height: calc(100vh - 96px);
  background-color: #EFEFEF;
  position: absolute;
  left: 18px;
  right: 0;
  overflow-x: hidden;
  overflow-y: auto;

  .todo-more {
    display: flex;
    align-items: center;
    color: #1476E3;
    cursor: pointer;
    margin-right: 10px;
    line-height: 20px;

    &:hover {
      text-decoration: underline;
    }

    > span {
      margin-left: 10px;
      margin-right: 3px;
    }
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  // 滚动条轨道
  &::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }

  // 小滑块
  &::-webkit-scrollbar-thumb {
    background: rgba(80, 81, 82, 0.29);
    border-radius: 10px;
  }

  .top-left {
    //flex: 0.8;
    .notice-title {
      margin-top: 10px;
      margin-left: 14px;
      color: #000000;
      letter-spacing: 1px;
      font-size: 16px;

      > span {
        color: #F40E0E;

        > span {
          font-weight: bold;
        }
      }
    }

    .todo-bg {
      margin-top: 10px;

      .todo-content {
        height: 216px;
        overflow-x: auto;
        margin: 0 12px 0 19px;
        //padding: 0 0 10px 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        &::-webkit-scrollbar {
          width: 6px;
          height: 6px;
        }

        // 滚动条轨道
        &::-webkit-scrollbar-track {
          background: rgb(239, 239, 239);
          border-radius: 2px;
        }

        // 小滑块
        &::-webkit-scrollbar-thumb {
          background: rgba(80, 81, 82, 0.29);
          border-radius: 10px;
        }

        .todo-border {
          padding: 13px;
          width: 170px;
          //height: 185px;
          background: rgba(73, 171, 239, 0.05);
          border-radius: 8px 8px 8px 8px;
          border: 1px solid #D0D0E3;
          margin-right: 28px;
          font-size: 14px;

          &:last-child {
            margin-right: 0;
          }

          &:hover {
            border: 1px solid #F55815;
          }

          .gray-time {
            display: flex;
            flex-direction: column;
            //align-items: flex-end;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.5);
            letter-spacing: 1px;
            font-size: 12px;

            .view {
              //float: right;
              color: #1F63E6;
              white-space: nowrap;
              cursor: pointer;
              text-align: right;

              &:hover {
                text-decoration: underline;
              }
            }

            > div:first-child {
              display: flex;
              flex-direction: column;

              .title {
                display: flex;
              }
            }

            .time {
              width: 80px;
              margin-left: 23px;

              //&:last-child {
              //  white-space: nowrap;
              //}
            }
          }

          .black-text {
            white-space: nowrap;
            color: #000000;
            margin-bottom: 7px;
            font-size: 12px;
          }

          .target-name {
            width: 140px;
            color: #000000;
            margin-bottom: 7px;
            font-size: 12px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            -webkit-line-clamp: 1;
          }

          .process-type {
            white-space: nowrap;
            margin-top: 13px;
            margin-bottom: 7px;
            color: #1F63E6;
            letter-spacing: 1px;
          }

          .status-style {
            padding: 0 8px;
            display: inline-block;
            height: 23px;
            border-radius: 3px 3px 3px 3px;
            font-size: 12px;
            color: #FFFFFF;
            line-height: 23px;
            letter-spacing: 1px;
            text-align: center;
            background-color: #2a99ff;
            margin-bottom: 14px;
          }
        }
      }

      .todo-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        margin-bottom: 12px;
        margin-left: 20px;


        .bell {
          display: flex;
          align-items: center;
          color: #F55815;
          font-size: 15px;

          > span {
            margin-left: 10px;
            letter-spacing: 1px;
          }
        }
      }
    }

    .statistics {
      .block {
        cursor: pointer;
        display: flex;
        align-items: center;
        width: 324px;
        height: 170px;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .block-right {
          margin-left: 15%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          color: #fff;
          font-size: 13px;

          > span:first-child {
            white-space: nowrap;
            font-size: 36px;
            font-weight: bold;
            margin-bottom: 10px;

            > span {
              margin-left: 10px;
              font-size: 13px;
            }
          }

          > span:last-child {
            white-space: nowrap;
            color: #fff;
            margin-bottom: 10px;
          }
        }
      }
    }
  }

  .bottom {

    .right-top {
      height: 410px !important;
    }
  }

  .rules-block {
    height: 343px !important;
    margin-top: 0 !important;

    .notice {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 47px !important;
      line-height: 47px !important;
      color: rgba(0, 0, 0, 0.5) !important;

      > div:first-child {
        position: relative;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;

        &:hover {
          color: #1476E3;
          background: #F6FBFE;
        }

        > span:first-child {
          //width: 80% !important;
          margin-right: 4px;
        }

        .dot {
          position: absolute;
          right: 0;
          top: 14px;
          display: inline-block;
          width: 6px;
          height: 6px;
          border-radius: 25px;
          background: #DD3B3B;
          //margin-left: -6px;
          //margin-bottom: 5px;
          //margin-right: 4px;
        }

      }

      div:last-child {
        margin-left: 20px;
        font-weight: 400;
        letter-spacing: 1px;
        color: rgba(0, 0, 0, 0.5)
      }
    }
  }

  .notice-block {
    height: 452px;
    //height: 100%;
    overflow-y: auto;
    //margin-top: 10px;

    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    // 滚动条轨道
    &::-webkit-scrollbar-track {
      background: rgb(239, 239, 239);
      border-radius: 2px;
    }

    // 小滑块
    &::-webkit-scrollbar-thumb {
      background: rgba(80, 81, 82, 0.29);
      border-radius: 10px;
    }

    .notice {
      cursor: pointer;
      //min-width: 300px;
      height: 75px;
      line-height: 75px;
      padding: 0 15px;
      font-size: 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      > span:first-child {
        margin-right: 10px;
        margin-left: 10px;
        color: #1476E3;
        font-weight: bold;
        font-size: 16px;
      }

      &:hover {
        color: #1476E3;
        background: #F6FBFE;
      }
    }
  }

  .right {
    //height: 100%;
    //height: calc(100vh - 130px);
    display: flex;
    //flex: 0.5;
    flex-direction: column;
    justify-content: space-between;

    .right-top {
      //height: 100%;
      height: 528px;
      //flex: 0.7;
      overflow: hidden;
      border-radius: 10px;
      background-color: #ffffff;

      .fund-pie {
        width: 100%;
        height: 25px;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.5);
        text-align: center;
        //margin-top: 15px;
      }

      .title-block {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        border-bottom: 2px solid #D9D9D9;

        .title {
          display: flex;
          align-items: center;

          .tag {
            width: 7px;
            height: 18px;
            background: linear-gradient(#1476E3 0%, #99C9FF 100%);
            margin-right: 5px;
            border-radius: 2px;
            margin-top: 2px;
          }

          > span {
            white-space: nowrap;
            color: #000000;
            //font-weight: 600;
          }
        }

        .more {
          display: flex;
          align-items: center;
          white-space: nowrap;
          color: #1476E3;
          font-size: 14px;
          cursor: pointer;

          line-height: 20px;

          &:hover {
            text-decoration: underline;

          }
        }

      }

    }
  }
}

</style>
