<template>
  <div>
    <el-card :body-style="{ padding: '5px' }">
      <header-box :search="search" :multipleSelection="multipleSelection" @searchClick="getData" />
    </el-card>
    <el-card :body-style="{ padding: '5px' }">
      <div class="btn-box">
        <!-- <el-button @click="add" type="primary" size="mini">新增</el-button> -->
        <el-button v-if="showButtons.sc" @click="del(2)" type="danger" size="mini">删除</el-button>
      </div>
    </el-card>
    <el-card :body-style="{ padding: '5px' }">
      <content-box :tableData='tableData' :showButtons="showButtons" :tableLoading='tableLoading' :fondsList="fondsList"
        :pagination='pagination' @getData='getData' @edit='edit' @del="del"
        @handleSelectionChange="handleSelectionChange" />
    </el-card>
    <dia-box ref="diaBox" @cancel='cancel' :title='title' :isDiaBox='diaStatus' :fondsList="fondsList"
      @getData='getData' />
  </div>
</template>
<script>
  import diaBox from "./components/diaBox.vue"
  import headerBox from "./components/header.vue"
  import contentBox from "./components/content.vue"
  import {
    clearObjValue,
    message,
    getCurrentTime,
    dateFormatT
  } from '@/utils/common';
  import {
    getSuperviseList,
    deleteSupervise
  } from "@/api/supervise-management/supervise-guide"
  import {
    getFondWithPageUser
  } from "@/api/system-management/allAdministration";
  import {
    getButtonList
  } from "@/api/user"
  export default {
    data() {
      return {
        search: {
          time: ""
        },
        title: "",
        params: {},
        diaStatus: false,
        tableData: [],
        tableLoading: false,
        pagination: {
          pageSize: 10,
          pageNum: 1,
          total: 6,
        },
        fondsList: [],
        multipleSelection: [],
        showButtons: {
          sc: false
        }
      }
    },
    components: {
      headerBox,
      contentBox,
      diaBox
    },
    methods: {
      add() {
        // clearObjValue(this.$refs.diaBox.form)
        // this.$refs.diaBox.$refs['ruleForm'].resetFields();
        this.title = "新增"
        this.diaStatus = true
        this.$refs.diaBox.form.fileDate = getCurrentTime()
      },
      del(key, val) {
        if (key === 2 && !this.multipleSelection.length) {
          message("warning", "请先选择要删除的数据", 3000)
          return
        }
        let ids = key === 1 ? val.id : this.multipleSelection.map(ele => ele.id).join(",")

        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteSupervise({
            ids
          }).then(res => {
            message("success", "删除成功", 3000)
            this.getData()
          })
        }).catch(() => {});
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      getFondList() {
        getFondWithPageUser().then(res => {
          this.fondsList = res.body.list;
        });
      },
      getData() {
        this.params = {
          page: this.pagination.pageNum,
          limit: this.pagination.pageSize,
          startDate: this.search.time ? dateFormatT(this.search.time).start : "",
          endDate: this.search.time ? dateFormatT(this.search.time).end : ""
        }
        this.tableLoading = true
        getSuperviseList(this.params).then(res => {
          this.tableData = res.body.list
          this.pagination.total = res.body.total
        }).finally(() => {
          this.tableLoading = false
        })
      },
      edit(val) {
        for (let key in this.$refs.diaBox.form) {
          this.$refs.diaBox.form[key] = val[key]
        }
        this.title = "修改"
        this.diaStatus = true
      },
      cancel() {
        this.diaStatus = false
        // this.$refs.diaBox.$refs['ruleForm'].resetFields();
      },
      getButtonListqx(btnData) {
        getButtonList(btnData).then(res => {
          res.body.list.forEach(item => {
            this.showButtons[item.key] = true
          })
        })
      }
    },
    created() {
      this.getFondList()
      this.getData()
      this.treeType = this.$getMenuId(
        sessionStorage.getItem("funcTypeCodeList"),
        this.$route.path
      );
      let btnData = {
        menuid: this.$getMenuId(sessionStorage.getItem("routerIdList"), this.$route.path),
        roleid: sessionStorage.getItem("roleid")
      }
      this.getButtonListqx(btnData)
    }
  }

</script>
