<template>
  <div class="bg-F5">
    <div class="container">
      <div class="partTitle"><span class="orangeLine"></span>商户入驻申请</div>
      <el-form class="formPanel" ref="form" :model="form" label-width="280px">
        <div class="formTitle">
          账户信息
          <span class="subTitle">（账号用于登录商户平台）</span>
        </div>
        <el-form-item class="formItem" label="用户名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item class="formItem" label="请设置密码">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item class="formItem" label="请确认密码">
          <el-input v-model="form.surepassword"></el-input>
        </el-form-item>

        <div class="line"></div>
        <div class="formTitle">企业基本信息</div>
        <el-form-item class="formItem" label="企业名称">
          <el-input v-model="form.qyname"></el-input>
        </el-form-item>
        <el-form-item class="formItem" label="企业类型">
          <el-select v-model="form.qytype" placeholder="请选择">
            <el-option
              v-for="item in qyTypeArr"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="formItem" label="企业所在地">
          <el-select
            class="quyuSel"
            v-model="form.sheng"
            placeholder="请选择省"
            @change="provinceChange"
          >
            <el-option value="" label="请选择省份"></el-option>
            <el-option
              :value="item"
              :label="item.label"
              v-for="(item, index) in city"
              :key="index"
            ></el-option>
          </el-select>
          <el-select
            class="quyuSel"
            v-model="form.shi"
            placeholder="请选择城市"
            @change="cityChange"
          >
            <el-option value="" label="请选择城市"></el-option>
            <el-option
              :value="item"
              :label="item.label"
              v-for="(item, index) in cityList"
              :key="index"
            ></el-option>
          </el-select>
          <el-select
            class="quyuSel"
            v-model="form.qu"
            placeholder="请选择区县"
            @change="countyChange"
          >
            <el-option value="" label="请选择区县"></el-option>
            <el-option
              :value="item"
              :label="item.label"
              v-for="(item, index) in areaList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="formItem" label="详细地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item class="formItem" label="经纬度选择">
          <div class="longLatDiv">
            <span>经度</span>
            <el-input class="input" v-model="form.lng"></el-input>
          </div>
          <div class="longLatDiv">
            <span>纬度</span>
            <el-input class="input" v-model="form.lat"></el-input>
          </div>
          <el-button class="submitBtn" @click="mapAddress">{{
            mapVisible ? "关闭" : "选择"
          }}</el-button>
          <div :class="{ map: true, show: mapVisible }" id="map"></div>
        </el-form-item>
        <el-form-item class="formItem" label="企业法人">
          <el-input v-model="form.qytype"></el-input>
        </el-form-item>
        <el-form-item class="formItem" label="联系电话">
          <el-input v-model="form.qytype"></el-input>
        </el-form-item>
        <el-form-item class="formItem" label="成立日期">
          <el-input v-model="form.qytype"></el-input>
        </el-form-item>
        <el-form-item class="formItem" label="统一社会信用代码">
          <el-input v-model="form.qytype"></el-input>
        </el-form-item>
        <el-form-item class="formItem" label="营业执照">
          <el-upload class="avatar-uploader" action="" :show-file-list="false">
            <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
            <div class="uploadIconDiv" v-else>
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <div class="txt">上传图片</div>
            </div>
          </el-upload>
          <div class="info">
            有效期内的企业营业执照，图片仅支持JPG,PNG格式，大小小于2M
          </div>
        </el-form-item>
        <el-form-item class="formItem" label="企业默认图片">
          <el-upload class="avatar-uploader" action="" :show-file-list="false">
            <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
            <div class="uploadIconDiv" v-else>
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <div class="txt">上传图片</div>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item class="formItem" label="企业宣传图片">
          <el-upload class="avatar-uploader" action="" :show-file-list="false">
            <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
            <div class="uploadIconDiv" v-else>
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <div class="txt">上传图片</div>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item class="formItem" label="企业介绍">
          <el-input type="textarea" v-model="form.qytype"></el-input>
        </el-form-item>
        <div class="line"></div>
        <el-form-item class="formItem tc">
          <el-button class="submitBtn" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { Component, Vue } from "vue-property-decorator";
