<template>
  <a-spin :spinning="confirmLoading">
    <div class="title-top">
      <h3>{{title}}</h3>
      <div class="button"><a-button @click="onCancel">返回</a-button>
        <a-button type="primary" @click="submitForm" v-if="pageType == 'edit' || 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=='detail' || pageType=='audit'||creditCodeChangeBool">
      <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="roomId" v-if="!(pageType=='detail' || pageType=='audit')">
                <a-tree-select
                  v-model=" model.roomId"
                  style="width: 100%"
                  :defaultExpandAll="true"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  :tree-data="treeData"
                  :load-data="onLoadData"
                  placeholder="请选择关联房屋"
                  @select="onSelectRoom"
                />
              </a-form-model-item>
              <a-form-model-item v-else label="关联楼栋单元" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="roomName">
                <a-input v-model="model.roomName" placeholder="请输入商铺名称"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <p style="line-height:30px">{{model.buildingName}}{{model.unitName}}{{model.roomName}}</p>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="商铺名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="shopName">
                <a-input v-model="model.shopName" placeholder="请输入商铺名称"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="营业执照代码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="creditCode">
                <a-input v-model="model.creditCode" placeholder="请输入营业执照代码" @blur="creditCodeChange"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="法人代表" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="legalName">
                <a-input v-model="model.legalName" placeholder="请输入法人代表"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contactName">
                <a-input v-model="model.contactName" placeholder="请输入联系人"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="联系人电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contactPhone">
                <a-input @blur="contactPhoneChange" v-model="model.contactPhone" placeholder="请输入联系人电话"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="注册地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="registAdress">
                <area-cascader v-model="model.registAdress" :data="pcaa" :level="1" type="all" @change="addressChange"
                               style="width:100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="详细地址" :labelCol="{ xs:{ span: 24 }, sm:{ span: 3 } }" :wrapperCol="wrapperCol"
                                 prop="addressInfo">
                <a-input v-model="model.addressInfo" placeholder="请输入详细地址" @blur="addressBlur"></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"></div>
                </div>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="LOGO" :labelCol="{ xs:{ span: 24 }, sm:{ span: 3 } }" :wrapperCol="wrapperCol"
                                 prop="logoUrl">
                <j-image-upload bizPath="scott/pic" v-model="model.logoUrl"></j-image-upload>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="介绍" :labelCol="{ xs:{ span: 24 }, sm:{ span: 3 } }" :wrapperCol="wrapperCol"
                                 prop="shopContent">
                <a-textarea v-model="model.shopContent" placeholder="请输入介绍" :maxLength="500"
                            :auto-size="{ minRows: 3, maxRows: 5 }" />
              </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="model.contractUrl" ></j-upload>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
        <a-card title="商铺管理员"  style="margin-top: 10px;">
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="管理员账户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="adminLoginName">
                <a-input v-model="model.adminLoginName" placeholder="请输入管理员账户"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="管理员密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="adminPassword">
                <a-input v-model="model.adminPassword" placeholder="请输入管理员密码"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" style="position:relative">
              <a-form-model-item label="访问域名前缀" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="accessAddress"
                                 v-if="pageType=='add' || pageType=='edit'">
                <a-input v-model="model.accessAddress" placeholder="请输入访问域名前缀"
                         addon-after=".shop.hjxbc.cn"></a-input>
              </a-form-model-item>
              <a-form-model-item label="访问域名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="accessAddress"
                                 :disabled="false" v-else>
                <p v-if="model.accessAddress">{{ model.accessAddress }}.shop.hjxbc.cn</p>
              </a-form-model-item>
              <a @click="onCopyLink" v-if="model.accessAddress" style="position:absolute;top:0;right:-10px;line-height:40px;z-index:999;pointer-events:auto;">复制</a>
            </a-col>

          </a-row>

        </a-card>
        <a-card title="商铺二维码" v-if="pageType != 'add'"  style="margin-top: 10px;">
          <a-row>
            <img :src="shopQrcode" alt="商铺二维码"  class="shopQrcode">
          </a-row>

        </a-card>
        <a-card title="审核记录" v-if="pageType != 'add'"  style="margin-top: 10px;">
          <a-row>
            <a-table
              ref="table"
              size="middle"
              bordered
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource"
              :pagination="false"
              :loading="loading"
              class="j-table-force-nowrap"
            >
            </a-table>
          </a-row>

        </a-card>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
