<template>
  <div>
    <el-container>
      <!--搜索-->
      <el-header class="searchBox">
        <el-form :inline="true" size="mini" :model="searchForm" class="demo-form-inline">
          <el-form-item label="模板名称">
            <el-input v-model="searchForm.templateName" placeholder="模板名称" />
          </el-form-item>
          <el-form-item label="模板代码">
            <el-input v-model="searchForm.templateCode" placeholder="模板代码" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchBtn">查询</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
          <el-button style="float: right" type="warning" icon="el-icon-circle-plus-outline" @click="add">立即创建</el-button>
        </el-form>
      </el-header>

      <!--列表-->
      <el-main class="listBox">
        <el-row :gutter="40">
          <el-col v-for="(item,index) in tableData" :span="6" :key="index">
            <div class="imgBox">
              <el-image :src="imgurl+item.templatePhoto" style="width: 100%;height: 200px" fit="cover" />
              <div class="text">{{ item.templateName }}</div>
              <div class="text">ID：{{ item.templateCode }}</div>
              <div class="text flex">
                <a @click="edit(item)">编辑</a>
                <a @click="dele(item.id)">删除</a>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-main>

    </el-container>

    <!--新增抽屉-->
    <el-drawer
      ref="addDrawer"
      title="新增模板"
      size="50%"
      :before-close="addHandleClose"
      :with-header="false"
      :visible.sync="addDialog"
      direction="rtl"
      custom-class="demo-drawer"
    >
      <div class="demo-drawer__content">
        <span>编辑产品分类</span>
        <el-form :model="addForm">
          <el-form-item label="模板名称" label-width="80px">
            <el-input v-model="addForm.templateName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="模板ID" label-width="80px">
            <el-input v-model="addForm.templateCode" autocomplete="off" />
          </el-form-item>
          <el-form-item label="模板图示" label-width="80px">
            <el-upload
              class="avatar-uploader"
              :action="imgapi"
              :show-file-list="false"
              :on-success="picPreview"
            >
              <img v-if="picUrl" :src="picUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" :loading="loading" @click="$refs.addDrawer.closeDrawer()">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
      </div>
    </el-drawer>

    <!--编辑抽屉-->
    <el-drawer
      ref="editDrawer"
      title="编辑产品分类"
      size="50%"
      :before-close="editHandleClose"
      :with-header="false"
      :visible.sync="editDialog"
      direction="rtl"
      custom-class="demo-drawer"
    >
      <div class="demo-drawer__content">
        <span>编辑产品分类</span>
        <el-form :model="editForm">
          <el-form-item label="模板名称" label-width="80px">
            <el-input v-model="editForm.templateName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="模板ID" label-width="80px">
            <el-input v-model="editForm.templateCode" disabled autocomplete="off" />
          </el-form-item>
          <el-form-item label="模板图示" label-width="80px">
            <el-upload
              class="avatar-uploader"
              :action="imgapi"
              :show-file-list="false"
              :on-success="picPreview"
            >
              <img v-if="picUrl" :src="picUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" :loading="loading" @click="$refs.editDrawer.closeDrawer()">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>

</template>

