import json
import os
import os
import random

import django
import streamlit as st
# add_page_title()
# add_indentation()
import streamlit as st
import streamlit.components.v1 as components
import streamlit.components.v1 as components
from pyecharts import options as opts
from pyecharts.charts import Line
from st_btn_select import st_btn_select
from st_pages import Page, Section, show_pages, add_page_title, add_indentation

# -----------------------调用数据库---------------------------
os.chdir('D:/python/djangoProject/test_Bootstrap')
# 设置DJANGO_SETTINGS_MODULE环境变量
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'test_Bootstrap.settings')
# 初始化Django设置
django.setup()
import sys
from pathlib import Path

# 假设当前文件位于项目根目录下的某个子目录中
project_root = Path(__file__).resolve().parent.parent.parent
print("项目根目录:", project_root)
sys.path.append(f'{project_root}\\app_test')
# 打印出 sys.path 中的每一个路径
for path in sys.path:
    print(path)

from app_test.models import LiuganWeekData, BeijingWeekData, JijinData, BaiduData, StockData

# -----------------------调用数据库---------------------------
st.subheader('模型训练数据下载')


#训练数据下载
import pandas as pd

# 示例数据
data1 = LiuganWeekData.objects.all()
data_list = list(data1.values('date', 'infection_number'))
df1 = pd.DataFrame.from_records(data_list)
data2 = BeijingWeekData.objects.all()
data_list = list(data2.values('date', 'infection_number'))
df2 = pd.DataFrame.from_records(data_list)

data3 = JijinData.objects.all()
data_list = list(data3.values('date', 'jijin_data'))
df3 = pd.DataFrame.from_records(data_list)

data4 = StockData.objects.all()
data_list = list(data4.values('date', 'shoupan'))
df4 = pd.DataFrame.from_records(data_list)

data5 = BaiduData.objects.all()
data_list = list(data5.values('date', 'liugan_index'))
df5 = pd.DataFrame.from_records(data_list)
# 将数据存储在一个字典中
data_dict = {
    '国家流感中心数据': df1,
    '北京疾控中心数据': df2,
    '流感相关基金数据': df3,
    '药品相关股票数据': df4,
    '百度搜索指数数据': df5,
}


# Function to convert dataframe to csv
def convert_df_to_csv(df):
    return df.to_csv(index=False).encode('utf-8')


# Display data list with download buttons in a list format
for data_name, data in data_dict.items():
    col1, col2 = st.columns([3, 1])
    with col1:
        st.write(data_name)
    with col2:
        csv = convert_df_to_csv(data)
        st.download_button(
            label="下载",
            data=csv,
            file_name=f"{data_name}.csv",
            mime='text/csv'
        )
# 国家流感中心数据可视化
# 从 Django 数据库获取数据
all_data = LiuganWeekData.objects.all()
# 提取字段到列表
dates = [data.date for data in all_data]
infection_numbers = [data.infection_number for data in all_data]

# JavaScript 代码中的数据部分
data_js = json.dumps(infection_numbers)
date_js = json.dumps([date.strftime('%Y-%m-%d') for date in dates])
# print(date_js,data_js)
# HTML内容，包括嵌入 ECharts 的代码

html_content = f"""
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
<div id="main" style="width:700px; height:300px;background:#ccffff"></div>
<script>
var main = echarts.init(document.getElementById("main"));

option = {{
    backgroundColor: '#f5f5f5',  // 设置背景颜色为浅灰色
    legend: {{
        data: ['国家流感中心周报数据']
    }},
    xAxis: {{
        type: 'category',
        data: {date_js}
    }},
    yAxis: {{
        type: 'value'
    }},
    series: [{{
        name: '国家流感中心周报数据',
        data: {data_js},
        type: 'line'
    }}]
}};
console.log(option);
main.setOption(option);
</script>
"""

# 使用 Streamlit 的 HTML 函数将 HTML 内容嵌入页面中
components.html(html_content, height=350)

# 北京疾控中心数据可视化
# 从 Django 数据库获取数据
all_data = BeijingWeekData.objects.all()
# 提取字段到列表
dates = [data.date for data in all_data]
infection_numbers = [data.infection_number for data in all_data]

# JavaScript 代码中的数据部分
data_js = json.dumps(infection_numbers)
date_js = json.dumps([date.strftime('%Y-%m-%d') for date in dates])
print(date_js, data_js)

