<template>
  <div class="container">
    <Settings id="mainLeft" :msg="treeData" @handClick="handTreeClick"></Settings>
    <div id="mainRight">
      <div>
        <span>平面图:</span>
        <div class="pmt">
          <img class="pmtimg" src="../../../../assets/images/pmt.jpg" alt />
          <!-- <img :src="pmt" alt /> -->
        </div>
        <span>企业简介:</span>
        <div class="jj">
          <el-input type="textarea" rows="10" v-model="saveobj.dremark"></el-input>
        </div>
        <div >
            <span>科室结构图:</span>
            <div style="margin-left:70px;">
                   <el-upload
                  class="avatar-uploader"
                  action= 'http://101.36.160.140:21021/api/csc-szls-system-manage/minio/testupload'
                  :show-file-list="false"
                  :on-success="handlekssuccsee"
                  :before-upload="beforeUpload" 
                  :disabled='this.$route.query.state == "detail"'
                >
              <img v-if="ksimageUrl" :src="ksimageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </div>
      </div>
      </div>
      <div>
        <div style="margin:10px 0 10px 0;">
          <span>企业文化:</span>
          <el-button @click="addfile" type="primary" size="mini">添加</el-button>
          <div v-for="(item , index) in fileurlarr" :key="index" style="margin:10px 0 0 70px;">
            <div @click="uploadclick(index)" style="width:140px; height: 140px; float:left;">
              <el-upload
                class="avatar-uploader"
                action="http://101.36.160.140:21021/api/csc-szls-system-manage/minio/testupload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="item.alternateFields" :src="item.alternateFields" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </div>

            <div class="desimg">
              <div class="deshead">图片简介:</div>
              <el-input type="textarea" rows="5" v-model="item.eremark" @input="inpms"></el-input>
            </div>
            <i class="el-icon-delete del" @click="del(index)"></i>
          </div>
        </div>
      </div>
      <div class="btns">
        <el-button @click="saveinfo">保存</el-button>
      </div>
    </div>
  </div>
</template>
<script>
//引入左侧分公司菜单
import Settings from "../../../../layout/components/Settings/index"
import { findbyTreeData } from "@/api/branchoff/index.js"
import { getUser } from "@/utils/auth"
import {
  findbyidzs,
  updatezs
} from "@/api/organizationalStructureManagement/index.js"
import { getfilebyname } from "@/api/system/organizationalStructure/personnel"
export default {
  components: { Settings },
  data() {
    return {
      treeData: [],
      id: "",
      treeid: "",
      pmt: "",
      // imageUrl: "",
      fileList: [],
      fileurlarr: [],
      saveobj: {
        depotExtends: [],
        dremark: "",
        dname: "",
        parentId: "",
        did: "",
        pportrait:''
      },
      files: {
        depotId: "",
        eportrait: "",
        eremark: "",
        alternateFields: ""
      },
      midindex: "",
      ksimageUrl:''
    }
  },
  created() {
    this.gettreedata()
  },
  methods: {
   handlekssuccsee(res, file) {
     this.saveobj.pportrait =  res.data 
     this.ksimageUrl = URL.createObjectURL(file.raw)
    },
   beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 10MB!")
      }
      return isLt2M
    },
    uploadclick(index) {
      this.midindex = index
    },
    addfile() {
      const obj = JSON.stringify(this.files)
      const objClone = JSON.parse(obj)
      this.fileurlarr.push(objClone)
    },
    inpms(val) {
      this.fileurlarr[this.midindex].eremark = val
      },
    handleAvatarSuccess(res, file) {
      this.fileurlarr[this.midindex].eportrait = res.data 
      this.fileurlarr[this.midindex].alternateFields = URL.createObjectURL(file.raw)
      this.saveobj.depotExtends = this.fileurlarr
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 10MB!")
      }
      return isLt2M
    },
    gettreedata() {
      findbyTreeData(this.id).then(res => {
        this.treeData = res.data
        this.treeid = this.treeData[0].depotCode
        this.files.depotId = this.treeid
        findbyidzs(this.treeid).then(res => {
          this.saveobj = res.data.depot
          this.saveobj.depotExtends = res.data.depotExtend
          if( res.data.depot.pportrait != null){
             getfilebyname( res.data.depot.pportrait ).then(res => {
              this.ksimageUrl =  window.URL.createObjectURL(res)
             })
          } else{
            this.ksimageUrl=''
          }
          this.fileurlarr = res.data.depotExtend
          if(  this.fileurlarr.length >0 ){
              this.fileurlarr.forEach((item , index) => {
              getfilebyname( item.eportrait ).then(res => {
              item.alternateFields =  window.URL.createObjectURL(res)
             })
          })
          }
        })
      })
    },

    handTreeClick(data) {
      this.fileurlarr = []
      this.treeid = data.depotCode
      this.files.depotId = data.depotCode
      findbyidzs(this.treeid).then(res => {
        this.saveobj = res.data.depot
           if( res.data.depot.pportrait != null){
             getfilebyname( res.data.depot.pportrait ).then(res => {
              this.ksimageUrl =  window.URL.createObjectURL(res)
             })
          } else{
            this.ksimageUrl=''
          }
        this.saveobj.depotExtends = res.data.depotExtend
        this.fileurlarr = res.data.depotExtend
         this.fileurlarr.forEach((item , index) => {
             getfilebyname( item.eportrait ).then(res => {
              item.alternateFields =  window.URL.createObjectURL(res)
             })
          })
      })
    },
    saveinfo() {
      updatezs(this.saveobj).then(res => {
        if (res.code == 200) {
          this.$message.success("保存成功!")
        }
      })
    },
    del(val) {
      this.fileurlarr.splice(val, 1)
      this.saveobj.depotExtends = this.fileurlarr
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  display: flex;
  #mainLeft {
    width: 300px;
    height: calc(100vh - 200px);
  }
  #mainRight {
    margin-left: 20px;
    width: calc(100% - 320px);
  }
}
.button {
  text-align: right;
  margin-right: 20px;
  padding-bottom: 20px;
}
.pmt {
  width: 600px;
  height: 300px;
  margin-left: 80px;
}
.pmtimg {
  width: 600px;
  height: 300px;
}
.jj {
  width: 600px;
  margin-left: 80px;
}
.avatar-uploader {
  width: 140px;
  height: 140px;
  //  display: inline-block;
  //  vertical-align: middle;
}
.avatar-uploader .el-upload {
  // border: 1px dashed pink;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 140px;
  height: 140px;
  line-height: 140px;
  text-align: center;
  //  vertical-align:middle;
}
.avatar {
  width: 140px;
  height: 140px;
  // display: inline-block;
}
.desimg {
  width: 70%;
  height: 140px;
  display: inline-block;
  // background-color: pink;
  margin-left: 30px;
}
.deshead {
  width: 60%;
  height: 30px;
  display: inline-block;
  // background-color: pink;
}
.btns {
  text-align: center;
  margin-top: 40px;
}
.del {
  margin-left: 10px;
}
</style>