/*
* @Author: xiaoyu
* @Date: 2019-07-03
* @Description: 递归表头组件，支持列表内表头无限分层次展示
*/
<template>
    <el-table-column v-if="Array.isArray(data.data)"
                     :key="data.name"
                     :prop="data.name"
                     v-bind="{label:data.label}">
        <recursive-title v-for="item in data.data"
                         :key="item.name"
                         v-if="item.visible !== false"
                         v-bind="{
                             rowKey:rowKey,
                             data:item,
                             formConfigs:formConfigs,
                             dialogConfig:dialogConfig,
                             dialogVisible:dialogVisible
                         }" />
        <template slot="header"
                  slot-scope="scope">
            <table-columns-render :row="scope.row"
                                  v-if="data.extend&& data.extend['render-header']"
                                  :render="data.extend['render-header']"
                                  v-bind="data" />
            <bk-table-header-icons v-else
                                   :label="data.label"
                                   :iconConfig="data.iconConfig?data.iconConfig:[]"
                                   :scope="scope" />
        </template>
    </el-table-column>
    <!-- 行内按钮 -->
    <el-table-column v-else-if="data.scene"
                     :key="data.name"
                     :prop="data.name"
                     :label="data.label"
                     :fixed="data.fixed"
                     :width="data.width"
                     v-bind="getMergedObject(data.extend,{
                         'show-overflow-tooltip':true,
                         align: 'center',
                         minWidth: data.minWidth || '165px'
                     })">
        <template slot-scope="scope">
            <bk-button :key="data.name"
                       :dialogConfig="dialogConfig"
                       :dialogVisible="dialogVisible"
                       v-bind="Object.assign({},data,{
                           tableRow:scope.row,
                           label:scope.row[data.name],
                           extend: {
                               type: 'text'
                           }
                       },data.buttonExtend)"
                       class="cell-btn-item" />
        </template>
        <template slot="header"
                  slot-scope="scope">
            <bk-table-header-icons :label="data.label"
                                   :iconConfig="data.iconConfig?data.iconConfig:[]"
                                   :scope="scope" />
        </template>
    </el-table-column>
    <!-- 图片查看列 -->
    <el-table-column v-else-if="data.type === 'image'"
                     :key="data.name"
                     :prop="data.name"
                     :label="data.label"
                     :width="data.width"
                     :fixed="data.fixed"
                     v-bind="getMergedObject(data.extend,{
                         'show-overflow-tooltip':true,
                         minWidth: item.minWidth || '111px',
                         align: 'center'
                     })">
        <template slot-scope="scope">
            <bk-image-viewer v-if="scope.row[data.name]"
                             v-bind="setImageViewerCfg(data,scope.row)"
                             class="cell-image-box" />
            <div v-else />
        </template>
        <template slot="header"
                  slot-scope="scope">
            <bk-table-header-icons :label="data.label"
                                   :iconConfig="data.iconConfig?data.iconConfig:[]"
                                   :scope="scope" />
        </template>
    </el-table-column>
    <!--  表单 -->
    <el-table-column v-else-if=" data.formExtend "
                     :key="data.name"
                     :prop="data.name"
                     v-bind="getMergedObject(data.extend,{
                         label:data.label,
                         align: 'center',
                         minWidth: data.minWidth || '165px'
                     })">
        <template slot-scope="scope">
            <el-form :ref="`list_form_${data.name}_${scope.row[rowKey]}`"
                     :model="scope.row"
                     @submit.native.prevent
                     class="form-wrapper">
                <bk-form-material :key="data.name"
                                  :ref="`${data.name}_${scope.row[rowKey]}`"
                                  :materialConfig="getFormConfig(
                                      formConfigs[scope.row[rowKey]],
                                      data.name)"
                                  :formConfig="formConfigs[scope.row[rowKey]]"
                                  :formParams="scope.row"
                                  :extend="getFormConfig(
                                      formConfigs[scope.row[rowKey]],
                                      data.name).extend
                                      || getFormConfig(
                                          formConfigs[scope.row[rowKey]],
                                          data.name)"
                                  v-on="getFormConfig(
                                      formConfigs[scope.row[rowKey]],
                                      data.name).extend
                                      || getFormConfig(
                                          formConfigs[scope.row[rowKey]],
                                          data.name)" />
            </el-form>
        </template>
        <template slot="header"
                  slot-scope="scope">
            <bk-table-header-icons :label="data.label"
                                   :iconConfig="data.iconConfig?data.iconConfig:[]"
                                   :scope="scope" />
        </template>
    </el-table-column>
    <!-- 自定义 -->
    <el-table-column v-else-if=" data.render "
                     :key="data.name"
                     :prop="data.name"
                     v-bind="getMergedObject(data.extend,{
                         label:data.label,
                         align: 'center',
                         minWidth: data.minWidth || '165px'
                     })">
        <template slot-scope="scope">
            <table-columns-render :row="scope.row"
                                  v-if="data.extend&& data.extend['render-header']"
                                  :render="data.extend['render-header']"
                                  v-bind="data" />
            <bk-table-header-icons v-else
                                   :label="data.label"
                                   :iconConfig="data.iconConfig?data.iconConfig:[]"
                                   :scope="scope" />
        </template>
        <template slot="header"
                  slot-scope="scope">
            <bk-table-header-icons :label="data.label"
                                   :iconConfig="data.iconConfig?data.iconConfig:[]"
                                   :scope="scope" />
        </template>
    </el-table-column>
    <!-- 增降状态格式化文案列 -->
    <el-table-column v-else-if="data.additionalName
                         && !isEmptyObj(data.additional)
                     "
                     :key="data.name"
                     :prop="data.name"
                     :label="data.label"
                     :fixed="data.fixed"
                     v-bind="getMergedObject(data.extend,{
                         align: 'center',
                         minWidth: data.minWidth || '165px'
                     })">
        <template slot-scope="scope">
            <div v-html="additionalTableColumn(scope.row, data)" />
        </template>
        <template slot="header"
                  slot-scope="scope">
            <bk-table-header-icons :label="data.label"
                                   :iconConfig="data.iconConfig?data.iconConfig:[]"
                                   :scope="scope" />
        </template>
    </el-table-column>
    <el-table-column v-else
                     :key="data.name"
                     :prop="data.name"
                     v-bind="getMergedObject(data.extend, {
                         label:data.label,
                         'show-overflow-tooltip':true,
                         align: 'center',
                         minWidth: data.minWidth || '165px',
                         width:data.width})">
        <template slot="header"
                  slot-scope="scope">
            <table-columns-render :row="scope.row"
                                  v-if="data.extend&& data.extend['render-header']"
                                  :render="data.extend['render-header']"
                                  v-bind="data" />
            <bk-table-header-icons v-else
                                   :label="data.label"
                                   :iconConfig="data.iconConfig?data.iconConfig:[]"
                                   :scope="scope" />
        </template>
    </el-table-column>
