<template>
  <div>
    <div class="dept-div">
      <el-card class="box-card" shadow="hover">
        <el-scrollbar ref="deptScroll" class="user-dept-scroll">
          <el-col :span="8">
            <el-card>
              <div>标题文字：</div>
              <div class="inputUpDown">
                <el-input v-model="titleValue" clearable :disabled="titleDisabled" />
              </div>
              <div>
                <el-button size="small" @click="titleUpData">
                  修改
                </el-button>
                <el-button size="small" @click="titleSure">
                  保存
                </el-button>
                <el-button size="small" @click="titleDisabled = true">
                  取消
                </el-button>
              </div>
            </el-card>
            <el-card>
              <div>登录页文字：</div>
              <div class="inputUpDown">
                <el-input v-model="loginTitleValue" clearable :disabled="loginDisabled" />
              </div>
              <div>
                <el-button size="small" @click="loginUpdata">
                  修改
                </el-button>
                <el-button size="small" @click="loginSure">
                  保存
                </el-button>
                <el-button size="small" @click="loginDisabled = true">
                  取消
                </el-button>
              </div>
            </el-card>
            <el-card>
              <div>地图：</div>
              <div class="inputUpDown">
                <el-select v-model="mapValue" clearable :disabled="mapDisabled">
                  <el-option label="高德地图" value="1" />
                  <el-option label="百度地图" value="2" />
                  <el-option label="天地图" value="3" />
                  <el-option label="其他地图" value="4" />
                </el-select>
                <el-input v-if="otherMapShow" v-model="otherMapValue" placeholder="请输入地址" />
              </div>
              <div>
                <el-button size="small" @click="mapUpdata">
                  修改
                </el-button>
                <el-button size="small" @click="mapSure">
                  保存
                </el-button>
                <el-button size="small" @click="mapCencel">
                  取消
                </el-button>
              </div>
            </el-card>
          </el-col>
          <el-col :span="16">
            <el-col>
              <el-card header="浏览器页签: 页签Logo(图片不能超过200KB)">
                <el-upload
                  ref="upload"
                  :before-upload="handleBeforeUpload"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :on-exceed="handleExceed"
                  :on-change="handleChange"
                  :http-request="uploadFile"
                  :file-list="imageList"
                  :limit="4"
                  :class="{hide:hideUpload}"
                  multiple
                  action="string"
                  accept=".jpg,.jpeg,.png "
                  list-type="picture-card"
                >
                  <i class="el-icon-plus" />
                </el-upload>
                <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
                  <div class="imgBox">
                    <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
                  </div>
                </el-dialog>
              </el-card>
            </el-col>
            <el-col>
              <el-card header="标题: 系统Logo(图片不能超过200KB)">
                <el-upload
                  ref="upload"
                  :before-upload="handleBeforeUpload"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :on-exceed="handleExceed"
                  :on-change="handleChange"
                  :http-request="uploadFile"
                  :file-list="imageList"
                  :limit="4"
                  :class="{hide:hideUpload}"
                  multiple
                  action="string"
                  accept=".jpg,.jpeg,.png "
                  list-type="picture-card"
                >
                  <i class="el-icon-plus" />
                </el-upload>
                <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
                  <div class="imgBox">
                    <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
                  </div>
                </el-dialog>
              </el-card>
            </el-col>
            <el-col>
              <el-card header="登录页: 登录页Logo(图片不能超过200KB)">
                <el-upload
                  ref="upload"
                  :before-upload="handleBeforeUpload"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :on-exceed="handleExceed"
                  :on-change="handleChange"
                  :http-request="uploadFile"
                  :file-list="imageList"
                  :limit="4"
                  :class="{hide:hideUpload}"
                  multiple
                  action="string"
                  accept=".jpg,.jpeg,.png "
                  list-type="picture-card"
                >
                  <i class="el-icon-plus" />
                </el-upload>
                <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
                  <div class="imgBox">
                    <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
                  </div>
                </el-dialog>
              </el-card>
            </el-col>
          </el-col>
        </el-scrollbar>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      titleValue: '',
      loginTitleValue: '',
      titleDisabled: true,
      loginDisabled: true,
      mapDisabled: true,
      otherMapShow: false,
      mapValue: '',
      otherMapValue: ''
    }
  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dept-div{
    .box-card{
      width:100%;
      .user-dept-scroll{
        width:100%;
        height: calc(100vh - 240px);
      }
    }
  }
  .inputUpDown{
    margin: 20px 0;
  }
</style>