<!--
  动态表格 用于批量填入数据
 -->
<template>
  <div :id="record.model" :name="record.model" class="form-table-index">
    <el-table
      :class="[
        'form-table',
        record.options.customClass ? record.options.customClass : '',
      ]"
      :size="config.size"
      :style="record.options.customStyle"
      :data="models[record.model]"
      :empty-text="
        getLabel(record.options.noDataText) || t('ngform.item.batch.no_data')
      "
      :border="record.options.showBorder"
      :scroll="{
        x:
          record.list.length * 190 +
          80 +
          (!record.options.hideSequence ? 60 : 0),
        y: record.options.scrollY,
      }"
    >
      <template v-if="isVisible">
        <el-table-column
          v-if="!record.options.hideSequence"
          :label="t('ngform.item.batch.seq')"
          align="center"
          type="index"
          width="50"
        />
        <template v-for="(item, index) in record.list">
          <el-table-column
            v-if="
              record.options.addType != 'dialog' ||
                !record.options.showItem ||
                record.options.showItem.length == 0 ||
                record.options.showItem.includes(item.model)
            "
            :key="index"
            :label="item.label"
            :width="
              record.options.colWidth && record.options.colWidth[item.model]
                ? record.options.colWidth[item.model]
                : undefined
            "
            align="center"
          >
            <template slot-scope="scope">
              <!-- 这里就要判断类型了 -->
              <!-- 2021-03-14 判断新增数据方式，如果是怎加航 这里就不能预览了 -->
              <TableItem
                :record="item"
                :index="scope.$index"
                :models="models"
                :parent-model="propPrepend + record.model"
                :preview="preview || record.options.addType == 'dialog'"
                :domains="models[record.model][scope.$index]"
              />
            </template>
          </el-table-column>
        </template>
        <el-table-column
          v-if="!preview || record.options.addType == 'dialog'"
          :label="t('ngform.item.batch.operate')"
          align="center"
          :fixed="record.options.fixedBtn ? 'right' : undefined"
          :width="controlWidth"
        >
          <template slot-scope="scope">
            <el-button
              v-if="preview && record.options.addType == 'dialog'"
              type="success"
              :size="config.size"
              @click="updateDomain(scope.row)"
            >
              <i class="el-icon-eye" /> {{ t("ngform.item.view") }}
            </el-button>
            <el-button
              v-if="!preview && record.options.addType == 'dialog'"
              type="primary"
              :size="config.size"
              @click="updateDomain(scope.row)"
            >
              <i class="el-icon-edit" /> {{ t("ngform.item.edit") }}
            </el-button>
            <el-button
              v-if="!preview && record.options.copyRow"
              type="primary"
              :size="config.size"
              @click="copyDomain(scope.row, scope.$index)"
            >
              <i class="el-icon-copy-document" />{{ t("ngform.item.copy") }}
            </el-button>
            <el-button
              v-if="!preview"
              type="danger"
              :size="config.size"
              @click="removeDomain(scope.$index)"
            >
              <i class="el-icon-delete" />{{ t("ngform.item.delete") }}
            </el-button>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-button
      v-if="!preview"
      :size="config.size"
      type="dashed"
      :disabled="curDisabled"
      @click="addDomain"
    >
      <i class="el-icon-circle-plus-outline" />{{ t("ngform.item.add") }}
    </el-button>

    <AddOrUpdate
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      :form-template="templateData"
      :preview="preview"
      @formAdd="formAdd"
      @formUpdate="formUpdate"
    />
  </div>
</template>

