<template>
  <div class="restaurant-classify">
    <el-form ref="form" label-width="100px" class="custom_form_cont">
      <el-form-item label="图集" class="form-item-tag">
        <el-col :sm="5">
          <el-select v-model="classifyId" placeholder="请选择" style="width: 100%">
            <el-option
              v-for="item in classifyList"
              :key="item.id"
              :label="item.classifyName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-col>
        <el-col :sm="3" :offset="1">
          <div style="width: 100%; position: relative" class="classify-manage">
            <el-button @click="classfiyHandleShow = true">图集管理</el-button>
            <div class="classify-warp" v-if="classfiyHandleShow">
              <el-form class="classify-add-form custom_form_no" :inline="true" size="mini">
                <el-form-item style="margin-bottom: 13px; float: left">
                  <el-input v-model="newClassfiyName" placeholder="请输入图集名称"></el-input>
                </el-form-item>
                <el-input-number style="margin-bottom: 13px; float: left;" v-model="newClassfiyOrder" controls-position="right" :min="1" size="mini"></el-input-number>
                <el-form-item style="margin-bottom: 13px; float: right">
                  <el-button @click="addNewClassfiyHandle">添加</el-button>
                  <el-button @click="classfiyHandleShow = false">关闭</el-button>
                </el-form-item>
              </el-form>
              <el-table
                :data="classifyList"
                height="250"
                border
                size="mini"
                :header-cell-style="{'background-color': '#3D4851', 'color': '#fff', 'padding': '2px 0', 'text-align': 'center'}"
                :cell-style="{'padding': '4px 0'}"
                class="classfiy-add-table"
                style="width: 100%">
                <el-table-column
                  type="index"
                  label="序号"
                  align="center"
                  width="50">
                </el-table-column>
                <el-table-column
                  prop="classifyName"
                  label="名称"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="createUser"
                  label="创建人"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="createTime"
                  align="center"
                  width="120"
                  label="创建时间">
                </el-table-column>
                <el-table-column
                  prop="address"
                  width="100"
                  fixed="right"
                  label="操作">
                  <template slot-scope="scope">
                    <button type="text" style="color: #666; text-decoration: underline" @click="changeClassfiyHandle(scope.row)">修改</button>
                    <button type="text" style="color: #666; text-decoration: underline" @click="delClassfiyHandle(scope.row.id)">删除</button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-form-item>
      <el-form-item label="图片上传" class="form-item-tag">
        <el-col :sm="5">
          <el-upload
            class="avatar-uploader"
            :action="$baseURL + '/diningroom/picture/upload'"
            :show-file-list="false"
            name="files"
            accept="image/jpeg,image/png"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="picturePath" :src="$imgUrl + picturePath" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <p class="img-upload-inter">* 请上传尺寸为 <em>650*370</em>,或参照这一比例(长度最小为650px),大小不超过<em>5M</em>的图片</p>
        </el-col>
      </el-form-item>
      <el-form-item label="图片大小">
        <el-col :sm="5">
          <el-input v-model="pictureSize" autocomplete="off" disabled="disabled"></el-input>
        </el-col>
      </el-form-item>
     <!-- <el-form-item label="图片排序">
        <el-col :sm="18">
          <el-input-number v-model="pictureOrder" controls-position="right" :min="1"></el-input-number>
        </el-col>
      </el-form-item>-->
      <el-form-item label="备注">
        <el-col :sm="5">
          <el-input v-model="pictureMark" autocomplete="off" type="textarea" :rows="5"></el-input>
        </el-col>
      </el-form-item>
    </el-form>
    <el-row style="margin-top: 50px">
      <el-col :span="3" :offset="2">
        <el-row type="flex" justify="space-between">
          <el-col :sm="2">
            <el-button size="small" @click="$router.go(-1)">取消</el-button>
          </el-col>
          <el-col :sm="2">
            <el-button type="danger" size="small" @click="saveHandle">确认</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog
      title="图集修改"
      :visible.sync="classfiyDialogVisible"
      width="26%"
      center>
      <el-form :model="classfiyForm" label-width="120px">
        <el-form-item label="图集名称">
          <el-col :sm="15">
            <el-input v-model="classfiyForm.classifyName" autocomplete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="图集排序">
          <el-col :sm="15">
            <el-input-number v-model="classfiyForm.classifyOrder" controls-position="right" :min="1"></el-input-number>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-row type="flex" justify="center">
          <el-col :sm="10">
            <div class="btn-warp">
              <el-button @click="classfiyDialogVisible = false">取 消</el-button>
              <el-button type="danger" @click="saveChangeClassfiyHandle">保 存</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'restaurantClassify',
  data () {
    return {
      pictureName: '',
      picturePath: '',
      pictureOriginalName: '',
      pictureSize: '',
      pictureOrder: '',
      pictureMark: '',
      classfiyHandleShow: false,
      moduleId: '',
      classifyId: '',
      classifyList: [],
      newClassfiyName: '',
      newClassfiyOrder: '',
      classfiyDialogVisible: false,
      classfiyForm: {
        classfiyId: '',
        classifyName: '',
        classifyOrder: ''
      }
    }
  },
  mounted () {
    this._getClassify()
  },
  methods: {
    _getClassify () { // 图集列表
      let _this = this
      this.$axios.get('/module/classify/幸福餐厅')
        .then(function (res) {
          _this.moduleId = res[0].moduleId // 模块id
          _this.classifyId = res[0].id
          _this.classifyList = res
        })
    },
    addNewClassfiyHandle () { // 添加图集
      let _this = this
      let params = {
        'classifyName': _this.newClassfiyName,
        'classifyOrder': _this.newClassfiyOrder,
        'moduleId': _this.moduleId
      }
      this.$axios.post('/diningroom/picture/classify/add', params)
        .then(function (res) {
          if (res) {
            _this.$message({
              type: 'success',
              message: '添加成功!'
            })
            _this._getClassify()
          }
        })
    },
    changeClassfiyHandle (item) {
      this.classfiyForm.classfiyId = item.id
      this.classfiyForm.classifyName = item.classifyName
      this.classfiyForm.classifyOrder = item.classifyOrder
      this.classfiyDialogVisible = true
    },
    saveChangeClassfiyHandle () { // 修改图集
      let _this = this
      let params = {
        'classifyName': _this.classfiyForm.classifyName,
        'classifyOrder': _this.classfiyForm.classifyOrder,
        'id': _this.classfiyForm.classfiyId
      }
      this.$axios.post('/diningroom/picture/classify/update', params)
        .then(function (res) {
          if (res === 'OK') {
            _this.classfiyDialogVisible = false
            _this._getClassify()
            _this.$message({
              type: 'success',
              message: '修改成功!'
            })
          }
        })
    },
    delClassfiyHandle (id) { // 删除图集
      let _this = this
      this.$axios.get('/diningroom/picture/classify/delete', {
        params: { 'id': id }
      }).then(function (res) {
        if (res === 'OK') {
          _this.classfiyDialogVisible = false
          _this._getClassify()
          _this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }
      })
    },
    handleAvatarSuccess (res, file) { // 上传图片
      this.pictureName = res.data[0].fileName
      this.pictureOriginalName = res.data[0].fileOriginalName
      this.pictureSize = res.data[0].fileSize
      this.picturePath = res.data[0].filePath
    },
    beforeAvatarUpload (file) {
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 5MB!')
      }
      return isLt5M
    },
    saveHandle () { // 图片添加
      let _this = this
      this.$axios.post('/diningroom/picture/add', {
        'classifyId': _this.classifyId,
        'pictureMark': _this.pictureMark,
        'pictureName': _this.pictureName,
        // 'pictureOrder': _this.pictureOrder,
        'pictureOriginalName': _this.pictureOriginalName,
        'picturePath': _this.picturePath,
        'pictureSize': _this.pictureSize
      }).then(function (res) {
        console.log(res)
        if (res) {
          _this.$message({
            type: 'success',
            message: '添加成功!'
          })
          _this.$router.go(-1)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .classify-warp {
    position: absolute;
    width: 520px;
    background: #fff;
    border-radius: 4px;
    z-index: 10;
    top: 0;
    left: 90px;
    padding: 15px;
    border: 1px solid #ededed;
    box-shadow: 1px 1px 3px #ededed;
    .classify-add-form {
      text-align: center;
    }
    .classfiy-add-table {
      .td_box {
        padding: 0;
      }
    }
  }
</style>