<template>
  <div>
    <data-grid :model="onetomany" class="list_area table_sy">
      <template partial='head'>
        <tr>
          <th style="white-space: nowrap;">序号</th>
          <th v-for="field in $parent.$parent.onetomany.fields" v-if="!field.displayPosition || field.displayPosition === 'list'">
            <nobr>{{field.label}}</nobr>
          </th>
          <th v-if="!$parent.$parent.onetomany.hiddenOperate">
            <button :style="$parent.$parent.onetomany.add.style"
                    :class="$parent.$parent.onetomany.add.class ? $parent.$parent.onetomany.add.class + ' button_spacing' : 'button_new button_spacing'"
                    v-if="!$parent.$parent.onetomany.add.hidden"
                    @click.prevent="$parent.$parent.openAdd()" >
              {{ $parent.$parent.onetomany.add.text || '添加' }}
            </button>
            <button :style="$parent.$parent.onetomany.import.style"
                    :class="$parent.$parent.onetomany.import.class ? $parent.$parent.onetomany.import.class + ' button_spacing' : 'button_export button_spacing'"
                    v-if="!$parent.$parent.onetomany.import.hidden"
                    @click.prevent="$parent.$parent.showFile = !$parent.$parent.showFile" >
              {{ $parent.$parent.onetomany.import.text || '导入' }}
            </button>
            <a type="button" style="text-decoration: none"
               class="button_export button_spacing"
               v-if="$parent.$parent.onetomany.import.templateUrl"
               :href="$parent.$parent.onetomany.import.templateUrl" download>模板下载</a>
            <export-excel
              v-if="!$parent.$parent.onetomany.export.hidden"
              :data="$parent.$parent.getCondition"
              :field="$parent.$parent.getField"
              sqlurl="rs/logic/applyExportfile"
              :sql-name="$parent.$parent.onetomany.export.sqlName || 'applySingleTable'"
              :template-name="$parent.$parent.onetomany.export.templateName || '导出明细'"
              :btn-name="$parent.$parent.onetomany.export.butName || '导出'"
              :choose-col="true"></export-excel>
          </th>
        </tr>
      </template>
      <template partial='body'>
        <tr>
          <td style="text-align: center">
            <nobr><font>{{$index+1}}</font></nobr>
          </td>
          <td class="text-center" style="text-align: center" v-for="key in $parent.$parent.onetomany.fields"  v-if="!key.displayPosition || key.displayPosition === 'list'">
            {{row[key.field]}}
          </td>
          <td style="text-align: center" v-if="!$parent.$parent.onetomany.hiddenOperate">
            <button :style="$parent.$parent.onetomany.update.style"
                    :class="$parent.$parent.onetomany.update.class ? $parent.$parent.onetomany.update.class + ' button_spacing' : 'button_search button_spacing'"
                    v-if="!$parent.$parent.onetomany.update.hidden"
                    @click.prevent="$parent.$parent.openUpdate($index)" >
              {{ $parent.$parent.onetomany.update.text || '修改' }}
            </button>
            <button :style="$parent.$parent.onetomany.delete.style"
                    :class="$parent.$parent.onetomany.delete.class ? $parent.$parent.onetomany.delete.class + ' button_spacing' : 'button_delete button_spacing'"
                    v-if="!$parent.$parent.onetomany.delete.hidden"
                    @click.prevent="$parent.$parent.openDelete($index)" >
              {{ $parent.$parent.onetomany.delete.text || '删除' }}
            </button>
          </td>
        </tr>
      </template>
    </data-grid>

    <!-- onetomany模态框 -->
    <modal v-if="showModal" :show.sync="showModal" 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">{{modelTitle}}</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 onetomany.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="onchange(index)"
                       @blur="onblur(index)"
                       @input="oninput(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="onchange(index)"
                  @blur="onblur(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="onblur(index)"
                  @change="onchange(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="onchange(index)"
                  @blur="onblur(index)"
                  @input="oninput(index)"
                ></textarea>
              </div>
            </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="confirmModal()">
          确认
        </button>
      </footer>
    </modal>

    <modal v-if="showFile" :show.sync="showFile" v-ref:modal :backdrop="false" title="选择文件">
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="closeFile()"><span>&times;</span></button>
        <h4 class="modal-title">选择文件</h4>
      </header>
      <article slot="modal-body" class="modal-body">
        <div class="form-group">
          <file-upload class="my-file-uploader" action="rs/file/uploadFile" tagname="确定" v-ref:file></file-upload>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer"></footer>
    </modal>
  </div>
</template>

<script>
import {HttpResetClass} from 'vue-client'
import Vue from 'vue'
export default {
  title: 'onetomany',
  props: {
    selectdata: {
      type: Object
    },
    onetomany: {
      type: Object
    },
    index: {
      type: Number
    }
  },
  data () {
    return {
      disableButton: false,
      showModal: false,
      modelTitle: null,
      rowIndex: null,
      showFile: false
    }
  },
  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
    },
    // 关闭文件上传对话框
    closeFile () {
      this.showFile = false
      // 将选的文件清空
      this.$refs.file.$el.querySelector('input').value = ''
    }
  },
  computed: {
    getField () {
      if (this.onetomany.export.fields) {
        return this.onetomany.export.fields
      }
      let field = {}
      for (const item of this.onetomany.fields) {
        if (item.displayPosition === 'form' || !item.displayPosition) {
          field[item.field] = item.label
        }
      }
      return field
    },
    getCondition () {
      if (this.onetomany.export.condition) {
        return this.onetomany.export.condition
      }
      return {
        tablename: this.onetomany.tables[0],
        condition: `f_process_id='${this.selectdata.f_process_id}'`
      }
    }
  },
  events: {
    async 'onFileUpload'(file, result) {
      if (this.onetomany.import.event) {
        this.$dispatch(this.onetomany.import.event, this.index, this.onetomany.tables[0], this.onetomany.import.configName, result.f_downloadpath)
      } else {
        this.$dispatch('importEvent', this.index, this.onetomany.tables[0], this.onetomany.import.configName, result.f_downloadpath)
      }
    }
  }
}
</script>

<style scoped>
.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;
}

</style>
