<template>
  <div class="app-container">


    <el-descriptions :column="2" class="margin-top" title="基础配置" border style="width: 70%;margin: 0 auto">
      <template slot="extra">
        <el-button type="primary" size="small" @click="submitForm()">保存</el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"/>
          商铺地址
        </template>
        <el-input v-model="form.address" placeholder="请输入商铺地址" style="width: 60%;display: inline-block"/>
        <el-button type="primary" icon="el-icon-location-outline" style="float: right"
                   @click="chooseLatLng('group',form.latitude,form.longitude)"></el-button>
        <!--        {{ shopConfig.groupLatitude }} {{ shopConfig.groupLongitude }}-->
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"/>
          商铺电话
        </template>
        <el-input v-model="form.contactNumber" placeholder="请输入商铺电话"/>
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template slot="label">
          <i class="el-icon-mobile-phone"/>
          商铺名称
        </template>
        <el-input v-model="form.partnerName" placeholder="请输入商铺名称"/>
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template slot="label">
          <i class="el-icon-mobile-phone"/>
          营业时间
        </template>
        <el-input v-model="form.workTime" placeholder="请输入营业时间"/>
      </el-descriptions-item>
      <el-descriptions-item :span="4">
        <template slot="label">
          <i class="el-icon-mobile-phone"/>
          店铺描述
        </template>
        <el-input v-model="form.remark" placeholder="请输入店铺描述"/>
      </el-descriptions-item>

      <el-descriptions-item :span="4">
        <template slot="label">
          <i class="el-icon-mobile-phone"/>
          店铺logo
        </template>
        <image-upload v-model="form.partnerLogo"/>
      </el-descriptions-item>
      <el-descriptions-item :span="4">
        <template slot="label">
          <i class="el-icon-mobile-phone"/>
          店铺图片
        </template>
        <image-upload v-model="form.shopImages"/>
      </el-descriptions-item>
    </el-descriptions>

    <div class="mapPop" v-show="mapOpen">
      <div class="title">单击位置选点，用于小程序导航使用 <span @click="mapOpen = false">X</span></div>
      <div id="map" style="width: 800px;height: 500px"></div>
    </div>


  </div>
</template>

<script>
  import {shopInfo,getPartnerInfo,editPartnerInfo} from "./api/shopmaintaining";
  import {cleanLogininfor} from "@/api/monitor/logininfor";
  // 引入加载TXMap的方法
  // import TMap from "@/utils/initMap";
  export default {
    name: "Shopconfig",
    data() {
      return {
        partnerId:'',
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 基础配置表格数据
        shopconfigList: [],
        shopConfig: {},
        inspectionSteps:[],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        // 表单参数
        form: {
          imageList:[],
        },
        // 表单校验
        rules: {},
        centerPoint: {
          latitude: 39.984120,
          longitude: 116.307484
        },
        mapOpen: false,
        mapType: null
      };
    },
    created() {
      // this.getList();
      this.getshopInfo()

    },
    mounted() {
      // this.mapInit()
    },
    methods: {
      //获取Pid
      getshopInfo(){
        shopInfo().then(res=>{
          this.partnerId = res.data.partnerId
          this.getPartnerInfo()
        })
      },
      getPartnerInfo(){
        let data = {
          partnerId: this.partnerId
        }
        getPartnerInfo(data).then(res=>{
          this.form = res.data
          // res.data.shopImageList.forEach(it=>{
          //   if(it){
          //     this.form.imageList.push(
          //       {
          //         url: 'https://www.nuoyunr.com/jdcJc' + it
          //       })
          //   }
          //
          // })
          console.log('dian',res)
        })
      },
      mapInit(lat, lng) {
        let that = this;
        let map = new qq.maps.Map(document.getElementById("map"), {
          center: new qq.maps.LatLng(lat, lng),
          zoom: 13
        });
        let marker = new qq.maps.Marker({
          map: map,
          position: new qq.maps.LatLng(lat, lng),
        });
        //添加监听事件
        qq.maps.event.addListener(map, 'click', function (event) {
          console.log(event.latLng.lat, event.latLng.lng);

          let marker = new qq.maps.Marker({
            map: map,
            position: new qq.maps.LatLng(event.latLng.lat, event.latLng.lng),
          });
          setTimeout(() => {
            that.setValueLatLng(event.latLng.lat, event.latLng.lng)
          }, 500)
        });
      },
      chooseLatLng(type, lat, lng) {
        this.mapOpen = true
        this.mapInit(lat, lng);

      },
      setValueLatLng(lat, lng) {

        this.form.longitude = lng
        this.form.latitude = lat


        this.mapOpen = false
      },
      /** 查询基础配置列表 */
      getList() {
        this.loading = true;

        listShopconfig(this.queryParams).then(response => {

        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          groupTel: null,
          groupAddress: null,
          carTel: null,
          inspectionTel: null,
          schoolTel: null,
          schoolAddress: null,
          dayRescueTel: null,
          nightRescueTel: null,
          repairTel: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加基础配置";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getShopconfig(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改基础配置";
        });
      },
      /** 提交按钮 */
      submitForm() {

        editPartnerInfo(this.form).then(res => {
          this.$modal.msgSuccess("修改成功");
          this.open = false;
          this.getshopInfo()
        });

      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除基础配置编号为"' + ids + '"的数据项？').then(function () {
          return delShopconfig(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('system/shopconfig/export', {
          ...this.queryParams
        }, `shopconfig_${new Date().getTime()}.xlsx`)
      }
    }
  };
</script>
<style lang="scss">
  .mapPop {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    #map {
      border: 2px solid #d5d5d5;
    }

    .title {
      padding: 10px;
      background-color: #00afff;
      color: #FFF;

      span {
        float: right;
      }
    }
  }
</style>
