<template>
    <div class="template_content">
    <!-- 搜索 -->
        <div class="search_box">
            <a-form layout="inline">
                <a-form-item label="课程名称">
                  <a-input  v-model="searchPage.name" allowClear></a-input>
              </a-form-item>
              <a-form-item label="系列名称">
                  <a-input  v-model="searchPage.seriesName" allowClear></a-input>
              </a-form-item>
              <a-form-item label="付费模式">
                  <a-select 
                    allowClear
                    v-model="searchPage.chargeModel"
                    style="width: 120px"
                  >
                    <a-select-option v-for="item in chargeModeList" :key="item.key">{{item.label}}</a-select-option>
                  </a-select>
              </a-form-item>
              <a-form-item label="状态">
                  <a-select 
                    allowClear
                    v-model="searchPage.status"
                    style="width: 120px"
                  >
                    <a-select-option v-for="item in statusList" :key="item.key">{{item.label}}</a-select-option>
                  </a-select>
              </a-form-item>
              <a-form-item>
                  <a-button type="primary" icon="search" @click="handlSearch">查询</a-button>
              </a-form-item>
            </a-form>
        </div>

        <!-- 表格内容 -->
        <div class="content_box">

            <!-- 表格操作 -->
            <div class="table_top">
                <a-button
                icon="plus"
                type="primary"
                class="btn_right_margin"
                @click="navigateDetailPage('')"
                 v-if="isReadOnly==false"
                >添加</a-button>
            </div>

            <a-table
                :columns="columns"
                :dataSource="data"
                :loading="loading"
                :pagination="pagination"
                bordered
                size="small"
                @change="handleTableChange"
                rowKey="id"
            >   

                <!-- 收费模式 -->
                <div slot="chargeModel" slot-scope="text, record">
                    <span>{{chargeModeList.filter(e => e.key == record.chargeModel)[0].label}}</span>
                </div>

                <!-- 标签 -->
                <div slot="tags" slot-scope="text, record">
                    <span v-if="!record.tags">-</span>
                    <a-tag v-for="(item,index) in record.tags" :key="index" color="blue">{{item}}</a-tag>
                </div>

                <!-- 状态 -->
                <div slot="status" slot-scope="text, record">
                    <span>{{statusList.filter(e => e.key == record.status)[0].label}}</span>
                </div>

                <!-- 操作 -->
                <template slot="action" slot-scope="text, record">
                    <a-button v-if="isReadOnly==true"
                        icon="edit"
                        type="link"
                        @click="navigateDetailPage(record)"
                    >查看</a-button>
                    <a-button v-if="isReadOnly==false"
                        icon="edit"
                        type="link"
                        @click="navigateDetailPage(record)"
                    >编辑</a-button>
                    <a-button v-if="isReadOnly==false"
                        icon="edit"
                        type="link"
                        @click="changeStatus(record)"
                    >{{record.status == 'UP' ? '下架' : '上架'}}</a-button>
                </template>
            </a-table>
        </div>
    </div>
</template>
<script>

import {fetchList,modifyStatus} from '@/api/biz/course'
import { disposereq,timestampToTime } from '@/utils/util'

let columns = [
    {
        title: '谭程名称',
        dataIndex: 'name',
        align: 'center',
    },
    {
        title: '系列名称',
        dataIndex: 'seriesName',
        align: 'center',
        customRender: (text) => {
            return text ? text : '-'
        }
    },
    {
        title: '所属讲师',
        dataIndex: 'teacherName',
        align: 'center',
    },
    {
        title: '收费模式',
        dataIndex: 'chargeModel',
        align: 'center',
        scopedSlots: {customRender: 'chargeModel'},
        width: 120,
    },
    {
        title: '标签',
        dataIndex: 'tags',
        align: 'center',
        scopedSlots: {customRender: 'tags'}
    },
    {
        title: '状态',
        dataIndex: 'status',
        align: 'center',
        scopedSlots: {customRender: 'status'},
        width: 100,
    },
    {
        title: '操作',
        key: "action",
        scopedSlots: { customRender: "action" },
        align: "center",
        width: 180,
    }
]
export default {
    data(){
        return {
            columns: columns,
            data: [],
            UserInfo: {},
            searchPage: {
                pageIndex: 1,
                pageSize: 10,
                name: '',
                seriesName: '',
                chargeModel: null,
                status: null
            },
            isReadOnly:true,
            pagination: {
                showQuickJumper: true,
                showSizeChanger: true
            },
            loading: false,
            chargeModeList: [
                {
                    key: 'FREE',
                    label: '免费'
                },
                {
                    key: 'VIP_FREE',
                    label: '会员免费'
                },
                {
                    key: 'PAY',
                    label: '付费点播'
                }
            ],
            statusList: [
                {
                    key: 'UP',
                    label: '上架'
                },
                {
                    key: 'DOWN',
                    label: '下架'
                }
            ]
        }
    },
    // 创建完毕
    created() {
        this.UserInfo = JSON.parse(localStorage.getItem("UserInfo"));
        let isReadOnlyRole = true;
        this.UserInfo.roles.filter( (item,i) =>{
            if(item.code =='ADMIN' || item.code =='OPERATOR'){
               isReadOnlyRole = false;
            }
        } );
        this.isReadOnly = isReadOnlyRole;
        this.getList(this.searchPage);
    },
    // 即将更新渲染
    beforeUpdate() {
        
    },
    methods: {
        getList(query){
            this.loading = true;
            fetchList(query).then(res => {
                if(res.code == 200){
                    this.data = res.data
                    let paper = {...this.pagination}
                    paper.current = query.pageIndex
                    paper.total = res.count
                    this.pagination = paper
                }else{
                    this.$message.info(res.resp_msg)
                }
                this.loading = false;
            }).catch(err => {
                this.loading = false;
                disposereq(this,err)
            })
        },
        handlSearch(){
            let queryParam = {...this.searchPage}
            this.getList(queryParam)
        },
        handleTableChange(pagination,filters,sorter){
            let queryParam = {...this.searchPage}
            queryParam.pageIndex = pagination.current;
            queryParam.pageSize = pagination.pageSize;
            this.getList(queryParam)
        },
        navigateDetailPage(row){
            let id = null;
            if(row){
                id = row.id
            }
            this.$router.push({path:'/edu/biz/course/detail',query:{id:id, isReadOnly:this.isReadOnly}})
        },
        changeStatus(row){
            console.log(row.id)
            let modifyStatusObj = {}
            modifyStatusObj.id = row.id
            if(row.status == 'UP'){
                modifyStatusObj.status = 'DOWN'
            }else{
                modifyStatusObj.status = 'UP'
            }
            
            modifyStatus(modifyStatusObj).then(res => {
                if(res.resp_code == 200){
                    this.$message.info('修改状态成功')
                    this.getList(this.searchPage)
                }else{
                    this.$message.info(res.resp_msg)
                }
            }).catch(err => {
                disposereq(this,err)
            })
        }
    }
}
</script>
<style>
.template_content {
  background-color: #f0f2f5;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.search_box {
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  background-color: #fff;
}
.content_box {
  width: 100%;
  background-color: #fff;
  margin-top: 10px;
  padding: 14px;
}
.table_top {
  padding-bottom: 14px;
}
.btn_margin {
  margin: 0px 5px;
}
</style>