
<template>
  <div>
    <basicLayout 
      ref="basicLayout" 
      tableName="noticeListTable" 
      idName="sat_noticeid" 
      :apiId="{query:20221111090904}"
      :options="options"
      :drawerWidth="50"
      :detailPath="{
        path:'/notice_detail'
      }">
      <template #custom>
        <div class="mt-10">
          <p class="search__label">板块:</p>
          <el-select
            class="inline-16"
            size="small"
            v-model="type"
            placeholder="请选择板块"
            @change="handleSelectChange"
            clearable
          >
            <el-option
              v-for="(item,index) in typeList"
              :label="item.classname"
              :value="item.sat_notice_classid"
              :key="index"
            ></el-option>
          </el-select>
        </div>
      </template>
      <template v-slot:tbList="scope">
        <div v-if="scope.data.column.columnname == 'cover'">
          <el-image
              style="margin-top: 6px"
            :src="scope.data.column.data[scope.data.column.columnname] || require('@/assets/notify.png')" 
            lazy
            fit="scale-down"
          ></el-image>
        </div>
        <div v-else-if="scope.data.column.columnname == 'readstatus'">
          <p :style="{'color':scope.data.column.data[scope.data.column.columnname] == '已读' ? '#cccccc' : '#FA8C16'}">{{scope.data.column.data[scope.data.column.columnname]}}</p>
        </div>
        <div v-else>
          {{scope.data.column.data[[scope.data.column.columnname]]}}
        </div>
      </template>
      <template v-slot:tbOpreation="scope">
      </template>
    </basicLayout>
  </div>
</template>

<script>
/**
 * @basicLayout 提供this.$ref['basicLayout'].listData()方法查询列表信息
 * @param {string} formPath 新建,编辑组件所在文件夹名称,以后所有列表新增修改文件统一放入Form文件夹下面,并创建与开发应用相同的名称的子文件夹
 * @param {string} tableName 开发端配置的表格名称
 * @param {String} idName 数据主id名称
 * @param {object} apiId:{query:查询的接口id,del:删除的接口id} 
 * @param {Array} options:{label:描述,value:值} 
 */
export default {
  data () {
    return {
      options:[],
      type:'',
      typeList:[]
      
    }
  },
  created () {
    this.getBrandList()
  },
  methods:{
    handleSelectChange () {
      this.$refs.basicLayout.param.content.where.sat_notice_classid = this.type
      this.$refs.basicLayout.listData()
    },
    /* 获取板块数据 */
    async getBrandList () {
      let res = await this.$api.requested({
        "id":20221101094603,
        "content":{

        }
      })
      this.typeList = res.data
      console.log(this.typeList);
      
    }
  }
}

</script>
<style scoped>

</style>