<template>
  <div class="contentList">
    <Select v-model="typesearchFilter.contentTypeCode" clearable style="width:260px" placeholder="请选择内容类型" @on-change="getData">
      <Option v-for="item in typeList" :value="item.code" :key="item.id">{{ item.name }}</Option>
    </Select>
    <el-button type="primary" style="float:right;" @click="$router.push('newContent')">新增内容</el-button>

    <el-table :data="tabData.data" style="width: 100%; margin-top:2em;" border>
      <el-table-column label="序号" type="index" width="70" align="center"></el-table-column>
      <el-table-column prop="contentTypeName" label="类别名称" width="250"> </el-table-column>
      <el-table-column label="标题名称" width="400">
        <template #default="scope">
          {{scope.row.name||'无'}}
        </template>
      </el-table-column>
      <el-table-column label="首页展示" width="120" align="center">
        <template #default="scope"> 
         {{scope.row.isShow}}
        </template>
      </el-table-column>
      <el-table-column prop="showOrder" label="顺序号" width="120">
        <template #default="scope"> 
         {{scope.row.showOrder || '未排序'}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <!--按钮-->
          <el-button type="primary" size="small" @click="$router.push('editContent?id='+scope.row.id)">编辑</el-button>&nbsp;
          <el-button type="danger" size="small" @click="delContent(scope.row.id)">删除</el-button>&nbsp;
          <el-button type="warning" v-if="scope.row.status=='2'&&scope.row.contypeId=='00'" size="small" @click.native="auditContent(scope.row.id)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="page_style">
      <Page :total="tabData.total" :model-value="currentPage" show-elevator show-total @on-change="changePage" />
    </div>
    

  </div>
</template>

<script>
import { defineComponent,ref,reactive,onMounted } from 'vue'
import {content} from '@/request/api'
import { ElMessage } from 'element-plus'
export default defineComponent({
  components:{
    
  },
  setup() {
    
    let typeList = ref([])
    let typesearchFilter = reactive({limit:10,offset:0,contentTypeCode:''})

    // 获取分类列表信息
    async function initData () {
      await content.GetContentTypeList({limit:1000,offset:0}).then((res) => {
        if (res.code =='101') {
          typeList.value = res.data || []
        }
      })
    }

    let tabData = ref({})
    
    //获取列表内容
    async function getData(){
      await content.GetContentList(typesearchFilter).then(res =>{
        if (res.code == 101) {
          tabData.value = res || {}
        }
      })
    }

    let currentPage = ref(1)
    //更改页码
    function changePage (page) {
      if(tabData.value.limit){
        typesearchFilter.offset = (page -1) *  tabData.value.limit  //更新偏移量
        currentPage = page  //切换当前页码
        getData()       //获取广告数据
      }
    }

    onMounted(()=>{
      initData()
      getData() 
    })

    return {
      typeList,
      typesearchFilter,
      getData,tabData,changePage,currentPage
    }
  },
  methods:{
    // 删除内容
    delContent(id){
      this.$Modal.confirm({
        title: '温馨提示',
        content: '您确定删除当前内容吗?',
        onOk:async () => {
          await content.DeleteContent({id:id}).then(res=>{
            if(res.code == 101){
              ElMessage({
                message: res.message || '操作成功!',
                type: 'success',
              })
              this.changePage(1)  //重新获取列表
            }else{
              ElMessage({
                message: res.message || '操作失败!',
                type: 'warning',
              })
            }
          }).catch(e=>{
            ElMessage({
              message: e.message || '添加失败!',
              type: 'error',
            })
          })
        },
        onCancel: () => {
          this.$Message.info('您已取消操作!');
        }
      });
    },

    //审核内容
    async auditContent(id) {
        await content.AuditContent({id}).then((res) => {
          if(res.code == '101') {
            this.$Message.success(res.message)
            this.changePage(1)  //重新获取列表
          }else {
            this.$Message.error(res.message)
          }
        }).catch((err) => {
          this.$Message.error(err)
        })
    },
  }

})
</script>

<style lang="scss" scoped>
.contentList{
  padding: 1em;
  .page_style{
    text-align: right; margin-top: 1em;
    background-color: var(--system-container-background);
  }
}
</style>