<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" :rules="validatorRules" 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="legalName">
                <a-input v-model="model.legalName" 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="contactName">
                <a-input v-model="model.contactName" placeholder="请输入操作日期"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
        <a-card title="对账明细">
          <a-row>
            <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-row>
        </a-card>
      </a-form-model>
    </j-form-container>
    <a-card title="转账凭证" v-if="pageType == '3'">
      <j-image-upload bizPath="scott/pic" v-model="model.image"></j-image-upload>
    </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 { isMobile, validateCreditCode } from '@/utils/validate'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

const columns = [
  {
    title: '所属小区',
    dataIndex: 'propertyName',
    key: 'propertyName',
    align: 'center',
  },
  {
    title: '费用项目',
    dataIndex: 'creditCode',
    key: 'creditCode',
    align: 'center',
  },
  {
    title: '业主',
    dataIndex: 'reconciliationBeginDate',
    key: 'reconciliationBeginDate',
    align: 'center',
  },
  {
    title: '与业主关系',
    dataIndex: 'reaship',
    key: 'reaship',
    align: 'center',
  },
  {
    title: '住户',
    dataIndex: 'reconcilname',
    key: 'reconcilname',
    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',
    // customRender: function (text) {
    //   return filterDictTextByCache('companyAuditStatus', text)
    // },
  },
  {
    title: '创建日期',
    dataIndex: 'auditStatus',
    key: 'auditStatus',
  },
]
export default {
  name: 'PropertySettledForm',
  inject: ['closeCurrent'],
  mixins: [JeecgListMixin],
  data() {
    const validateToNextPhone = (rule, value, callback) => {
      if (value && isMobile(value)) {
        callback()
      } else {
        callback('请输入正确的联系人电话！')
      }
    }
    const validateCode = (rule, value, callback) => {
      if (value && validateCreditCode(value)) {
        callback()
      } else {
        callback('社会统一信用代码输入错误')
      }
    }

    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,
      validatorRules: {
        propertyName: [{ required: true, message: '请输入物业集团名称', trigger: 'blur' }],
        creditCode: [{ required: true, message: '请输入统一信用代码', trigger: 'blur' }, { validator: validateCode }],
        legalName: [{ required: true, message: '请输入法人代表', trigger: 'blur' }],
        registCapital: [{ 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' }],
        empowerBeginDate: [{ required: true, message: '请选择授权开始日期', trigger: 'change' }],
        empowerEndDate: [{ required: true, message: '请选择权结束日期', trigger: 'change' }],
        empowerCommunityNum: [{ required: true, message: '请输入授权小区数量', trigger: 'blur' }],
        chargingStandardId: [{ required: true, message: '请选择收费标准', trigger: 'change' }],
        adminLoginName: [{ required: true, message: '请输入管理员账号', trigger: 'blur' }],
        adminPassword: [{ required: true, message: '请输入管理员密码', trigger: 'blur' }],
        contractUrl: [{ required: true, message: '请上传合同附件', trigger: 'change' }],
      },
      url: {
        add: '/property-central/property/propertySettled/add',
        edit: '/property-central/property/propertySettled/edit',
        queryById: '/property-central/property/propertySettled/queryById',

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


      columns: columns,
      loading: false,
      dataSource: [
        {propertyName: '汉江之星小区', creditCode: '物业费', reconciliationBeginDate: '张飒，15198765634',reaship: '租户', reconcilname: '李白，15165245634', reconciliationEndDate: '2栋2单元101', reconciliationAmount: '345.23', updateTime: '2023-04-05', empowerCommunityNum: 'LD23423843223', auditStatus: '2023-05-06'},
        {propertyName: '汉江之星小区', creditCode: '水费', reconciliationBeginDate: '李生，1515235634',reaship: '本人', reconcilname: '李生，1515235634', reconciliationEndDate: '1栋2单元301', reconciliationAmount: '1345.45', updateTime: '2023-05-05', empowerCommunityNum: 'DFG2342342323', auditStatus: '2023-05-16'},
        {propertyName: '汉江之星小区', creditCode: '电费', reconciliationBeginDate: '李丽，19812348976',reaship: '租户', reconcilname: '张飒，15198765634', reconciliationEndDate: '9栋1单元401', reconciliationAmount: '34234', updateTime: '2023-02-06', empowerCommunityNum: 'JTR323422', auditStatus: '2023-03-06'},
        {propertyName: '汉江之星小区', creditCode: '水费', reconciliationBeginDate: '张盛，1890987567',reaship: '本人', reconcilname: '张盛，1890987567', reconciliationEndDate: '4栋2单元403', reconciliationAmount: '34', updateTime: '2023-06-07', empowerCommunityNum: 'DFGD32423423', auditStatus: '2023-04-23'},
        {propertyName: '汉江之星小区', creditCode: '燃气费', reconciliationBeginDate: '李婷婷，18809875634',reaship: '租户', reconcilname: '话梅，15198765634', reconciliationEndDate: '9栋2单元1201', reconciliationAmount: '654', updateTime: '2023-05-06', empowerCommunityNum: 'FDBEWRW2342342', auditStatus: '2023-06-26'},
      ]
    }
  },
  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.closeCurrent()
    },
    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>