import type { EChartsOption } from 'echarts'
import * as echarts from 'echarts'
import 'echarts-liquidfill';
import {getCSRDetail} from '@/api/daikin/base'
import { create } from 'naive-ui';

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({
  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: '85, 45, 67, 80, 70, 110',
  title1:'DIS',
  title2:'DSZ',
},
lable14:{
  name: '2020-1-25, 2021-12-12, 2022-11-14, 2023-14-5, 2024, 2025',
  year: '120, 200, 150, 80, 70, 110',
  date: '85, 45, 67, 80, 70, 110',
  title1:'DIS',
  title2:'DSZ',
},
lable5:{
  name: '30%碳减排课题收集整体情况:',
  year: '0.6',
  date: '14%',
  title1:'原材料: 15.5%',
  title2:'能源消耗: 1.7%',
},
lable6:{
  name: '30%碳减排课题收集整体情况:',
  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'
    }

  }
},
})

async function getCSR() {
    const {data,data:{content:{form:ffff}}} = await getCSRDetail()
    form.value = ffff

}

export function charData() {

  const chartRef = ref()
  const params = '15%'

  
  const option = ref<EChartsOption>({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['DIS', 'DSZ'],
      bottom:'0px',
      // right:'50px'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      containLabel: true
    },
    title: [{ text: '单位:千吨' }],
    // color:['#58D9FC','red','#fff'],
    // dataset: {
    //   // 提供一份数据。
    //   source: [
    //     ['2020实绩', 220, 0, 220],
    //     ['2021实绩', 182, 0, 182],
    //     ['2022实绩', 191, 0, 191],
    //     ['2023', 234, 43, 234],
    //     ['2024', 290, 23, 290],
    //     ['2025', 330, 65, 330],
    //   ]
    // },



    xAxis: { type: 'category',
    data:form.value.lable4.name.split(",")
  },
    yAxis: {},
    series: [
      { 
        name: 'DIS',
        type: 'bar', 
        barWidth: '30%',
        data: form.value.lable4.year.split(","),
        label:
        {
          show: false,
        }, 
       },
      {
        name: 'DSZ',
        type: 'bar', 
        label:
        {
          show: false,
          position: 'inside',
          formatter: '{c}%'
        }, 
        barWidth: '30%',
        data: form.value.lable4.date.split(","),
      },
      // { name: '预测/实绩用量', type: 'line' }
    ]
  })
  return { chartRef, option }
}

export function charData2() {

  const chartRef = ref()
  const params = '15%'

  
  const option = ref<EChartsOption>({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['DIS', 'DSZ'],
      top:'0px',
      right:'50px'
    },
  
    grid: {
      left: '3%',
      right: '4%',
    
      containLabel: true
    },
    title: [{ text: '单位:千吨' }],
    // color:['#58D9FC','red','#fff'],
    // dataset: {
    //   // 提供一份数据。
    //   source: [
    //     ['2020实绩', 220, 0, 220],
    //     ['2021实绩', 182, 0, 182],
    //     ['2022实绩', 191, 0, 191],
    //     ['2023', 234, 43, 234],
    //     ['2024', 290, 23, 290],
    //     ['2025', 330, 65, 330],
    //   ]
    // },



    xAxis: { type: 'category',
    data:form.value.lable14.name.split(","),
    axisLabel: {
      interval: 0, //隔几项显示一个标签
      rotate: "-90" //标签倾斜的角度，旋转的角度是-90到90度
    }
  },
    yAxis: {},
    series: [
      { 
        name: 'DIS',
        type: 'line', 
        data: form.value.lable14.year.split(","),
    
       },
      {
        name: 'DSZ',
        type: 'line', 
        data: form.value.lable14.date.split(","),
      },
      // { name: '预测/实绩用量', type: 'line' }
    ]
  })
  return { chartRef, option }
}

