            <template>
              <div class="app-container calendar-list-container">
                <el-row :gutter="20">
                    <el-col :span="6">
                      <el-tag type="success" >{{mminfo.id}}</el-tag> <el-tag type="success" >{{mminfo.name}}</el-tag>
                    </el-col>   
                </el-row>
                <el-row :gutter="20">
              <el-col :span="6"><div class="grid-content bg-purple"></div>&nbsp;</el-col>
              <el-col :span="6"><div class="grid-content bg-purple">
                <h3 style="color:#c7c8cf">月嫂头像</h3><span style="color:#c7c8cf">尺寸：437X439</span>
                <el-upload
                    class="avatar-uploader"
                    :action="UploadUrl()"
                    :data="datadisplay"
                    :on-success="uploadSuccess"
                    :before-upload="beforeAvatarUpload"
                    :disabled="uploadDisabled"
                    :show-file-list="false">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">
                <h3 style="color:#c7c8cf">悦所评论</h3><span>&nbsp;</span>
                 <el-input
                    type="textarea"
                    :autosize="{ minRows: 12, maxRows: 20}"
                    placeholder="请输入评价"
                    :maxlength = 200
                    v-model="addresume.comment">
                </el-input>
                </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">&nbsp;</div></el-col>
            </el-row>
                 
               <el-row :gutter="20">
                <el-col :span="6"><div class="grid-content bg-purple">&nbsp;</div></el-col>
                <el-col :span="12"><div class="grid-content bg-purple">
                <h3 style="color:#c7c8cf">月嫂证书</h3><span style="color:#c7c8cf">尺寸：542X382</span>
                <el-upload
                  :action="UploadUrl()"
                  list-type="picture-card"
                  :data="datacertificate"
                  :on-preview="handlePictureCardPreview"
                  :file-list="fileListcertificate"
                  :on-success="uploadSuccess"
                  :before-upload="checksize"
                  :disabled="uploadDisabled"
                  :on-remove="handleRemovecertificate">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                  </div>
                  </el-col>
                <el-col :span="6"><div class="grid-content bg-purple">&nbsp;</div></el-col>
              </el-row>
               <el-row :gutter="20">
                <el-col :span="6"><div class="grid-content bg-purple">&nbsp;</div></el-col>
                <el-col :span="12"><div class="grid-content bg-purple">
                  <h3 style="color:#c7c8cf">服务照片</h3><span style="color:#c7c8cf">尺寸：464X684</span>
                <el-upload
                  :action="UploadUrl()"
                  list-type="picture-card"
                  :data="dataservice"
                  :file-list="fileListservice"
                  :on-preview="handlePictureCardPreview"
                  :on-success="uploadSuccess"
                  :before-upload="checksize"
                  :disabled="uploadDisabled"
                  :on-remove="handleRemoveservice">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                  </div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple">&nbsp;</div></el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="6"><div class="grid-content bg-purple">&nbsp;</div></el-col>
                <el-col :span="12"><div class="grid-content bg-purple">
                   <h3 style="color:#c7c8cf">月子餐照片</h3><span style="color:#c7c8cf">尺寸：480*640</span>
                <el-upload
                  :action="UploadUrl()"
                  list-type="picture-card"
                  :data="datameal"
                  :on-preview="handlePictureCardPreview"
                  :on-success="uploadSuccess"
                  :before-upload="checksize"
                  :disabled="uploadDisabled"
                  :file-list="fileListmeal"
                  :on-remove="handleRemovemeal">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                  </div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple">&nbsp;</div></el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="6"><div class="grid-content bg-purple">&nbsp;</div></el-col>
                <el-col :span="12"><div class="grid-content bg-purple">
                   <h3 style="color:#c7c8cf">评论照片</h3>
                <el-upload
                  :action="UploadUrl()"
                  list-type="picture-card"
                  :data="datacomment"
                  :on-preview="handlePictureCardPreview"
                  :on-success="uploadSuccess"
                  :before-upload="checksize"
                  :disabled="uploadDisabled"
                  :file-list="fileListcomment"
                  :on-remove="handleRemovecomment">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                  </div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple">&nbsp;</div></el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="9">&nbsp;</el-col>
                <el-col :span="6">
                    <el-button  type="primary" @click="addResume" :loading ="buttonloading">生成</el-button>
                    <el-button @click="previewResume">预览</el-button>
                    </el-col>
              </el-row>
              <div>&nbsp;</div>
              </div>
            </template>
            <script>
              import { fetchPv, findMM, ListImg, deletePhoto, createResume, getMmInfoResume } from '@/api/article'
              import waves from '@/directive/waves' // 水波纹指令
              import { parseTime } from '@/utils'
              import config from '@/utils/config'
              export default {
                name: 'resume-admin',
                directives: {
                  waves
                },
                data() {
                  return {
                    url: config.BASE_URL + '/uploadImg',
                    uploadDisabled: false,
                    fileListdisplay: [],
                    fileListcertificate: [],
                    fileListcomment: [],
                    fileListmeal: [],
                    fileListservice: [],
                    addresume: {
                      servant_code: undefined,
                      comment: undefined
                    },
                    list: null,
                    total: null,
                    path: null,
                    dialogVisible: false,
                    buttonloading: false,
                    dialogImageUrl: undefined,
                    removephone: {
                      photo_name: null,
                      servant_code: null,
                      photo_type: null
                    },
                    imageUrl: null,
                    datadisplay: {
                      id: 0,
                      type: 1
                    },
                    getcomment: {
                      id: null
                    },
                    datacertificate: {
                      id: 0,
                      type: 2
                    },
                    datacomment: {
                      id: 0,
                      type: 3
                    },
                    dataservice: {
                      id: 0,
                      type: 4
                    },
                    datameal: {
                      id: 0,
                      type: 5
                    },
                    querydisplay: {
                      servant_code: 0,
                      photo_type: 1
                    },
                    querycertificate: {
                      servant_code: 0,
                      photo_type: 2
                    },
                    querycomment: {
                      servant_code: 0,
                      photo_type: 3
                    },
                    queryservice: {
                      servant_code: 0,
                      photo_type: 4
                    },
                    querymeal: {
                      servant_code: 0,
                      photo_type: 5
                    },
                    listLoading: true,
                    listMMinfo: {
                      id: null
                    },
                    showReviewer: false,
                    trainoptions: '',
                    modifyresult: '',
                    visible2: false,
                    deltraininfo: {
                      id: undefined
                    },
                    mminfo: {
                      id: null,
                      name: null,
                      servant_code: null
                    },
                    dialogFormVisible: false,
                    dialogStatus: '',
                    textMap: {
                      update: 'Edit',
                      create: '添加月嫂'
                    },
                    dialogPvVisible: false,
                    pvData: [],
                    downloadLoading: false
                  }
                },
                filters: {
                  statusFilter(status) {
                    const statusMap = {
                      published: 'success',
                      draft: 'info',
                      deleted: 'danger'
                    }
                    return statusMap[status]
                  },
                  typeFilter(type) {
                    // return calendarTypeKeyValue[type]
                  }
                },
                created() {
                  if (this.$route.params.userId == null) {
                    this.$route.params.userId = global.LastUpdate
                    this.listMMinfo.id = global.LastUpdate
                    this.datadisplay.id = global.LastUpdate
                    this.datacertificate.id = global.LastUpdate
                    this.datacomment.id = global.LastUpdate
                    this.dataservice.id = global.LastUpdate
                    this.datameal.id = global.LastUpdate
                    this.querydisplay.servant_code = global.LastUpdate
                    this.querycertificate.servant_code = global.LastUpdate
                    this.querycomment.servant_code = global.LastUpdate
                    this.queryservice.servant_code = global.LastUpdate
                    this.querymeal.servant_code = global.LastUpdate
                  } else {
                    global.LastUpdate = this.$route.params.userId
                    this.listMMinfo.id = this.$route.params.userId
                    this.datadisplay.id = this.$route.params.userId
                    this.datacertificate.id = this.$route.params.userId
                    this.datacomment.id = this.$route.params.userId
                    this.dataservice.id = this.$route.params.userId
                    this.datameal.id = this.$route.params.userId
                    this.querydisplay.servant_code = this.$route.params.userId
                    this.querycertificate.servant_code = this.$route.params.userId
                    this.querycomment.servant_code = this.$route.params.userId
                    this.queryservice.servant_code = this.$route.params.userId
                    this.querymeal.servant_code = this.$route.params.userId
                  }
                  findMM(this.listMMinfo).then(response2 => {
                    this.mminfo.id = '月嫂工号:' + response2.data.salt
                    this.mminfo.name = '月嫂姓名:' + response2.data.truename
                    this.mminfo.servant_code = response2.data.id
                  })
                  this.getcomment.id = this.listMMinfo.id
                  getMmInfoResume(this.getcomment).then(response8 => {
                    this.addresume.comment = response8.data.resume_comment
                  })
                  this.imgChange()
                },
                methods: {
                  checksize(file) {
                    this.uploadDisabled = true
                    const isLt2M = file.size / 1024 / 1024 < 2
                    if (!isLt2M) {
                      this.$message.error('上传头像图片大小不能超过 2MB!')
                      this.uploadDisabled = false
                      return false
                    }
                    this.uploadDisabled = false
                  },
                  beforeAvatarUpload(file) {
                    this.uploadDisabled = true
                    const isLt2M = file.size / 1024 / 1024 < 2
                    if (!isLt2M) {
                      this.$message.error('上传头像图片大小不能超过 2MB!')
                      this.uploadDisabled = false
                      return false
                    }
                    if (this.imageUrl == null) {
                      this.uploadDisabled = false
                      return true
                    } else {
                      var n = this.imageUrl.indexOf('display' + this.listMMinfo.id)
                      this.removephone.photo_name = this.imageUrl.substring(n)
                      this.removephone.servant_code = this.listMMinfo.id
                      this.removephone.photo_type = 1
                      deletePhoto(this.removephone).then(response9 => {
                        if (response9.data < 1) {
                          this.$message({ message: '删除失败!', type: 'warning' })
                          this.uploadDisabled = false
                          return false
                        } else {
                          this.$message({ message: '更新成功!', type: 'success' })
                          this.uploadDisabled = false
                          this.datadisplay.id = this.listMMinfo.id
                          this.datadisplay.type = 1
                          this.imgChange()
                          return true
                        }
                      })
                    }
                  },
                  addResume() {
                    this.addresume.servant_code = this.listMMinfo.id
                    this.buttonloading = true
                    createResume(this.addresume).then(response9 => {
                      this.buttonloading = false
                      if (response9.data.length !== 'error') {
                        this.$message({ message: '生成成功', type: 'success' })
                        this.path = response9.data
                      } else {
                        this.$message({ message: '生成失败', type: 'warning' })
                      }
                    })
                  },
                  previewResume() {
                    if (this.path !== null) {
                      window.open(this.path, 'top')
                    } else {
                      this.$message({ message: '请先生成简历', type: 'success' })
                    }
                  },
                  manyfiles() {
                    this.$message({ message: '头像只能上传一张!', type: 'warning' })
                  },
                  uploadSuccess(response, file, fileList) {
                    this.$message({ message: '上传成功!', type: 'success' })
                    this.imgChange()
                  },
                  uploadError(response, file, fileList) {
                    this.$message({ message: '上传失败!', type: 'warning' })
                  },
                  handlePictureCardPreview(file) {
                    this.dialogImageUrl = file.url
                    this.dialogVisible = true
                  },
                  handleRemovedisplay(file, fileList) {
                    this.removephone.photo_name = file.photo_name
                    this.removephone.servant_code = this.listMMinfo.id
                    this.removephone.photo_type = 1
                    deletePhoto(this.removephone).then(response9 => {
                      if (response9.data < 1) {
                        this.$message({ message: '删除失败!', type: 'warning' })
                      } else {
                        this.$message({ message: '删除成功!', type: 'success' })
                      }
                    })
                  },
                  handleRemovecertificate(file, fileList) {
                    if (file.status !== 'ready') {
                      this.removephone.photo_name = file.photo_name
                      this.removephone.servant_code = this.listMMinfo.id
                      this.removephone.photo_type = 2
                      deletePhoto(this.removephone).then(response9 => {
                        if (response9.data < 1) {
                          this.$message({ message: '删除失败!', type: 'warning' })
                        } else {
                          this.$message({ message: '删除成功!', type: 'success' })
                        }
                      })
                    }
                  },
                  handleRemovecomment(file, fileList) {
                    if (file.status !== 'ready') {
                      this.removephone.photo_name = file.photo_name
                      this.removephone.servant_code = this.listMMinfo.id
                      this.removephone.photo_type = 3
                      deletePhoto(this.removephone).then(response9 => {
                        if (response9.data < 1) {
                          this.$message({ message: '删除失败!', type: 'warning' })
                        } else {
                          this.$message({ message: '删除成功!', type: 'success' })
                        }
                      })
                    }
                  },
                  handleRemoveservice(file, fileList) {
                    if (file.status !== 'ready') {
                      this.removephone.photo_name = file.photo_name
                      this.removephone.servant_code = this.listMMinfo.id
                      this.removephone.photo_type = 4
                      deletePhoto(this.removephone).then(response9 => {
                        if (response9.data < 1) {
                          this.$message({ message: '删除失败!', type: 'warning' })
                        } else {
                          this.$message({ message: '删除成功!', type: 'success' })
                        }
                      })
                    }
                  },
                  handleRemovemeal(file, fileList) {
                    if (file.status !== 'ready') {
                      this.removephone.photo_name = file.photo_name
                      this.removephone.servant_code = this.listMMinfo.id
                      this.removephone.photo_type = 5
                      deletePhoto(this.removephone).then(response10 => {
                        if (response10.data < 1) {
                          this.$message({ message: '删除失败!', type: 'warning' })
                        } else {
                          this.$message({ message: '删除成功!', type: 'success' })
                        }
                      })
                    }
                  },
                  imgChange() {
                    this.fileListdisplay = []
                    this.fileListcertificate = []
                    this.fileListcomment = []
                    this.fileListservice = []
                    this.fileListmeal = []
                    this.imageUrl = null
                    ListImg(this.querydisplay).then(response3 => {
                      if (response3.data.length < 1) {
                        this.imageUrl = null
                      } else {
                        this.fileListdisplay = response3.data
                        this.imageUrl = response3.data[0].url
                      }
                    })
                    ListImg(this.querycertificate).then(response4 => {
                      this.fileListcertificate = response4.data
                    })
                    ListImg(this.querycomment).then(response5 => {
                      this.fileListcomment = response5.data
                    })
                    ListImg(this.queryservice).then(response6 => {
                      this.fileListservice = response6.data
                    })
                    ListImg(this.querymeal).then(response7 => {
                      this.fileListmeal = response7.data
                    })
                  },
                  handleModifyStatus(row, status) {
                    this.$message({
                      message: '操作成功',
                      type: 'success'
                    })
                    row.status = status
                  },
                  handleCreate() {
                    this.dialogStatus = 'create'
                    this.dialogFormVisible = true
                    this.$nextTick(() => {
                      this.$refs['addTrains'].clearValidate()
                    })
                  },
                  handleUpdate(row) {
                    this.temp = Object.assign({}, row) // copy obj
                    this.temp.timestamp = new Date(this.temp.timestamp)
                    this.dialogStatus = 'update'
                    this.dialogFormVisible = true
                    this.$nextTick(() => {
                      this.$refs['dataForm'].clearValidate()
                    })
                  },
                  handleFetchPv(pv) {
                    fetchPv(pv).then(response => {
                      this.pvData = response.data.pvData
                      this.dialogPvVisible = true
                    })
                  },
                  UploadUrl() {
                    return this.url
                  },
                  formatJson(filterVal, jsonData) {
                    return jsonData.map(v => filterVal.map(j => {
                      if (j === 'timestamp') {
                        return parseTime(v[j])
                      } else {
                        return v[j]
                      }
                    }))
                  }
                }
              }
            </script>
            <style scoped>
          .edit-input {
            padding-right: 100px;
          }
          .cancel-btn {
            position: absolute;
            right: 15px;
            top: 10px;
          }
          </style>
          <style>
            .avatar-uploader .el-upload {
              border: 1px dashed #d9d9d9;
              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: 300px;
              height: 300px;
              line-height: 300px;
              text-align: center;
            }
            .avatar {
              width: 300px;
              height: 300px;
              display: block;
            }
          </style>
