<template>
              <div>

                <el-row :gutter="40" class="panel-group">
                  <!--    insertDictOpen {{ this.insertDictOpen }}-->
                  <!--    <p></p>-->
                  <!--    assetDictFormInfo {{ this.assetDictFormInfo }}-->
                  <!--    <p></p>-->
                  <!--    dictFormInfoOpen {{ this.dictFormInfoOpen }}-->
                  <!--    <p></p>-->
                  <!--    dictFormInfo {{ this.dictFormInfo }}-->
                  <!--    <p></p>-->
                  <el-card>
                    <el-tabs type="border-card" @tab-click="handleClick">
                      <el-tab-pane
                        v-for="tableInfo in tableInfoList"
                        :label="tableInfo.tableName+'('+tableInfo.info.tableRemark+')'">
                        <el-card>
                          <div slot="header" class="clearfix">

                            <span>基础字典</span>
                            <!--新增字典表-->
                            <el-button type="text" style="float: right" @click="insertDictOpen = true">新增字典</el-button>
                          </div>
                              <el-row gutter="20">
                                <el-col v-for="dictInfo in dictList" :span="8">
                                  <el-card style="width: 300px;">
                                    <div slot="header" class="clearfix">
                                      <span>{{ dictInfo.dictName }}({{ dictInfo.dictType }})</span>
                                      <!--新增字典具体信息-->
                                      <el-button style="float: right; padding: 3px 0" type="text" @click="insertDictList(dictInfo)">新增内容
                                      </el-button>
                                    </div>
                                    <el-table :data="dictInfo.dictInfoList">
                                      <el-table-column label="标签">
                                        <template slot-scope="scope">
                                          <span v-if="!scope.row.isEdit">{{ scope.row.infoName }}</span>
                                          <el-input :value="scope.row.infoName"
                                                    v-model="scope.row.infoName"
                                                    v-if="scope.row.isEdit"></el-input>
                                        </template>
                                      </el-table-column>
                                      <el-table-column label="值">
                                        <template slot-scope="scope">
                                          <span v-if="!scope.row.isEdit">{{ scope.row.infoValue }}</span>
                                          <el-input :value="scope.row.infoValue"
                                                    v-model="scope.row.infoValue"
                                                    v-if="scope.row.isEdit"></el-input>
                                        </template>
                                      </el-table-column>
                                      <el-table-column>
                                        <template slot-scope="scope">
                                          <el-button type="text" v-if="!scope.row.isEdit" @click="scope.row.isEdit = true">操作</el-button>
                                          <el-button type="text" v-if="scope.row.isEdit" @click="insertDictInfo(dictInfo.id,scope.row)">确认</el-button>
                                          {{ scope.row.isEdit }}
                                        </template>
                                      </el-table-column>
                                    </el-table>
                                  </el-card>
                                </el-col>
                              </el-row>
                        </el-card>

                        <!--资产模型基本信息-->
                        <el-card>
                          <div slot="header" class="clearfix">
                            <span>资产模型基本信息</span>
                          </div>

                          <el-descriptions
                            class="margin-top"
                            :column="2"
                            border>

                            <el-descriptions-item>
                              <template slot="label">
                                <i class="el-icon-user"></i>
                                表名称
                              </template>
                             {{tableInfo.info.tableName}}
                            </el-descriptions-item>

                               <el-descriptions-item>
                              <template slot="label">
                                <i class="el-icon-mobile-phone"></i>
                                表备注
                              </template>
                             {{tableInfo.info.tableRemark}}
                            </el-descriptions-item>

                               <el-descriptions-item>
                              <template slot="label">
                                <i class="el-icon-location-outline"></i>
                                数据量
                              </template>
                             {{tableInfo.info.dataNum}}
                            </el-descriptions-item>


                               <el-descriptions-item>
                              <template slot="label">
                                <i class="el-icon-tickets"></i>
                                备注
                              </template>
                           <el-tag size="small">小黄</el-tag>
                            </el-descriptions-item>
                          </el-descriptions>
                        </el-card>


                        <!--数据模型-->
                        <el-card>

                          <div slot="header" class="clearfix">
                            <span>数据模型</span>
                          </div>


                          <el-table
                            :data="tableInfo.info.structureList"
                            style="width: 100%">

                            <el-table-column fixed prop="columnName" label="字段名称" width="200px"/>
                            <el-table-column fixed prop="columnRemark" label="字段注释" />
                            <el-table-column fixed prop="isPrimary" label="是否主键" />
                            <el-table-column fixed prop="columnType" label="数据类型" />
                            <el-table-column fixed prop="javaType" label="映射类型" />
                            <el-table-column fixed prop="columnLength" label="字段长度" />
                            <el-table-column fixed prop="columnDecimals" label="小数位数" />
                            <el-table-column fixed prop="isNull" label="是否为空" />
                            <el-table-column fixed prop="defaultValue" label="默认值" />
                            <el-table-column fixed prop="isDictionary" label="是否字典" />
                            <el-table-column fixed prop="dictionaryTable" label="映射字典" />
                            <el-table-column fixed prop="dictionaryTable" label="映射字典" >
                              <template slot-scope="scope">
                                操作
                              </template>
                            </el-table-column>
                          </el-table>
                        </el-card>
                      </el-tab-pane>
                    </el-tabs>
                  </el-card>
                </el-row>

                <!--添加新字典表对话框-->
                <el-dialog title="字典表基础信息" style="float:left; margin:20px" :visible.sync="insertDictOpen">
                  <el-form :model="assetDictFormInfo">

                  <el-form-item label="字典表名" label-width="120px">
                    <el-input v-model="assetDictFormInfo.dictName" autocomplete="off"></el-input>
                  </el-form-item>

                    <el-form-item label="字典类型" label-width="120px">
                      <el-input v-model="assetDictFormInfo.dictType" autocomplete="off"></el-input>
                    </el-form-item>

                  </el-form>

                  <div slot="footer" class="dialog-footer">
                    <el-button @click="insertDictOpen = false">取消</el-button>
                    <el-button type="primary" @click="insertDict(tableInfo.info)">确定</el-button>
                  </div>
                </el-dialog>
              </div>
