<template>
  <el-row>
    <el-col>
      <el-col>
        <el-col>浏览器页签</el-col>
        <el-col :span="3" class="secondTitle">
          页面logo：
        </el-col>
        <el-col :span="1" class="thirdTitle">
          <el-upload
            :limit="1"
            :show-file-list="false"
            :file-list="fileList1"
            action="string"
            accept=".xls,.xlsx"
            class="edit_btn"
          >
            <el-button type="text" size="small">
              上传 ('图片不能超过200KB')
            </el-button>
          </el-upload>
        </el-col>
      </el-col>
      <el-col>
        <el-col>标题</el-col>
        <el-col :span="3" class="secondTitle">
          系统logo：
        </el-col>
        <el-col :span="1" class="thirdTitle">
          <el-upload
            :limit="1"
            :show-file-list="false"
            :file-list="fileList2"
            action="string"
            accept=".xls,.xlsx"
            class="edit_btn"
          >
            <el-button type="text" size="small">
              上传 ('图片不能超过200KB')
            </el-button>
          </el-upload>
        </el-col>
      </el-col>
      <el-col>
        <el-col :span="3" class="secondTitle">
          标题文字：
        </el-col>
        <el-col :span="4" class="thirdTitle">
          <el-input
            v-model="titleText"
            size="small"
            clearable
            placeholder="智能窨井管理系统"
          />
        </el-col>
        <el-col :span="6" class="thirdTitle">
          <el-button v-if="editShow" size="small" @click="editShow=false">
            修改
          </el-button>
          <el-button v-if="!editShow" size="small" @click="editShow=true">
            保存
          </el-button>
          <el-button v-if="!editShow" size="small" @click="editShow=true">
            取消
          </el-button>
        </el-col>
      </el-col>
      <el-col>
        <el-col>登录页</el-col>
        <el-col :span="3" class="secondTitle">
          登录页logo：
        </el-col>
        <el-col :span="1" class="thirdTitle">
          <el-upload
            :limit="1"
            :show-file-list="false"
            :file-list="fileList3"
            action="string"
            accept=".xls,.xlsx"
            class="edit_btn"
          >
            <el-button type="text" size="small">
              上传 ('图片不能超过200KB')
            </el-button>
          </el-upload>
        </el-col>
      </el-col>
      <el-col>
        <el-col :span="3" class="secondTitle">
          登录页文字：
        </el-col>
        <el-col :span="4" class="thirdTitle">
          <el-input
            v-model="logtitleText"
            size="small"
            clearable
            placeholder="智能窨井管理系统"
          />
        </el-col>
        <el-col :span="6" class="thirdTitle">
          <el-button v-if="logeditShow" size="small" @click="logeditShow=false">
            修改
          </el-button>
          <el-button v-if="!logeditShow" size="small" @click="logeditShow=true">
            保存
          </el-button>
          <el-button v-if="!logeditShow" size="small" @click="logeditShow=true">
            取消
          </el-button>
        </el-col>
      </el-col>
      <el-col>
        <el-col>地图</el-col>
        <el-col :span="3" class="secondTitle">
          采用地图：
        </el-col>
        <el-col :span="4" class="thirdTitle">
          <el-select
            v-model="listQuery.mapType"
            size="small"
            placeholder="请选择地图类型"
            @change="mapChange"
          >
            <el-option
              v-for="item in mapTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col v-if="maptypeShow" :span="4" class="thirdTitle">
          <el-input v-model="listQuery.mapAddress" size="small" placeholder="请输入地图地址" />
        </el-col>
        <el-col :span="6" class="thirdTitle">
          <el-button size="small" @click="buttonClick">
            确定
          </el-button>
        </el-col>
      </el-col>
    </el-col>
  </el-row>
</template>

<script>
import { mapTypeSelect } from '@/api/systemConfig/mapConfig'
export default {
  name: 'ViewPcConfig',
  data() {
    return {
      listQuery: {
        mapType: '0',
        mapAddress: ''
      },
      titleText: '',
      logtitleText: '',
      editShow: true,
      logeditShow: true,
      maptypeShow: false,
      fileList1: [],
      fileList2: [],
      fileList3: [],
      mapTypeList: [
        {
          label: '百度地图',
          value: '0'
        },
        {
          label: '高度地图',
          value: '1'
        },
        {
          label: '其他地图',
          value: '2'
        }
      ]
    }
  },
  methods: {
    buttonClick() {
      mapTypeSelect(this.listQuery).then(response => {
        console.log(response)
      })
    },
    mapChange(val) {
      this.listQuery.mapAddress = ''
      if (val === '2') {
        this.maptypeShow = true
      } else {
        this.maptypeShow = false
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.secondTitle {
  margin: 20px;
}
.thirdTitle {
  margin: 14px 20px;
}
</style>