<template>
<div class="vTableCom">
    <el-table ref="multipleTable" :data="tableList" header-row-class-name="tableHeader" header-cell-class-name="tableHeader" @selection-change="handleSelectionChange" @sort-change='sortthiscolumn' size="mini" :row-class-name="tableRowClassName" style="width: 100%">

        <!-- selection -->
        <el-table-column v-if="table.selection" align="center" :fixed="table.fixed" type="selection" width="55">
        </el-table-column>

        <!-- column -->
        <el-table-column align="center" :width="item.width" :prop="item.props" :label="item.label" :sortable="item.sortable?'custom':false" v-for="(item,index) in table.column" :key="index">
            <template slot-scope="scope">

                <!-- slot 自定义插槽 可以用一个变量来接受item和scope (在订单列表中有使用，可以查看使用方法)-->
                <slot v-if="item.type==='slot'" name="slot" :item="item" :scope="scope.row"></slot>

                <!-- date -->
                <span v-else-if="item.type==='date'">
                    <span v-if="item.format==='YMD'">{{$utils.formatYMD(scope.row[item.props])}}</span>
                    <span v-else>{{$utils.format(scope.row[item.props])}}</span>
                </span>

                <span v-else-if="item.type==='imgList'">
                    <el-image v-for="i in scope.row[item.props]" :key="i.id" style="width: 70px; height: 70px" :src="$img+i.imgPath" :preview-src-list="scope.row[item.props].map(it => $img+it.imgPath)">
                    </el-image>
                </span>

                <el-popover placement="left" v-else-if="item.type==='cover'" width="200" trigger="hover">
                    <img slot="reference" class="img" :src="scope.row[item.props]" alt="">
                    <img class="w-100" :src="scope.row[item.props]" alt="">
                </el-popover>

                <!-- pic -->
                <el-popover placement="left" v-else-if="item.type==='pic'" width="200" trigger="hover">
                    <img slot="reference" class="img" :src="$img+scope.row[item.props]" alt="">
                    <img class="w-100" :src="$img+scope.row[item.props]" alt="">
                </el-popover>

                <!-- <span v-else-if="item.state">{{item.state[scope.row[item.props]]}}</span> -->

                <!-- option -->
                <span v-else-if="item.options">{{item.options[scope.row[item.props]]}}</span>

                <span v-else-if="item.html" v-html="scope.row[item.props]"></span>

                <!-- normal -->
                <span v-else>{{scope.row[item.props]}}</span>

            </template>
        </el-table-column>

        <!-- handle -->
        <el-table-column label="操作" v-if="table.handle" :fixed="table.fixed && 'right'" :width="table.width" align="center">
            <template slot-scope="scope">
                <el-dropdown v-if="table.button" @command="dropdownMethods">
                  <el-button style="background: #00a0e9;color:#fff">
                    更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="(item,index) in table.handle.filter(item => scope.row[item.props] === item.key)" :key="index" :command="{row: scope.row, method: item.method}">{{item.title}}</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-button-group v-else style="display:flex;justify-content: center;">
                    <el-button v-for="(item,index) in table.handle.filter(item => scope.row[item.props] === item.key)" :key="index" size="small" :type="item.type" style="margin:0px;" class="btn handelBtn" @click="handleMethods(scope.$index, scope.row, item)">
                        {{item.title}}
                        <!-- v-if="scope.row[item.props]===item.key" -->
                    </el-button>
                </el-button-group>
            </template>
        </el-table-column>
    </el-table>
</div>
</template>

<script>
export default {
  props: {
    table: {
      type: Object,
      default: () => []
    },
    tableList: {
      type: Array,
      default: () => []
    },
    show: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: () => ''
    },
    errorList: {
      type: Array,
      default: () => []
    },
    sortType: {
      type: Boolean,
      default: false
    },
    queryData: {
      type: Function,
      default: () => {}
    },
    pickList: {
      type: Array,
      default: () => []
    },
    form: Object
  },
  data () {
    return {
      orderItem: {}
    }
  },
  mounted () {},
  methods: {
    handleMethods (index, item, v) {
      this.$emit(v.method, item)
    },
    dropdownMethods ({ row, method }) {
      this.$emit(method, row)
    },
    handleSelectionChange (val) {
      this.id && this.$emit('selection-change', val.map(item => item[this.id]))
    },
    tableRowClassName ({
      row,
      rowIndex
    }) {
      if (this.errorList.includes(rowIndex)) {
        return 'error-row'
      }
      return ''
    },
    sortthiscolumn ({
      column,
      prop,
      order
    }) {
      this.orderItem = order
        ? {
          [prop]: order === 'ascending' ? 'ASC' : 'DESC'
        }
        : {}
      this.queryData(this.form)
    }
  }
}
</script>

<style lang="scss" scoped>
@import './vTable.scss';
// ::v-deep .el-checkbox__inner {
//   width: 17px;
//   height: 17px;
// }
// ::v-deep .el-checkbox {
//   display: flex;
//   justify-content: center;
//   align-items: center;
// }
</style><style lang="scss">
.el-table .error-row {
    background: rgba($color: red, $alpha: 0.3);
}
</style>
