<template>
    <view class="pcr-table">
        <view v-if="text" class="c-color-gray c-font-13 c-gap-bottom">{{text}}</view>
        <pcr-tab
            v-if="tables && tables.length > 1"
            :tabs="tables"
            :selectedColor="color"
            @onChange="changeTab"
        />
        <view class="pcr-table-wrap">
            <view class="pcr-table-th">
                <view
                    v-for="(th, thIndex) in tableSchema"
                    :key="thIndex"
                    class="pcr-table-th-i c-font-normal c-color-gray c-line-clamp1"
                    :style="{width: th.width || 100 / tableSchema.length + '%'}"
                >
                    {{th.name}}
                </view>
            </view>
            <view v-for="(td, tdIndex) in list" :key="tdIndex" class="pcr-table-td" :style="{paddingBottom: tdIndex + 1 === list.length && 0}">
                <view
                    v-for="(th, thIndex) in tableSchema"
                    :key="thIndex"
                    class="pcr-table-td-i c-font-normal c-line-clamp1"
                    :style="{width: th.width || 100 / tableSchema.length + '%'}"
                >
                    <view :class="{'pcr-table-td-tag': td[th.label].path}" @tap.stop="onTap(td[th.label])">{{td[th.label].value}}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
* @file 机构
* @author chenshuo04
*/
import PcrTab from './pcr-tab';
import {navigate, navToBdBoxH5} from '../../../utils/navigate';
import * as Log from '../../../utils/log';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        'pcr-tab': PcrTab
    },
    props: {
        tables: {
            type: Array,
            required: true
        },
        tableSchema: {
            type: Array,
            required: true
        },
        text: String,
        color: {
            type: String,
            default: '#ff6161'
        },
        topic: String
    },
    data() {
        return {
            selectedIndex: 0,
            list: []
        };
    },
    watch: {
        tables(nval, oval) {
            nval && nval.length && this.$set(this, 'list', nval[0].data);
        }
    },
    created() {
        this.tables && this.tables.length && this.$set(this, 'list', this.tables[0].data);
    },
    methods: {
        changeTab(index) {
            Log.send({
                type: 'b',
                action: 'tabclick',
                extra: {
                    type: 'pcr-table-click',
                    level1: this.topic
                }
            });
            if (index === this.selectedIndex) {
                return;
            }
            this.selectedIndex = index;
            this.$set(this, 'list', this.tables[index].data);
            console.log(this.tables[index])
        },
        onTap(data, log) {
            const isSwan = process.env.MARS_ENV === 'swan';
            if (data.appkey) {
                Log.send({
                    type: 'b',
                    action: 'navigate',
                    extra: {
                        type: 'pcr-table-item',
                        level1: this.topic
                    }
                });
                if (isSwan) {
                    this.$api.navigateToSmartProgram({
                        appKey: data.appkey,
                        path: data.path
                    });
                }
                else {
                    navToBdBoxH5(data.h5Url);
                }
            }
            else if (data.tcUrl) {
                Log.send({
                    type: 'b',
                    action: 'navigate',
                    extra: {
                        type: 'pcr-table-item',
                        level1: this.topic
                    }
                });
                navToBdBoxH5(data.tcUrl);
            } else if (data.url || data.path) {
                navigate({
                    url: data.url || data.path,
                    extra: {
                        type: 'pcr-table-item',
                        level1: this.topic
                    }
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.pcr-table {
    &-td {
        display: flex;
        justify-content: flex-start;
        padding: 5px 0;
        &-i {
            min-width: 25%;
            text-align: left;
            color: #1F1F1F;
        }
        &-tag {
            display: inline-block;
            background: #f5f5f5;
            border-radius: 9px;
            padding: 1px 8px;
            text-overflow: ellipsis;
            width: auto;
            max-width: calc(100% - 8px);
            white-space: nowrap;
            text-decoration: none;
            box-sizing: border-box;
            overflow: hidden;
        }
    }
    &-th {
        display: flex;
        justify-content: flex-start;
        padding: 5px 0;
        border-bottom: 1px solid #eee;
        margin-bottom: 5px;
        &-i {
            min-width: 25%;
            text-align: left;
        }
    }
}
</style>
