<template>
  <div class="card__list__item">
    <p class="item__title sticky" :style="{background:bgColor[index]}">{{title}}</p>
    <el-card style="border:none" shadow="never">
      <p style="font-size:30px"><small>¥</small>&nbsp;3300</p>
    </el-card>
    <el-card shadow="hover" :body-style="{padding:'10px',fontSize:'14px',minHeight:'100px'}" v-for="cd in list" :key="cd.index" style="margin:5px 5px 5px 5px">
      <p><b>{{cd.projectname?cd.projectname:'--'}}</b></p>
      <small style="color:#ccc">{{cd.signdate_due.split(' ')[0]}}</small>
      <slot name="content"></slot>
    </el-card>
  </div>
</template>

<script>
export default {
  props:['apiId','options','type','index','title'],
  data () {
    return {
      bgColor:['#2196f3','#03a9f4','#00bcd4','#ff9800','#ff5722'],
      param:{
        content:{
          "isExport":0,
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
            "condition": "",
            "type":this.type
          }
        }
      },
      list:[]
    }
  },
  methods:{
    async listData () {
      this.param.id = this.apiId.query
      this.param.content.type = this.index
      console.log(this.index)
      const res = await this.$api.requested(this.param)
      this.list = res.data
      
    }
  },
  mounted () {
    this.listData()
  }
}

</script>
<style>
</style>
<style scoped>

.card__list__item{
  flex: 1;
  margin: 0 5px;
  border:1px dashed #f1f2f3;
  height:calc(100vh - 370px);
  overflow-y: scroll;
}
.item__title{
  padding: 10px 0;
  text-align: center;
  background: #3874f6;
  color:#fff;
  font-size: 14px;
  border-radius: 10px 10px 0 0;
}
.sticky{
  position: sticky;
}
</style>