<template>
  <div>
    <div>
      <div v-show="!propertyFormShow">
        <el-form :inline="false"
                 :model="dataForm"
                 :rules="dataRule"
                 :disabled="formType==='detail'"
                 class="form">
          <el-form-item label="小区名称"
                        prop="neighborHoodName"
                        label-width="150px"
                        style="display:block">
            <el-input class="item_width_1"
                      maxlength="50"
                      show-word-limit
                      placeholder='请输入小区名称'
                      v-model="dataForm.neighborHoodName">
            </el-input>

          </el-form-item>
          <el-form-item label="所属组织"
                        prop="agencyId"
                        label-width="150px"
                        style="display:block">
            <el-select class="item_width_1"
                       v-model="dataForm.agencyId"
                       placeholder="请选择"
                       @change="handleAgencyChanged"
                       clearable>
              <el-option v-for="item in agencyList"
                         :key="item.agencyId"
                         :label="item.agencyName"
                         :value="item.agencyId">
              </el-option>
            </el-select>

          </el-form-item>
          <el-form-item label="所属网格"
                        prop="gridId"
                        label-width="150px"
                        style="display:block">
            <el-select class="item_width_1"
                       v-model="dataForm.gridId"
                       placeholder="请选择"
                       clearable>
              <el-option v-for="item in gridList"
                         :key="item.gridId"
                         :label="item.gridName"
                         :value="item.gridId">
              </el-option>
            </el-select>

          </el-form-item>
          <el-form-item label="关联物业"
                        prop="propertyId"
                        label-width="150px"
                        style="display:block">
            <el-select class="item_width_2"
                       v-model="dataForm.propertyId"
                       placeholder="请选择"
                       clearable>
              <el-option v-for="item in propertyList"
                         :key="item.propertyId"
                         :label="item.propertyName"
                         :value="item.propertyId">
              </el-option>
            </el-select>

            <el-button style="margin-left:10px"
                       type="primary"
                       size="small"
                       @click="handleAddProperty">添加物业</el-button>

          </el-form-item>
          <el-form-item label="详细地址"
                        prop="address"
                        label-width="150px"
                        style="display:block">
            <el-input class="item_width_1"
                      maxlength="50"
                      show-word-limit
                      placeholder='请输入详细地址'
                      v-model="dataForm.address">
            </el-input>

          </el-form-item>
          <el-form-item label="备注"
                        prop="remark"
                        label-width="150px"
                        style="display:block">
            <el-input class="item_width_1"
                      type="textarea"
                      maxlength="500"
                      :rows="3"
                      placeholder='请输入备注，不超过500字'
                      v-model="dataForm.remark"></el-input>

          </el-form-item>
          <!-- <el-form-item label="位置坐标"
                    prop="neighborHoodName"
                    label-width="150px"
                    style="display:block">
        <el-input class="item_width_1"
                  maxlength="50"
                  show-word-limit
                  placeholder='请输入小区名称'
                  v-model="dataForm.neighborHoodName">
        </el-input>

      </el-form-item> -->

        </el-form>
      </div>

      <div v-show="propertyFormShow">
        <el-form :inline="false"
                 :model="propertyForm"
                 :rules="propertyRule"
                 class="form">
          <el-form-item label="物业名称"
                        prop="name"
                        label-width="150px"
                        style="display:block">
            <el-input class="item_width_1"
                      maxlength="50"
                      show-word-limit
                      placeholder='请输入小区名称'
                      v-model="propertyForm.name">
            </el-input>

          </el-form-item>

        </el-form>

      </div>
    </div>
    <div class="div_btn">
      <el-button @click="handleCancle">取 消</el-button>
      <el-button v-if="formType!='detail'"
                 type="primary"
                 @click="handleComfirm">确 定</el-button>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from "@/js/dai/request";