<script>
// import TableFormItem from "./table-form-item";
import TableItem from './table-item'
import AddOrUpdate from './add-or-update'
import cloneDeep from 'lodash/cloneDeep'
import mixin from '../../../mixin.js'
export default {
  name: 'NgFormBaseBatch',
  components: {
    TableItem,
    AddOrUpdate
  },
  mixins: [mixin],
  inject: {
    // 表单全局config配置
    configInject: {
      from: 'configC'
    }
  },
  props: {
    record: {
      type: Object,
      required: true
    },
    models: {
      type: Object,
      required: true
    },
    parentDisabled: {
      type: Boolean,
      default: false
    },
    // 是否预览结果表单
    preview: {
      type: Boolean,
      default: false
    },
    propPrepend: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      addOrUpdateVisible: false,
      isVisible: true
    }
  },
  computed: {
    curDisabled() {
      return (
        this.record.options.disabled || this.disabled || this.parentDisabled
      )
    },
    templateData() {
      return { list: this.record.list, config: this.config }
    },
    controlWidth() {
      let w = 100

      if (this.preview) {
        return w
      }
      if (this.record.options.copyRow) {
        w += 80
      }
      if (this.record.options.addType == 'dialog') {
        w += 80
      }

      return w
    },
    config() {
      if (this.configInject) {
        return this.configInject() || {}
      }
      return {}
    }
  },
  mounted() {
    // 2021-05-10 lyf 只要没有默认值都先给回填一个  这个可以处理初始化么有值，导致后面很多联动没法做，必须要通过v-if刷新
    if (!Object.prototype.hasOwnProperty.call(this.models, this.record.model)) {
      this.$set(this.models, this.record.model, [])
    }
  },
  methods: {
    validationSubform() {
      return true
    },
    resetForm() {
      this.$refs.dynamicValidateForm.resetFields()
    },
    removeDomain(index) {
      const this_ = this
      this.$confirm(
        this.t('ngform.item.batch.delete_prompt'),
        this.t('ngform.header.prompt'),
        {
          confirmButtonText: this.t('ngform.confirm'),
          cancelButtonText: this.t('ngform.cancel'),
          type: 'warning'
        }
      ).then(() => {
        const domains = this.models[this.record.model]
        if (domains) {
          if (index !== -1) {
            domains.splice(index, 1)

            this.$message({
              message: this_.t('ngform.item.batch.operation_success'),
              type: 'success',
              duration: 1000
            })
          }
        }
      })
    },
    updateDomain(data) {
      this.addOrUpdateVisible = true

      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(data)
      })
    },
    // 行复制 2021-02-17 lyf
    copyDomain(data, index) {
      const copyData = cloneDeep(data) // {...data}
      copyData._id = null
      if (this.record.options.addType == 'dialog') {
        this.addOrUpdateVisible = true

        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(copyData)
        })
      } else {
        // 直接添加一行数据
        this.isVisible = false

        const domains = this.models[this.record.model]
        domains.splice(index + 1, 0, copyData)
        // domains.push(copyData)
        this.isVisible = true
      }
    },
    addDomain() {
      if (this.record.options.addType == 'dialog') {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init()
        })
      } else {
        // 直接添加一行数据
        this.isVisible = false
        const items = this.record.list

        const itemObject = {}
        // items.forEach(t=>{
        //   itemObject[t.model] = ''
        // })

        let domains = this.models[this.record.model]
        if (!domains) {
          const ds = [itemObject]

          domains = ds
        } else {
          domains.push(itemObject)
        }

        this.$set(this.models, this.record.model, domains)
        this.isVisible = true
      }
    },
    formAdd(form) {
      this.isVisible = false
      let domains = this.models[this.record.model]
      if (!domains) {
        const ds = [form]
        this.models[this.record.model] = ds
        domains = this.models[this.record.model]
      } else {
        domains.push(form)
      }

      // 排序
      domains.sort(function(a, b) {
        return a.seq - b.seq
      })
      this.isVisible = true
      this.$message({
        message: this.t('ngform.item.batch.operation_success'),
        type: 'success',
        duration: 1000
      })
    },
    formUpdate(form) {
      const domains = this.models[this.record.model]

      for (var i in this.models[this.record.model]) {
        if (this.models[this.record.model][i]._id == form._id) {
          this.models[this.record.model].splice(i, 1, form)
          break
        }
      }

      this.models[this.record.model].sort(function(a, b) {
        return a.seq - b.seq
      })
      this.$message({
        message: this.t('ngform.item.batch.operation_success'),
        type: 'success',
        duration: 1000
      })
    },
    handleInput() {
      this.$emit('change', this.models)
    }
  }
}
</script>
