<template>
    <div class="full" >
      <div style="height: 100%;width: 100%;background: rgba(0,0,0,0.1);position: relative;top: 0px">
        <amap
          ref="gridMap"
          cache-key="home-map"
          map-style="amap://styles/whitesmoke"
          :zoom="17"
          :center="[106.20369238257405,38.472071877817285]"
          :extraOptions="options"
          view-mode="3D"
        >
          <amap-mouse-tool
            :mode="mode"
            :clear-when-close="true"
            @draw="onDraw"
          />

          <amap-polygon
            v-if="polygon"
            :path.sync="polygon"
            :fill-opacity="0.5"
            :fillColor = 'form.gridColor'
            :strokeColor = 'form.gridColor'
          />

          <amap-polygon
            v-for="(item,index) of polygon2"
            v-if="polygon2"
            :path.sync="item"
            :fill-opacity="0.5"
            :fillColor = 'form.gridColor'
            :strokeColor = 'form.gridColor'
          />

        </amap>
        <div v-if="mode=='none'" class="tools-bar">
          <el-button style="margin: 20px" @click="paint">新建网格区域</el-button>
        </div>

        <div v-else class="tools-bar" style="background: rgba(150,56,56,0.5)">
          <el-button style="margin: 20px" @click="finish">绘制完成</el-button>
          <el-button style="margin: 20px" @click="reset">重置</el-button>
          <el-button style="margin: 20px" @click="cancel">退出</el-button>
        </div>

        <el-dialog :visible.sync="bingVisible"
                   :close-on-press-escape='false'
                   :close-on-click-modal="false"
                   :append-to-body="true"
                   top="25vh"
        >
          <avue-form ref="form" v-model="form" :option="option" @submit="submit">
          </avue-form>
        </el-dialog>

      </div>
    </div>
</template>
<script>

  export default {
    data() {
      return {
        form:{
        },
        polygon: [],
        polygon2: [],
        bingVisible: false,
        mode: 'none',
        skyColor: 'rgb(72,203,243)',
        options: {
        }
      };
    },
    mounted() {
      this.mode = 'none';
      console.log(window.AMap,456);
      let districtSearch = new window.AMap.DistrictSearch({
        subdistrict: 1,
        level: 'biz_area',
        extensions: 'all',
      });
      districtSearch.search('110101001',(x,y) =>{
        console.log(x,y,123);
        this.polygon2 = y.districtList[0].boundaries;
      })
    },
    computed: {
      option(){
        return {
          size: 'mini',
          submitText: '完成',
          column: [
            {
              label: '网格名称',
              prop: 'gridName',
              rules: [{
                required: true,
                message: "请输入网格名称",
                trigger: "blur"
              }]
            },
            {
              label: '网格颜色',
              prop: 'gridColor',
              type: 'color',
              rules: [{
                required: true,
                message: "请输入网格名称",
                trigger: "blur"
              }]
            },
            {
              label: '网格员',
              prop: 'gridPerson',
              // component: 'lazySelect',
              // params: {
              //   dicUrl: '/api/person/member/list',
              //   code: 'id',
              //   title: 'memberName',
              // },
              // event: {
              //   change: (data)=>{
              //     this.form['gridPerson'] = data.id;
              //   }
              // },
              type: 'select',
              dicData: [
                {label: '网格员1',value: "1"},
                {label: '网格员2',value: "2"},
              ],
              rules: [{
                required: true,
                message: "请选择网格管理员",
                trigger: "blur"
              }]
            }
          ],
        }
      }
    },
    methods: {
      onDraw(type, res) {
        this.polygon = res;
        this.mode = 'painting'
      },
      paint(){
        this.mode = 'polygon';
        this.polygon =  [];
        this.form = {
          gridColor : "#5abbec"
        }
      },
      cancel(){
        this.mode = 'none';
        this.polygon =  [];
      },
      finish(){
        if(this.polygon.length == 0){
          layer.msg("请先绘制网格区域！")
          return
        }
        this.bingVisible = true;
      },
      reset(){
        this.polygon = [];
        this.mode = 'polygon'
      },
      submit (loading,done) {
        layer.msg("添加网格成功！");
        this.mode = 'none';
        done();
        this.bingVisible = false;
      },
    },

  };
</script>

<style scoped>
  .full{
    margin: 0;
    padding: 0px;
    width: 100%;
    height: 100%;
  }
  .tools-bar{
    width: 100%;
    height: 80px;
    background: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
  }
  .center{
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
