<template>
  <div>
    <div class="dialog-h-content scroll-h">

      <el-form ref="ref_form"
               :inline="true"
               :model="workLogDetail"
               class="form">

        <el-form-item label="需求类型"
                      prop="serviceType">
          <el-input v-if="disabled"
                    v-model="workLogDetail.serviceTypeName"
                    :disabled="disabled"
                    class="input-width-min"></el-input>
          <el-cascader v-else
                       v-model="workLogDetail.serviceType"
                       :options="demandOptions"
                       :disabled="disabled"
                       clearable
                       class="input-width"
                       @change="handleCateSlect"></el-cascader>
        </el-form-item>
        <el-form-item label="所属网格"
                      prop="gridId">
          <el-input v-if="disabled"
                    v-model="workLogDetail.gridName"
                    :disabled="disabled"
                    class="input-width"></el-input>
          <el-select v-else
                     v-model="workLogDetail.gridId"
                     filterable
                     placeholder="请选择"
                     class="input-width"
                     clearable
                     :disabled="disabled"
                     @change="handleGridChange">
            <el-option v-for="item in disabled ? optionsG : optionsEditG"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上报类型"
                      prop="reportType">
          <el-input v-if="disabled"
                    v-model="workLogDetail.reportTypeName"
                    :disabled="disabled"
                    class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="申请人"
                      prop="applicantName">
          <el-input v-model="workLogDetail.applicantName"
                    :disabled="disabled"
                    placeholder="请输入"
                    class="input-width"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="上报人手机号"
                      prop="reportUserMobile">
          <el-input v-model="workLogDetail.reportUserMobile"
                    :disabled="disabled"
                    placeholder="请输入"
                    class="input-width"
                    maxlength="11"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="上报时间"
                      prop="reportTime">
          <el-date-picker v-model="workLogDetail.reportTime"
                          type="datetime"
                          class="input-width"
                          clearable
                          :disabled="disabled"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="需求人"
                      prop="demandUserId">
          <el-input v-if="disabled"
                    v-model="workLogDetail.demandUserName"
                    :disabled="disabled"
                    class="input-width"></el-input>
          <el-select v-else
                     v-model="selectDemandUser"
                     class="input-width"
                     filterable
                     :disabled="disabled"
                     placeholder="请选择"
                     clearable
                     @change="handleDemandChange">
            <el-option v-for="item in demandUserList"
                       :key="item.demandUserId"
                       :label="item.label"
                       :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务时间"
                      prop="wantServiceTime">
          <el-date-picker v-model="workLogDetail.wantServiceTime"
                          type="datetime"
                          class="input-width"
                          clearable
                          :disabled="disabled"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="需求内容"
                      prop="content">
          <el-input v-model="workLogDetail.content"
                    :autosize="{ minRows: 2, maxRows: 10 }"
                    :disabled="disabled"
                    type="textarea"
                    clearable
                    class="input-width-textarea"
                    placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>

    </div>
    <div class="div_btn">
      <el-button size="small"
                 @click="handleCancle">取 消</el-button>

    </div>
  </div>
</template>

<script>

import { Loading } from 'element-ui' // 引入Loading服务

var map
var search
var markers
var infoWindowList
var geocoder // 新建一个正逆地址解析类

let loading // 加载动画
export default {
  data () {
    return {
      workLogDetail: {},
    }
  },
  components: {},
  mounted () {
    this.initMap()
  },

  methods: {
    handleCancle () {

      this.$emit('diaClose')

    },

    async initForm (row) {
      this.startLoading()
      this.formData = { ...row }
      this.endLoading()

    },

    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  computed: {
  },
  props: {

  }
}
</script>
<style lang="scss" scoped >
@import "@/assets/scss/modules/visual/communityManageForm.scss";
</style>
<style scoped>
.detail_span {
  width: 500px;
  font-weight: bold;
  text-align: left;
  margin: 0 0;
  font-size: 16px;
}

.form {
  margin-top: 30px;
}
</style>