export function pieData1() {
  const chartRef = ref()
  const option = ref<EChartsOption>({
    title: {
      text: form.value.lable8.name,
      // subtext: 'Fake Data',
      left: 'center',
      textStyle: { color: '#4075E1', }
    },
    tooltip: {
      trigger: 'item'
    },
    grid: { left: '20', top: '30', right: '70', bottom: '10', containLabel: true },
    // legend: {
    //   orient: 'vertical',
    //   left: 'left'
    // },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        selectedMode: 'single',
        radius: [0, '30%'],
        label: {
          position: 'inner',
          fontSize: 14
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1548, name: '铝',label:{color:'#fff',fontSize:'16px',fontWeight:'bold'} },
          { value: 775, name: '铁',label:{color:'#fff',fontSize:'16px',fontWeight:'bold'} },
          { value: 679, name: '铜', selected: true ,label:{color:'#fff',fontSize:'16px',fontWeight:'bold'}}
        ],
        // 自定义颜色
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
          normal: {
            // 自定义每个扇形的颜色
            color: function (params) {
              const colorList = ['#3EC22B', '#3EC22B', '#3EC22B',];
              return colorList[params.dataIndex];
            },
          },
        },
      },
      {
        name: 'Access From',
        type: 'pie',
        radius: ['45%', '60%'],
        avoidLabelOverlap: false,
        itemStyle: {
          // borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 4
        },
        labelLine: {
          length: 30
        },
        label: {
          formatter: ' {b|{b}：}{c}吨 ',
          backgroundColor: '#F6F8FC',
          borderColor: '#8C8D8E',
          borderWidth: 1,
          borderRadius: 4,
          
          rich: {
            a: {
              color: '#6E7079',
              lineHeight: 22,
              align: 'center'
            },
            hr: {
              borderColor: '#8C8D8E',
              width: '100%',
              borderWidth: 1,
              height: 0
            },
            b: {
              color: '#4C5058',
              fontSize: 14,
              fontWeight: 'bold',
              lineHeight: 33
            },
            per: {
              color: '#fff',
              backgroundColor: '#4C5058',
              padding: [3, 4],
              borderRadius: 4
            }
          }
        },
        data: [
          { value: 335, name: '铝' },
          { value: 310, name: '铁' },
          { value: 135, name: '铜' },
        ],
         // 自定义颜色
        //  itemStyle: {
        //   borderColor: '#fff',
        //   borderWidth: 2,
        //   emphasis: {
        //     shadowBlur: 10,
        //     shadowOffsetX: 0,
        //     shadowColor: 'rgba(0, 0, 0, 0.5)',
        //   },
        //   normal: {
        //     // 自定义每个扇形的颜色
        //     color: function (params) {
        //       const colorList = ['#337EE6', '#337EE6', '#337EE6',];
        //       return colorList[params.dataIndex];
        //     },
        //   },
        // },
      }
    ]

  })
  return { chartRef, option }
}



export function pieData2() {
  const chartRef = ref()
  const option = ref<EChartsOption>({
    // legend: {
    //   top: 'bottom'
    // },
    title: {
      text: form.value.lable9.name,
      // subtext: 'Fake Data',
      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,
            // fontWeight: 'bold'
          }
        },
        labelLine: {
          show: true
        },
        // data: [
        //   { value: 1048, name: 'Search Engine' },
        //   { value: 735, name: 'Direct' },
        //   { value: 580, name: 'Email' },
        //   { value: 484, name: 'Union Ads' },
        //   { value: 300, name: 'Video Ads' }
        // ]
        data: Object.values(form.value.lable9.data).filter(item => item.name !== '' || item.value !== '')
      }
    ]

  })
  return { chartRef, option }
}

const gl = '10%'
export function liQuid() {
  const chartRef = ref()
  const option = ref({
    title: {
      text: '整体目标加' + gl,
      // subtext: 'Fake Data',
      left: 'center',
      bottom: '-5px',
      textStyle: { fontSize: '14px', fontWeight: '100' }
    },
    series: [{
      type: 'liquidFill',
      silent: true,
      data: [0.76, 0.55, 0.62],
      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 '原材料' + '\n'+ '\n'
            + (param.value * 100) + '%';
        },
      }
    }]

  })
  return { chartRef, option }
}

export function liQuids() {
  const chartRef = ref()
  const option = ref({
    title: {
      text: '整体目标加' + gl,
      // subtext: 'Fake Data',
      left: 'center',
      bottom: '-5px',
      textStyle: { fontSize: '14px', fontWeight: '100' }
    },
    series: [{
      type: 'liquidFill',
      silent: true,
      data: [0.8, 0.65, 0.72],
      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 '能源消耗' + '\n'+ '\n'
            + (param.value * 100) + '%';
        },
      }
    }]

  })
  return { chartRef, option }
}