import type { EChartsOption } from 'echarts'
import * as echarts from 'echarts'
import 'echarts-liquidfill';
import { getCSRDetail } from '@/api/daikin/base'
import { create } from 'naive-ui';
const forms = ref({
  lable1:{
  name: '大金集团碳减排目标',
  year: 'F25',
  date: '14%',
  title1:'',
  title2:'',
},
lable2:{
  name: 'CN调达本部碳减排目标',
  year: 'F25',
  date: '14%',
  title1:'',
  title2:'',
},
lable3:{
  name: 'CN调达本部碳减排目标',
  year: 'F23',
  date: '14%',
  title1:'',
  title2:'',
},
lable4:{
  name: '2020实绩, 2021实绩, 2022实绩, 2023, 2024, 2025',
  year: '120, 200, 150, 80, 70, 110',
  date: '0, 0, 0, 80, 70, 110',
  title1:'',
  title2:'',
},
lable5:{
  name: '30%碳减排课题收集整体情况:',
  year: '60',
  date: '14%',
  title1:'原材料: 15.5%',
  title2:'能源消耗: 1.7%',
},
lable6:{
  name: 'FY23碳减排实施完成情况:',
  year: '0.6',
  data:'',
  title1:'原材料',
  title2:'整体目标10%',
},
lable7:{
  name:'',
  data:'',
  year: '0.6',
  title1:'能源消耗',
  title2:'整体目标5%',
},
lable8:{
  name:'【FY20原材料构成数据】',
  data:{
    data1:{
      name:'Search Engine',
      value:'1048'
    },
    data2:{
      name:'Direct',
      value:'735'
    }
    ,
    data3:{
      name:'Email',
      value:'580'
    }
    ,
    data4:{
      name:'',
      value:''
    },
    data5:{
      name:'',
      value:''
    }

  }
},
lable9:{
  name:'【FY20能源消耗构成数据】',
  data:{
    data1:{
      name:'Search Engine',
      value:'1048'
    },
    data2:{
      name:'Direct',
      value:'735'
    }
    ,
    data3:{
      name:'Email',
      value:'580'
    }
    ,
    data4:{
      name:'Union Ads',
      value:'484'
    },
    data5:{
      name:'Video Ads',
      value:'300'
    }

  }
},
})
export const Content2 = [
  {
    key: '0',
    label: '活动计划',
    children: [
      { label: '调达本部HP', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
      { label: 'CSR-碳中和', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
      { label: '中国地区连携强化  ', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
    ],
  },
  {
    key: '1',
    label: '活动成果',
    children: [
      { label: 'Database推进', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
      { label: '市况', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
      { label: '汇率', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
      { label: 'BCP', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
    ],
  },
]
export const Content3 = [
  {
    key: '0',
    title: 'xx活动概要',
    label: '活动计划',
    children: [
      { label: '调达本部HP', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
      { label: 'CSR-碳中和', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
      { label: '工作模式变更  ', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
      { label: '差别化', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
    ],
  },
  {
    key: '1',
    label: '活动成果',
    children: [
      { label: 'Database推进', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
      { label: '全球连携强化', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
      { label: '高品质高品位', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
    ],
  },
  {
    key: '2',
    title: 'xx活动概要',
    label: '活动计划',
    children: [
      { label: 'CSR-碳中和', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
      { label: '工作模式变更  ', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
      { label: '差别化', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
    ],
  },
  {
    key: '3',
    label: '活动成果',
    children: [
      { label: 'Database推进', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
      { label: '市况', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
      { label: '全球连携强化', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
      { label: '高品质高品位', items: [{ content: 'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来' }] },
    ],
  },
]
const form = ref()


export function charData() {

  const chartRef = ref()
  const params = '15%'
  const option = ref<any>({});
  const allData = ref<any[]>([]);

  async function getCSR() {
    const { data: { content: { dataList } } } = await getCSRDetail()
    console.log("-----------------------------")
    if(!dataList){
      console.log("-----------------------------")
      allData.value = forms.value

    }
    else{
      allData.value = dataList
    }
    // form.value = dataList

    const options = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      title: [{ text: '单位:k-t' }],


      xAxis: {
        type: 'category',
        data: allData.value.lable4.name.split(",")
      },
      yAxis: {},
      series: [
        {
          name: '目标排放',
          type: 'bar',
          stack: 'Ad',
          barWidth: '30%',
          data: allData.value.lable4.year.split(","),
          label:
          {
            show: false,
          },
        },
        {
          type: 'bar',
          stack: 'Ad',
          label:
          {
            show: true,
            position: 'inside',
            formatter: '{c}%'
          },
          barWidth: '30%',
          data: allData.value.lable4.date.split(","),
        },
      ]
    }
    option.value = options;
  }

  getCSR()
  return { chartRef, option }
}


export function pieData1() {
  const chartRef = ref()
  const option = ref<any>({});
  const allData = ref<any[]>([]);
  async function getCSR() {
    const { data: { content: { dataList } } } = await getCSRDetail()
    if(!dataList){
      console.log("-----------------------------")
      allData.value = forms.value

    }
    else{
      allData.value = dataList
    }

    const options = {
      title: {
        text: allData.value.lable8.name,
        left: 'center',
        textStyle: { color: '#4075E1', }
      },
      tooltip: {
        trigger: 'item'
      },
      grid: { left: '20', top: '30', right: '70', bottom: '10', containLabel: true },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',

          data: Object.values(allData.value.lable8.data).filter(item => item.name !== '' || item.value !== ''),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    option.value = options;
  }
  getCSR()

  return { chartRef, option }
}



export function pieData2() {
  const chartRef = ref()
  const option = ref<any>({});
  const allData = ref<any[]>([]);
  async function getCSR() {
    const { data: { content: { dataList } } } = await getCSRDetail()
    if(!dataList){
      console.log("-----------------------------")
      allData.value = forms.value

    }
    else{
      allData.value = dataList
    }

    const options = {
      title: {
        text: allData.value.lable9.name,
        left: 'center',
        textStyle: { color: '#4075E1' }
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: true,
            formatter(param) {
              // correct the percentage
              return param.name + ' (' + param.percent * 2 + '%)';
            }
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
            }
          },
          labelLine: {
            show: true
          },
          data: Object.values(allData.value.lable9.data).filter(item => item.name !== '' || item.value !== '')
        }
      ]

    }
    option.value = options;
  }
  getCSR()
  return { chartRef, option }
}



function generateSimilarValues(number) {
  const offset = 0.05;
  const similarValues = [number, number - offset, number + offset];
  return similarValues;
}

export function liQuid() {
  const chartRef = ref()

  const option = ref<any>({});
  const allData = ref<any[]>([]);
  async function getCSR() {
    const { data: { content: { dataList } } } = await getCSRDetail()
    if(!dataList){
      console.log("-----------------------------")
      allData.value = forms.value

    }
    else{
      allData.value = dataList
    }

    const options = {
      title: {
        text: allData.value.lable6.title2,
        // subtext: 'Fake Data',
        left: 'center',
        bottom: '-5px',
        textStyle: { fontSize: '14px', fontWeight: '100' }
      },
      series: [{
        type: 'liquidFill',
        silent: true,
        data: generateSimilarValues(allData.value.lable6.year),
        color: ['#41E5BA', '#B1D2FF', '#63E8C4'],
        radius: '150px',
        backgroundStyle: {
          // borderWidth: 0,
          // borderColor: 'red',
          opacity: '0.4',
          color: '#00D491'
          // color:'#63E8C4'
        },
        outline: {
          show: false
        },
        label: {
          fontSize: 19,
          fontColor: '#fff',
          formatter: function (param) {
            return allData.value.lable6.title1 + '\n' + '\n'
              + (param.value * 100) + '%';
          },
        }
      }]

    }
    option.value = options;
  }
  getCSR()
  return { chartRef, option }
}

export function liQuids() {
  const chartRef = ref()

  const option = ref<any>({});
  const allData = ref<any[]>([]);
  async function getCSR() {
    const { data: { content: { dataList } } } = await getCSRDetail()
    if(!dataList){
      console.log("-----------------------------")
      allData.value = forms.value

    }
    else{
      allData.value = dataList
    }

    const options = {
      title: {
        text: allData.value.lable7.title2,
        // subtext: 'Fake Data',
        left: 'center',
        bottom: '-5px',
        textStyle: { fontSize: '14px', fontWeight: '100' }
      },
      series: [{
        type: 'liquidFill',
        silent: true,
        data:  generateSimilarValues(allData.value.lable7.year),
        color: ['#8CBEFF', '#B1D2FF', '#8CBEFF'],
        radius: '150px',
        backgroundStyle: {
          // borderWidth: 0,
          // borderColor: 'red',
          opacity: '0.6',
          color: '#1D88FF'
          // color:'#63E8C4'
        },
        outline: {
          show: false
        },
        label: {
          fontSize: 19,
          fontColor: '#fff',
          formatter: function (param) {
            return allData.value.lable7.title1 + '\n' + '\n'
              + (param.value * 100) + '%';
          },
        }
      }]
    }
    option.value = options;
  }
  getCSR()
  return { chartRef, option }
}