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

    <j-form-container :disabled="true">
      <a-form-model ref="form" :model="model" slot="detail">
        <a-card title="基本信息">
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="订单编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="propertyName">
                <a-input v-model="model.propertyName" 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="提交时间"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="提交人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="registCapital">
                <a-input-number v-model="model.registCapital" :min="1" placeholder="提交人" style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="结算金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="registCapital">
                <a-input-number v-model="model.registCapital" :min="1" placeholder="结算金额" style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="结算方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="registCapital">
                <a-input-number v-model="model.registCapital" :min="1" placeholder="结算方式" style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <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-row>
        </a-card>
      </a-form-model>
    </j-form-container>
    <a-card title="对账信息" style="margin-top: 10px;">
      <div>
        <a-table ref="table" size="middle" :scroll="{x:true}" bordered rowKey="id" :columns="columns"
          :dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
          @change="handleTableChange">
        </a-table>
      </div>
    </a-card>
  </a-spin>
</template>

<script>
const mapZoom = [5, 8, 10, 12]
let timer = null
import { getPropertyChargruleListApi, getPropertyDetailApi, auditPropertyApi } from '@/api/api'
import { httpAction, getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

const columns = [
  {
    title: '订单编号',
    dataIndex: 'id',
    key: 'id',
    align: 'center',
  },
  {
    title: '提交时间',
    dataIndex: 'reconciliationBeginDate',
    key: 'reconciliationBeginDate',
    align: 'center',
  },
  {
    title: '用户账号',
    dataIndex: 'creditCode',
    key: 'creditCode',
    align: 'center',
  },
  {
    title: '分利金额',
    dataIndex: 'propertyName',
    key: 'propertyName',
    align: 'center',
  },

  {
    title: '支付方式',
    dataIndex: 'reconciliationEndDate',
    key: 'reconciliationEndDate',
    align: 'center',
  },
  {
    title: '订单来源',
    dataIndex: 'reconciliationAmount',
    key: 'reconciliationAmount',
    align: 'center',
  },
  {
    title: '订单状态',
    dataIndex: 'updateTime',
    key: 'updateTime',
    align: 'center',
  },
  {
    title: '备注',
    dataIndex: 'empowerCommunityNum',
    key: 'empowerCommunityNum',
    align: 'center',
  },
  {
    title: '所属平台',
    dataIndex: 'auditStatus',
    key: 'auditStatus',
    align: 'center',
  },
  {
    title: '所属小区',
    dataIndex: 'companyAuditStatus',
    key: 'companyAuditStatus',
    // customRender: function (text) {
    //   return filterDictTextByCache('companyAuditStatus', text)
    // },
  },
]
export default {
  name: 'SettlementDetails',
  inject: ['closeCurrent'],
  mixins: [JeecgListMixin],
  data() {
    return {
      title: '详情',
      pageType: '',
      pcaa: this.$Jpcaa,
      model: {
        propertyName: '234234234',
        creditCode: '2023-03-22',
        legalName: '2023-06-22',
        registCapital: 'ADMIN',
        contactName: '2023-06-23',
        image: '',
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,

      url: {
        queryById: '/property-central/property/propertySettled/queryById',
        list: '/property-central/property/communityReconciliation/communityAccountPage',
      },
      costList: [],
      mapRef: null,

      columns: columns,
      loading: false,
      dataSource: [
        {
          id: 'JD2394231',
          creditCode: '18000000000',
          propertyName: 20000,
          reconciliationBeginDate: '2023-01-01',
          reconciliationEndDate: '微信',
          reconciliationAmount: '小程序',
          updateTime: '未对账',
          empowerCommunityNum: '备注',
          auditStatus: 'XXX物业集团',
          companyAuditStatus: '花园小区',
        },
        {
          id: 'JD2394232',
          creditCode: '18000000000',
          propertyName: 20000,
          reconciliationBeginDate: '2023-01-01',
          reconciliationEndDate: '微信',
          reconciliationAmount: '小程序',
          updateTime: '未对账',
          empowerCommunityNum: '备注',
          auditStatus: 'XXX物业集团',
          companyAuditStatus: '花园小区',
        },
        {
          id: 'JD2394233',
          creditCode: '18000000000',
          propertyName: 20000,
          reconciliationBeginDate: '2023-01-01',
          reconciliationEndDate: '微信',
          reconciliationAmount: '小程序',
          updateTime: '未对账',
          empowerCommunityNum: '备注',
          auditStatus: 'XXX物业集团',
          companyAuditStatus: '花园小区',
        },
        {
          id: 'JD2394234',
          creditCode: '18000000000',
          propertyName: 20000,
          reconciliationBeginDate: '2023-01-01',
          reconciliationEndDate: '微信',
          reconciliationAmount: '小程序',
          updateTime: '未对账',
          empowerCommunityNum: '备注',
          auditStatus: 'XXX物业集团',
          companyAuditStatus: '花园小区',
        },
      ],
    }
  },
  methods: {
    async onLoadCostList() {
      let data = await getPropertyChargruleListApi()
      this.costList = data.result
    },
    async getPageDetail() {
      let { result } = await getPropertyDetailApi({ 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.$router.go(-1)
    },
    contactPhoneChange(e) {
      if (!this.model.adminLoginName) {
        this.model.adminLoginName = e.target.value
      }
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.model.registAdress = [record.provinceCode, record.cityCode, record.countyCode]
      this.visible = true
    },
    onExamine(type) {
      this.closeCurrent()
      // const that = this
      // if (type == 1) {
      //   return auditPropertyApi({
      //     id: this.$route.query.id,
      //     auditStatus: 'auditPass',
      //   }).then((res) => {
      //     that.$message.success('审核通过成功')
      //     that.$emit('ok')
      //     this.closeCurrent()
      //   })
      // } else if (type == 2) {
      //   return auditPropertyApi({
      //     id: this.$route.query.id,
      //     auditStatus: 'refuse',
      //   }).then((res) => {
      //     that.$message.success('审核驳回成功')
      //     this.closeCurrent()
      //   })
      // }
    },
    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
      )
    },
    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.closeCurrent()
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
    loadData() {
      console.log('不请求')
    },
  },
  mounted() {
    //备份model原始值
    //this.modelDefault = JSON.parse(JSON.stringify(this.model))
    // this.onLoadCostList()
    this.pageType = this.$route.query.type
    if (this.$route.query.type == '1') {
      this.title = '详情'
    } else if (this.$route.query.type == '2') {
      this.title = '审核'
    } else if (this.$route.query.type == '3') {
      this.title = '拨款'
    }
    console.log(this.title)
    console.log(this.pageType)
    // if (this.$route.query.id) {
    //   this.getPageDetail()
    // }
  },
}
</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;
}
</style>