import{i as N,L as _}from"./echarts.72dc8373.js";import{p as z}from"./enum.5c541b34.js";import{p as W,X as R}from"./index.34b03be2.js";import O from"./index.2eccdd6a.js";import{e as L}from"./emitter.233282e9.js";import{d as T,r as c,k as q,j as U,A as B,w as P,ai as C,aq as j,P as X,o as $,c as G,U as u,O as p,S as b,a as Q}from"./vue.adf17aba.js";import{_ as F}from"./_plugin-vue_export-helper.c27b6911.js";import"./elementPlus.4833989a.js";import"./mCard.a1ece416.js";import"./index.05a2d588.js";const H=T({name:"DataTendencyChart",__name:"index",props:{fetchCard:{},fetchLine:{},fetchLineMonth:{},fetchLineWeek:{},query:{},initMetric:{default:()=>[{metric:"Impression",color:"#0085ff",label:"曝光量"},{metric:"Click",color:"#3fd4cf",label:"点击量"},{metric:"Spend",color:"#ff9500",label:"花费"}]},metricEnum:{default:()=>z}},emits:["changeStatDim"],setup(M,{emit:D}){const s=M,r=c(s.initMetric),f=c([]);let l;const w=c(),d=c("day"),i={dataset:{source:[]},tooltip:{trigger:"axis",axisPointer:{label:{backgroundColor:"#6a7985"}}},legend:{selected:{},show:!1},grid:{top:50,right:150,bottom:30,left:65},xAxis:{type:"category"},yAxis:[{id:0,type:"value",name:"",splitLine:{show:!0},axisLine:{show:!0,lineStyle:{color:""}},show:!0},{id:1,type:"value",name:"",position:"right",splitLine:{show:!1},axisLine:{show:!0,lineStyle:{color:""}},show:!0},{id:2,type:"value",position:"right",offset:90,name:"",splitLine:{show:!1},axisLine:{show:!0,lineStyle:{color:""}},show:!0},{id:3,type:"value",position:"right",offset:90,name:"",splitLine:{show:!1},axisLine:{show:!0,lineStyle:{color:""}},show:!0}],series:[{id:0,name:"",type:"bar",encode:{x:"Name",y:""},barWidth:"16px",yAxisIndex:0,itemStyle:{color:"",borderRadius:4}},{id:1,name:"",type:"line",encode:{x:"Name",y:""},symbolSize:6,symbol:"circle",smooth:!0,yAxisIndex:1,itemStyle:{},areaStyle:{},emphasis:{focus:"series"}},{id:2,name:"",type:"line",encode:{x:"Name",y:""},symbolSize:6,symbol:"circle",smooth:!0,yAxisIndex:2,itemStyle:{},areaStyle:{},emphasis:{focus:"series"}},{id:3,name:"NewMetric",type:"line",encode:{x:"Name",y:r.value[1].metric},symbolSize:6,symbol:"circle",smooth:!0,yAxisIndex:0,itemStyle:{color:"#1e1e2d",borderColor:"#1e1e2d"},areaStyle:{},emphasis:{focus:"series"}}]},n=c(!0),m=q(()=>W(s.query));U(()=>{g(),E(),setTimeout(()=>{k()},0)}),B(()=>{l&&(l.dispose(),l=null),I()}),P(s.query,async()=>{L.emit("DateTendency-changeStatDim"),n.value=!0,await g();const o=await y();x("changeStatDim",o);const t={dataset:{source:o}};l.setOption(t),n.value=!1});async function k(){l=N(w.value),i.dataset.source=await y();const o=r.value.slice(0,3),t=o.map((e,a)=>({id:a,name:e.label,type:a===0?"bar":"line",encode:{x:"Name",y:e.metric},yAxisIndex:a,itemStyle:{color:a===0?"#0085ff":e.color,borderRadius:[6,6,6,6]},lineStyle:{color:e.color},barMaxWidth:"16px",areaStyle:a!==0?{color:new _(0,0,0,1,[{offset:0,color:e.color+"53"},{offset:1,color:e.color+"03"}])}:void 0}));i.series=[...t,...i.series.slice(3)],i.yAxis=o.map((e,a)=>({id:a,name:e.label,type:"value",position:a===0?"left":"right",offset:a>1?(a-1)*80:0,axisLine:{show:!0,lineStyle:{color:e.color}},splitLine:{show:a===0},show:!0})),i.legend.selected=s.metricEnum.reduce((e,a)=>(e[a.label]=o.some(h=>h.metric===a.value),e),{}),l.setOption(i),n.value=!1}function A(){const o=r.value.slice(0,3);for(i.legend.selected=s.metricEnum.reduce((t,e)=>(t[e.label]=r.value.some(a=>a.metric===e.value),t),{}),i.series=o.map((t,e)=>{const a={id:e,name:t.label,type:t.color==="#0085ff"?"bar":"line",encode:{x:"Name",y:t.metric},yAxisIndex:e,itemStyle:{color:t.color,borderRadius:[6,6,6,6]},lineStyle:{color:t.color},barMaxWidth:"16px"};return a.type!="bar"&&(a.areaStyle={color:new _(0,0,0,1,[{offset:0,color:t.color+"53"},{offset:1,color:t.color+"03"}])}),a}),i.yAxis=o.map((t,e)=>({id:e,name:t.label,type:"value",position:e===0?"left":"right",offset:e>1?(e-1)*80:0,axisLine:{show:!0,lineStyle:{color:t.color}},splitLine:{show:e===0},show:!0}));i.yAxis.length>o.length;)i.yAxis.pop();l.setOption(i,!0)}async function y(){if(d.value==="week"){if(s.fetchLineWeek)return(await s.fetchLineWeek(m.value)).data}else if(d.value==="month"){if(s.fetchLineMonth)return(await s.fetchLineMonth(m.value)).data}else return(await s.fetchLine(m.value)).data}async function g(){const t=(await s.fetchCard(m.value)).data;f.value.length=0,R.arrayEach(s.metricEnum,e=>{const a={label:e.label,value:e.value,metricVal:t[e.value],gapVal:t[`gap${e.value}`],preVal:t[`prev${e.value}`]};f.value.push(a)})}const x=D;async function V(){L.emit("DateTendency-changeStatDim"),n.value=!0;let o=await y();o.length>0&&l.setOption({dataset:{source:o}}),n.value=!1,x("changeStatDim",o)}function S(){l.resize()}function E(){window.addEventListener("resize",S)}function I(){window.removeEventListener("resize",S)}return(o,t)=>{const e=C("el-radio-button"),a=C("el-radio-group"),h=j("loading");return X(($(),G("div",null,[u(O,{modelValue:r.value,"onUpdate:modelValue":t[0]||(t[0]=v=>r.value=v),"metric-items":f.value,onChange:A},null,8,["modelValue","metric-items"]),u(a,{modelValue:d.value,"onUpdate:modelValue":t[1]||(t[1]=v=>d.value=v),class:"chart-button-group",onChange:V},{default:p(()=>[u(e,{label:"day"},{default:p(()=>[b("日")]),_:1}),u(e,{label:"week",disabled:!s.fetchLineWeek},{default:p(()=>[b("周")]),_:1},8,["disabled"]),u(e,{label:"month",disabled:!s.fetchLineWeek},{default:p(()=>[b("月")]),_:1},8,["disabled"])]),_:1},8,["modelValue"]),Q("div",{style:{height:"350px"},ref_key:"chartRef",ref:w},null,512)])),[[h,n.value]])}}});const le=F(H,[["__scopeId","data-v-89752dd0"]]);export{le as default};