<template>
  <div class="mlt">
    <div>
      <el-form :inline="true" size="mini">
        <el-row>
          <el-form-item>
            <el-input v-model="tag" style="width: 250px" placeholder="请输入团建名称" class="search_tag" clearable/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="btn_search()"><i class="el-icon-search"/> 查询</el-button>
            <el-button @click="btn_clear()"><i class="el-icon-remove-outline"/> 重置</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="addTeamBuilder">添加</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="tableData"
        :highlight-current-row="true"
        border>
        <el-table-column
          prop="id"
          label="编号"/>
        <el-table-column
          prop="name"
          label="团建名称"/>
        <el-table-column
          prop="detail"
          label="项目介绍"/>
        <el-table-column
          prop="logo"
          label="团建logo">
          <template slot-scope="scope">
            <img :src="scope.row.logo" min-width="40" height="40">
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="editTeamBuilder(scope.row, 1)">编辑</el-button>
            <el-button type="text" @click="deleteTeamBuilderConfirm(scope.row)">删除</el-button>
            <el-button type="text" @click="editTeamBuilder(scope.row, 2)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mydiv">
        <el-pagination
          :current-page.sync="pageNo"
          :page-sizes="[10, 50, 100, 300,1000]"
          :page-size="pageSize"
          :total="totalDataNumber"
          layout="sizes,total, prev, pager, next"
          class="table-pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>

    </div>
    <!--弹出框-->
    <el-dialog :visible.sync="dialogFormVisiable" title="添加团建">
      <el-form :model="addForm" :rules="rules" :label-width="formLabelWidth" >
        <el-form-item label="团建名称" prop="name">
          <el-input v-model="addForm.name" placeholder="请输入团建名称" size="mini"/>
        </el-form-item>
        <el-form-item label="团建logo" >
          <el-upload
            :action="uploadUrl"
            :headers="uploadHeaders"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="logoList"
            list-type="picture-card">
            <i class="el-icon-plus"/>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="项目介绍">
          <el-input
            v-model="addForm.detail"
            :rows="5"
            placeholder="请输入项目介绍"
            size="mini"
            type="textarea"/>
        </el-form-item>
        <el-form-item label="团建图集" >
          <el-upload
            :action="uploadUrl"
            :headers="uploadHeaders"
            :on-remove="handleRemove2"
            :on-success="handleSuccess2"
            :limit="5"
            :on-exceed="handleExceed2"
            :file-list="photoList"
            list-type="picture-card">
            <i class="el-icon-plus"/>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addTeamBuilderCancel">取 消</el-button>
        <el-button size="mini" type="primary" @click="addTeamBuilderSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogModifyVisiable" title="修改团建" @close="closeDialog">
      <el-form :model="modifyForm" :rules="rules" :label-width="formLabelWidth">
        <el-form-item label="团建名称" prop="name">
          <el-input v-model="modifyForm.name" placeholder="请输入团建名称" size="mini"/>
        </el-form-item>
        <el-form-item label="团建logo" >
          <el-upload
            :disabled="showDetail"
            :action="uploadUrl"
            :headers="uploadHeaders"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="logoList"
            list-type="picture-card">
            <i class="el-icon-plus"/>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="项目介绍">
          <el-input
            v-model="modifyForm.detail"
            :disabled="showDetail"
            :rows="5"
            placeholder="请输入项目介绍"
            size="mini"
            type="textarea"/>
        </el-form-item>
        <el-form-item label="团建图集" >
          <el-upload
            :disabled="showDetail"
            :action="uploadUrl"
            :headers="uploadHeaders"
            :on-remove="handleRemove2"
            :on-success="handleSuccess2"
            :limit="5"
            :on-exceed="handleExceed2"
            :file-list="photoList"
            list-type="picture-card">
            <i class="el-icon-plus"/>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="updateTeamBuilderCancel">取 消</el-button>
        <el-button size="mini" type="primary" @click="updateTeamBuilder">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 点击删除按钮，删除确认框-->
    <el-dialog
      :visible.sync="deleteDialogVisible"
      title="提示"
      width="30%">
      <span>确定删除选择的团建活动? </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleClickDelete">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import { getToken } from '@/utils/auth'
