<template>
  <div class="mianclass">
    <el-form :model="arr" label-width="90px">
      <el-form-item label="最小层级">
        <el-input
          @change="changeinput"
          size="small"
          v-model="arr.minzoom"
        ></el-input>
      </el-form-item>
      <el-form-item label="最大层级">
        <el-input
          @change="changeinput"
          size="small"
          v-model="arr.maxzoom"
        ></el-input>
      </el-form-item>
      <el-form-item label="是否可见">
        <el-select
          @change="changeinput"
          size="small"
          v-model="arr.layout['visibility']"
          placeholder="请选择"
        >
          <el-option label="可见" value="visible"> </el-option>
          <el-option label="隐藏" value="none"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否反锯齿">
        <el-select
          @change="changeinput"
          size="small"
          v-model="arr.paint['fill-antialias']"
          placeholder="请选择"
        >
          <el-option label="是" :value="true"> </el-option>
          <el-option label="否" :value="false"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="填充透明度">
        <el-input-number
          @change="changeinput"
          size="small"
          v-model="arr.paint['fill-opacity']"
          :precision="2"
          :step="0.1"
          :max="1"
          controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="填充图案">
        <el-input
          placeholder="sprite 雪碧图中图标名称"
          @change="changeinput"
          size="small"
          v-model="arr.paint['fill-pattern']"
        ></el-input>
      </el-form-item>
      <el-form-item label="填充颜色">
        <el-color-picker
          @change="changeinput"
          v-model="arr.paint['fill-color']"
        ></el-color-picker>
      </el-form-item>
      <el-form-item label="描边颜色">
        <el-color-picker
          @change="changeinput"
          v-model="arr.paint['fill-outline-color']"
        ></el-color-picker>
      </el-form-item>
      <el-form-item label="填充平移">
        <span style="color: #fff"> X </span>
        <el-input
          style="width: 100px"
          @change="changeinput"
          size="small"
          v-model.number="arr.paint['fill-translate'][0]"
        ></el-input>
        <span style="color: #fff"> Y </span>
        <el-input
          style="width: 100px"
          @change="changeinput"
          size="small"
          v-model.number="arr.paint['fill-translate'][1]"
        ></el-input>
      </el-form-item>
      <el-form-item label="平移锚点">
        <el-select
          @change="changeinput"
          size="small"
          v-model="arr.paint['fill-translate-anchor']"
          placeholder="请选择"
        >
          <el-option label="viewport" value="viewport"> </el-option>
          <el-option label="map" value="map"> </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    arr: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    
    return {
    };
  },
  methods: {
    changeinput() {
      this.$emit("mianchangeinput", this.arr);
    },
  },
};
</script>

<style scoped>
/* .mianclass ::v-deep .el-input__inner {
  background-color: transparent;
  border: 1px solid #00b2ff;
  color: #fff;
}
.mianclass ::v-deep .el-form-item__label {
  color: #00b2ff;
  line-height: 30px;
}
.mianclass ::v-deep .el-button--small {
  padding: 0.625rem 2.5rem;
} */
</style>