let loading // 加载动画
export default {
  data () {
    return {
      formType: 'add',//表单操作类型 add新增，edit编辑，detail详情

      agencyList: [],
      gridList: [],
      propertyList: [],

      neighborHoodId: '',//小区ID	
      dataForm: {
        neighborHoodName: '', // 小区名称【不超过50字】
        agencyId: '', // 所属组织ID	
        gridId: '', //所属网格ID	
        propertyId: '', //关联物业	
        address: '', //详细地址	
        remark: '', //备注【最大500字】	
        location: '', //坐标位置	
        longitude: '', //经度
        latitude: '', //纬度	
      },

      propertyFormShow: false,
      propertyForm: {
        name: ''
      }

    }
  },
  components: {

  },
  mounted () {
  },

  methods: {
    async initForm (type, row) {
      this.formType = type
      if (row) {
        this.neighborHoodId = row.neighborHoodId
        this.dataForm = row
      }

      await this.loadAgency()
      await this.loadProperty()
    },

    async handleAgencyChanged () {
      await this.loadGrid()
    },

    //加载组织
    async loadAgency () {
      // const url = "/gov/org/agency/belongOrg"
      const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/belongOrg"
      let params = {}

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {

        this.agencyList = data

      } else {
        this.$message.error(msg)
      }
    },
    //加载网格
    async loadGrid () {
      // const url = "/gov/org/grid/allgrids"
      const url = "https://epmet-dev.elinkservice.cn:7082/api/apimock-v2/95518686fa128a53f64c678906848062/gov/org/grid/allgrids"
      let params = {
        agencyId: this.dataForm.agencyId
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.gridList = data

      } else {
        this.$message.error(msg)
      }
    },
    //加载物业
    async loadProperty () {
      // const url = "/gov/org/propertymanagement/list"
      const url = "http://yapi.elinkservice.cn/mock/245/gov/org/propertymanagement/list"
      let params = {}

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.propertyList = data

      } else {
        this.$message.error(msg)
      }
    },

    handleAddProperty () {
      this.propertyForm.name = ''
      this.propertyFormShow = true
    },

    async handleComfirm () {
      if (this.propertyFormShow) {

        this.addProperty()
      } else {
        this.addCommunity()
      }
    },
    async addCommunity () {
      // let url = "/gov/org/neighborhood/neighborhoodadd"
      let url = "http://yapi.elinkservice.cn/mock/245/gov/org/neighborhood/neighborhoodadd"
      if (this.formType === 'add') {
        // url = "/gov/org/neighborhood/neighborhoodadd"
        url = "http://yapi.elinkservice.cn/mock/245/gov/org/neighborhood/neighborhoodadd"
      } else {
        // url = "/gov/org/neighborhood/neighborhoodadd"
        url = "http://yapi.elinkservice.cn/mock/245/gov/org/neighborhood/neighborhoodadd"
        this.dataForm.neighborHoodId = this.neighborHoodId
      }

      const { data, code, msg } = await requestPost(url, this.dataForm)

      if (code === 0) {
        this.$message({
          type: "success",
          message: "添加小区成功"
        });

        this.propertyFormShow = false

      } else {
        this.$message.error(msg)
      }

    },
    async addProperty () {
      // const url = "/gov/org/propertymanagement/add"
      const url = "http://yapi.elinkservice.cn/mock/245/gov/org/propertymanagement/add"
      let params = {
        name: this.propertyForm.name
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {

        this.$message({
          type: "success",
          message: "添加物业成功"
        });
        this.propertyForm.name = ''
        this.propertyFormShow = false
        this.loadProperty()
      } else {
        this.$message.error(msg)
      }

    },
    handleCancle () {
      if (this.propertyFormShow) {
        this.propertyForm.name = ''
        this.propertyFormShow = false
      } else {
        this.$emit('dialogCancle')
      }


    },
    resetData () {


    },
    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  computed: {
    dataRule () {
      return {
        neighborHoodName: [
          { required: true, message: '小区名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '小区名称长度在 1 到 50个字符', trigger: 'blur' }
        ],
        agencyId: [
          { required: true, message: '所属组织不能为空', trigger: 'blur' }
        ],
        gridId: [
          { required: true, message: '所属网格不能为空', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '详细地址不能为空', trigger: 'blur' }
        ],
        location: [
          { required: true, message: '上架状态不能为空', trigger: 'blur' }
        ]

      }
    },
    propertyRule () {
      name: [
        { required: true, message: '物业名称不能为空', trigger: 'blur' },
        // { min: 1, max: 50, message: '小区名称长度在 1 到 50个字符', trigger: 'blur' }
      ]
    }
  },
  props: {

  }
}
</script>
<style scoped >
.item_width_1 {
  width: 500px;
}
.item_width_2 {
  width: 400px;
}

.div_btn {
  display: flex;
  justify-content: flex-end;
}
.el-tabs {
  margin: 0 20px;
}
.el-upload__tip {
  color: rgb(155, 155, 155);
  margin: 0;
}
.form {
  margin-top: 30px;
}
</style>
