<template>
  <div class="customer">
    <div class="content">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>基础信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>客服设置</el-breadcrumb-item>
      </el-breadcrumb>
      <h1>客服设置</h1>
      <el-form :model="form" :rules="rules" label-width="100px">
        <el-form-item label="客服电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label="QQ" prop="qq">
          <el-input v-model="form.qq" placeholder="请输入" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label="微信" prop="img">
          <el-upload 
            :show-file-list="false" 
            :on-success="handleAvatarSuccess" 
            :before-upload="beforeAvatarUpload" 
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/">
            <img v-if="form.img" :src="form.img" class="avatar">
            <div v-else class="el-icon-plus avatar-uploader-icon border"></div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div :class="{'sure':isGrey,'grey':true}" @click="sure">保存</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'customer',
  data() {
    return {
      form: {
        phone: '',
        qq: '',
        email: '',
        img: ''
      },
      rules: [],
      isGrey: false
    }
  },
  methods: {
    sure() {
      this.isGrey = true
    },
    handleAvatarSuccess(res, file) {
      this.form.img = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style scoped>
	.avatar-uploader .el-upload {
		border: 1px dashed #000;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}

	.avatar {
		width: 100px;
		height: 100px;
		display: block;
	}

	.border {
		border: 1px dashed #c0ccda;
	}
	.grey {
		background: #8C939D;
		margin-top: 80px;
		margin-left: 150px;
		width: 100px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		color: #fff;
		border-radius: 2px;
	}
.sure {
		background: #409EFF;
	}
	.el-form-item {
		margin-bottom: 30px !important;
	}

	.customer h1 {
		margin-top: 50px;
		margin-bottom: 30px;
		font-weight: bold;
	}
</style>
