<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="handleClose"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <div style="height: calc(100vh - 350px)">
        <el-container>
            <!-- <el-header>
                <div style="display:flex;width: 100%;justify-content: flex-end;">
                    <el-button type="primary" size="small" @click="newTemplate">自定义模板</el-button>
                </div>
            </el-header> -->
          <el-main class="height_100" :loading="loading">
            <el-table
              class="copyTable"
              :data="tableData"
              style="width: 100%"
              row-key="id"
            >
              <el-table-column prop="index" label="序号" width="100px">
                <template slot-scope="scope">
                  <div>
                    {{ scope.$index+1 }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="名称"> </el-table-column>
            </el-table>
          </el-main>
          <el-footer class="pagination">
            <el-pagination
              background
              layout="total, sizes, prev, pager, next, jumper"
              :current-page.sync="queryParams.current"
              :page-size.sync="queryParams.size"
              @current-change="handleCurrentChange"
              @size-change="changeSize"
              :total="total"
            >
            </el-pagination>
          </el-footer>
        </el-container>
      </div>
    </el-dialog>
    <el-dialog
      title="自定义分析项"
      :visible.sync="dialogVisible2"
      width="500px"
      :before-close="()=>{dialogVisible2=false}"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
        <div style="height: calc(100vh - 350px)">
                <el-collapse >
                        <el-collapse-item v-for="menu in treeList" :key="menu.id" :name="menu.id">
                            <template slot="title">
                            <div class="custom-title">
                                <span class="label">{{ menu.name }}</span>
                            </div>
                            </template>
                            <div v-for="item in menu.children" :key="item.uid" class="tree-item" >
                            <div class="custom-title">
                                
                                <el-checkbox-group v-model="checkList">
                                    <el-checkbox :label="item"><span class="label">{{ item.name }}</span></el-checkbox>
                                </el-checkbox-group>
                            </div>
                            </div>
                        </el-collapse-item>
                    </el-collapse> 
            
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible2=false">关 闭</el-button>
            <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </div>
    </el-dialog>

    
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
        dialogVisible:false,
        title:'报告模板',
        tableData:[],
        loading:false,
        queryParams:{
            current:1,
            size:10
        },
        total:0,
        dialogVisible2:false,
        checkList:[]
    };
  },
  watch: {},
  computed: {
    treeList() {
      return this.$store.state.chart.treeList
    },
  },
  created() {},
  mounted() {},
  methods: {
    handleClose(){
        this.dialogVisible = false
    },
    open(){
        this.getList()
        this.dialogVisible = true
    },
    getList(){
        this.tableData = [
            {
                id:1,
                name:'通用模板'
            },
            {
                id:2,
                name:'XXX公司报告模板'
            }
        ]
        this.total = 2
    },
    handleCurrentChange(val){
        this.queryParams.current = val
        this.getList()
    },
    changeSize(val){
        this.queryParams.current = 1
        this.queryParams.size = 10
        this.getList()
    },
    newTemplate(){
        this.checkList = []
        this.dialogVisible2 = true
    },
    handleConfirm(){},
  },
};
</script>
<style lang="scss" scoped>
</style>