<template>
  <div>
    <el-button type="primary" @click="exportAll">导出</el-button>
    <el-button type="primary" @click="addData">新建</el-button>
    <ul class="mt20 sheet-list">
      <li v-for="(item, index) in tableData" :key="index">
        <h3 class="icon-file"></h3>
        <p class="font-size-16 text-center">
          {{ item.title }}
        </p>
      </li>
    </ul>

    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      width="700px"
      destory-on-close
    >
      <el-form
        :model="dialogForm"
        ref="dialogForm"
        :rules="rules"
        :inline="true"
        label-width="80px"
      >
        <el-form-item label="标题" prop="bt">
          <el-input v-model="dialogForm.bt" placeholder="请输入标题"></el-input>
        </el-form-item>

        <el-form-item label="时间" prop="sj">
          <el-date-picker
            v-model="dialogForm.sj"
            placeholder="选择日期"
            type="date"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="附件" prop="fj">
          <FileUpload
            v-if="dialogFormVisible"
            :limit="5"
            :full.sync="dialogForm.fj"
            :key="timestamp"
            multiple
          >
            <div slot="tip" class="el-upload__tip">
              支持文件类型:doc(.docx)、.ppt(.pptx)、.xls(.xlsx)、.pps、.wps、.pdf、.txt文件格式。
            </div>
          </FileUpload>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="formCancel">取 消</el-button>
        <el-button type="primary" @click="formSubmit('dialogForm')"
          >发 送</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { tzbb_list, tzbb_add } from "./api";
import FileUpload from "@/components/FileUpload/index.vue";
import { useUserStore } from "@/stores/user";
const { token } = useUserStore();
export default {
  name: "index",
  components: {
    FileUpload,
  },
  data() {
    return {
      limit: 10,
      total: 12,
      cur_page: 1,
      keyword: "",
      class_name: "",
      dialogForm: {
        bt: "",
        sj: "",
        fj: "",
      },
      rules: {
        bt: [{ required: true, message: "请输入标题", trigger: "blur" }],
        sj: [{ required: true, message: "请选择日期", trigger: "blur" }],
        fj: [{ required: true, message: "请上传附件", trigger: "blur" }],
      },
      type_list: [],
      tableData: [],
      title: "",
      multipleSelection: [],
      id: "",
      loading: false,
      dialogFormVisible: false,
      timestamp: Date.now(),
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getListData();
    },
    getListData() {
      this.loading = true;
      let data = {
        page: this.cur_page,
        limit: this.limit,
        keyword: this.keyword,
      };

      tzbb_list(data).then((res) => {
        this.loading = false;
        this.tableData = res.data.page_data;
      });
    },
    addData() {
      this.title = "新建报表";
      this.dialogForm = {
        bt: "",
        sj: "",
        fj: "",
      };
      this.dialogFormVisible = true;
    },

    formSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            title: this.dialogForm.bt,
            sj: this.dialogForm.sj,
            fj: this.dialogForm.fj,
          };

          tzbb_add(data).then((res) => {
            if (res.code == 1) {
              this.$message({
                message: "报表添加成功！",
                type: "success",
              });
              this.dialogFormVisible = false;
              this.getListData();
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          });
        }
      });
    },
    exportAll() {
      let link =
        window.globalVariables.api +
        "/xddy/xstzjk_tzlb/index?api=xls&page=1&limit=10000&token=" +
        token;
      window.open(link, "_blank");
    },
    formCancel() {
      this.dialogFormVisible = false;
    },
  },
  mounted() {
    this.getListData();
  },
};
</script>


<style scoped lang="scss"  scoped>
.sheet-list {
  display: flex;
  li {
    width: 60px;
    margin: 0 50px 20px 0;
    text-align: center;
    cursor: pointer;
    .icon-file {
      margin: 0 auto 10px;
      width: 51px;
      height: 41px;
      background: url("@/assets/images/a-1.png") center no-repeat;
    }
  }
}
</style>