<template>
  <div>
    <div class="col-sm-12 col-xs-12 form-group app-btn">
      <button
        :class="onetomany.add.class || 'btn btn-info'"
        @click.prevent="openAdd()"
        v-if="!onetomany.add.hidden"
        :style="onetomany.add.style || ''">
          {{ onetomany.add.text || '添加'}}
      </button>
    </div>
    <div class="col-sm-12 col-xs-12">
      <list :model="onetomany" partial='list'>
        <div partial class="auto app-text panel">
          <div class="panel-body panel-self">
            <div class="row" v-for="field in $parent.$parent.onetomany.fields" v-if="!field.displayPosition || field.displayPosition === 'list'">
              <p class="col-xs-3 text-left font label-justify"><b>{{ field.label }}</b></p>
              <p class="col-xs-8 col-xs-offset-1 text-left input-font">{{ row[field.field] }}</p>
            </div>
            <div class="row text-right" v-if="!$parent.$parent.onetomany.hiddenOperate">
              <button
                :class="$parent.$parent.onetomany.update.style || 'btn btn-warning'"
                @click.prevent="$parent.$parent.openUpdate($index)"
                v-if="!$parent.$parent.onetomany.update.hidden"
                :style="$parent.$parent.onetomany.update.style || ''">
                {{ $parent.$parent.onetomany.update.text || '修改'}}
              </button>
              <button
                :class="$parent.$parent.onetomany.delete.style || 'btn btn-danger'"
                @click.prevent="$parent.$parent.openDelete($index)"
                v-if="!$parent.$parent.onetomany.delete.hidden"
                :style="$parent.$parent.onetomany.delete.style || ''">
                {{ $parent.$parent.onetomany.delete.text || '删除'}}
              </button>
            </div>
          </div>
        </div>
      </list>
    </div>


    <!-- onetomany模态框 -->
    <modal v-if="showModal" :show.sync="showModal" backdrop="false" :large="onetomany.modalSize === 'large' ? true : false" :small="onetomany.modalSize === 'small' ? true : false">
      <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">{{modelTitle}}</font></span>
      </header>
      <article slot="modal-body" class="modal-body clearfix">
        <div v-for="(index,item) in onetomany.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="onetomany.fields[index].value"
                     :placeholder="item.placeholder"
                     :value="onetomany.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"
                close-on-select value-single
                :options="item.options"
                v-model="onetomany.fields[index].value"
                :value.sync="onetomany.fields[index].value"
                :readonly="item.readonly"
                :disabled="item.disabled"
                @blur="onblur(index)"
                @change="onchange(index)"
              ></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 :style="item.value_style ? item.value_style:''"
                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
              <datepicker
                :placeholder="item.placeholder"
                :value.sync="onetomany.fields[index].value"
                :format="item.format ? item.format : 'yyyy-MM-dd'"
                v-model="onetomany.fields[index].value"
                :readonly="item.readonly"
                :disabled="item.disabled"
                @change="onchange(index)"
                @blur="onblur(index)"
                :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="onetomany.fields[index].value"
                :value="onetomany.fields[index].value"
                @change="onchange(index)"
                @blur="onblur(index)"
                @input="oninput(index)"
              ></textarea>
            </div>
          </div>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button :class="disableButton?'btn btn-default':'btn btn-primary'"
                :disabled="disableButton" type="button" @click.prevent="confirmModal()">
          确认
        </button>
      </footer>
    </modal>
  </div>
</template>

<script>
import {HttpResetClass} from 'vue-client'
import {guid, toStandardTimeString} from '../Util'
import Vue from 'vue'
export default {
  title: 'onetomany',
  props: ['onetomany', 'index'],
  data () {
    return {
      showModal: false,
      disableButton: true,
      modelTitle: null,
      rowIndex: null
    }
  },
  ready () {
  },
  methods: {
    confirmModal () {
      if (this.modelTitle === '新增') {
        if (this.onetomany.add.event) {
          this.$dispatch(this.onetomany.add.event, this.index)
        } else {
          this.$dispatch('onetomanyadd', this.index)
        }
      }
      if (this.modelTitle === '修改') {
        if (this.onetomany.update.event) {
          this.$dispatch(this.onetomany.update.event, this.index, this.rowIndex)
        } else {
          this.$dispatch('onetomanyupdate', this.index, this.rowIndex)
        }
      }

      this.closeModal()
    },
    onchange (fieldIndex) {
      this.disableModalButton()
      if (this.onetomany.fields[fieldIndex].onchange) {
        this.$dispatch(this.onetomany.fields[fieldIndex].onchange, this.index, fieldIndex)
      } else {
        this.$dispatch('onchangeModal', this.index, fieldIndex)
      }
    },
    onblur (fieldIndex) {
      this.disableModalButton()
      if (this.onetomany.fields[fieldIndex].onblur) {
        this.$dispatch(this.onetomany.fields[fieldIndex].onblur, this.index, fieldIndex)
      } else {
        this.$dispatch('onblurModal', this.index, fieldIndex)
      }
    },
    oninput (fieldIndex) {
      this.disableModalButton()
      if (this.onetomany.fields[fieldIndex].oninput) {
        this.$dispatch(this.onetomany.fields[fieldIndex].oninput, this.index, fieldIndex)
      } else {
        this.$dispatch('oninputModal', this.index, fieldIndex)
      }
    },
    openDelete (rowIndex) {
      this.$showMessage(this.onetomany.delete.message ? this.onetomany.delete.message : '您确定要删除这条记录吗？', ['confirm']).then((res) => {
        if (res === 'confirm') {
          if (this.onetomany.delete.event) {
            this.$dispatch(this.onetomany.delete.event, this.index, rowIndex)
          } else {
            this.$dispatch('onetomanydelete', this.index, rowIndex)
          }
        }
      })
    },
    // 修改
    openUpdate (rowIndex) {
      let row = this.onetomany.rows[rowIndex]
      for (const item of this.onetomany.fields) {
        item.value = row[item.field]
      }

      this.disableModalButton()

      this.modelTitle = '修改'
      this.rowIndex = rowIndex

      if (this.onetomany.update.openEvent) {
        this.$dispatch(this.onetomany.update.openEvent, this.index, this.rowIndex)
      }
      this.$dispatch('openUpdateModel', this.index, this.rowIndex)

      this.showModal = true
    },
    openAdd () {
      this.disableModalButton()
      this.modelTitle = '新增'

      if (this.onetomany.add.openEvent) {
        this.$dispatch(this.onetomany.add.openEvent, this.index)
      }
      this.$dispatch('openAddModel', this.index)

      this.showModal = true
    },
    closeModal () {
      this.showModal = false
      this.disableButton = false
      this.modelTitle = null
      this.rowIndex = null

      for (const item of this.onetomany.fields) {
        item.value = null
      }
    },
    // 是否禁用按钮
    disableModalButton () {
      let flag = false

      for (const field of this.onetomany.fields) {
        if (field.required && !field.value && !field.hidden && field.value !== 0) {
          flag = true
        }
      }

      this.disableButton = flag
    }
  },
  computed: {
  },
  events: {
  }
}
</script>

<style scoped>
.control-label-justify {
  width: 30%;
  text-align: justify;
  text-align-last: justify;
  font-family: PingFang-SC-Bold;
  float: left;
}
.label-justify {
  text-align: justify;
  text-align-last: justify;
  float: left;
}
.panel-self{
  border-radius: 10px;
  border:1px solid #499EDF;
  background-color: #F8F8F8;
}
.font{
  font: 15px PingFang-SC-Medium;
  color: #666666;
}
</style>
