<template>
  <vee-object :title="model.nickname" :enable.sync="model.isUsed" :expand.sync="model.isExpand" :showTitle="showTitle">
    <el-table
      class="vee-array-table"
      row-key="__index"
      @expand-change="tableExpandChange"
      :expand-row-keys="expandRowKeys"
      :data="tableDatas">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <VeeLableEditList :model="scope.row" :parentPropPath="propPath"></VeeLableEditList>
        </template>
      </el-table-column>
      <el-table-column v-for="item of tableColumns" :key="item.name" :label="item.nickname">
        <template slot-scope="scope">
          <!-- <span>{{scope.row.props[item.name].value}}</span> -->
          <VeeEditItem
            v-if="scope.row.props[item.name]"
            :model="scope.row.props[item.name]"></VeeEditItem>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="200">
        <template slot="header">
            <el-button type="text" size="mini" @click="handleAddBtnClick(-1)">新增</el-button>
        </template>
        <template slot-scope="scope">
          <div class="vee-array-op">
            <el-button type="text" size="mini" @click="handleAddBtnClick(scope.row)">新增</el-button>
            <el-button type="text" size="mini" @click="handleCopyBtnClick(scope.row)">复制</el-button>
            <el-button type="text" class="vee-danger vve-array-del-btn" size="mini" @click="handleDelBtnClick(scope.row)">删除</el-button>
            <i class="el-icon-top vee-array-icon vee-array-icon-top" title="向上移动"
              v-show="model.value.indexOf(scope.row) !== 0"
              @click="handleUpMove(scope.row)"></i>
            <i class="el-icon-bottom vee-array-icon" title="向下移动"
              v-show="model.value.indexOf(scope.row) !== (total - 1)"
              @click="handleDownMove(scope.row)"></i>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-show="total > 5"
      class="vee-array-pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </vee-object>
</template>

<script>
  import { Table, TableColumn, Button, Pagination } from 'element-ui'
  import VeeObject from '../components/VeeObject'
  import VeeEditItem from './VeeEditItem'
  import VeeLableEditList from './VeeLabelEditList'
  import cloneDeep from 'lodash/cloneDeep'
  import { mapGetters } from 'vuex'
  import { veeStoreName } from '../store/name'

  export default {
    components: {
      VeeObject,
      VeeEditItem,
      VeeLableEditList,
      'ElTable': Table,
      'ElTableColumn': TableColumn,
      'ElButton': Button,
      'ElPagination': Pagination,
    },
    props: {
      model: {
        type: Object,
        default () {
          return {}
        }
      },
      parentPropPath: {
        type: String,
        default: ''
      },
      showTitle: {
        type: Boolean,
        default: true,
      },
    },
    computed: {
      ...mapGetters(veeStoreName, ['soulFold']),
      propPath () {
        return this.parentPropPath
          ? `${this.parentPropPath}.${this.model.name}`
          : this.model.name
      },
      expandRowKeys () {
        // typeof (this.soulFold) === 'boolean' 这个语句没有业务意义
        // 因为isExpand并不会导致expandRowKeys重新计算，引入soldFold，当solFold改变就强制刷新
        return typeof (this.soulFold) === 'boolean' && this.tableDatas.filter(item => item.isExpand).map(item => item.__index)
      },
      tableDatas () {
        const startIndex = (this.currentPage - 1) * this.pageSize
        const tableDatas = this.model.value.slice(startIndex, startIndex + this.pageSize)
        const time = new Date().getTime()
        tableDatas.forEach((item, index) => {
          item.__index = String(time) + String(index)
        })
        return tableDatas
      },
      total () {
        return this.model.value.length
      },
      columns () {
        const model = this.model
        const propsArr = [...model.value, model ] // 合并所有的属性 + model已经定义好的props
        const propsMap = propsArr.reduce((val, item) => {
          return { ...val, ...item.props }
        }, {})
        return Object.keys(propsMap).map(item => {
          return propsMap[item]
        })
      },
      tableColumns () {
        // 表格列太多会放不下，故精简一下
        return this.columns.filter(column => {
          return (
            column.type !== 'object' &&
            column.type !== 'array' &&
            this.model.value.every(item => {
              return item.props[column.name] && typeof (item.props[column.name].value) !== 'object'
            })
          )
        }).slice(0, 2)
      }
    },
    methods: {
      tableExpandChange (row, arg1, arg2) {
        row.isExpand = !row.isExpand
      },
      handleUpMove (selectItem) {
        const arr = this.model.value
        const index = arr.indexOf(selectItem)
        if (index !== 0) {
          const nextItem = arr.splice(index - 1, 1, selectItem)[0]
          arr.splice(index, 1, nextItem)
        }
      },
      handleDownMove (selectItem) {
        const arr = this.model.value
        const index = arr.indexOf(selectItem)
        if (index !== arr.length - 1) {
          const preItem = arr.splice(index + 1, 1, selectItem)[0]
          arr.splice(index, 1, preItem)
        }
      },
      handleDelBtnClick (item) {
        const index = this.model.value.indexOf(item)
        this.model.value.splice(index, 1)
        if (!this.tableDatas.length && this.currentPage > 1) {
          this.currentPage -= 1
        }
      },
      handleAddBtnClick (item) {
        const newValue = {
          props: this.model.props,
          type: 'object',
          isUsed: true,
          isExpand: false,
          isMore: false,
        }
        const index = this.model.value.indexOf(item)
        this.model.value.splice(index + 1, 0, cloneDeep(newValue))
      },
      handleCopyBtnClick (item) {
        const index = this.model.value.indexOf(item)
        this.model.value.splice(index + 1, 0, cloneDeep(item))
      },
      handleCurrentChange (val) {
        this.currentPage = val
      },
      handleSizeChange (val) {
        this.pageSize = val
      }
    },
    data() {
      return {
        currentPage: 1,
        pageSize: 5,
        pageSizes: [5, 10, 20, 50, 100]
      }
    }
  }
</script>
<style lang="scss">
</style>
