<template>
  <div>
    <PageTitle :title="pageTitle">
      <el-button @click="black"><el-icon>
          <DocumentDelete />
        </el-icon>关闭</el-button>
      <el-button type="primary" @click="submit(ruleFormRef)">
        <el-icon>
          <DocumentChecked />
        </el-icon>保存</el-button>
    </PageTitle>

    <div></div>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="查询" name="1">
        <div class="table">
          <MyTable :tableData="data.tableData" :tableColumn="data.tableColumn" :tableConfiger="data.tableConfiger"
            @chooseData="chooseData">
          </MyTable>
        </div>
      </el-collapse-item>
      <el-collapse-item title="新增" name="2">
        <div style="
            display: flex;
            justify-content: center;
            width: calc(100%-40px);
            margin-left: 20px;
          ">
          <el-form ref="ruleFormRef" :model="data.formData" :rules="rules" label-width="120px" class="demo-ruleForm"
            status-icon :inline="true" label-position="top">
            <el-row :gutter="80">
              <el-col :span="18">
                <MOSTY.Upload :isAutoWidth="true" :limit="1" :nopicer="true" :isImg="false" :ShowfileList="true"
                 :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" v-model="data.formData.fileId" :delrow="delrow" @filehandleChange="changeFile"></MOSTY.Upload>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
import {
  reactive,
  ref,
  watchEffect,
  getCurrentInstance,
  watch,
  nextTick
} from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import MyTable from "@/components/aboutTable/MyTable/index.vue";
import PageTitle from "@/components/PageTitle/PageTitle.vue";
import * as rule from "@/utils/rules.js";
const { proxy } = getCurrentInstance();
const props = defineProps({
  editObj: {
    type: Object,
    default: () => { }
  }
});
const data = reactive({
  formData: {
    fileId: "" //一季度占比(%)
  },
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      label: "附件类型",
      prop: "fjlx",
      showOverflowTooltip: false,
      sortable: false
    },
    {
      label: "附件名称",
      prop: "fjmc",
      showOverflowTooltip: false,
      sortable: false
    },
    {
      label: "附件字节",
      prop: "fjzj",
      showOverflowTooltip: false,
      sortable: false
    },
    {
      label: "附件大小",
      prop: "fjdx",
      showOverflowTooltip: false,
      sortable: false
    },
    {
      label: "下载次数",
      prop: "xzcs",
      showOverflowTooltip: false,
      sortable: false
    }
  ],
  tableConfiger: {
    haveControls: false,
    showIndex: false,
    loading: false,
    height: 400,
    rowHeight: 61
  },
  pageConfiger: {
    pageSize: 10,
    pageCurrent: 1,
    total: 0
  },
  deptId: "",
  clickTree: null,
  searchFont: "",
  treedata: [],
  treePorps: {
    label: "name",
    key: "associateId"
  },
  dialogVisible: false,
  modelTitle: "新增部门",
  formData: {
    orgName: "", // 部门名称
    parentId: "", // 上级部门的关联id
    bz: "" // 备注
  },
  rules: {
    orgName: [
      {
        required: true,
        message: "请输入部门名称",
        trigger: "blur"
      }
    ]
  }
});
const activeNames = ref(["1"]);
const delrow = ref({}); //删除文件列表
const emit = defineEmits("changePage");
const ruleFormRef = ref();
let pageTitle = ref("新增比例配置");
const rules = reactive({
  yjdzb: [
    {
      required: true,
      message: "请输入一季度占比(%)",
      trigger: "blur"
    }
  ],
  ejdzb: [
    {
      required: true,
      message: "请输入二季度占比(%)",
      trigger: "input"
    }
  ],
  sjdzb: [
    {
      required: true,
      message: "请输入三季度占比(%)",
      trigger: "blur"
    }
  ],
  sijdzb: [
    {
      required: true,
      message: "请输入四季度占比(%)",
      trigger: "blur"
    }
  ],
  ndzb: [
    {
      required: true,
      message: "请输入年度占比(%)",
      trigger: "blur"
    }
  ]
});

// 保存
const submit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      // let attr = JSON.parse(JSON.stringify(data.formData));
      // const fnName = pageTitle == "修改" ? "userUpdate" : "userSave";
      // fns[fnName](attr).then((res) => {
      //   const message = pageTitle == "修改" ? "修改成功" : "添加成功";
      //   proxy.$message({
      //     message,
      //     type: "success"
      //   });
      //   emit("changePage", "Main");
      // });
    }
  });
};

const black = () => {
  emit("changePage", "Main");
};

watchEffect(() => {
  if (props.editObj) {
    data.formData = JSON.parse(JSON.stringify(props.editObj));

  }
});
</script>

<style lang="scss" scoped>
::v-deep .el-cascader,
::v-deep .el-select {
  width: 100%;
}

.formBox {
  background-color: #fff;
}
</style>