<template>
  <a-spin :spinning="confirmLoading">
    <div class="title-top">
      <h3>{{title}}</h3>
      <div class="button"><a-button @click="toReturn">返回</a-button>
        <a-button type="primary" @click="submitForm" v-if="pageType == 'add' ">保存</a-button>
        <a-button type="danger" @click="onExamine(2)" v-if="pageType == 'audit'">审核驳回</a-button>
        <a-button type="primary" @click="onExamine(1)" v-if="pageType == 'audit'">审核通过</a-button>
      </div>
    </div>

    <j-form-container :disabled="pageType!='add'">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-card title="绑定商铺基本信息">
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="选择小区" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="communityName">
                <a-input v-model="model.communityName" placeholder="请选择小区" read-only>
                  <a-icon slot="addonAfter" type="search" @click="chooseCommunity()" />
                </a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="选择商铺" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="shopName">
                <a-input v-model="model.shopName" placeholder="请选择商铺" read-only>
                  <a-icon slot="addonAfter" type="search" @click="chooseShops()" />
                </a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item label="关联房屋" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="shopsInfo.roomName" placeholder="请选择关联房屋" disabled></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="统一信用代码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="shopsInfo.creditCode" placeholder="请输入统一信用代码" disabled></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="shopsInfo.contactName" placeholder="请输入联系人" disabled></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="联系人电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="shopsInfo.contactPhone" placeholder="请输入联系人电话" disabled></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="法人姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="shopsInfo.legalName" placeholder="请输入法人姓名" disabled></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="注册地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="shopsInfo.registAdress" placeholder="注册地址" disabled></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="详细地址" :labelCol="{ xs:{ span: 24 }, sm:{ span: 3 } }" :wrapperCol="wrapperCol">
                <a-input v-model="shopsInfo.addressInfo" placeholder="请输入详细地址" disabled></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="" :offset="3" :pull="3" :labelCol="{ xs:{ span: 24 }, sm:{ span: 3 } }">
                <div class="hhh">
                  <div id="container" style="width:100%;height:200px" disabled></div>
                </div>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="商铺介绍" :labelCol="{ xs:{ span: 24 }, sm:{ span: 3 } }" :wrapperCol="wrapperCol">
                <a-textarea v-model="shopsInfo.shopContent" placeholder="请输入集团介绍"
                  :auto-size="{ minRows: 3, maxRows: 5 }" disabled />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
        <a-card title="合同附件" style="margin-top: 10px;">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="合同附件" :labelCol="{ xs:{ span: 24 }, sm:{ span: 3 } }" :wrapperCol="wrapperCol">
                <j-upload v-model="shopsInfo.contractUrl" disabled></j-upload>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
      </a-form-model>
    </j-form-container>
    <a-card title="商铺收款二维码" v-if="codeImg" style="margin-top: 10px;">
      <a-row>
        <a-col :span="24">
          <img style="width: 300px; height: auto;" :src="codeImg">
        </a-col>
      </a-row>
    </a-card>
    <a-card title="操作信息" v-if="recordList.length > 0" style="margin-top: 10px;">
      <a-table ref="table" size="middle" :scroll="{x:true}" bordered rowKey="id" :columns="columns"
        :dataSource="recordList" :pagination="false" :loading="loading" class="j-table-force-nowrap">
      </a-table>
    </a-card>
    <Select-Community-Modal ref="selectCommunityModal" @selectFinished="selectCommunityOK"></Select-Community-Modal>
    <Select-Shops-Modal ref="selectShopsModal" @selectFinished="selectShopsOK"></Select-Shops-Modal>

  </a-spin>
</template>

<script>
const mapZoom = [5, 8, 10, 12]
let timer = null
import { partnersShopByDepId, partnersShopAudit, getQrCode } from '@/api/api'
import { httpAction, getAction } from '@/api/manage'
import { axios } from '@/utils/request'
import SelectCommunityModal from './modules/SelectCommunityModal'
import SelectShopsModal from './modules/SelectShopsModal'

