<template>
	<div class="app-container">
		<el-card class="app-container__search">
			<xd-search
				dateFilter
				v-if="searchForm.length > 0"
				v-model="searchParams"
				:list="searchForm"
				@onSearch="handleSearch"
				@onDone="getList"
			></xd-search>
		</el-card>
		<el-card class="app-container__list">
			<div class="app-container__list-pagination">
				<el-button type="primary" @click="toAddClassified">新增归类</el-button>
			</div>
			<div class="app-container__list-table">
				<xd-table
					:headers="headers"
					:list="tables"
					is-border
					@onClick="handleBtnClick"
				>
					<template slot="erCode" slot-scope="scope">
						<el-link type="primary" @click="handleShow(scope.row)">点击查看</el-link>
					</template>
				</xd-table>
			</div>
			<div class="app-container__list-pagination" v-if="total > limit">
				<xd-pagination
					:total="total"
					:limit.sync="limit"
					:page="pageSize"
					:auto-scroll="false"
					@onPagination="handlePagination"
				></xd-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
  import XdPagination from "@/components/XdPagination.vue";
  import XdTable from "@/components/XdTable";
  import XdSearch from "@/components/XdSearch";
  import {Loading} from 'element-ui';
  import checkPermission from "@/utils/permission";
  import users from "@/constant/modules/users";
  import {
    mapActions,
    mapState,
  } from 'vuex';
  import {
    getSearchForm,
		getTableHeaders,
  } from "./classified";

  export default {
    name: "PageClassifiedList",
    components: {
      XdPagination, //翻译插件
      XdTable,
      XdSearch
    },
    data() {
      return {
        
        type: 'movie',//命名空间
				
				status: [
          {"label": "启用", "value": 'Y'},
          {"label": "禁用", "value": 'N'},
				],

        //搜索
        searchForm: [], //搜索区域模块表单
        searchParams: null, //搜索参数

        //分页参数
        pageSize: 1, //当前页面数量
        limit: 20, //搜索参数
        total: 0,

        //列表对象
        tables: [],
        headers: [],
      }
    },
		created(){
      this.headers = getTableHeaders(this.type);
      this.initSearchForm();
      
		},
		methods:{
      ...mapActions('classified', [
        'getListClassified'
      ]),

      handleBtnClick({value, row}){
        if(value.name === '编辑') {
          this.$router.push({
            path: `/classified/edit/${row['id']}`
          })
				}
        if (value.name === '配置') {
          let set_id = '';
          if(row['set_id']) set_id = `/${row['set_id']}`
          this.$router.push({
            path: `/classified/setting/${row['id']}/${row['category_name']}${set_id}`
          })
        }
			},
			
      toAddClassified(){
        this.$router.push({
					path: '/classified/create'
				})
			},
			
			//==礼包二维码与海报功能===============
      handleShow(){},
      //==礼包二维码与海报功能===============
			
      /**
       * @description 获取数据列表
       */
      
      getList() {
        let params = {
          ...this.searchParams,
          page_token: this.pageSize,
          page_size: this.limit
        };
        let loading = Loading.service({});

        this.getListClassified(params)
					.then(res=>{
						let {data} = res;
						this.tables  = data.list;
						this.total = data.total_size;
            loading.close()
					})
					.catch(error=>{
					  console.error(error);
            loading.close()
					})
      },
			
      /**
       * @description 点击搜索进行搜索操作
       * @param action 动作
       * @param form 搜索请求参数
       */
      handleSearch({action, form}) {
        this.pageSize = 1;
        this.getList();
      },

      /**
       * @description 初始化搜索模块
       */
      initSearchForm() {
        this.searchForm = getSearchForm({
					status: this.status
        });
      },
      /**
       * @description 翻页处理方法
       * @param page {Number} 访问页面页码数
       */
      handlePagination(page) {
        this.pageSize = page;
        this.getList();
      },
		}
  }
</script>

<style scoped>

</style>