import { filterDictTextByCache } from '@comp/dict/JDictSelectUtil'
const mapZoom = [5, 8, 10, 12]
let timer = null
import {shopDetailApi, shopAuditApi, getBuildingListApi, getUnitListApi, getRoomListApi} from '@/api/api'
import { httpAction, getAction } from '@/api/manage'
import { isMobile, alphanumeric } from '@/utils/validate'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import {axios} from '@/utils/request'
const 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',
  }
]
export default {
  name: 'PropertySettledForm',
  mixins: [JeecgListMixin],
  inject: ['closeCurrent'],
  data() {
    const validateToNextPhone = (rule, value, callback) => {
      if (value && isMobile(value)) {
        callback()
      } else {
        callback('请输入正确的联系人电话！')
      }
    }
    const isAlphanumeric = (rule, value, callback) => {
      if (value && alphanumeric(value)) {
        callback()
      } else {
        callback('请输入带字母的域名前缀')
      }
    }
    return {
      title: '',
      pageType: '',
      columns: columns,
      creditCodeChangeBool: false,
      pcaa: this.$Jpcaa,
      model: {
        buildingId: '',
        buildingName: '',
        unitId: '',
        unitName: '',
        roomId: '',
        roomName: '',
        useTo: '',
        shopName: '',
        legalName: '',
        creditCode: '',
        contactName: '',
        contactPhone: '',
        registAdress: [],
        provinceName: '',
        provinceCode: '',
        cityName: '',
        cityCode: '',
        countyName: '',
        countyCode: '',
        addressInfo: '',
        logoUrl: '',
        shopContent: '',
        chargingStandardId: '',
        contractUrl: '',
        longitude: '',
        latitude: '',
        accessAddress: '',
        adminPassword: '123456'
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {
        roomId: [{ required: true, message: '请选择关联房屋', trigger: 'change' }],
        shopName: [{ required: true, message: '请输入商铺名称', trigger: 'blur' }],
        legalName: [{ required: true, message: '请输入法人代表', trigger: 'blur' }],
        creditCode: [{ required: true, message: '请输入营业执照代码', trigger: 'blur' }],
        contactName: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        contactPhone: [
          { required: true, message: '请输入联系人电话', trigger: 'blur' },
          { validator: validateToNextPhone },
        ],
        registAdress: [{ required: true, message: '请选择注册地址', trigger: 'change' }],
        addressInfo: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
        logoUrl: [{ required: true, message: '请上传LOGO', trigger: 'change' }],
        // adminLoginName: [{ required: true, message: '请输入管理员账号', trigger: 'blur' }],
        contractUrl: [{ required: true, message: '请上传合同附件', trigger: 'change' }],
        adminPassword: [{ required: true, message: '请输入管理员密码', trigger: 'blur' }],
        accessAddress: [
          { required: true, message: '请输入访问域名前缀', trigger: 'blur' },
          { validator: isAlphanumeric },
        ],
      },
      url: {
        list: '/property-central/property/auditRecord/list?settledId='+this.$route.query.id,
        code: '/property-central/shop/shopInfo/getList',
        add: '/property-central/shop/shopInfo/add',
        edit: '/property-central/shop/shopInfo/edit',
      },
      treeData: [],
      shopQrcode: '',
      mapRef: null,
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  watch: {
    'model.addressInfo': {
      handler(newV) {
        if (newV) {
          clearTimeout(timer)
          timer = setTimeout(() => {
            // this.getLongitude(this.model.categoryCodes[0], this.model.categoryCodes.join('') + newV, mapZoom[3])
          }, 1000)
        }
      },
    },
  },
  created() {
    //备份model原始值
    //this.modelDefault = JSON.parse(JSON.stringify(this.model))
    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.getBuildingList()
    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 getBuildingList() {
      let {result} = await getBuildingListApi()
      this.treeData = result.map(item=> {
        return {
          value: item.id,
          label: item.buildingName,
          pId: 0,
          disabled: true
        }
      })
    },
    shopQrcodes() {
      axios('/property-central/shop/shopInfo/getQrCode?shopCode='+this.model.shopCode+'&platformType=cell',{ responseType: 'blob',}).then(res=>{
        this.shopQrcode = window.URL.createObjectURL(new Blob([res]))
        console.log(this.shopQrcode)
      })
    },
    onSelectRoom(value, node) {
      let data = node.dataRef
      this.model.roomId = data.value
      this.model.roomName = data.label
      this.model.useTo = data.useTo
      this.model.floorSpace = data.floorSpace
      this.model.unitId = data.parent.value
      this.model.unitName = data.parent.label
      this.model.buildingId = data.parent.parent.value
      this.model.buildingName = data.parent.parent.label
      console.log(this.model)
    },
    onLoadData(treeNode) {
      return new Promise(async resolve => {
        if (treeNode.dataRef.children) {
          resolve();
          return;
        }
        if(treeNode.pos.split('-').length === 2) {  // 单元
          let {result} = await getUnitListApi({id: treeNode.eventKey})
          treeNode.dataRef.children = result.map(item=> {
            return {
              value: item.id,
              label: item.unitName,
              pId: treeNode.dataRef.id,
              parent: {...treeNode.dataRef},
              disabled: true
            }
          })
          this.treeData = [...this.treeData];
          resolve();
        } else {  // 房屋
          let {result} = await getRoomListApi({id: treeNode.eventKey})
          treeNode.dataRef.children = result.map(item=> {
            return {
              value: item.id,
              label: item.roomNum,
              pId: treeNode.dataRef.id,
              useTo: item.useTo,
              floorSpace: item.floorSpace,
              parent: {...treeNode.dataRef},
              isLeaf: true
            }
          })
          this.treeData = [...this.treeData];
          resolve();
        }
      });
    },
    async getPageDetail() {
      let { result } = await shopDetailApi({ id: this.$route.query.id })
      this.edit(result)
      if (result.provinceName) {
        this.getLongitude(
          result.provinceName,
          result.provinceName + result.cityName + result.countyName + result.addressInfo,
          mapZoom[3]
        )
      }
    },
    onCancel() {
      this.closeCurrent()
    },
    creditCodeChange() {
      getAction(this.url.code, { creditCode: this.model.creditCode }).then(res => {
        console.log(res)
        if (res.success) {
         if(res.result.length > 0){
          this.creditCodeChangeBool = true;
          this.creditCodeChangeBoolBool = true;
         }else {
          this.creditCodeChangeBool = false;
         }
        }
      })
    },
    contactPhoneChange(e) {
      if (!this.model.adminLoginName) {
        this.model.adminLoginName = e.target.value
      }
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.shopQrcodes()
      this.model.registAdress = [record.provinceCode, record.cityCode, record.countyCode]
      this.visible = true
    },
    onExamine(type) {
      const that = this
      if (type == 1) {
        return shopAuditApi({
          id: this.$route.query.id,
          auditStatus: 'auditPass',
        }).then((res) => {
          that.$message.success('审核通过成功')
          that.$emit('ok')
          this.onCancel()
        })
      } else if (type == 2) {
        return shopAuditApi({
          id: this.$route.query.id,
          auditStatus: 'refuse',
        }).then((res) => {
          that.$message.success('审核驳回成功')
          this.onCancel()
        })
      }
    },
    addressChange(val) {
      const province = Object.keys(val[0])[0]
      const city = Object.keys(val[1])[0]
      const county = Object.keys(val[2])[0]
      this.model.provinceName = val[0][province]
      this.model.provinceCode = province
      this.model.cityName = val[1][city]
      this.model.cityCode = city
      this.model.countyName = val[2][county]
      this.model.countyCode = county
      if (this.model.addressInfo) {
        this.getLongitude(
          this.model.provinceName,
          this.model.provinceName + this.model.cityName + this.model.countyName + this.model.addressInfo,
          mapZoom[3]
        )
      }
    },
    addressBlur(val) {
      if (this.model.provinceName) {
        this.getLongitude(
          this.model.provinceName,
          this.model.provinceName + this.model.cityName + this.model.countyName + val.target.value,
          mapZoom[3]
        )
      }
    },
    getAddress(e) {
      let _this = this
      // 创建地理编码实例
      var myGeo = new BMapGL.Geocoder()
      // 根据坐标得到地址描述
      myGeo.getLocation(new BMapGL.Point(e.latlng.lng, e.latlng.lat), function (result) {
        if (result) {
          _this.mapRef.clearOverlays()
          _this.model.registAdress = [
            result.addressComponents.province,
            result.addressComponents.city,
            result.addressComponents.district,
          ]
          _this.model.addressInfo = result.addressComponents.street + result.addressComponents.streetNumber
          _this.model.longitude = result.point.lng
          _this.model.latitude = result.point.lat
          _this.positionMap(e.latlng.lng, e.latlng.lat, mapZoom[3], result.address)
          console.log(result)
        }
      })
    },
    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
      )
    },
    onCopyLink() {
      let txa = document.createElement("textarea");
      txa.value = this.model.accessAddress + '.shop.hjxbc.cn'
      document.body.appendChild(txa);
      txa.select();
      document.execCommand("copy");
      document.body.removeChild(txa);
      this.$message.success("复制成功!");
    },
    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.onCancel()
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
  },
  beforeDestroy() {
    clearTimeout(timer)
    this.mapRef.removeEventListener('click', (e) => this.getAddress(e))
  },
}
</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>