<template>
  <div class="contentTypeList">
    <div style="text-align:right;">
      <el-button type="primary" @click="addNewType">新增类别</el-button>&nbsp;&nbsp;&nbsp;
      <el-button type="warning" @click="delConType('MULTI')">删除所选</el-button>
    </div>
    <el-table ref="contentTypeListTab" :data="typeListData.data" style="width: 100%; margin-top:1.5em;" border>
      <el-table-column type="selection" width="50" align="center"></el-table-column>
      <el-table-column label="序号" type="index" width="65" align="center"></el-table-column>
      <el-table-column label="分类名称" width="450">
        <template #default="scope">
          <span>
            {{scope.row.name || '无'}}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="code" label="分类编码" width="250"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" size="small" @click="editConType(scope.row)">编辑</el-button>&nbsp;
          <el-button type="danger" size="small" @click="delConType(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="page_style">
      <Page :total="typeListData.total" :model-value="currentPage" show-elevator show-total @on-change="changePage" />
    </div>
    
    <!-- 编辑弹出层 -->
    <Modal v-model="contentTypeModel" title="内容类别" ok-text="确定">
      <Form ref="contentType" :model="contentRowData" :rules="changeRules" :label-width="110" >
        <Form-item label="类别名称:" prop="name">
          <Input v-model="contentRowData.name" placeholder="请输入类别名称" style="width:90%;"></Input>
        </Form-item>
        <Form-item label="类别编码:" prop="code">
          <Input v-model="contentRowData.code" placeholder="请输入类别编码" style="width:90%;"></Input>
        </Form-item>
      </Form>
      <template #footer>
        <div style="text-align:center;">
          <el-button style="margin-right:3em;" @click="contentTypeModel = false">取消操作</el-button>
          <el-button type="primary" @click="confirmSub">确定提交</el-button>
        </div>
      </template>
    </Modal> 

  </div>
</template>

<script>
import { defineComponent,ref,reactive,onMounted,getCurrentInstance } from 'vue'
import {content} from '@/request/api'
import { ElMessage } from 'element-plus'
export default defineComponent({
  components:{
    
  },
  setup() {
    let {proxy} = getCurrentInstance();
    let pageParams = reactive({limit:10,offset:0})
    let typeListData = ref({})

    async function getData(){
      await content.GetContentTypeList(pageParams).then(res =>{
        if (res.code == 101) {
          typeListData.value = res || {}
        }
      })
    }
    
    let currentPage = ref(1)

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

    let contentTypeModel = ref(false)
    let contentRowData = reactive({name:'',code:'',id:''})
    // 表单验证项
    let changeRules = ref({
      name: [{ required: true, message: '请填写类别名称', trigger: 'blur' }],
      code: [{ required: true, message: '请输入类型编码', trigger: 'blur' }],
    })
    // 确定提交表单  
    function confirmSub(){
      let reqFn = null
      if(contentRowData.id){
        reqFn = content.UpdateConType
      }else{
        reqFn = content.AddNewConType
      }
      proxy.$refs['contentType'].validate(async (valid) => {
        if (valid) {
          await reqFn(contentRowData).then(res=>{
            if(res.code == 101){
              contentTypeModel.value = false
              ElMessage({
                message: res.message || '添加成功!',
                type: 'success',
              })
              changePage(1)  //重新获取列表
            }else{
              ElMessage({
                message: res.message || '添加失败!',
                type: 'warning',
              })
            }
          }).catch(e=>{
            ElMessage({
              message: e.message || '添加失败!',
              type: 'error',
            })
          })
        } else {
          ElMessage({
            message:'请填写完表单数据!',
            type: 'warning',
          })
        }
      })
    }

    // 编辑内容
    function editConType(row) {
      contentTypeModel.value = true
      let passVal = JSON.parse(JSON.stringify(row))
      contentRowData.code = passVal.code
      contentRowData.name = passVal.name
      contentRowData.id = passVal.id
    }

    // 新增分类
    function addNewType(){
      contentRowData.code = ''
      contentRowData.name = ''
      contentRowData.id = ''
      contentTypeModel.value = true
    }

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

    return {
      typeListData,
      getData,changePage,currentPage,
      editConType,contentTypeModel,contentRowData,changeRules,confirmSub,addNewType
    }
  },

  methods:{
    // 删除分类
    delConType(id){
      let params = {}
      if(id == 'MULTI'){
        let selection = this.$refs.contentTypeListTab.getSelectionRows(),
        ids = selection.map(val => val.id).join(',')
        params = {ids: ids}
      }else{
        params = {ids: id}
      }

      this.$Modal.confirm({
        title: '温馨提示',
        content: '您确定删除选中分类吗?',
        onOk:async () => {
          await content.DeleteConType(params).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('您已取消操作!');
        }
      });
    }
  }

})
</script>

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