<!--
 界面描述：编辑体征的录入数据
 参考文章:chttps://blog.csdn.net/denglouhen/article/details/115372285
-->
<template>
    <div class="div_size_fill">
        <el-button type="primary" size="mini" @click="addNewColumn">添加列</el-button>
        <el-button type="primary" size="mini" @click="submitColumn">提交</el-button>
        <el-table ref="myTable"
                  :data="tableData"
                  border
                  size="small"
                  :cell-style="{padding: 2+'px'}"
                  row-key="id"
                  default-expand-all
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                  :header-cell-style="{background: '#F2F2F2',height: '40px',padding: '0px'}">
            <el-table-column width="180" prop="name" label="记录时间"></el-table-column>
            <!-- 动态列 -->
            <el-table-column width="180"
                    v-for="(item, index) in dynamicColumns"
                    :key="index"
                    :prop="item.prop">
                <template #header>
                    {{ item.label }}
                    <i class="el-icon-remove"
                       style="color:red;cursor:pointer;"
                       @click="deleteColunm(index)">
                    </i>
                </template>
                <template v-slot="scope">
                    <el-input
                            size="small"
                            v-if="!scope.row.hasOwnProperty('children')"
                            v-model="scope.row.custom[item.prop]"
                            placeholder="请输入内容">
                    </el-input>
                    <span v-else>{{ scope.row.custom[item.prop] }}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script lang="ts">
import RefreshBus from '@/views/AatoBus/comBus'
import { parseTimeTwo } from '@/utils/index'
import { ref,reactive,toRefs,defineComponent,watch,computed,onMounted,onBeforeMount } from 'vue'
export default defineComponent({
  name: '血压趋势',
  mixins: [RefreshBus],
  setup (props,content) {
    const state:any = reactive({
        isEditHeader: false,
        isEdit: true,
        tableData: [
            {
                id: 1,
                name: "体征",
                custom: "",
                children: [{
                    id: 11,
                    name: "部位",
                    custom: "{\"2021-08-11 10:10\": \"胳肢窝\"}"
                }, {
                    id: 12,
                    name: "体温(℃)",
                    custom: "{\"2021-08-11 10:10\": 36.5}"
                }]
            },
            {
                id: 2,
                name: "脉搏",
                custom: "{\"2021-08-11 10:10\": 20}"
            },
        ],
        propArr:[], // 生成动态列时的记录
        dynamicColumns: [], // 存放动态列
    })
    onBeforeMount(()=>{

    })
    onMounted(()=>{
        state.tableData.forEach(item=>{
            if(item.hasOwnProperty("children")){
                let sonTemp = item.children
                sonTemp.forEach(sonItem=>{
                    if(sonItem.custom){
                        sonItem.custom = JSON.parse(sonItem.custom);
                        Object.keys(sonItem.custom).forEach(key => {
                            if(state.propArr.indexOf(key) === -1){
                                state.propArr.push(key);
                                state.dynamicColumns.push({ prop: key, label: key});
                            }
                        })
                    }else{
                        item.custom = {};
                    }
                })
            }else {
                if(item.custom){
                    item.custom = JSON.parse(item.custom);
                    Object.keys(item.custom).forEach(key => {
                        if(state.propArr.indexOf(key) === -1){
                            state.propArr.push(key);
                            state.dynamicColumns.push({ prop: key, label: key});
                        }
                    })
                }else{
                    item.custom = {};
                }
            }
        })
    })
    const methods = {
        addNewColumn() {
            let newValue = parseTimeTwo(new Date())
            state.dynamicColumns.push({prop: newValue, label: newValue});
        },
        deleteColunm(index) {
            state.dynamicColumns.splice(index, 1);
        },
        submitColumn() {
            debugger
            let arrList:any = [];
            state.tableData.forEach(data => {
                debugger
                let temp:any = {};
                temp.name = data.name;
                let obj = {};
                state.dynamicColumns.forEach(col => {
                    // 仅把有效的列提交
                    if (data.custom[col.prop]) {
                        obj[col.prop] = data.custom[col.prop];
                    }
                });
                if (JSON.stringify(obj) !== "{}") {
                    temp.custom = JSON.stringify(obj);
                }
                arrList.push(temp);
                // 含有孩子结点
                if(data.hasOwnProperty('children')){
                    let arrSon:any = [];
                    temp.list = [];
                    data.children.forEach(dataSon => {
                        debugger
                        let tempSon:any = {};
                        tempSon.name = dataSon.name;
                        let objSon = {};
                        state.dynamicColumns.forEach(col => {
                            // 仅把有效的列提交
                            if (dataSon.custom[col.prop]) {
                                objSon[col.prop] = dataSon.custom[col.prop];
                            }
                        });
                        if (JSON.stringify(objSon) !== "{}") {
                            tempSon.custom = JSON.stringify(objSon);
                        }
                        arrSon.push(tempSon)
                    });
                    temp.list = arrSon
                }
            });
            console.log(arrList)
        }
    }
    return {
      ...toRefs(state),
      ...methods,
    }
  }
})
</script>
<style lang="scss">

</style>