<!--suppress ALL -->
<template>
  <div>
    
    <el-table
      :v-loading="newConfig!== undefined&&newConfig.listLoading!== undefined?newConfig.listLoading:false"
      :data="newTable"
      :show-summary="!Object.is(newConfig&&newConfig.sumArr,undefined)"
      :summary-method="getSum"
      highlight-current-row
      :height="newConfig!== undefined&&newConfig.height!== undefined?newConfig.height:'calc(100vh - 350px)'"
      style="width: 100%; min-height: 200px"
      @row-dblclick="lookInfo"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        class="table-item"
      />
      <el-table-column
        label="序号"
        type="index"
        width="55"
        class="table-item"
      />
      <!--[Object.is(newConfig.form&&newConfig.form[index],undefined)?'info':newConfig.form[index].className]-->
      <el-table-column
        v-for="(item,index) in newTableface"
        :key="index"
        :label="item.chinese"
        :width="newConfig!==undefined&&newConfig.table!==undefined&&newConfig.table.find(s=>s.index==index)&&newConfig.table.find(s=>s.index==index).width!==undefined?newConfig.table.find(s=>s.index==index).width:''"
        :property="item.english"
        :align="newConfig!==undefined&&newConfig.table!==undefined&&newConfig.table.find(s=>s.index==index)&&newConfig.table.find(s=>s.index==index).align!==undefined?newConfig.table.find(s=>s.index==index).align:'left'"
        class="table-item"
      >
        <template slot-scope="{row}">
          <!-- 如果是多个字段 -->
          <div v-if="item.isgroup" class="multifields">
            <template v-for="(field,fieldIndex) in item.groupfields">
              <div v-if="fieldIndex ===0"><strong>{{ row[field[1]] }}</strong></div>
              <div v-else class="nameList"><span v-if="field[0]">{{field[0]}}:</span>{{ row[field[1]] }}</div>
            </template>
          </div>
          <!-- 如果是state -->
          <div v-else-if="item.english === 'state'|| item.english === 'sata'" class="multifields">
            <template v-for="stateItem in newConfig.stateArr">
              <el-tag :type="stateItem.type" v-if="row[item.english]==stateItem.state">{{stateItem.name}}</el-tag>
            </template>
          </div>
          <!-- 如果是日期 -->
          <div v-else-if="item.controltype === 'date'">
            <el-date-picker v-model="row[item.english]" type="date" placeholder="选择日期" :disabled="!item.enabled" style="width: 100%;" />
          </div>
          <!-- 如果是可修改的 -->
          <div v-else-if="item.enabled">
            <el-input @blur="onBlur(row)" v-model="row[item.english]">{{ row[item.english] }}</el-input>
          </div>
          <!-- 如果是图片 -->
          <div v-else-if="item.type==='img'">
            <el-image
              style="width: 100px; height: 100px"
              :src="row[item.english]"
              :fit="fit"></el-image>
          </div>
          <!-- 如果是普通的 -->
          <div v-else>{{ row[item.english] }}</div>
        </template>
      </el-table-column>
      <!--如果有操作按钮-->
      <el-table-column label="操作" class="table-item" width="100" v-if="!Object.is(newConfig&&newConfig.tableBtns,undefined)">
        <template slot-scope="{row}">
          <div v-for="(btn,index) in newConfig.tableBtns">
            <el-button v-if="row.state!== undefined&&btn.state!== undefined?btn.state.includes(row.state):true" class="btn" type="primary" size="mini" plain @click="controlBtn(index,row,btn)">{{ btn.name }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

  

  export default {
    name: 'super-table',
    props: {
      table: {
        type:Array,
        default(){
          return []
        }
      },
      tableface: Array,
      config: Object,
      getSummaries: Function
    },
    data() {
      return {
        multipleSelection: [],
        newTable: this.table,
        newTableface: this.tableface,
        newConfig: this.config
      }
    },
    watch: {
      table() {
        this.newTable = this.table
      },
      tableface() {
        let arr = this.tableface.filter(s=>{
          if(s.chinese === '操作'){
            return s
          }
        })
        if(arr.length>0){
          if(arr[0].fsourcedata){
            let s = arr[0].fsourcedata
            this.newConfig.tableBtns = JSON.parse(s)
          }
        }
        this.newTableface = this.tableface.filter(s=>{
          if(s.chinese!=='操作'){
            return s
          }
        })
      }
    },
    methods: {
      // 获取选中数组
      handleSelectionChange(val) {
        this.multipleSelection = val
        // console.log('val', this.multipleSelection)
        this.$emit('getSelect', this.multipleSelection)
      },
      // table的统计显示
      getSum(param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 1) {
            sums[index] = '总价'
            return
          }
          if (!this.newConfig.sumArr.includes(index)) {
            sums[index] = ''
            return
          }
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
          }
        })
        return sums
      },
      lookInfo(row, event, column) {
        this.$emit('lookInfo', row)
      },
      onBlur(row){
        this.$emit('onBlur',row)
      },
      resetDateFilter() {
        this.$refs.filterTable.clearFilter('date')
      },
      clearFilter() {
        this.$refs.filterTable.clearFilter()
      },
      formatter(row, column) {
        return row.address
      },
      filterTag(value, row) {
        return row.tag === value
      },
      filterHandler(value, row, column) {
        const english = column['english']
        return row[english] === value
      },
      controlBtn(i, r) {
        this.$emit('controlFun', i, r)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '..//style/mixin.scss';
  .nameList{
    @include ellipses-2;
  }
  .btn{
    margin:5px 0px;
  }
  .multifields div{
    margin-bottom: 10px;
  }
  .tableSpace{

  }
</style>
