<template>
  <app-show-back-reason :selectdata="data"></app-show-back-reason>
  <div class="form-horizontal select-overspread">
    <div v-for="(index,item) in data.fields">
      <!--input-->
      <div :style="item.style ? item.style : ''"
           v-if="(item.type==='input' || item.type==='number'||item.type === 'tel'||item.type === 'email') && !item.hidden && (item.device === 'app' || !item.device)"
           :class="[item.required && !(item.value) ? 'apply-has-error' : '', item.bootstraped ? item.bootstraped + ' form-group app-input':'col-xs-12 form-group app-input']">
        <label class="control-label-justify">{{item.label}}</label>
        <div :style="item.value_style ? item.value_style:''"
             :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
          <input class="" style="width: 100%"
                 :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>

      <!--select-->
      <div :style="item.style ? item.style : ''"
           v-if="item.type==='select' && !item.hidden  && (item.device === 'app' || !item.device)"
           :class="[item.required && !(item.value) ? 'apply-has-error' : '', item.bootstraped ? item.bootstraped + ' form-group app-input':'col-xs-12 form-group app-input']">
        <label class="control-label-justify">{{item.label}}</label>
        <div :style="item.value_style ? item.value_style:''"
             :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
          <v-select
            class="select" width="100%" align="right"
            :placeholder="item.placeholder"
            :search="item.search"
            @select-search="selectSearch($arguments,index)"
            close-on-select value-single
            :options="data.fields[index].options"
            v-model="data.fields[index].value"
            :value.sync="data.fields[index].value"
            @blur="onblur(index)"
            @change="onchange(index)"
            :readonly="item.readonly"
            :disabled="item.disabled"
          ></v-select>
        </div>
      </div>

      <!--时间datepicker-->
      <div :style="item.style ? item.style : ''"
           v-if="item.type==='datepicker' && !item.hidden  && (item.device === 'app' || !item.device)"
           :class="[item.required && !(item.value) ? 'apply-has-error' : '', item.bootstraped ? item.bootstraped+' form-group app-input':'col-xs-12 form-group app-input']">
        <label class="control-label-justify">{{item.label}}</label>
        <div class="form-group" :style="item.value_style ? item.value_style:''"
             :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
          <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="true">
          </datepicker>
        </div>
      </div>

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

      <!--checkbox-->
      <div :style="item.style ? item.style : ''"
           v-if="item.type==='checkbox' && !item.hidden && (item.device === 'app' || !item.device)"
           :class="[item.required && item.value.length === 0 ? 'apply-has-error' : '',item.bootstraped?item.bootstraped+' form-group app-input':'col-xs-12 form-group app-input']">
        <label class="control-label-justify" v-if="item.label">{{item.label}}</label>
        <div :style="item.value_style ? item.value_style:''"
             :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'" v-if="item.label">
          <label class="" 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 :style="item.value_style ? item.value_style:''"
             :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-12'" v-if="!item.label">
          <label class="" 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 class="col-sm-12 col-xs-12">
      <accordion one-at-a-time="true">
        <panel v-for="(i,item) in data.onetomany" :header="item.title" :is-open="false" type="primary" v-if="(item.device === 'app' || !item.device) && !item.hidden">
          <app-onetomany :onetomany="item" :index="i"></app-onetomany>
        </panel>
        <panel v-for="(i,item) in data.components" :header="item.title" :is-open="false" type="primary" v-if="(item.device === 'app' || !item.device) && !item.hidden">
          <component :is="item.name" :selectdata="data" :mark="item.mark" :title="item.title"></component>
        </panel>
        <panel header="拍照" :is-open="false" type="primary" v-if="data.f_process_id">
          <app-take-pic :blobid="data.f_process_id" :defname="data.defname" :isdelete="true" :istakepic="true"
                        :istype="true"></app-take-pic>
        </panel>
        <panel header='附件' :is-open="false" type="primary">
          <app-upload :blodid="data.f_process_id"
                      :isupload="true"
                      :isdelete="true"
                      :isusetype="true"
                      :isremark="true"
                      :takeimg="true"
                      :issearch="true"
                      :defname="data.defname">
          </app-upload>
        </panel>
      </accordion>
    </div>

    <!--自定义组件-->
    <slot></slot>

    <!-- 按钮组 -->
    <div class="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' : button.class ? button.class : 'btn btn-warning button_spacing'"
              v-if="!button.hidden"
              @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" >
          <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'">{{item.label}}</label>
              <div :style="item.value_style ? item.value_style : ''"
                   :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
                <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'">{{item.label}}</label>
              <div :style="item.value_style ? item.value_style : ''"
                   :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
                <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'">{{item.label}}</label>
              <div :style="item.value_style ? item.value_style : ''"
                   :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
                <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'">{{item.label}}</label>
              <div :style="item.value_style ? item.value_style : ''"
                   :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
                <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>
  </div>
</template>
<script>
import Vue from 'vue'
import {isEmpty} from "../Util";
// 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
    },
    showprint: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      model: {}, // 公司等属性
      disable_button: true, // 控制按钮禁用
      disable_modal_button: true, // 控制按钮禁用
      showButModal: false
    }
  },
  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
      }
      setTimeout(() => {
        // 是否禁用按钮
        this.disableButton()
      }, 2000)
    },
    // 是否禁用按钮
    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
        }
      }

      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)


    },
    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)
    },
    // 失去焦点触发，无论值是否发生变化
    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)
    },
    // 点击按钮组按钮
    async click_but (button) {
      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 = true
    },
    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.$showMessage(this.data.fields[index].label + '格式错误如：2021-01-01')
            }
          }
          if (this.data.fields[index].format === 'HH:mm:ss') {
            if (!timeReg.test(this.data.fields[index].value)) {
              this.data.fields[index].value = ''
              this.$showMessage(this.data.fields[index].label + '格式错误如：00:00:00')
            }
          }
          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.$showMessage(this.data.fields[index].label + '格式错误如：2021-01-01 00:00:00')
            }
          }
        } else {
          if (!dateReg.test(this.data.fields[index].value)) {
            this.data.fields[index].value = ''
            this.$showMessage(this.data.fields[index].label + '格式错误如：2021-01-01')
          }
        }
      }
    }
  },
  events: {
  }
}
</script>
<style scoped>
  .control-label-justify {
    width: 30%;
    text-align: justify;
    text-align-last: justify;
    font-family: PingFang-SC-Bold;
    float: left;
  }
  .button_spacing{margin: 0px  0px 0px 10px;}
</style>
<style lang="less">
.apply-has-error {
  border-bottom: 1px solid #a94442;
}
.app-input {
  label {
    float: left;
  }
  .select {
    button {
      border: none;
      outline: none;
      text-align: left;
      .btn-placeholder {
        color: #ACA899
      }
    }
  }
  .datepicker {
    .form-control:focus {
      border: none!important;
      outline: none!important;
      -webkit-box-shadow: none;
      box-shadow: none;
    }
  }
  textarea {
    padding: 8px 10px;
    border: none;
    outline: none;
    margin: 0px;
  }
  input[readonly]{
    color: #ACA899!important;
    background: #FFFFFF;
    border: none;
    outline: none;
  }
  input:disabled{
    color: #ACA899!important;
    background: #FFFFFF;
    border: none;
    outline: none;
  }
  textarea[readonly]{
    color: #ACA899!important;
    background: #FFFFFF;
    border: none;
    outline: none;
  }
  textarea:disabled{
    color: #ACA899!important;
    background: #FFFFFF;
    border: none;
    outline: none;
  }
}
</style>
