<template>
  <div>
    <el-button type="primary" @click="addCategory">新增分类</el-button>
    <el-button type="primary" @click="exportExcel">导出Excel</el-button>
    <hr>
    <el-table :data="filterTableData" style="width: 100%" height="480">
      <el-table-column fixed label="id" prop="id" />
      <el-table-column label="分类名称" prop="name" />
      <el-table-column label="描述" prop="description" />
      <el-table-column align="right">
        <template #header>
          <div>
            <el-input v-model="searchtext" size="small" placeholder="请输入分类名" @keyup.enter.native="search" />
          </div>
        </template>
        <template #default="scope">
          <div>
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改信息 -->
    <div>
      <el-dialog title="修改信息" :visible.sync="centerDialogVisible" width="50%" center>
        <el-form ref="formDto" v-model="formDto" label-width="80px">
          <el-form-item label="分类名称">
            <el-input v-model="formDto.name" />
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="formDto.description" />
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelUpdate()">取 消</el-button>
          <el-button type="primary" @click="confirmForm(formDto)">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <!--    增加家政分类 -->
    <div>
      <el-dialog title=" 增加家政分类 " :visible.sync="addDialogVisible" width="50%" center>
        <el-form ref="addMsg" :model="addMsg" label-width="80px">
          <el-form-item label="分类名称">
            <el-input v-model="addMsg.name" />
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="addMsg.description" />
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addForm()">添加</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getCategoryList,
  updateCategoryList,
  addCategoryList,
  delCategoryList,
  getCategoryListByName,
  exportCategoryExcel
} from '@/api/admin'
import { Message } from 'element-ui'
export default {
  name: 'CategoryList',
  data() {
    return {
      searchtext: '',
      addDialogVisible: false,
      centerDialogVisible: false,
      filterTableData: [],
      formDto: [],
      form: [],
      addMsg: {}
    }
  },
  created() {
    getCategoryList().then((response) => {
      if (response.data.code === 200) {
        this.filterTableData = response.data.data.rows
      }
    })
  },
  methods: {
    // 新增家政分类
    addCategory() {
      this.addDialogVisible = true
    },
    addForm() {
      console.log(this.addMsg)
      addCategoryList(this.addMsg).then((response) => {
        if (response.data.code === 200) {
          Message({
            message: response.data.msg,
            type: 'success',
            duration: 1500
          })
          this.addDialogVisible = false
          getCategoryList().then((response) => {
            if (response.data.code === 200) {
              this.filterTableData = response.data.data.rows
            }
          })
        }
      })
    },
    search() {
      let param = {
        categoryName: this.searchtext,
      }
      getCategoryListByName(param).then(response => {
        if (response.data.code === 200) {
          this.filterTableData = response.data.data.rows
          if (this.filterTableData.length === 0) {
            Message({
              message: '对不起，找不到该分类',
              type: 'warning',
              duration: 1500
            })
          } else {
            Message({
              message: response.data.msg,
              type: 'success',
              duration: 1500
            })
          }
        }
      })
    },
    exportExcel() {
      exportCategoryExcel().then(res => {
        const link = document.createElement("a");
        let blob = new Blob([res.data], { type: "multipary/form-data" });
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        link.setAttribute("download", decodeURI('家政分类.xlsx'));
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        Message({
          message: '导出成功',
          type: 'success',
          duration: 1500
        })
      })
    },
    handleEdit(index, row) {
      this.formDto = JSON.parse(JSON.stringify(row))
      this.centerDialogVisible = true
    },
    confirmForm(form) {
      updateCategoryList(form).then((response) => {
        if (response.data.code === 200) {
          Message({
            message: response.data.msg,
            type: 'success',
            duration: 1500
          })
          this.centerDialogVisible = false
          getCategoryList().then((response) => {
            if (response.data.code === 200) {
              this.filterTableData = response.data.data.rows
            }
          })
        }
      })
    },
    // 取消修改
    cancelUpdate() {
      this.centerDialogVisible = false
    },
    // 删除分类
    handleDelete(index, row) {
      delCategoryList(row.id).then((response) => {
        if (response.data.code === 200) {
          Message({
            message: response.data.msg,
            type: 'success',
            duration: 1500
          })
          getCategoryList().then((response) => {
            if (response.data.code === 200) {
              this.filterTableData = response.data.data.rows
            }
          })
        }
      })
    }
  }
}
</script>
<style scoped>
::v-deep .el-button--primary {
  color: #ffffff;
  background-color: #1890ff;
  border-color: #1890ff;
  margin-top: 2rem;
  margin-left: 1rem;
  margin-bottom: 1rem;
}
</style>
