<template>
  <div class="select-overspread" style="background-color: #ffffff;padding: 20px;overflow: scroll">
    <validator name='v' @valid="$emit('valid')" @invalid="$emit('invalid')">
    <form class="form-horizontal">
      <div class="auto">
        <div v-for="(index,item) in data.fields">
          <!--input-->
          <div :style="item.style ? item.style+';height: 40px;margin-bottom: 20px':'height: 40px;margin-bottom: 20px'"
               v-if="(item.type==='input' || item.type==='number'||item.type === 'tel'||item.type === 'email') && !item.hidden && (item.device === 'pc' || !item.device) && ( item.label != '证件号码')&&( item.label !== '身份证') && (item.label !== '用户电话')"
               :class="[item.required && !(item.value) ? 'has-error' : '',item.bootstraped ? item.bootstraped + ' form-group':'col-sm-4 form-group']">
            <label :style="item.label_style ? item.label_style : ''"
                   :class="item.label_bootstraped ? item.label_bootstraped+' control-label-justify control-label' : 'control-label-justify control-label col-sm-6'">{{item.label}}</label>
            <div :style="item.value_style ? item.value_style:''"
                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-6'">
              <input class="form-control input_view" style=""
                     :type="item.type"
                     v-model="data.fields[index].value"
                     :placeholder="item.placeholder"
                     :value="data.fields[index].value"
                     :readonly="item.readonly"
                     :disabled="item.disabled"
                     @change="onchange(index)"
                     @blur="onblur(index)"
                     @input="oninput(index)"
              />
            </div>
          </div>

          <!--input-->
          <div :style="item.style ? item.style+';height: 40px;margin-bottom: 20px':'height: 40px;margin-bottom: 20px'"
               v-if="(data.f_credentials != '身份证' && item.label === '证件号码')"
               :class="[item.required && !(item.value) ? 'has-error' : '',item.bootstraped ? item.bootstraped + ' form-group':'col-sm-4 form-group']">
            <label :style="item.label_style ? item.label_style : ''"
                   :class="item.label_bootstraped ? item.label_bootstraped+' control-label-justify control-label' : 'control-label-justify control-label col-sm-6'">{{item.label}}</label>
            <div :style="item.value_style ? item.value_style:''"
                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-6'">
              <input class="form-control input_view" style=""
                     :type="item.type"
                     v-model="data.fields[index].value"
                     :placeholder="item.placeholder"
                     :value="data.fields[index].value"
                     :readonly="item.readonly"
                     :disabled="item.disabled"
                     @change="onchange(index)"
                     @blur="onblur(index)"
                     @input="oninput(index)"
              />
            </div>
          </div>
          <!--身份证验证-->
          <div :style="item.style ? item.style+';height: 40px;margin-bottom: 20px':'height: 40px;margin-bottom: 20px'"
               v-if="(item.label==='身份证') || (data.f_credentials === '身份证' && item.label === '证件号码')"
               :class="[$v.f_idnumber2.identityCardValid ? 'has-error' : '',item.bootstraped ? item.bootstraped + ' form-group':'col-sm-4 form-group']">
            <label :style="item.label_style ? item.label_style : ''"
                   :class="item.label_bootstraped ? item.label_bootstraped+' control-label-justify control-label' : 'control-label-justify control-label col-sm-6'">{{item.label}}</label>
            <div :style="item.value_style ? item.value_style:''"
                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-6'">
              <input class="form-control input_view" style=""
                     :type="item.type"
                     maxlength="18"
                     v-model="data.fields[index].value"
                     :placeholder="item.placeholder"
                     :value="data.fields[index].value"
                     v-validate:f_idnumber2='{identityCardValid: true}'
                     :readonly="item.readonly"
                     :disabled="item.disabled"
                     @change="onchange(index)"
                     @blur="onblur(index)"
                     @input="oninput(index)"
              />
            </div>
          </div>


          <div :style="item.style ? item.style+';height: 40px;margin-bottom: 20px':'height: 40px;margin-bottom: 20px'"
               v-if="item.label === '用户电话'"
               :class="[$v.f_user_phone.minlength || $v.f_user_phone.maxlength ? 'has-error' : '',item.bootstraped ? item.bootstraped + ' form-group':'col-sm-4 form-group']">
            <label :style="item.label_style ? item.label_style : ''"
                   :class="item.label_bootstraped ? item.label_bootstraped+' control-label-justify control-label' : 'control-label-justify control-label col-sm-6'">{{item.label}}</label>
            <div :style="item.value_style ? item.value_style:''"
                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-6'">
              <input class="form-control input_view" style=""
                     type="number"
                     oninput="if(value.length > 11) value=value.slice(0,11)"
                     v-validate:f_user_phone="{minlength: 7, maxlength: 11  }"
                     v-model="data.fields[index].value"
                     :placeholder="item.placeholder"
                     :value="data.fields[index].value"
                     onKeypress="return(/[\d\.]/.test(String.fromCharCode(event.keyCode)))"
                     :readonly="item.readonly"
                     :disabled="item.disabled"
                     @change="onchange(index)"
                     @blur="onblur(index)"
                     @input="oninput(index)"
              />
            </div>
          </div>



          <!--时间datepicker-->
          <div :style="item.style ? item.style+';height: 40px;margin-bottom: 20px':'height: 40px;margin-bottom: 20px'"
               v-if="item.type==='datepicker' && !item.hidden && (item.device === 'pc' || !item.device)"
               :class="[item.required && !(item.value) ? 'has-error' : '',item.bootstraped ? item.bootstraped+' form-group':'col-sm-4 form-group']">
            <label
              :class="item.label_bootstraped ? item.label_bootstraped+' control-label-justify control-label' : 'control-label control-label-justify col-sm-6'">{{item.label}}</label>
            <div :style="item.value_style ? item.value_style:''"
                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-6'">
              <datepicker
                @change="onchange(index)"
                @blur="onblur(index)"
                :placeholder="item.placeholder"
                :value.sync="data.fields[index].value"
                :format="item.format ? item.format : 'yyyy-MM-dd'"
                v-model="data.fields[index].value"
                :readonly="item.readonly"
                :disabled="item.disabled"
                :show-reset-button="reset">
              </datepicker>
            </div>
          </div>

          <!--textarea-->
          <div :style="item.style ? item.style+';margin-bottom: 20px':'margin-bottom: 20px'"
               v-if="item.type==='textarea' && !item.hidden && (item.device === 'pc' || !item.device)"
               :class="[item.required && !(item.value) ? 'has-error' : '',item.bootstraped?item.bootstraped+' form-group':'col-sm-12 form-group']">
            <label :style="item.label_style ? item.label_style : ''"
                   :class="item.label_bootstraped ? item.label_bootstraped + ' control-label-justify control-label' : 'control-label-justify control-label col-sm-3'">{{item.label}}</label>
            <div :style="item.value_style ? item.value_style:''"
                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-10'">
              <textarea
                :readonly="item.readonly"
                :disabled="item.disabled"
                class="form-control input_view"
                style="width: 100%;height: 100%"
                :rows="item.rows"
                v-model="data.fields[index].value"
                :value="data.fields[index].value"
                @change="onchange(index)"
                @blur="onblur(index)"
                @input="oninput(index)"
              >
              </textarea>
            </div>
          </div>

          <!--select-->
          <div :style="item.style ? item.style+';height: 40px;margin-bottom: 20px':'height: 40px;margin-bottom: 20px'"
               v-if="item.type==='select' && !item.hidden && (item.device === 'pc' || !item.device) && !item.multiple"
               :class="[item.required && !(item.value) ? 'has-error' : '',item.bootstraped?item.bootstraped+' form-group':'col-sm-4 form-group']">
            <label
              :class="item.label_bootstraped ? item.label_bootstraped+' control-label control-label-justify':'control-label-justify control-label col-sm-6'">{{item.label}}</label>
            <div :style="item.value_style ? item.value_style:''"
                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-6'">
              <input-select
                class="select select_list"
                @blur="onblur(index)"
                @change="onchange(index)"
                @select-search="selectSearch($arguments,index)"
                :readonly="item.readonly"
                :disable="item.disabled"
                :value.sync="data.fields[index].value"
                v-model="data.fields[index].value"
                :options='data.fields[index].options'
                :valueSingle="true"></input-select>
            </div>
          </div>
          <!--select 多选-->
          <div :style="item.style ? item.style+';height: 40px;margin-bottom: 20px':'height: 40px;margin-bottom: 20px'"
               v-if="item.type==='select' && !item.hidden && (item.device === 'pc' || !item.device)&& item.multiple"
               :class="[item.required && !(item.value) ? 'has-error' : '',item.bootstraped?item.bootstraped+' form-group':'col-sm-4 form-group']">
            <label
              :class="item.label_bootstraped ? item.label_bootstraped+' control-label control-label-justify':'control-label-justify control-label col-sm-6'">{{item.label}}</label>
            <div :style="item.value_style ? item.value_style:''"
                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-6'">
              <v-select
                width="100%"
                class="select select_list"
                @blur="onblur(index)"
                @change="onchange(index)"
                @select-search="selectSearch($arguments,index)"
                :readonly="item.readonly"
                :disable="item.disabled"
                :value.sync="data.fields[index].value"
                v-model="data.fields[index].value"
                :options='data.fields[index].options'
                :multiple="data.fields[index].multiple"
                :valueSingle="true"></v-select>
            </div>
          </div>

          <!--checkbox-->
          <div :style="item.style ? item.style+';height: 40px;margin-bottom: 20px':'height: 40px;margin-bottom: 20px'"
               v-if="item.type==='checkbox' && !item.hidden && (item.device === 'pc' || !item.device)"
               :class="[item.required && item.value.length === 0 ? 'has-error' : '',item.bootstraped?item.bootstraped+' form-group':'col-sm-4 form-group']">
            <label v-if="item.label"
                   :class="item.label_bootstraped?item.label_bootstraped+' control-label control-label-justify':'control-label-justify control-label col-sm-6'">{{item.label}}</label>
            <div :style="item.value_style ? item.value_style:''"
                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-6'">
              <label class="checkbox-inline" v-for="(index2,row) in item.options">
                <input type="checkbox" class=""
                       :readonly="data.fields[index].readonly"
                       :disabled="data.fields[index].disabled"
                       v-model="data.fields[index].value"
                       :value="data.fields[index].options[index2].value"
                       @change="onchange(index)"
                       @blur="onblur(index)">
                {{row.label}}
              </label>
            </div>
          </div>
        </div>
        <!--区域地址联动-->
        <div>
          <res-area-select-group
            v-if="(data.f_apply_type === '报警器报建' || data.f_apply_type === '工商业报警器报建') && data.defname === '工程施工' && data.title === '工程施工' && data.f_sub_state !='完工'"
            labelstyle = "control-label"
            @shiji-select = "getSelectShijiValue"
            @xian-select = "getSelectXianValue"
            @shequ-select = "getSelectShequValue"
          >
          </res-area-select-group>
        </div>
      </div>
      <div class="" v-for="(index,item) in data.onetomany">
        <onetomany :selectdata="data" :onetomany="item" :index="index" v-if="item.device === 'pc' || !item.device"></onetomany>
      </div>
      <div v-for="(i,item) in data.components">
        <component v-if="item.device === 'pc' || !item.device" :is="item.name" :selectdata="data" :mark="item.mark"></component>
      </div>
      <!--自定义组件-->
      <slot>
      </slot>
      <!--公司等属性-->
      <div class="col-sm-12 form-group text-center" style="padding-top:8px">
        <div class="col-sm-3 form-group center-block">
          <label class="col-sm-5">所属公司：</label>
          <div class="col-sm-6" style="text-align: left">
            {{model.orgs}}
          </div>
        </div>
        <div class="col-sm-3 form-group center-block">
          <label class="col-sm-5">部门：</label>
          <div class="col-sm-6" style="text-align: left">
            {{model.parentname}}
          </div>
        </div>
        <div class="col-sm-3 form-group center-block">
          <label class="col-sm-5">操作人：</label>
          <div class="col-sm-6 " style="text-align: left">
            {{model.operator}}
          </div>
        </div>
        <div class="col-sm-3 form-group center-block">
          <label class="col-sm-5">操作日期：</label>
          <div class="col-sm-6" style="text-align: left">
            {{model.operate_date}}
          </div>
        </div>
      </div>
      <!-- 按钮组 -->
      <div class="from-group col-sm-12 text-center">
        <!-- 按钮组 -->
        <button v-for="(index,button) in data.buttons"
                :disabled="(button.disabled && disable_button)"
                style="min-width:100px"
                :class="button.disabled && disable_button ? 'btn btn-default button_spacing' : 'btn btn-primary button_spacing'"
                v-if="!button.hidden && button.button_name !=='提交'&& button.button_name !=='确认'"
                @click.prevent="click_but(button)"
        >
          {{button.button_name}}
        </button>
        <button v-for="(index,button) in data.buttons"
                :disabled="(button.disabled && disable_button) || (!$v.valid)"
                style="min-width:100px"
                :class="button.disabled && disable_button || (!$v.valid) ? 'btn btn-default button_spacing' : 'btn btn-primary button_spacing'"
                v-if="!button.hidden && (button.button_name ==='提交'||button.button_name ==='确认')"
                @click.prevent="click_but(button)"
        >
          {{button.button_name}}
        </button>
      </div>

      <!-- 按钮模态框 -->
      <modal v-if="showButModal" :show.sync="showButModal" backdrop="false" large>
        <header slot="modal-header" class="modal-header">
          <button type="button" class="close" @click="closeModal()"><span>&times;</span></button>
          <span class="modal-title"><font
            size="3">{{data.button.button_name}}</font></span>
        </header>
        <article slot="modal-body" class="modal-body clearfix">
          <div class="form-group" style="padding: 0 150px">
            <div v-for="(index,item) in data.button.button_fields">
              <div :style="item.style ? item.style : ''" :class="[item.required && !(item.value) ? 'has-error' : '', item.bootstraped ? item.bootstraped + ' form-group' : 'form-group']"
                   v-if="(item.type==='input' || item.type==='number'||item.type === 'tel'||item.type === 'email') && !item.hidden && (item.device === 'pc' || !item.device)">
                <label :style="item.label_style ? item.label_style : ''"
                       :class="item.label_bootstraped ? item.label_bootstraped + ' control-label-justify control-label' : 'control-label-justify control-label col-sm-6'">{{item.label}}</label>
                <div :style="item.value_style ? item.value_style : ''"
                     :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-9'">
                  <input class="form-control input_view"
                         :placeholder="item.placeholder"
                         :type="item.type"
                         v-model="item.value"
                         :value="item.value"
                         :readonly="item.readonly"
                         :disabled="item.disabled"
                         @change="onbutchange(index)"
                         @blur="onbutblur(index)"
                         @input="onbutinput(index)"
                  />
                </div>
              </div>

              <!--时间datepicker-->
              <div :style="item.style ? item.style : ''" :class="[item.required && !(item.value) ? 'has-error' : '', item.bootstraped ? item.bootstraped + ' form-group':'form-group']"
                   v-if="item.type==='datepicker' && !item.hidden && (item.device === 'pc' || !item.device)">
                <label :style="item.label_style ? item.label_style : ''"
                       :class="item.label_bootstraped ? item.label_bootstraped + ' control-label-justify control-label' : 'control-label-justify control-label col-sm-6'">{{item.label}}</label>
                <div :style="item.value_style ? item.value_style : ''"
                     :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-9'">
                  <datepicker
                    :placeholder="item.placeholder"
                    :value.sync="item.value"
                    v-model="item.value"
                    :readonly="item.readonly"
                    :disabled="item.disabled"
                    :format="item.format ? item.format : 'yyyy-MM-dd'"
                    :show-reset-button="true"
                    @change="onbutchange(index)"
                    @blur="onbutblur(index)"
                  ></datepicker>
                </div>
              </div>

              <!--select-->
              <div :style="item.style ? item.style : ''" :class="[item.required && !(item.value) ? 'has-error' : '', item.bootstraped ? item.bootstraped + ' form-group':'form-group']"
                   v-if="item.type==='select' && !item.hidden && (item.device === 'pc' || !item.device)">
                <label :style="item.label_style ? item.label_style : ''"
                       :class="item.label_bootstraped ? item.label_bootstraped + ' control-label-justify control-label' : 'control-label-justify control-label col-sm-6'">{{item.label}}</label>
                <div :style="item.value_style ? item.value_style : ''"
                     :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-9'">
                  <input-select
                    class="select select_list"
                    :value.sync="item.value"
                    v-model="item.value"
                    :options='item.options'
                    :readonly="item.readonly"
                    :disable="item.disabled"
                    :valueSingle="true"
                    @blur="onbutblur(index)"
                    @change="onbutchange(index)"
                  ></input-select>
                </div>
              </div>

              <!--textarea-->
              <div :style="item.style ? item.style : ''" :class="[item.required && !(item.value) ? 'has-error' : '', item.bootstraped ? item.bootstraped + ' form-group':'form-group']"
                   v-if="item.type==='textarea' && !item.hidden && (item.device === 'pc' || !item.device)">
                <label :style="item.label_style ? item.label_style : ''"
                       :class="item.label_bootstraped ? item.label_bootstraped + ' control-label-justify control-label' : 'control-label-justify control-label col-sm-6'">{{item.label}}</label>
                <div :style="item.value_style ? item.value_style : ''"
                     :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-9'">
                <textarea
                  class="form-control input_view"
                  style="width: 100%;height: 100%"
                  v-model="item.value"
                  :value="item.value"
                  :rows="item.rows"
                  :readonly="item.readonly"
                  :disabled="item.disabled"
                  @change="onbutchange(index)"
                  @blur="onbutblur(index)"
                  @input="onbutinput(index)"
                ></textarea>
                </div>
              </div>
            </div>
          </div>
        </article>
        <footer slot="modal-footer" class="modal-footer">
          <button :class="disable_modal_button ? 'btn btn-default':'btn btn-primary'"
                  :disabled="disable_modal_button" type="button" @click="confirmModal()">
            确认
          </button>
        </footer>
      </modal>
    </form>
  </div>