html_content = f"""
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
<div id="main" style="width:700px; height:300px;background:#ccffff"></div>
<script>
var main = echarts.init(document.getElementById("main"));

option = {{
    backgroundColor: '#f5f5f5',  // 设置背景颜色为浅灰色
    legend: {{
        data: ['北京疾控中心感染人数']
    }},
  xAxis: {{
    type: 'category',
    data: {date_js}
  }},
  yAxis: {{
    type: 'value'
  }},
  series: [
    {{
      name: '北京疾控中心感染人数',
      data: {data_js},
      type: 'bar',
      showBackground: true,
      backgroundStyle: {{
        color: 'rgba(180, 180, 180, 0.2)'
      }}
    }}
  ]
}};
console.log(option);
main.setOption(option);
</script>
"""
components.html(html_content, height=350)

# 基金和股票数据可视化
stock_data = StockData.objects.all()
stock_data_date = [data.date for data in stock_data]
stock_data_shoupan = [data.shoupan for data in stock_data]

jijin_data = JijinData.objects.all()
jijin_data_date = [data.date for data in jijin_data]
jijin_data_shoupan = [data.jijin_data for data in jijin_data]

stock_data_date_js = json.dumps([date.strftime('%Y-%m-%d') for date in stock_data_date])
stock_data_shoupan_js = json.dumps(stock_data_shoupan)
jijin_data_shoupan_js = json.dumps(jijin_data_shoupan)
# HTML内容，包括嵌入 ECharts 的代码
html_content = f"""
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
<div id="main" style="width:700px; height:300px;background:#ccffff"></div>
<script>
var main = echarts.init(document.getElementById('main'));

const colors = ['#5470C6', '#91CC75'];  // 删除不再使用的颜色
option = {{
    backgroundColor: '#f5f5f5',  // 设置背景颜色为浅灰色
    color: colors,
    tooltip: {{
        trigger: 'axis',
        axisPointer: {{
            type: 'cross'
        }}
    }},
    grid: {{
        right: '20%'
    }},
    toolbox: {{
        feature: {{
            dataView: {{ show: true, readOnly: false }},
            restore: {{ show: true }},
            saveAsImage: {{ show: true }}
        }}
    }},
    legend: {{
        data: ['药品相关股票数据', '流感相关基金数据']
    }},
    xAxis: [
        {{
            type: 'category',
            axisTick: {{
                alignWithLabel: true
            }},
            data: {stock_data_date_js}
        }}
    ],
    yAxis: [
        {{
            type: 'value',
            name: '药品相关股票数据',
            position: 'left',
            axisLine: {{
                show: true,
                lineStyle: {{
                    color: colors[0]
                }}
            }},
            axisLabel: {{
                formatter: '{{value}}'
            }}
        }},
        {{
            type: 'value',
            name: '流感相关基金数据',
            position: 'right',
            offset: 80,
            axisLine: {{
                show: true,
                lineStyle: {{
                    color: colors[1]
                }}
            }},
            axisLabel: {{
                formatter: '{{value}}'
            }}
        }}
    ],
    series: [
        {{
            name: '药品相关股票数据',
            type: 'line',
            data: {stock_data_shoupan_js}
        }},
        {{
            name: '流感相关基金数据',
            type: 'line',
            yAxisIndex: 1,
            data: {jijin_data_shoupan_js}
        }}
    ]
}};
console.log(option);
main.setOption(option);
</script>
"""


# 使用 Streamlit 的 HTML 函数将 HTML 内容嵌入页面中
components.html(html_content, height=350)


# 百度流感指数数据可视化
# 从 Django 数据库获取数据
all_data = BaiduData.objects.all()
# 提取字段到列表
dates = [data.date for data in all_data]
liugan_index = [data.liugan_index for data in all_data]

# JavaScript 代码中的数据部分
data_js = json.dumps(liugan_index)
date_js = json.dumps([date.strftime('%Y-%m-%d') for date in dates])
# print(date_js,data_js)
# HTML内容，包括嵌入 ECharts 的代码
html_content = f"""
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
<div id="main" style="width:700px; height:300px;"></div>
<script>
var main = echarts.init(document.getElementById('main'), null, {{
    backgroundColor: '#f5f5f5'  // 设置为浅灰色背景
}});

option = {{
  backgroundColor: '#f5f5f5',  // 设置背景颜色为浅灰色
  tooltip: {{
    trigger: 'axis'
  }},
  legend: {{
    data: ['百度搜索指数数据']  // 图例名称
  }},
  xAxis: {{
    type: 'category',
    data: {date_js}
  }},
  yAxis: {{
    type: 'value'
  }},
  series: [{{
    name: '百度搜索指数数据',  // 确保系列名称与图例名称匹配
    type: 'line',
    showSymbol: false,
    data: {data_js}
  }}]
}};
console.log(option);
main.setOption(option);
</script>
"""


# 使用 Streamlit 的 HTML 函数将 HTML 内容嵌入页面中
components.html(html_content, height=350)