<template>
    <div class="hc-layout-box">
        <hc-card :scrollbar="true" action-size="lg" class="ledger-page">
            <el-tabs
                v-model="editableTabsValue"
                type="card"
                class="demo-tabs"
            >
                <template #add-icon>
                    1111
                </template>
                <el-tab-pane
                    key="1"
                    label="项目资料"
                    name="1"
                />
                <el-tab-pane
                    key="2"
                    class="tab-right"
                    label="工作要点"
                    name="2"
                />
            </el-tabs>
            <hc-table :column="tableColumn" :datas="tableData" :index-style="{ fixed: true, width: 60 }" is-check :check-style="{ fixed: true, width: 29 }">
                <template #action="{ row, index }">
                    <el-link type="primary">查看</el-link>
                    <el-link type="success">导出</el-link>
                </template>
            </hc-table>
        </hc-card>
    </div>
</template>

<script setup>
   import { ref } from 'vue'

const editableTabsValue = ref('2')

const tableColumn = [
   { key: 'key1', name: '项目名称' },
   { key: 'key2', name: '项目类型' },
   { key: 'key3', name: '建设规模' },
   { key: 'key4', name: '开工年' },
   { key: 'key5', name: '完工年' },
   { key: 'key6', name: '牵头单位' },
   { key: 'key7', name: '配合单位' },
   { key: 'key8', name: '责任单位' },
   { key: 'key9', name: '全年投资(亿元)' },
   { key: 'key10', name: '预计一季度完成投资比例(亿元)' },
   { key: 'key11', name: '预计二季度完成投资比例(亿元)' },
   { key: 'key12', name: '预计三季度完成投资比例(亿元)' },
   { key: 'key13', name: '预计四季度完成投资比例(亿元)' },
   {
       name: '投资完成金额(亿元)',
       children: [
           {
               name: '一季度',
               children: [
                   { key: 'january', name: '1月' },
                   { key: 'february', name: '2月' },
                   { key: 'march', name: '3月' },
               ],
           },
           {
               name: '二季度',
               children: [
                   { key: 'april', name: '4月' },
                   { key: 'may', name: '5月' },
                   { key: 'june', name: '6月' },
               ],
           },
           {
               name: '三季度',
               children: [
                   { key: 'july', name: '7月' },
                   { key: 'august', name: '8月' },
                   { key: 'september', name: '9月' },
               ],
           },
           {
               name: '四季度',
               children: [
                   { key: 'october', name: '10月' },
                   { key: 'november', name: '11月' },
                   { key: 'december', name: '12月' },
               ],
           },
       ],
   },
   { key: 'key15', name: '当年累计完成投资(亿元)' },
   { key: 'key16', name: '开工累计完成投资(亿元)' },
   { key: 'key17', name: '全年目标' },
   { key: 'key18', name: '一季度工作计划' },
   { key: 'key19', name: '二季度工作计划' },
   { key: 'key20', name: '三季度工作计划' },
   { key: 'key21', name: '四季度工作计划' },
   { key: 'key22', name: '工作计划完成情况' },
   { key: 'key23', name: '存在问题' },
   { key: 'key24', name: '工作建议' },
   { key: 'key25', name: '填报单位' },
   { key: 'key26', name: '联系人' },
    { key: 'action', name: '操作', width: 100, fixed:'right', align: 'center' },
]
const tableData = ref([
   { name: '名称1', text: '文本1', color: 'red' },
   { name: '名称2', text: '文本2', color: 'blue' },
   { name: '名称3', text: '文本3', color: '无' },
])
</script>

<style scoped lang="scss">
   .hc-layout-box{
    position: relative;
    height: 100%;
    width: 100%;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;

}
</style>

<style>
.ledger-page .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
    width: 147px;

    border-color: rgb(187, 187, 187);
    border-width: 1px 0px 1px 1px;
    border-style: solid;
    font-size: 14px;
    padding: 0px;
    text-align: center;
    line-height: 20px;
    font-weight: bold;
    background: rgb(32, 201, 139);
    color:white;
    font-size: larger;
}
.ledger-page .el-tabs--card>.el-tabs__header .el-tabs__nav{
    border:none;
}
.ledger-page .el-tabs--card>.el-tabs__header .el-tabs__item{
    width: 147px;

    border-color: rgb(187, 187, 187);

    border-style: solid;
    font-size: 14px;
    padding: 0px;
    text-align: center;
    line-height: 20px;
    font-weight: bold;
    background:#F9F9F9;
    color:black;
    font-size: larger;
}
.ledger-page .el-tabs--card>.el-tabs__header #tab-2{
    border-radius: 0px 10px 0px 0px;
}
.ledger-page .el-tabs--card>.el-tabs__header #tab-1{
        border-radius: 10px 0px 0px;
}
</style>
