<template>
  <div>
    <el-button type="primary" @click="addData">新建</el-button>
    <ul class="mt20 sheet-list">
      <li v-for="item in type_list" @click="bbxqData(item.value)">
        <h3 class="icon-file"></h3>
        <div class="font-size-16 text-center">
          <span v-if="item.value == 1">公共报表</span>
          <span v-else-if="item.value == 2">私有报表</span>
          <span v-else>系统报表</span>
        </div>
      </li>
    </ul>

    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="700px">
      <el-form
        :inline="true"
        :model="dialogForm"
        ref="dialogForm"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item class="mr75" label="表标题" prop="bbt">
          <el-input v-model="dialogForm.bbt"></el-input>
        </el-form-item>
        <el-form-item class="mr10" prop="rq" label="日期">
          <el-date-picker
            style="width: 100%"
            v-model="dialogForm.rq"
            type="date"
            placeholder="请选择日期"
            value-format="yyyy-MM-dd"
            clearable
            @change="getListData"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item class="mr10" label="类型" prop="lx">
          <el-select v-model="dialogForm.lx" style="width: 100%">
            <el-option
              v-for="item in type_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item class="mr75" label="创建人" prop="cjr">
          <el-select v-model="dialogForm.cjr" style="width: 100%">
            <el-option
              v-for="item in cjr_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="其他附件" prop="qtfj">
          <FileUpload
            :limit="5"
            :full.sync="dialogForm.qtfj"
            :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" class="text-center">
        <el-button @click="formCancel">取 消</el-button>
        <el-button type="primary" @click="formSubmit('dialogForm')"
          >发 送</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { bbgl_list, bbgl_add, bbgl_edit, bbgl_del, bbgl_export } from "./api";
import FileUpload from "@/components/FileUpload/index.vue";
import { useUserStore } from "@/stores/user";
const { token } = useUserStore();
const { real_name } = useUserStore();
export default {
  name: "index",
  components: {
    FileUpload,
  },
  data() {
    return {
      limit: 10,
      total: 12,
      cur_page: 1,
      keyword: "",
      class_name: "",
      dialogForm: {
        bbt: "",
        rq: "",
        lx: "",
        cjr: "",
        type: "",
      },
      rules: {
        bbt: [{ required: true, message: "请选择表标题", trigger: "blur" }],
        rq: [{ required: true, message: "请选择日期", trigger: "blur" }],
        lx: [{ required: true, message: "请选择类型", trigger: "blur" }],
        // cjr: [{ required: true, message: "请选择创建人", trigger: "blur" }],
      },
      type_list: [
        { label: "公共报表", value: "1" },
        { label: "私有报表", value: "2" },
        { label: "系统报表", value: "3" },
      ],
      // cjr_list: [
      //   {
      //     label: "小王",
      //     value: "1",
      //   },
      //   {
      //     label: "小李",
      //     value: "2",
      //   },
      //   {
      //     label: "小张",
      //     value: "3",
      //   },
      //   {
      //     label: "小赵",
      //     value: "4",
      //   },
      // ],
      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,
        xdxb_blx: this.dialogForm.type,
      };

      bbgl_list(data).then((res) => {
        this.loading = false;
        this.tableData = res.data.page_data;
      });
    },
    addData() {
      this.title = "新建报表";
      this.dialogForm = {
        bbt: "",
        rq: "",
        lx: "",
        cjr: "",
        type: "",
      };
      this.dialogFormVisible = true;
    },

    formSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            xdxb_title: this.dialogForm.bbt,
            xdxb_cjsj: this.dialogForm.rq,
            xdxb_blx: this.dialogForm.lx,
            xdxb_cjr: real_name,
          };
          if (!this.isEdit) {
            bbgl_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",
                });
              }
            });
          }
        }
      });
    },
    bbxqData(id) {
      this.$router.push({
        name: "xsxjk_bbgl_bbxq",
        params: { id: id },
      });
    },
    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>