</template>
<script>
// import { getMergedObject } from 'src/utils/util';
import {
    getMergedObject, isEmptyObj, stringIsHTML, hasField 
} from 'src/utils/util';
import tableColumnsRender from '../material-component/render';

export default {
    name: 'RecursiveTitle',
    components: {
        tableColumnsRender
    },
    props: {
        rowKey: {
            type: String,
            default: ''
        },
        dialogVisible: {
            type: Object,
            default: () => ({})
        },
        dialogConfig: {
            type: Object,
            default: () => ({})
        },
        data: {
            type: Object,
            default: () => ({})
        },
        formConfigs: {
            type: Object,
            default: () => ({})
        }
    },
    created() {
        // const tolTip = {
        //     isShow: false,
        //     label: '',
        //     color: 'transparent',
        //     iconClass: '',
        //     effect: 'dark'
        // };
        // this.data.tooltip = Object.assign(tolTip, this.data.tooltip);
    },
    methods: {
        getMergedObject,
        isEmptyObj,
        stringIsHTML,
        hasField,
        /**
         * 解决莫名其妙data[0]会跑到最后的问题
         * @param {Array} arr data.data
         */
        handleDataArr(arr) {
            const newArr = arr;
            const obj = newArr[newArr.length - 1];
            newArr.unshift(obj);
            newArr.pop();
            return newArr;
        },
        /**
         * 设置按钮的配置
         * @param {Object} item 列配置
         * @param {Object} row 行数据
         */
        setImageViewerCfg(item, row) {
            const cfg = getMergedObject(item.extend, {
                value: row[item.name]
            });
            return cfg;
        },
        /**
         * 获得表单name对应的配置
         * @param {object} formConfig 表单配置
         */
        getFormConfig(formConfig, name) {
            return formConfig.data[0].data.find(i => i.name === name);
        },
        /**
         * 格式化table单元格数据前设置配置
         * @param {Object} data 当前行的数据对象
         * @param {Object} config 当前列的config
         */
        additionalTableColumn(data, config) {
            const { additional, additionalName, name } = config;
            let value = data[name];
            // 值为空或配置有误则不格式化
            if (isEmptyObj(additional) || !additionalName || value === undefined || value === null || value === '') {
                return `<span>${value}</span>`;
            }
            // 判断是否有标识字段，没有就手动添加，固定的标识字段名为ascend(升序)、descend(降序)、steady(平稳)
            if (!hasField(data, additionalName)) {
                const num = value * 1;
                if (typeof num !== 'number') {
                    return `<span>${value}</span>`;
                }
                if (num > 0) {
                    // 升序
                    data[additionalName] = 'ascend';
                } else if (num < 0) {
                    // 降序
                    data[additionalName] = 'descend';
                    value = num * -1;
                } else if (num === 0) {
                    // 平稳
                    data[additionalName] = 'steady';
                }
            }
            const styleObj = additional[data[additionalName]];
            const { color, beforeText, afterText } = styleObj || {};
            let beforeHTML = '';
            let afterHTML = '';
            if (beforeText) {
                beforeHTML = stringIsHTML(beforeText) ? beforeText : `<span>${beforeText}</span>`;
            }
            if (afterText) {
                afterHTML = stringIsHTML(afterText) ? afterText : `<span>${afterText}</span>`;
            }
            return `<div style="color: ${color};" class="additional-column">\
                ${beforeHTML}<span>${value}</span>${afterHTML}\
            </div>`;
        }
    }
};
</script>
