<template>
    <div id="tableList">
        <el-table :data="listData" id="commonTable"
                  @selection-change="handleSelectionChange"
                  @cell-click="cellClick"
                  @row-click="rowClick"
                  @current-change="currentChange"
                  :header-cell-style="{background:'#eeeeee',color:'black'}"
                  border
                  fit highlight-current-row
                  stripe>
            <!-- 是否多选 -->
            <el-table-column type="selection" :selectable="checkBox"
                             v-if="options.mutiSelect"></el-table-column>
            <template v-for="(v,k) in headerData">
                <!-- 序列号 -->
                <el-table-column :label="$t('common.num')" :min-width="v.minWidth"
                                 v-if="v.type == 'index'":prop="v.prop"></el-table-column>
                <!-- 常规列数据 -->
                <el-table-column :label="$t(v.label)"
                                 :width="v.width"
                                 :min-width="v.minWidth"
                                 v-if="!v.type"
                                 :key="`v.label${k}`"
                                 :formatter="v.format"
                                 :prop="v.prop"
                                 show-overflow-tooltip>
                </el-table-column>
                <!-- 图片数据列 -->
                <el-table-column :label="v.label"
                                 :width="v.width"
                                 v-if="v.type=='image'"
                                 :key="`v.label${k}`">
                    <template slot-scope="scope"
                              :formatter="v.format">
                        <img class="cell-img"
                             :src="scope.row[v.prop]"
                             :formatter="v.format"
                             alt="">
                    </template>
                </el-table-column>
                <el-table-column :label="$t(v.label)"
                                 :width="v.width"
                                 :min-width="v.minWidth"
                                 v-if="v.type=='method'"
                                 :key="`v.type${k}`">
                    // 处理自定义操作中的按钮
                    <template slot-scope="scope">
                        <ws-button v-for="(item,index) in v.operationData"
                                 :key="`item.label${index}`"
                                 :size="item.size||'mini'"
                                 class="operateLink"
                                 type="text"
                                 @click="btnClick(item,index,scope.row)">{{ $t(item.label) }}</ws-button>
                    </template>
                </el-table-column>
                <!-- 审核流数据 -->
                <el-table-column :label="$t(v.label)"
                                 :width="v.width"
                                 :min-width="v.minWidth"
                                 v-if="v.type == 'auditing'"
                                 :key="`v.label${k}`"
                                 :formatter="v.format"
                                 :prop="v.prop">
                  <template slot-scope="scope">
                    <span :title="getStatus(scope.row)">{{ getStatus(scope.row) }}</span>
                  </template>
                </el-table-column>
                <!-- 处理type=operation，自定义按钮 -->
                <el-table-column :label="v.label"
                                 :width="v.width"
                                 v-if="v.type=='operation'"
                                 :key="`v.type${k}`">
                    <template slot-scope="scope">
                        <el-dropdown size="small" trigger="click">
                            <el-button size="mini" class="circularBtn">
                                <div class="circularBtn_child">...</div>
                            </el-button>
                            <el-dropdown-menu >
                                <el-dropdown-item v-for="(item,index) in v.operationData"
                                                  :key="`item.label${index}`"
                                                  :size="item.size||'mini'"
                                                  class="operateLink"
                                                  :type="item.type"
                                                  @click="btnClick(item,index,scope.row)">{{item.label}}</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </template>
        </el-table>
        <div class="block"
             v-if="Object.keys(pagination).length > 0">
            <el-pagination background style="float: right; margin-top: 20px;"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="pagination.currentPage"
                           :page-sizes="pagination.pageSizes"
                           :page-size="pagination.pageSize"
                           :layout="pagination.layout"
                           :total="pagination.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "wsTable",
        props: {
            tableData: {
                type: Array,
                default: () => []
            },
            options: {
                type: Object,
                default: (data) => {
                    return (data = {
                        singleSelect:false,// 是否单选
                        mutiSelect: false, //boolean 是否多选
                        isindex: false, //boolean 是否展示序列号
                        stripe: true, //boolean 斑马纹
                        border: true, //boolean 纵向边框
                        size: "medium", //String  medium / small / mini  table尺寸
                        fit: true, //自动撑开
                        pagination: true //是否有分页
                    });
                }
            },
            pagination: {
                type: Object,
                default: data => {}
            },
            headerData: {
                type: Array,
                default: () => [
                    { label: "序号", prop: "index" ,type:'index',minWidth:'5%' }, // 序号列
                    { label: "日期", prop: "date" },
                    { label: "姓名", prop: "name" },
                    { label: "地址", prop: "address" },
                    { label: "头像", prop: "image", type: "image", width: "120" }, // 图片列
                    {
                        label:'deploy.contract',
                        type: "method",
                        operationData: [{ label: 'deploy.check' , type:'primary'}], // 普通数据列
                        minWidth: "7.5%"
                    },
                    {
                        label: "操作",
                        type: "operation",
                        operationData: [
                            { label: "编辑" },
                            { label: "删除", type: "danger" },
                            { label: "编辑", type: "primary" }         // 操作列
                        ]
                    },
                    { label: "地址", prop: "address" ,type:'auditing'}, //审核流
                ]
            },
            formatters(row, column) {
                console.log(row, "format");
                console.log(column, "format");
            }
        },
        data() {
            return {
                listData: {
                    type: Array,
                    default: () => []
                }
            };
        },
        computed:{
            getStatus() {
                return function(item) {
                    const suffix = this.$store.state.app.language === 'en' ? 'En' : ''
                    const statusStr = this.isNull(item['approveStatus']) ? 'status' : 'approveStatus'
                    return item[statusStr + suffix]
                }
            }
        },
        created() {
            this.listData = JSON.parse(JSON.stringify(this.tableData))
            this.listData.forEach((item, index) => {
                item.index = index + 1
            })
        },
        watch:{
            tableData(newVal,oldVal){
                this.listData = JSON.parse(JSON.stringify(newVal))
                this.listData.forEach((item, index) => {
                    item.index = index + 1
                })
            }
        },
        mounted() {
        },
        methods: {
            cellClick(row, column, cell, event) {

            },
            rowClick(row, column, cell, event) {
                this.$emit("rowClick", row, column, cell, event);
            },
            edit(index, row) {

            },
            btnClick(item, index, row) {
                this.$emit("buttonClick", item, index, row);
            },
            // 分页相关
            handleSizeChange(val) {
                this.$emit("handleSizeChange", val);
            },
            handleCurrentChange(val) {
                this.$emit("handleCurrentChange", val);
            },
            handleSelectionChange(val){
                this.$emit("handleSelectionChange", val);
            },
            checkBox(row,index){
                if(!row.selected){
                    return true
                }
            },
            currentChange(val){
                if(this.options.singleSelect){
                    this.$emit("currentChange", val);
                }
            }
        }
    };
</script>
<style scoped>
    .cell-img {
        width: 80px;
        height: 80px;
    }
    .operateLink {
        padding: 4px;
        min-width:60px;
        text-align: center;
    }
    .circularBtn{
        border-radius: 52%;
        font-weight: 600;
        width: 25px;
        height: 25px;
    }
    .circularBtn_child{
        height: 10px;
        width: 10px;
        position: absolute;
        margin: -9px -5px;
    }
</style>
