<template>
  <div class="mapTool" v-show="false">
    <a-row>
      <a-col span="6">
        <div
          style="
            width: 2rem;
            height: 2rem;
            opacity: 1;
            background-color: #fff;
            box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
            border-radius: 20px;
          "
        >
          <!-- <img src="../public/1.png" @click="showPanel" alt="" srcset="" /> -->
        </div>
      </a-col>
      <a-col span="18" style="margin-top: 4px">
        <div style="display: flex; align-items: center">
          <div @click="sdrawline()">
            <img src="../public/polyline.png" alt="" srcset="" />
          </div>
          <div class="imgdiv" @click="sdrawPolygon()">
            <img src="../public/polygon.png" alt="" srcset="" />
          </div>
          <div class="imgdiv" @click="sdrawText()">
            <img src="../public/2.png" alt="" srcset="" />
          </div>
          <div class="imgdiv">
            <img src="../public/line.png" alt="" srcset="" />
          </div>
          <div class="imgdiv" @click="sremove()">
            <img src="../public/delete.png" alt="" srcset="" />
          </div>
        </div>
      </a-col>
      <a-col span="6" style="margin-top: 10px">
        <!-- <img src="../public/2.png"  alt="" srcset="" /> -->
      </a-col>
    </a-row>
  </div>
  <div class="panel" v-show="showline">
    <a-form :labelCol="{ span: 6 }" :wrapperCol="{ span: 1 }">
      <a-form-item label="线形">
        <a-radio-group>
          <a-radio value="1">实线</a-radio>
          <a-radio value="2">虚线</a-radio
          ><!--  -->
        </a-radio-group>
      </a-form-item>
      <a-form-item label="线宽">
        <a-input />
      </a-form-item>
      <a-form-item label="边线颜色">
        <a-input />
      </a-form-item>
      <a-form-item label="透明度">
        <a-slider id="test" :default-value="30" />
      </a-form-item>
    </a-form>
  </div>

  <div class="panel" v-show="showpolygon">
    <a-form :labelCol="{ span: 6 }" :wrapperCol="{ span: 1 }">
      <a-form-item label="线形">
        <a-radio-group>
          <a-radio value="1">实线</a-radio>
          <a-radio value="2">虚线</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="线宽">
        <a-input />
      </a-form-item>
      <a-form-item label="边线颜色">
        <a-input />
      </a-form-item>
      <a-form-item label="透明度">
        <a-input />
      </a-form-item>
    </a-form>
  </div>

  <div class="panel2" v-show="showText" ref="panel">
    <a-form :labelCol="{ span: 6 }" :wrapperCol="{ span: 1 }">
      <a-form-item label="字体">
        <a-select v-model:value="font.type" style="width: 120px" @change="handleChange">
          <a-select-option
            v-for="item in fonttype"
            :key="item.id"
            :value="item.id"
            :label="item.name"
            >{{ item.name }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item label="颜色">
        <a-input style="width: 120px" v-model:value="font.color" />
      </a-form-item>
      <a-form-item label="字号">
        <a-input-number style="width: 120px" v-model:value="font.size" @change="numberChange" />
      </a-form-item>
      <a-form-item label="加粗">
        <a-switch default-checked v-model:checked="font.isBig" @click="getvalue" />
      </a-form-item>
    </a-form>
    <div>
      <a-button @click="confirm">确认</a-button>
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'MapTool',
    components: {},
    props: {
      showPanel: {
        type: Function,
        required: true,
      },
      remove: {
        type: Function,
        required: true,
      },
      drawline: {
        type: Function,
        required: true,
      },
      drawPolygon: {
        type: Function,
        required: true,
      },
      drawText: {
        type: Function,
        required: true,
      },
    },

    setup() {
      return {};
    },

    data() {
      return {
        showline: false,
        showpolygon: false,
        showText: false,
        font: {
          type: '黑体',
          color: '#ff0000',
          size: 30,
          isBig: true,
        },
        fonttype: [
          {
            name: '黑体',
            id: '1',
          },
          {
            name: '黑体2',
            id: '2',
          },
          {
            name: '黑体3',
            id: '3',
          },
          {
            name: '黑体4',
            id: '4',
          },
        ],
      };
    },

    methods: {
      // showPanel() {
      //   this.showToolPanel = true;
      // },
      sremove() {
        this.remove();
      },
      sdrawline() {
        console.log('子组件点击画线');
        this.drawline('measure_length');
      },
      sdrawPolygon() {
        console.log('子组件点击画面');
        this.drawPolygon('measure_area');
      },
      sdrawText() {
        this.showText = true;
        console.log('子组件点击文字', this.showText);
        this.$refs.panel.style.display = 'block';
        console.log('子组件点击文字', this.$refs.panel);
      },
      confirm() {
        console.log('确认了', this.font);
        this.drawText('121', '37', '理塘丁真');
      },
      handleChange(value) {
        console.log(value, 'value');
      },
      getvalue(e) {
        console.log(e, 'e');
        // this.font.isBig=!this.font.isBig
        console.log(this.font.isBig, 'this.font.isBig');
      },
      isBigFun(value) {
        this.font.isBig = value;
      },
      numberChange(e) {
        console.log(e, 'e');
      },
    },
  });
</script>
<style scoped>
  .mapTool {
    position: absolute;
    z-index: 999;
    top: 1rem;
    color: brown;
    width: 9rem;
    height: 2rem;
    opacity: 1;
    background-color: #fff;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
    margin-left: 1.5rem;
    border-radius: 20px;
  }

  .panel {
    padding: 10px;
    position: absolute;
    z-index: 999;
    top: 4rem;
    color: brown;
    width: 10rem;
    height: 12rem;
    opacity: 1;
    background-color: #fff;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
    margin-left: 1rem;
    border-radius: 4px;

    /* 添加一些内容，或者删除空块 */
  }

  .panel2 {
    padding: 10px;
    position: absolute;
    z-index: 999;
    top: 4rem;
    color: brown;
    width: 12rem;
    height: 16rem;
    opacity: 1;
    background-color: #fff;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
    margin-left: 1rem;
    border-radius: 4px;

    /* 添加一些内容，或者删除空块 */
  }

  ul li {
    display: inline-block;
  }

  .imgdiv {
    padding-left: 8px;
  }
</style>
