const { createApp, reactive } = Vue;
const app = createApp({
  setup(){
    const state = reactive({
      templates: [],
      job: {},
      form: {
        name: '',
        datasource: 'marketing',
        main_table: 'order',
        fieldsRaw: 'order_number,creator,out_trade_no,type,status,contract_price,num,total,pay_amount,create_time',
        creatorRaw: '',
        timeRange: [],
        file_format: 'csv',
        visibility: 'private',
        owner_id: '1'
      }
    })
    const msg = (t, type='success')=>ElementPlus.ElMessage({message:t,type});
    const fmtDT = (d)=>{
      const pad=(n)=>String(n).padStart(2,'0');
      return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
    }
    const loadTemplates = async ()=>{
      const res = await fetch('/api/templates');
      state.templates = await res.json();
    }
    const createTemplate = async ()=>{
      const fields = state.form.fieldsRaw.split(',').map(s=>s.trim()).filter(Boolean);
      const filters = {};
      if(state.form.creatorRaw){ filters.creator_in = state.form.creatorRaw.split(',').map(s=>Number(s.trim())).filter(x=>!isNaN(x)) }
      if(state.form.timeRange && state.form.timeRange.length===2){
        filters.create_time_between = [fmtDT(new Date(state.form.timeRange[0])), fmtDT(new Date(state.form.timeRange[1]))]
      }
      const payload = {
        name: state.form.name,
        datasource: state.form.datasource,
        main_table: state.form.main_table,
        fields,
        filters,
        file_format: state.form.file_format,
        owner_id: Number(state.form.owner_id),
        visibility: state.form.visibility
      }
      const res = await fetch('/api/templates',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)});
      if(res.ok){ msg('创建成功'); loadTemplates() } else { msg(await res.text(),'error') }
    }
    const runExport = async (id)=>{
      const payload={template_id:Number(id),requested_by:1,permission:{},options:{},file_format:'csv'};
      const r=await fetch('/api/exports',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)});
      const j=await r.json();
      loadJob(j.id);
    }
    const loadJob = async (id)=>{
      const res=await fetch('/api/exports/'+id);
      state.job = await res.json();
    }
    const download = (id)=>{ window.open('/api/exports/'+id+'/download','_blank') }
    loadTemplates()
    return { ...state, loadTemplates, createTemplate, runExport, loadJob, download }
  }
})
app.use(ElementPlus)
app.mount('#app')