export default {
  name: 'TeamBuilder',
  data() {
    return {
      rules: {
        name: [{ required: true, message: '请输入团建名称', trigger: 'blur' }]
      },
      tag: '',
      allData: [], // 所有前端分页数据
      tableData: [], // 表格数据 仅展示当前页的数据
      pageNo: 1, // 当前页数
      totalDataNumber: 0, // 总记录数
      pageSize: 10,
      formLabelWidth: '150px', // 弹出框form宽
      dialogFormVisiable: false,
      dialogModifyVisiable: false,
      deleteDialogVisible: false,
      placeTypes: [],
      placeItems: [],
      addForm: {
        name: '',
        detail: '',
        photos: '',
        logo: ''
      },
      modifyForm: {
        id: '',
        name: '',
        detail: '',
        photos: '',
        logo: ''
      },
      deleteId: '',
      logoList: [],
      photoList: [],
      uploadUrl: process.env.UPLOAD_URL,
      uploadHeaders: {
        token: getToken()
      },
      showDetail: false
    }
  },
  created() {
    this.btn_search()
  },
  methods: {
    btn_search() {
      const vm = this
      axios.get(process.env.BASE_API + '/teambuilder/list', {
        params: {
          tag: this.tag
        }
      }).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
          vm.totalDataNumber = 0
          vm.allData = []
          vm.tableData = []
        } else {
          vm.totalDataNumber = parseInt(obj.total)
          if (vm.totalDataNumber > 0) {
            vm.allData = obj.data
            vm.tableData = obj.data.slice(0, vm.pageSize)
          } else {
            vm.allData = []
            vm.tableData = []
          }
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    btn_clear() {
      this.tag = ''
      this.pageNo = 1
      this.btn_search()
    },
    handleCurrentChange() {
      this.tableData = this.allData.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.tableData = this.allData.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
    },
    addTeamBuilder() {
      this.dialogFormVisiable = true
    },
    addTeamBuilderCancel() {
      this.dialogFormVisiable = false
      this.clearForm()
    },
    clearForm() {
      this.addForm.name = ''
      this.addForm.detail = ''
      this.modifyForm.id = ''
      this.modifyForm.name = ''
      this.modifyForm.detail = ''
      this.logoList = []
      this.photoList = []
    },
    addTeamBuilderSubmit() {
      const vm = this
      var params = new URLSearchParams()
      if (vm.addForm.name === '') {
        this.$message.error('请输入团建名称')
        return
      }
      params.append('name', vm.addForm.name)
      params.append('detail', vm.addForm.detail)
      if (vm.logoList !== undefined && vm.logoList.length > 0) {
        params.append('logo', vm.logoList[0].url)
      }
      if (vm.photoList !== undefined && vm.photoList.length > 0) {
        for (let i = 0; i < vm.photoList.length; i++) {
          vm.addForm.photos += vm.photoList[i].url + ','
        }
        params.append('photos', vm.addForm.photos)
      }
      axios.post(process.env.BASE_API + '/teambuilder/create', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          vm.$message(obj.message)
          vm.pageNo = 1
          vm.clearForm()
          vm.btn_search()
        }
      }).catch(function(error) {
        alert(error)
      })
      this.dialogFormVisiable = false
    },
    editTeamBuilder(row, value) {
      this.dialogModifyVisiable = true
      this.modifyForm = row
      if (value === 2) {
        this.showDetail = true
      }
      if (row.logo !== undefined) {
        this.logoList.push({
          url: row.logo
        })
      }
      if (row.photos !== undefined && row.photos !== null) {
        var strs = row.photos.split(',')
        for (var i = 0; i < strs.length - 1; i++) {
          this.photoList.push({
            url: strs[i]
          })
        }
      }
    },
    updateTeamBuilderCancel() {
      this.dialogModifyVisiable = false
      this.clearForm()
      this.btn_search()
    },
    updateTeamBuilder() {
      const vm = this
      var params = new URLSearchParams()
      params.append('id', vm.modifyForm.id)
      params.append('name', vm.modifyForm.name)
      params.append('detail', vm.modifyForm.detail)
      if (vm.logoList !== undefined && vm.logoList.length > 0) {
        params.append('logo', vm.logoList[0].url)
      }
      if (vm.photoList !== undefined && vm.photoList.length > 0) {
        var strs = ''
        for (let i = 0; i < vm.photoList.length; i++) {
          strs = strs + vm.photoList[i].url + ','
        }
        params.append('photos', strs)
      }
      axios.post(process.env.BASE_API + '/teambuilder/update', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          vm.$message(obj.message)
          vm.pageNo = 1
          vm.btn_search()
        }
        vm.clearForm()
      }).catch(function(error) {
        alert(error)
      })
      this.dialogModifyVisiable = false
      this.showDetail = false
    },
    deleteTeamBuilderConfirm(row) {
      this.deleteId = row.id
      this.deleteDialogVisible = true
    },
    handleClickDelete() {
      const vm = this
      var params = new URLSearchParams()
      params.append('id', vm.deleteId)
      axios.post(process.env.BASE_API + '/teambuilder/delete', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          vm.$message(obj.message)
          vm.pageNo = 1
          vm.btn_search()
        }
      }).catch(function(error) {
        alert(error)
      })
      this.deleteDialogVisible = false
    },
    handleRemove(file, fileList) {
      this.logoList = fileList
    },
    handleSuccess(res, file, fileList) {
      if (res.code === 10000) {
        this.logoList.push({
          url: res.imageUrl
        })
      } else {
        this.$message.error(res.message)
        fileList.splice(fileList.indexOf(file), 1)
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    handleRemove2(file, fileList) {
      this.photoList = fileList
    },
    handleSuccess2(res, file, fileList) {
      if (res.code === 10000) {
        this.photoList.push({
          url: res.imageUrl
        })
      } else {
        this.$message.error(res.message)
        fileList.splice(fileList.indexOf(file), 1)
      }
    },
    handleExceed2(files, fileList) {
      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    closeDialog() {
      this.logoList = []
      this.photoList = []
      this.showDetail = false
    }
  }
}
</script>

<style scoped>
  .mlt {
    margin-left: 20px;
    margin-top: 20px;
    margin-right: 20px;
  }
</style>