<script>
import { post, get } from '@/api/common'
export default {
  name: 'ProduceClass',
  data() {
    return {
      lin: 'https://img.zcool.cn/community/017a155cf0ed61a801213ec229ad50.jpg@1280w_1l_2o_100sh.jpg',
      picUrl: '',
      imgapi: process.env.VUE_APP_BASE_IMG_API,
      imgurl: process.env.VUE_APP_BASE_IMG_URL,
      loading: false,
      editDialog: false,
      addDialog: false,
      searchForm: {
        templateName: '',
        templateCode: '',
        pageSize: 200,
        pageNum: 1
      },
      addForm: {
        templateName: '',
        templateCode: '',
        templatePhoto: ''
      },
      editForm: {
        templateName: '',
        templateCode: '',
        templatePhoto: ''
      },
      tableData: [],
      total: 5000
    }
  },
  created() {
    var that = this
    that.search()
  },
  methods: {
    async search() { // 同步搜索
      await get('/templateInfo/page', this.searchForm)
        .then((res) => {
          this.tableData = res.data.list
          console.log(this.tableData)
          this.total = res.data.total
        }).catch((err) => {
          console.log(err)
        })
    },
    searchBtn() { // 搜索按钮
      this.search()
    },
    reset() { // 重置
      this.searchForm = {
        cpid: '',
        categoryName: '',
        pageSize: 200,
        pageNum: 1
      }
      this.search()
    },
    add() { // 新增
      this.addDialog = true
    },
    addHandleClose(done) { // 新增数据
      if (this.loading) return
      this.$confirm('确定要提交吗？')
        .then(_ => {
          done()
          this.addDialog = true
          post('/templateInfo/create', this.addForm)
            .then((res) => {
              if (res.code === 10000) this.reset()
              setTimeout(() => {
                this.addDialog = false
              }, 400)
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch(_ => {
          this.addDialog = false
        })
    },
    edit(e) { // 编辑
      this.editForm = e
      this.editDialog = true
    },
    editHandleClose(done) { // 修改数据
      if (this.loading) return
      this.$confirm('确定要提交吗？')
        .then(_ => {
          done()
          this.editDialog = true
          post('/templateInfo/update/' + this.editForm.id, this.editForm)
            .then((res) => {
              if (res.code === 10000) this.reset()
              setTimeout(() => {
                this.editDialog = false
              }, 400)
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch(_ => {
          this.editDialog = false
        })
    },
    dele(e) { // 删除
      this.$confirm('确定要删除么？')
        .then(_ => {
          post('/templateInfo/delete', { ids: [e] })
            .then((res) => {
              if (res.code === 10000) this.reset()
            })
        })
    },
    cancelForm() { // 关闭抽屉
      console.log(123)
      this.loading = false
      this.editDialog = false
      this.addDialog = false
      clearTimeout(this.timer)
    },
    picPreview(file) {
      this.picUrl = process.env.VUE_APP_BASE_IMG_URL + file.data
      this.editForm.templatePhoto = file.data
      this.addForm.templatePhoto = file.data
    },
    handleSizeChange(e) { // 单页数量
      this.searchForm.pageSize = e
      this.search()
    },
    handleCurrentChange(e) { // 跳页
      this.searchForm.pageNum = e
      this.search()
    }
  }
}
</script>

<style scoped lang="scss">
.searchBox {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: #bfbfbf 0 0 2px;
  height: unset !important;
  form {
    margin: auto;
  }
}
.el-header {padding: 20px}
.el-form-item {margin-bottom: unset}
.flex {display: flex;justify-content: flex-end}
.listBox {
  margin-top: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: #bfbfbf 0 0 2px;
  height: unset !important;
  .imgBox {
    margin: 10px 0;
    border-radius: 6px;
    box-shadow: #c7c7c7 1px 1px 3px;
    .el-image {
      border-radius: 6px 6px 0 0;
    }
    .text {
      font-size: 14px;
      text-align: center;
      color: #333333;
      line-height: 24px;
      padding: 3px 15px;
      a{
        color: #20a0ff;
        padding: 0 10px;
      }
    }
  }
}

.demo-drawer__content {
  padding: 20px 5%;
  line-height: 32px;
  .el-form-item {
    margin-top: 20px;
  }
  .demo-drawer__footer {
    position: fixed;
    bottom: 30px;
    width: 45%;
    margin-top: 20px;
    display: flex;
    button {
      flex: 1;
    }
  }
}
.avatar-uploader {
  .el-upload {
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
}
.avatar-uploader-icon {
  background-color: #fbfdff;
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}
.avatar-uploader-icon:hover {
  border-color: #409EFF;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
</style>