</template>
<script>
import Vue from 'vue'
import {isEmpty} from "../../../../../../Util";
import {HttpResetClass} from 'vue-client'
import onetomany  from "./Onetomany.vue";
import ResAreaSelectGroup from "./ResAreaSelectGroup.vue";
// Date格式化
Date.prototype.Format = function (fmt) {
  var o = {
    'M+': this.getMonth() + 1, // 月份
    'd+': this.getDate(), // 日
    'H+': this.getHours(), // 小时
    'm+': this.getMinutes(), // 分
    's+': this.getSeconds(), // 秒
    'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
    'S': this.getMilliseconds() // 毫秒
  }
  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
  for (var k in o) {
    if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
  }
  return fmt
}

export default {
  title: '报建业务通用组件',
  props: {
    data: {
      type: Object
    }
  },
  components: {
    onetomany,
    ResAreaSelectGroup
  },
  data () {
    return {
      model: {}, // 公司等属性
      disable_button: true, // 控制按钮禁用
      disable_modal_button: true, // 控制按钮禁用
      //初始化省市区数据
      pcdslist: [],
      //初始化街道数据
      streetslist: [],
      //初始化街道数据
      areaslist: [],
      showButModal: false,
      areaData:{
        sjvalue:'',
        xianvalue:'',
        sqvalue:'',
      },
      templatlng: {
        gaodetemplng: "",
        gaodetemplat: "",
        baidutemplng: "",
        baidutemplat: ""
      }
    }
  },
  watch: {
    deep: true
  },
  computed: {

  },
  created () {
    // 初始化数据
    this.initializtion()
    if (this.data.readyEvent) {
      this.$dispatch(this.data.readyEvent)
    }
    this.$dispatch('initializtionView')
  },
  methods: {
    // 初始化数据
    initializtion () {
      for (const item of this.data.fields) {
        this.data[item.field] = item.value
      }

      // 是否禁用按钮
      this.disableButton()
      // 公司等属性初始化
      if (this.data.orgs) {
        this.model.orgs = this.data.orgs
      } else {
        this.model.orgs = this.$login.f.orgs
      }
      if (this.data.parentname) {
        this.model.parentname = this.data.parentname
      } else {
        this.model.parentname = this.$login.f.f_department_name
      }
      if (this.data.operate_date) {
        this.model.operate_date = this.data.operate_date
      } else {
        this.model.operate_date = new Date().Format('yyyy-MM-dd')
      }
      if (this.data.operator) {
        this.model.operator = this.data.operator
      } else {
        this.model.operator = this.$login.f.name
      }

      this.initpcds(` j_orgid = '${this.$login.f.orgid}'`)
    },
    async getSelectShijiValue(sjvalue,sjlable) {
      this.areaData.sjvalue = sjvalue
      console.log("这是父级接收的市级值:",sjvalue,sjlable)
      this.data.areaData = this.areaData

      // 是否禁用按钮
      this.disableButton()
    },
    async getSelectXianValue(xianvalue,xianlable) {
      this.areaData.xianvalue = xianvalue
      this.data.areaData = this.areaData
      console.log("这是父级接收的县级值:",xianvalue,xianlable)

      // 是否禁用按钮
      this.disableButton()
    },
    async getSelectShequValue(sqvalue,sqlable) {
      this.areaData.sqvalue = sqvalue
      this.data.areaData = this.areaData
      console.log("这是父级接收的社区值:",sqvalue,sqlable)

      // 是否禁用按钮
      this.disableButton()
    },
    //初始化省市区,添加街道
    async initpcds(pconditon) {
      // console.log('initpcds', pconditon)
      // this.pcdslist = []
      // let HttpReset = new HttpResetClass()
      // let req = await HttpReset.load('POST', 'rs/sql/address_singleTableOrderBy?pageNo=1&pageSize=9999999', {
      //   data: {
      //     items: '*',
      //     tablename: 'j_bjqpcd',
      //     orderitem: 'id',
      //     condition: pconditon
      //   }
      // }, {resolveMsg: null, rejectMsg: '获取地址失败!'})
      // let redata = []
      // req.data.forEach((row, n) => {
      //   redata[n] = {
      //     label: row.j_areaname,
      //     value: row.j_areaid,
      //     data: row,
      //     id: row.id
      //   }
      // })
      // console.log('市区', redata)
      // this.pcdslist = redata
    },
    //初始化街道 添加小区
    async initstreets(pconditon) {
      // console.log('市区32', pconditon)
      // this.streetslist = []
      // let HttpReset = new HttpResetClass()
      // let req = await HttpReset.load('POST', 'rs/sql/address_singleTableOrderBy', {
      //   data: {
      //     items: '*',
      //     tablename: 'j_bjqstreet',
      //     orderitem: 'id',
      //     condition: pconditon
      //   }
      // }, {resolveMsg: null, rejectMsg: '获取地址失败!'})
      // let redata = []
      // req.data.forEach((row, n) => {
      //   redata[n] = {
      //     label: row.j_areaname,
      //     value: row.j_areaid,
      //     data: row,
      //     id: row.id
      //   }
      // })
      // console.log('市区333', redata)
      // this.streetslist = redata
      // this.model.f_iscity = this.findbyid(this.streetslist, this.model.f_street_id).f_iscity
    },
    //初始化小区添加小区
    async initareas(pconditon) {
      // if(this.usertype){
      //   pconditon=pconditon+` and  f_special='1' `
      // }
      // this.areaslist = []
      // let HttpReset = new HttpResetClass()
      // let req = await HttpReset.load('POST', 'rs/sql/address_singleTableOrderBy?pageNo=1&pageSize=100', {
      //   data: {
      //     items: '*',
      //     tablename: 'j_bjqarea',
      //     orderitem: 'id',
      //     condition: pconditon
      //   }
      // }, {resolveMsg: null, rejectMsg: '获取地址失败!'})
      // let redata = []
      // req.data.forEach((row) => {
      //   redata.push({
      //     label: row.j_areaname,
      //     value: row.j_areaid,
      //     data: row,
      //     id: row.id
      //   })
      // })
      // console.log('市区666', redata)
      // if (redata.length>0){
      //   this.areaslist = redata
      // }
    },
    //省/市/区变化
    async pcdChange(val) {

      // console.log("省/市/区变化", val)
      // console.log("省/市/区变化", `  f_pcd_id ='${val}' `)
      // if (val) {
      //   //那就把[小区，街道]重新组织一下
      //   await this.initstreets(`  j_parentid ='${val}' `)
      //   if (this.model.f_street_id) {
      //     if (this.findbyid(this.streetslist, this.model.f_street_id)) {
      //       let pcd_id = this.findbyid(this.streetslist, this.model.f_street_id).f_pcd_id
      //       if (pcd_id != val) {
      //         this.model.f_street_id = ''
      //       }
      //     } else {
      //       this.model.f_street_id = ''
      //     }
      //
      //     //那就把[小区，街道]重新组织一下
      //     if (this.model.f_street_id) {
      //       await this.initareas(` j_parentid ='${this.model.f_street_id}' `)
      //       if (this.model.f_residential_area_id) {
      //         if (this.findbyid(this.areaslist, this.model.f_residential_area_id)) {
      //           let pcd_id = this.findbyid(this.areaslist, this.model.f_residential_area_id).f_pcd_id
      //           if (pcd_id != val) {
      //             this.model.f_residential_area_id = ''
      //           }
      //         } else {
      //           this.model.f_residential_area_id = ''
      //         }
      //
      //       }
      //     }
      //   }
      // }
      // this.$resetValidation()
    },
    //街道变化
    async streetChange(val) {
      // console.log("街道变化", val)
      // if (this.streetslist[0]) {
      //   var street = ''
      //   this.streetslist.forEach((item) => {
      //     if (item.id === val) {
      //       street = item.label
      //     }
      //   })
      //   this.model.f_address = street
      // }
      // if (val) {
      //   //那就把[小区]重新组织一下
      //   await this.initareas(` j_parentid ='${val}' `)
      //   if (this.model.f_residential_area_id) {
      //     if (this.findbyid(this.areaslist, this.model.f_residential_area_id)) {
      //       let street_id = this.findbyid(this.areaslist, this.model.f_residential_area_id).f_street_id
      //       if (street_id != val) {
      //         this.model.f_residential_area_id = ''
      //       }
      //     } else {
      //       this.model.f_residential_area_id = ''
      //     }
      //
      //   }
      // }
      // this.$resetValidation()
    },
    // 是否禁用按钮
    disableButton () {
      let flag = false
      for (const field of this.data.fields) {
        if (field.required && !field.value && !field.hidden && field.value !== 0) {
          flag = true
        }

        // 任何选择框只要是否都不能提交
        if (field.type === 'select' && field.value === '否' && field.value_no_disable) {
          flag = true
        }

        if (field.type === 'checkbox' && field.required && field.value.length === 0) {
          flag = true
        }
      }

      //区域下拉框必选 流程模式为报警器报建
       if ((this.data.f_apply_type === '报警器报建' || this.data.f_apply_type === '工商业报警器报建') && this.data.defname === '工程施工' && this.data.title === '工程施工' && this.data.f_sub_state !='完工'){
         if (!flag){
           if (this.areaData.sjvalue ==null || this.areaData.sjvalue.length ==0 || this.areaData.sqvalue == null || this.areaData.sqvalue.length ==0
             || this.areaData.xianvalue == null || this.areaData.xianvalue.length == 0){
             console.log("区域为空禁止提交:",this.areaData)
             flag = true
           }

           if (this.templatlng.baidutemplat ==null || this.templatlng.baidutemplat.length ==0 || this.templatlng.baidutemplng == null || this.templatlng.baidutemplng.length ==0
             || this.templatlng.gaodetemplat == null || this.templatlng.gaodetemplat.length == 0 || this.templatlng.gaodetemplng == null || this.templatlng.gaodetemplng.length == 0){
             console.log("地图坐标为空禁止提交:",this.templatlng)
             flag = true
           }
         }
       }
      this.disable_button = flag
    },
    // 失去焦点且值最终发生变化触发
    async onchange (index) {
      // 是否禁用按钮
      this.disableButton()

      if (!isEmpty(this.data.fields[index].value)) {
        // 前缀、后缀
        if (this.data.fields[index].prefix) {
          this.data.fields[index].value = this.data.fields[index].prefix + this.data.fields[index].value
        }
        if (this.data.fields[index].suffix) {
          this.data.fields[index].value = this.data.fields[index].value + this.data.fields[index].suffix
        }
      }

      // data赋值
      this.data[this.data.fields[index].field] = this.data.fields[index].value

      if (this.data.fields[index].type === 'datepicker') {
        this.check_datepicker(index)
      }

      if (this.data.fields[index].onchange) {
        this.$dispatch(this.data.fields[index].onchange, index)
      }
      this.$dispatch('onchange', index)
    },
    // 失去焦点触发，无论值是否发生变化
    onblur (index) {
      this.disableButton()

      if (this.data.fields[index].onblur) {
        this.$dispatch(this.data.fields[index].onblur, index)
      }

      this.$dispatch('onblur', index)
    },
    oninput (index) {
      // 是否禁用按钮
      this.disableButton()

      if (this.data.fields[index].oninput) {
        this.$dispatch(this.data.fields[index].oninput, index)
      }
      this.$dispatch('oninput', index)
    },
    selectSearch(event, index) {
      if (this.data.fields[index].selectSearch) {
        this.$dispatch(this.data.fields[index].selectSearch, event[0], index)
      }
      this.$dispatch('selectSearch', event[0], index)
    },
    // 点击按钮组按钮
    async click_but (button) {
      //报警器区域地址
      this.data.areaData = this.areaData
      this.data.templatlng = this.templatlng

      this.disable_button = true

      this.data.fields.forEach(item => {
        this.data[item.field] = item.value
      })

      this.data.button = button

      if (button.button_fields && button.button_fields.length > 0) {
        this.showButModal = true
        return
      }

      if (this.data.button.event) {
        this.$dispatch(this.data.button.event)
      } else {
        this.$dispatch('button')
      }

    },
    confirmModal () {
      this.closeModal()

      this.data.button.button_fields.forEach(item => {
        this.data.button[item.field] = item.value
      })

      if (this.data.button.event) {
        this.$dispatch(this.data.button.event)
      } else {
        this.$dispatch('button')
      }
    },
    // 关闭模态框
    closeModal () {
      this.showButModal = false
      this.disable_modal_button = false
    },
    onbutchange (index) {
      // 是否禁用按钮
      this.disableModalButton()

      if (this.data.button.button_fields[index].onchange) {
        this.$dispatch(this.data.button.button_fields[index].onchange, index)
      } else {
        this.$dispatch('onbutchange', index)
      }

    },
    onbutblur (index) {
      this.disableModalButton()

      if (this.data.button.button_fields[index].onblur) {
        this.$dispatch(this.data.button.button_fields[index].onblur, index)
      } else {
        this.$dispatch('onbutblur', index)
      }
    },
    onbutinput (index) {
      // 是否禁用按钮
      this.disableModalButton()

      if (this.data.button.button_fields[index].oninput) {
        this.$dispatch(this.data.button.button_fields[index].oninput, index)
      } else {
        this.$dispatch('onbutinput', index)
      }
    },
    disableModalButton () {
      let flag = false


      for (const item of this.data.button.button_fields) {
        if (item.required && !item.value) {
          if (item.value === 0) {
            flag = false
          } else {
            flag = true
          }
        }
      }

      this.disable_modal_button = flag
    },
    check_datepicker (index) {
      // 时间格式检测
      if (!isEmpty(this.data.fields[index].value)) {

        let dateReg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/
        let timeReg = /^(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/
        let datetimeReg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/
        if (this.data.fields[index].format) {
          if (this.data.fields[index].format === 'yyyy-MM-dd') {
            if (!dateReg.test(this.data.fields[index].value)) {
              this.data.fields[index].value = ''
              this.$showAlert(this.data.fields[index].label + '格式错误如：2021-01-01', 'warning', 2000)
            }
          }
          if (this.data.fields[index].format === 'HH:mm:ss') {
            if (!timeReg.test(this.data.fields[index].value)) {
              this.data.fields[index].value = ''
              this.$showAlert(this.data.fields[index].label + '格式错误如：00:00:00', 'warning', 2000)
            }
          }
          if (this.data.fields[index].format === 'yyyy-MM-dd HH:mm:ss') {
            if (!datetimeReg.test(this.data.fields[index].value)) {
              this.data.fields[index].value = ''
              this.$showAlert(this.data.fields[index].label + '格式错误如：2021-01-01 00:00:00', 'warning', 2000)
            }
          }
        } else {
          if (!dateReg.test(this.data.fields[index].value)) {
            this.data.fields[index].value = ''
            this.$showAlert(this.data.fields[index].label + '格式错误如：2021-01-01', 'warning', 2000)
          }
        }
      }
    }
  },
  events: {

  }
}
</script>
<style>
.datepicker{
  width: 100%!important;
}
.datepicker-input{
  background-color: #ffffff!important;
  width: 100%!important;
}
.datepicker-input:disabled{
  border: 1px solid #DDD!important;
  color: #ACA899!important;
  width: 100%!important;
}
</style>
<style scoped>
th{
  font-size: 15px !important;
  text-align: center !important;
  background-color: #dfedfb!important;
  color: #666666 !important;
  font-family: PINGFANG-BOLD !important;
  font-weight: normal!important;
}
/*清除model中的浮动*/
.clearfix:after,.clearfix:before{
  display: table;
}
.clearfix:after{
  clear: both;
}

.input_view{
  padding: 8px;
  background-color: #ffffff;
  border-radius: 2px;
  border: solid 1px #c7c7c7!important;
  color: #333333!important;
  font-size: 15px!important;
}

.input_view[readonly]{
  border: 1px solid #DDD!important;
  color:#ACA899!important;
}
.input_view:disabled{
  border: 1px solid #DDD!important;
  color:#ACA899!important;
}

.control-label-justify {
  display: inline-block;
  vertical-align: top;
  width: 110px;
  text-align: justify;
  font-family: PingFang-SC-Bold;
}

.control-label-justify::after {
  content: "";
  display: inline-block;
  width: 100%;
  overflow: hidden;
  height: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}

</style>
