<template>
  <div class="system-user-dialog-container">
    <el-dialog v-model="state.dialog.isShowDialog" :close-on-click-modal="false" width="400px" draggable>
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <span>上传报表</span>
        </div>
      </template>
      <el-form ref="userDialogFormRef" :model="state.ruleForm" size="default" label-width="80px" :rules="rules">
        <el-row :gutter="35">
          <el-col :xs="24" class="mb20">
            <el-form-item label="版本号" prop="version">
              <el-input v-model="state.ruleForm.version" type="text" placeholder="请输入版本号" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" class="mb20">
            <el-form-item label="报表类型" prop="type">
              <el-select v-model="state.ruleForm.type" placeholder="请选择报表类型" style="width: 100%">
                <el-option v-for="item in state.soption" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" class="mb20">
            <el-form-item label="备注">
              <el-input v-model="state.ruleForm.remark" type="textarea" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" class="mb20" v-if="state.dialog.isShowDialog">
            <el-upload accept="xlsx,xls" class="upload-demo" ref="uploadRef" :on-success="onsuccess" :on-change="onchange"
              :limit="1" :auto-upload="false" drag :headers="state.headers" :data="state.data" :action="state.action"
              multiple>
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                请点击或选择文件 <em>点击选择</em>
              </div>
            </el-upload>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSubmit" size="default">{{
            state.dialog.submitTxt
          }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="systemUserDialog">
import { reactive, ref, defineAsyncComponent, nextTick } from "vue";
import { ElAlert, ElMessage, ElNotification, rowProps } from "element-plus";
import { UploadFilled } from '@element-plus/icons-vue'
import { getApi } from "/@/api/district/setting";
import type { UploadInstance } from 'element-plus'
import { Session } from '/@/utils/storage';
import { useCurrentInstance } from "/@/method/get";
const { proxy } = useCurrentInstance();

const uploadRef = ref<UploadInstance>()

// 定义子组件向父组件传值/事件
const emit = defineEmits(["refresh"]);
const userDialogFormRef = ref();

const forms = {
  type: "",
  version: '',
  excel: '',
  excelUrl: [],
  remark: ''
};

// 定义变量内容
const state = reactive({
  ruleForm: {
    type: "",
    remark: '',
    version: '',
    excel: '',
    excelUrl: []
  } as any,
  headers: {
    accessToken: `${Session.get('token')}`
  },
  action: getApi().uploadApi(),
  data: {
    type: ""
  },
  dialog: {
    isShowDialog: false,
    type: "",
    title: "",
    submitTxt: "",
  },
  soption: [
    { label: "市场运行报告", value: '1' },
    { label: "数据日报", value: '2' },
    { label: "数据月报", value: '3' },
    { label: "建设部报表", value: '4' },
    { label: "省厅报表", value: '5' },
  ] as any

});
// 表单验证
const rules = reactive({
  type: [{ required: true, message: "请选择报表类型", trigger: "blur" }],
  version: [{ required: true, message: "请输入版本号", trigger: "blur" }],
});

const onchange = (e: any) => {
  state.ruleForm.excelUrl.push(e)
}

// 打开弹窗
const openDialog = (row?: any) => {
  state.ruleForm = Object.assign({}, forms);
  if (row == undefined) {
    state.dialog.submitTxt = "新 增";
  } else {
    state.dialog.submitTxt = "修 改";
    nextTick(() => {
      state.ruleForm = {
        id: row.id,
        excel: row.excelUrl,
        version: row.version,
        type: '' + row.type + '',
        remark: row.remark,
        excelUrl: []
      };
    })
  }
  state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
  closeDialog();
};
// 提交
const onSubmit = async () => {
  let _form = state.ruleForm;
  if (_form.type == "") return ElMessage.error("请选择报表类型");
  if (_form.id == undefined) {
    if (_form.excelUrl.length == 0) return ElMessage.error("请选择文件");
    state.data.type = _form.type;
    uploadRef.value!.submit()
  } else {
    if (_form.excelUrl.length == 0) {
      let form = {
        id: state.ruleForm.id,
        type: state.ruleForm.type,
        version: state.ruleForm.version,
        remark: state.ruleForm.remark
      } as any
      putapi(form)
    } else {
      state.data.type = _form.type;
      uploadRef.value!.submit()
    }
  }



};
function onsuccess(e: any) {
  let form = {
    type: state.ruleForm.type,
    excelUrl: e.data.path,
    remark: state.ruleForm.remark,
    version: state.ruleForm.version
  } as any
  if (state.ruleForm.id != undefined) {
    form.id = state.ruleForm.id
    putapi(form)
  } else {
    upload(form)
  }
}

async function putapi(e: any) {
  let item = await getApi().editApi(e)
  if (item.success) {
    ElMessage.success(item.msg)
    state.dialog.isShowDialog = false;
    emit('refresh')
  } else {
    ElMessage.error(item.msg)
  }
}

async function upload(e: object) {
  let item = await getApi().saveApi(e)
  if (item.success) {
    ElMessage.success(item.msg)
    state.dialog.isShowDialog = false;
    emit('refresh')
  } else {
    ElMessage.error(item.msg)
  }
}

// 暴露变量
defineExpose({
  openDialog,
});
</script>