import areadata from "@/api/area";
import BMap from "BMap";
export default {
  name: "app",
  components: {},
  data() {
    return {
      city: areadata,
      cityList: [],
      areaList: [],
      form: {
        name: "",
        password: "",
        surepassword: "",
        qyname: "",
        qytype: "",
        sheng: "",
        shi: "",
        qu: "",
        address: "",
        imageUrl: "",
        lng: "",
        lat: ""
      },
      qyTypeArr: [],
      mapVisible: false,
      local: null
    };
  },
  methods: {
    qyTypeData() {
      var that = this;
      that
        .$post("/common/dict", { dictType: "company_type" })
        .then(function(res) {
          console.log(res);
          if (!res[0]) {
            that.qyTypeArr = res[1].list;
          }
        });
    },
    onSubmit() {},
    chooseMap() {
      this.mapVisible = true;
    },
    createMap() {
      var that = this;
      var map = new BMap.Map("map", { minZoom: 8, maxZoom: 16 });
      var point = new BMap.Point(112.471384, 34.6251625);
      map.centerAndZoom(point, 13);
      map.addControl(
        new BMap.MapTypeControl({
          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
        })
      );
      map.enableScrollWheelZoom(true);
      map.addEventListener("click", function(e) {
        map.clearOverlays();
        var pt = e.point;
        map.addOverlay(new BMap.Marker(pt));
        that.form.lng = pt.lng;
        that.form.lat = pt.lat;
      });
      return map;
    },
    provinceChange(event) {
      console.log(event);
      console.log(this.form.sheng);
      var that = this;
      if (event) {
        that.cityList = event.children;
      } else {
        that.cityList = [];
      }
      that.areaList = [];
      that.$emit("getLawyerListInfo", [event.label, "province"]);
      var map = that.createMap();
      map.centerAndZoom(that.form.sheng.label, 11);
    },
    cityChange(event) {
      var that = this;
      console.log(event);
      console.log(this.form.shi);
      if (event) {
        that.areaList = event.children;
      } else {
        that.areaList = [];
      }
      this.$emit("getLawyerListInfo", [event.label, "city"]);
      var map = that.createMap();
      map.centerAndZoom(that.form.shi.label, 13);
    },
    countyChange(event) {
      var that = this;
      console.log(event);
      console.log(this.form.qu);
      this.$emit("getLawyerListInfo", [event.label, "area"]);
      var map = that.createMap();
      var myGeo = new BMap.Geocoder();
      map.centerAndZoom(that.form.qu.label, 15);
      myGeo.getPoint(
        that.form.shi.label + that.form.qu.label,
        function(point) {
          if (point) {
            map.clearOverlays();
            map.centerAndZoom(point, 12);
            map.addOverlay(new BMap.Marker(point));
            that.form.lng = point.lng;
            that.form.lat = point.lat;
          } else {
            that.$message(
              "无法解析地址,请完善详细地址信息或者手动点击地图选择"
            );
          }
        },
        that.form.sheng.label
      );
    },
    mapFun() {
      var that = this;
      var map = that.createMap();
      if (that.local.getResults().getPoi(0)) {
        var pp = that.local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
        map.centerAndZoom(pp, 18);
        map.addOverlay(new BMap.Marker(pp)); //添加标注
        that.form.lng = pp.lng;
        that.form.lat = pp.lat;
      } else {
        that.$message("无法解析地址,请完善详细地址信息或者手动点击地图选择");
      }
    },
    mapAddress() {
      var that = this;
      if (that.form.sheng == "" || that.form.shi == "" || that.form.qu == "") {
        that.$message("请选择区域！");
        return;
      }
      if (that.form.address == "") {
        that.$message("输入详细地址后定位！");
        return;
      }
      that.mapVisible = !that.mapVisible;
      var map = that.createMap();
      map.clearOverlays();
      that.local = new BMap.LocalSearch(map, {
        //智能搜索
        onSearchComplete: that.mapFun
      });
      that.local.search(that.form.shi + that.form.qu + that.form.address);
    }
  },
  mounted() {
    var that = this;
    this.createMap();
    that.qyTypeData();
  }
};
</script>
<style scoped lang="scss">
.partTitle {
  padding: 3rem 0 2rem 0;
  font-size: 1.8rem;
  color: #333;
  .orangeLine {
    display: inline-block;
    height: 1.8rem;
    width: 0.3rem;
    background: #fd5522;
    vertical-align: middle;
    border-radius: 0.15rem;
    margin-right: 1rem;
  }
}
.formPanel {
  background: #fff;
  padding: 2rem;
  box-sizing: border-box;
  z-index: 1;
  border-radius: 0.4rem;
  margin-bottom: 4rem;
  .formItem {
    width: 80%;
    .quyuSel {
      width: 31%;
      margin-right: 3.5%;
      &:last-child {
        margin-right: 0;
      }
    }
    .info {
      height: 2.4rem;
      line-height: 2.4rem;
      font-size: 1.2rem;
      color: #999;
    }
  }
  .formTitle {
    font-size: 1.6rem;
    color: #333;
    padding-bottom: 4rem;
    .subTitle {
      color: #999;
    }
  }
  .line {
    width: 100%;
    height: 0.1rem;
    background: #e5e5e5;
    margin: 3rem 0 2rem 0;
  }
  .submitBtn {
    color: #fff;
    background: #fd5522;
    border-color: #fd5522;
  }
  .longLatDiv {
    width: 40%;
    float: left;
    margin-right: 1rem;
    .input {
      width: 80%;
      margin-left: 1rem;
    }
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.uploadIconDiv {
  width: 12rem;
  height: 12rem;
  text-align: center;
  padding: 3.4rem 0;
  box-sizing: border-box;
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
  }
  .txt {
    height: 2.4rem;
    line-height: 2.4rem;
    font-size: 1.4rem;
    color: #333;
  }
}
.map {
  width: 100%;
  height: 50rem;
  position: absolute;
  top: 5rem;
  left: 0;
  z-index: 1;
  display: none;
  &.show {
    display: block;
  }
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.tc {
  text-align: center;
}
</style>
<style lang="scss">
.formPanel {
  .el-form-item__label {
    color: #666;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .distpicker-address-wrapper select {
    width: 32%;
  }
}
</style>