</template>
<script>
import CountTo from "vue-count-to";
import {insertDict,insertDictInfo} from "@/api/etl/etl";

export default {

  props: {
    tableInfoList: Array,
    dictList: Array
  },

  name: 'AssetsModel',
  components:{
    CountTo
  },

  data(){
    return {
      tableInfoList: this.tableInfoList,
      dictList: this.dictList,
      //新增字典表
      insertDictOpen: false,
      dictFormInfoOpen: false,

      //字典基础信息
      assetDictFormInfo: {
        dictName: null,
        dictType: null,
      },
    }
  },

  methods: {
    //点击修改字典操作
    updateDictInfo(row) {
      row.isEdit = true
    },

    //前台添加字典新内容
    insertDictList(data) {
      console.log(data)
      data.dictInfoList.push({
        'id': data.id,
        'infoName': null,
        'infoValue': null,
        'isEdit': true,
      })
    },

    //添加字典接入表
    insertDict(data) {
      console.log(data)

      //关闭新增字典窗口
      this.insertDictOpen = false
      this.assetDictFormInfo.basicId = data.basicId
      console.log(this.assetDictFormInfo)
      insertDict(this.insertDictOpen)
      this.reset()
    },

    //字典具体信息表
    insertDictInfo(id,row){
      console.log(row)
      console.log(id)
      row.dictId = id
      row.id = null
      if (row.infoValue === null || row.infoName === null) {
        this.$message.error("字典标签或者值不能为空")
      }else {
        insertDictInfo(row)
        this.$message.success("添加成功")
        this.reset()
        row.isEdit = false
      }
    },
    handleSetLineChartData(type) {
      this.$emit('handleSetLineChartData', type)
    },
    handleClick(val, event) {
      console.log(val)
      console.log(event)
    },
    //重置参数
    reset() {

    }
  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}

.title-header {
  text-align: center;
  width: 100%;
  font-size: 46px;
  font-weight: 600;
  line-height: 100px;
}
</style>