export default {
  name: 'ShopsDetails',
  inject: ['closeCurrent'],
  components: {
    SelectCommunityModal,
    SelectShopsModal,
  },
  data() {
    return {
      title: '',
      loading: false,
      pageType: '',
      model: {
        communityName: '',
        communityCode: '',
        shopName: '',
        shopCode: '',
      },
      shopsInfo: {},
      codeImg: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {
        communityName: [{ required: true, message: '请选择小区', trigger: 'change' }],
        shopName: [{ required: true, message: '请选择商铺', trigger: 'change' }],
      },
      url: {
        add: '/property-central/partners/partnersShop/add',
      },
      mapRef: null,
      recordList: [],
      columns: [
        {
          title: '操作人',
          dataIndex: 'createBy',
          key: 'createBy',
          align: 'center',
        },
        {
          title: '部门',
          dataIndex: 'departName',
          key: 'departName',
          align: 'center',
        },
        {
          title: '操作类型',
          dataIndex: 'operateType',
          key: 'operateType',
          align: 'center',
        },
        {
          title: '审核状态',
          dataIndex: 'auditStatus',
          key: 'auditStatus',
          align: 'center',
        },
        {
          title: '操作时间',
          dataIndex: 'createTime',
          key: 'createTime',
          align: 'center',
        },
      ],
    }
  },
  computed: {},
  created() {
    this.pageType = this.$route.query.type
    if (this.$route.query.type == 'add') {
      this.title = '新增'
    } else if (this.$route.query.type == 'edit') {
      this.title = '编辑'
    } else if (this.$route.query.type == 'audit') {
      this.title = '审核'
    } else if (this.$route.query.type == 'detail') {
      this.title = '详情'
    }
    if (this.$route.query.id) {
      this.getPageDetail()
    }
  },
  mounted() {
    this.mapRef = new BMapGL.Map('container') // 创建地图实例
    var point = new BMapGL.Point(108.5525, 34.3237) // 创建点坐标
    this.mapRef.centerAndZoom(point, mapZoom[0])
    // var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    // this.mapRef.addControl(zoomCtrl);
    this.mapRef.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
    //this.mapRef.addEventListener('click', (e) => this.getAddress(e))
  },
  methods: {
    async getPageDetail() {
      let { result } = await partnersShopByDepId({ id: this.$route.query.id })
      this.recordList = result.recordList
      this.model = Object.assign({}, result.partnersShop)
      this.shopsInfo = Object.assign({}, result.shopInfo)
      if (this.shopsInfo && this.shopsInfo.shopCode) {
        this.getQrCode(this.shopsInfo.shopCode)
      }
      this.shopsInfo.registAdress = result.shopInfo.provinceName + result.shopInfo.cityName + result.shopInfo.countyName
      if (this.shopsInfo.provinceName) {
        this.getLongitude(
          this.shopsInfo.provinceName,
          this.shopsInfo.provinceName +
            this.shopsInfo.cityName +
            this.shopsInfo.countyName +
            this.shopsInfo.addressInfo,
          mapZoom[3]
        )
      }
    },
    getQrCode(shopCode) {
      axios('/property-central/shop/shopInfo/getQrCode?shopCode=' + shopCode + '&platformType=partner', {
        responseType: 'blob',
      }).then((res) => {
        this.codeImg = window.URL.createObjectURL(new Blob([res]))
      })
    },
    toReturn() {
      this.closeCurrent()
      this.$router.go(-1)
    },
    //选择小区
    chooseCommunity() {
      this.$refs.selectCommunityModal.visible = true
      this.model.shopName = ''
      this.model.shopCode = ''
    },
    selectCommunityOK(data) {
      this.model.communityName = data.communityName
      this.model.communityCode = data.communityCode
    },
    //选择商铺
    chooseShops() {
      if (this.model.communityName && this.model.communityCode) {
        let communityCode = this.model.communityCode
        this.$refs.selectShopsModal.show(communityCode)
      } else {
        this.$message.warning('请先选择小区')
      }
    },
    selectShopsOK(data) {
      console.log(data)
      this.model.shopName = data.shopName
      this.model.shopCode = data.shopCode
      this.shopsInfo = data.shopInfo
      this.shopsInfo.registAdress = data.shopInfo.provinceName + data.shopInfo.cityName + data.shopInfo.countyName
      if (data.shopInfo.provinceName) {
        this.getLongitude(
          data.shopInfo.provinceName,
          data.shopInfo.provinceName + data.shopInfo.cityName + data.shopInfo.countyName + data.shopInfo.addressInfo,
          mapZoom[3]
        )
      }
    },
    onExamine(type) {
      const that = this
      if (type == 1) {
        return partnersShopAudit({
          id: this.$route.query.id,
          auditStatus: 'auditPass',
        }).then((res) => {
          that.$message.success('审核通过成功')
          that.$emit('ok')
          this.toReturn()
        })
      } else if (type == 2) {
        return partnersShopAudit({
          id: this.$route.query.id,
          auditStatus: 'refuse',
        }).then((res) => {
          that.$message.success('审核驳回成功')
          this.toReturn()
        })
      }
    },
    positionMap(mapCenterLng, mapCenterLat, mapzoom, address) {
      var point = new BMapGL.Point(mapCenterLng, mapCenterLat) // 创建点坐标
      this.mapRef.centerAndZoom(point, mapzoom)
      var marker = new BMapGL.Marker(point, { title: address }) // 创建标注
      this.mapRef.addOverlay(marker) // 将标注添加到地图中
      let _this = this
      // marker.addEventListener("click", function(){
      var label = new BMapGL.Label(address, {
        // 创建文本标注
        position: point, // 设置标注的地理位置
        offset: new BMapGL.Size(0, -55), // 设置标注的偏移量
      })
      _this.mapRef.addOverlay(label) // 将标注添加到地图中
      label.setStyle({
        // 设置label的样式
        color: '#333',
        fontSize: '14px',
        padding: '4px 10px',
        border: '1px solid #1E90FF',
        borderRadius: '4px',
        transform: 'translateX(-40%)',
      })
      // });
    },
    getLongitude(city, address, zoom) {
      let _this = this
      var myGeo = new BMapGL.Geocoder()
      myGeo.getPoint(
        address,
        function (point) {
          if (point) {
            _this.mapRef.clearOverlays()
            _this.model.longitude = point.lng
            _this.model.latitude = point.lat
            _this.positionMap(point.lng, point.lat, zoom, address)
          } else {
            console.log('您选择的地址没有解析到结果！')
          }
        },
        city
      )
    },
    submitForm() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          }
          // else {
          //   httpurl += this.url.edit
          //   method = 'put'
          // }
          //this.model.registAdress = undefined
          httpAction(httpurl, this.model, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
                this.toReturn()
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.title-top {
  background: #fff;
  padding: 0 25px;
  line-height: 50px;
  height: 50px;
  margin-bottom: 5px;
  h3 {
    font-weight: bold;
    display: inline-block;
  }
  .button {
    float: right;
    .ant-btn {
      margin-left: 15px;
    }
  }
}
</style>
<style>
.area-select {
  width: 100% !important;
}
.anchorBL {
  visibility: hidden;
}
</style>