<script setup lang="ts">
import { ref } from "vue";
import { useAsync } from "/@/hooks/core/useAsync";
import { ModalTypes } from "./../types";
import { httpUpdateReport } from "/@/api/system/wechatManager";


const emit = defineEmits(["refresh"]);

const visible = ref(false);

const defaultData = {
  rep_name: "",
  time: [],
  id: ""
};

const formData = ref<Record<string, any>>({ ...defaultData });

const { run, loading } = useAsync({
  success: () => { 
    emit("refresh");
    visible.value = false;
  },
  responseCode: 1
});


function handleSave() {
    const {id, time} = formData.value;
    run(httpUpdateReport({
      id,
      start:time[0],
      end:time[1]
    }));
}

defineExpose({
  onDisplay: (_data?: any, type?: ModalTypes) => {
    visible.value = true
    const { rep_name,id,start,end } = _data;

    formData.value = { 
      id, 
      rep_name,
      time:[start,end]
     };

     console.log(formData.value)
  }
});
</script>

<template>
  <ElDialog center v-model="visible" :title="title" :close-on-click-modal="false" width="1024px">
    <ElForm v-loading="loading">
      <ElFormItem label="报表名称" prop="report_name">
        <ElInput placeholder="报表名称" disabled v-model="formData.rep_name" />
      </ElFormItem>
      <ElFormItem label="修改时间" prop="time">
        <el-date-picker type="daterange" v-model="formData.time"  value-format="YYYY-MM-DD" />
      </ElFormItem>

      <ElFormItem>
        <div class="flex w-full justify-end">
          <ElButton type="取消" @click="() => (visible = false)">取消</ElButton>
          <ElButton type="primary" @click="() => handleSave()">保存</ElButton>
        </div>
      </ElFormItem>
    </ElForm>
  </ElDialog>
</template>


<style lang="scss" scoped>
.report {
  margin-bottom:10px;
  &__wrapper{
    display:flex;
    border-bottom:1px solid #dfe6ec;
    border-right:1px solid #dfe6ec;

    &:first-child {
      border-top:1px solid #dfe6ec;
    }

    .left {
      min-width:100px;
      border:1px;
      border-right:1px solid #dfe6ec;
      border-left:1px solid #dfe6ec;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-direction:column;
    }

    .right {
      flex:1;
      .company {
        display:flex;
        flex-direction: column;
        padding:0px 10px;
        width:100%;

        .title {
          border-bottom:1px dashed #dfe6ec;
          line-height:35px;
          color:#97a8be;
          font-size:16px;
        }
      }
    }
  }
}
</style>
