<style lang="less" scoped>
  @import './Index.less';
</style>

<template>
    <div id="schoolList">
        <div class="title">
            <h1>{{ $t('schoolList.title1')}}</h1>
        </div>
        <Row class="filterBox" type="flex" :gutter="16">
            <Col span="11">
                <Input v-model="filterText" class="search" suffix="ios-search" :placeholder="$t('schoolList.placeholder.search')" />
            </Col>
            <!-- <Col span="3">
                <Select class="select" v-model="area" :placeholder="$t('schoolList.placeholder.area')" clearable>
                    <Option v-for="item in areaList" :value="item.value" :key="item.value" >{{ item.label }}</Option>
                </Select>
            </Col>
            <Col span="5">
                <Select class="select" v-model="province" :placeholder="$t('schoolList.placeholder.province')" clearable>
                    <Option v-for="item in provinceList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </Col>
            <Col span="5">
                <Select class="select" v-model="city" :placeholder="$t('schoolList.placeholder.city')" clearable>
                    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </Col> -->
        </Row>                  
        <span class="tableBox">
            <Table height="550" class="vue-table scrollstyle" :columns="columns" :data="filteredRows">
                <template slot-scope="{ row }" slot="picture">
                    <img :src="row.picture" width="30" style="border-radius: 15px;border 1px #fff;">
                </template>
                <template slot-scope="{ row }" slot="schoolCode">
                    <span>{{ row.shortCode |  upper}}</span>
                </template>
                <template slot-scope="{ row }" slot="action">                
                    <Button v-if="applySchool.indexOf(row.schoolCode) <= 0" class="appButton application" size="small" @click="applicationSchool(row.schoolCode)">{{ $t('schoolList.btn.apply') }}</Button> 
                    <Button v-else class="verifyButton" size="small" disabled>{{ $t('schoolList.btn.pending') }}</Button>
                </template>
            </Table>
        </span>
        <Button class="application logoutbtn" size="large" @click="logout()">{{ $t('schoolList.btn.logout') }}</Button> 
    </div>
</template>

<script>
import { User } from '@/service/User'
import { mapGetters } from 'vuex'

export default {
  data() {   
    return {         
        columns: [
            {
                title: ' ',
                slot: 'picture',
                width: 150,
                align: 'center'
            },
            {
                title: this.$t('schoolList.columns.name'),
                key: 'schoolName'
            },
            // {
            //     title: this.$t('schoolList.columns.area'),
            //     width: 150,
            //     key: 'area'
            // },
            // {
            //     title: this.$t('schoolList.columns.PRVN'),
            //     width: 150,
            //     key: 'PRVN'
            // },
            // {
            //     title: this.$t('schoolList.columns.shortCode'),
            //     width: 150,
            //     slot: 'shortCode',
            // },
            // {
            //     title: this.$t('schoolList.columns.code'),
            //     width: 150,
            //     key: 'code'
            // },
            {
                title: this.$t('schoolList.columns.address'),
                key: 'address'
            },
            {
                title: this.$t('schoolList.columns.shortCode'),
                width: 150,
                key: 'schoolCode'
            },
            {
                title: ' ',
                slot: 'action',
                width: 150,
                align: 'center'
            }
        ],
        schoolList: [           
        ],
        area: '',
        province: '',
        city: '',
        // areaList: [
        //     {
        //         value: '國際',
        //         label: '國際'
        //     },
        //     {
        //         value: '大陸',
        //         label: '大陸'
        //     }            
        // ],
        // provinceList:[
        //     {
        //         value: '臺灣',
        //         label: '臺灣'
        //     },
        //     {
        //         value: '北京',
        //         label: '北京'
        //     },
        //     {
        //         value: '新疆',
        //         label: '新疆'
        //     },
        // ],
        // cityList: [
        //     {
        //         value: '北京',
        //         label: '北京'
        //     },
        //     {
        //         value: '伊犁',
        //         label: '伊犁'
        //     },
        //     {
        //         value: '台北',
        //         label: '台北'
        //     },
        // ],        
        filterText: ''
    }

  },
  filters: {
        upper: function (value) {
            if (!value) return '';
            value = value.toString();
            return value.toUpperCase();
        }
    },
  computed: {
    userInfo() { return this.$access.getExtendInfo('userInfo');},
    ...mapGetters({
        // userDetails: 'user/getUserDetails',
    }),
    applySchool: function(){
        let applydata = this.userDetails.filter(function(item){
            item.joinStatus = 3
        })

        let data = []
        applydata.forEach(function(item){
            if(item.schoolCode){
                data.push(item.schoolCode)
            }
        })
        return data
    },
    filteredRows: function(){

        var result = this.schoolList;

        // 所以這裡將 filterText 與 rows[n].name 通通轉小寫方便比對。
        let filterText = this.filterText.trim().toLowerCase()
        let areaText = this.area
        let provinceText = this.province
        let cityText = this.city

        if(filterText){
            result = result.filter(function(item, index, array){
                let name = item.name.toString().toLowerCase()
                let code = item.code.toString().toLowerCase()
                let shortCode = item.shortCode.toString().toLowerCase()
                return ((name.indexOf(filterText) > -1) || (code.indexOf(filterText) > -1) || (shortCode.indexOf(filterText) > -1))
            });
        } 
        
        if(areaText){
            result = result.filter(function(item, index, array){
                let area = item.area
                return area === areaText
            });
        }

        if(provinceText){
            result = result.filter(function(item, index, array){
                let PRVN = item.PRVN
                return PRVN.indexOf(provinceText) >= 0
            });
        }

        if(cityText){
            result = result.filter(function(item, index, array){
                let PRVN = item.PRVN
                return PRVN.indexOf(cityText) >= 0
            });
        }
        
        return result
    }
    },
    created() {
    // 取得所有學校資料
       this.$api.GetAllSchoolBaesInfo({}).then(
            res => {
                this.schoolList = res.result.data
            console.log(res.result.data, 'res.result.data');
        })
        console.log(this.userInfo)
    },
    methods: {
        applicationSchool: function(schoolCode){

            // 待前端 token 出來在打算 [廢棄，如需使用要接新架構API]
            // // 基本資料構成 start--
            // let inputInfo = { 
            //     'id': this.userInfo.id,
            //     'name': this.userInfo.name,
            //     'picture': this.userInfo.picture,
            // };
            // //以下是前端可得的資料--end--
            // inputInfo.joinStatus = 3; //請追加「加入狀態」  3:申請中
            // let data = { schoolCode: schoolCode, userinfo: userinfo };
            // this.$api.schoolList.Join(data).then(
            //     res => {
            //         console.log('userJoinSchoolTest data:');
            //         console.log(res.result.data);
            // })
        },
        logout(){
			this.$store.commit('user/resetSchoolProfile')
            User.logout()
        }
    }
}
</script>
<style lang="less">
.vue-table .ivu-table{
    background-color: #1A1A1A;    
    tr{
        background: -webkit-linear-gradient(left,#212121,#000000);
        background: -o-linear-gradient(right,#212121,#000000);
        background: -moz-linear-gradient(right,#212121,#000000);
        background: linear-gradient(to right,#212121,#000000);
    }
    th{
        color: #e8eaec;
        background-color: inherit;
        border-color: #929090;
    }
    td {
        color: #e8eaec;
        background-color: #1A1A1A;
        border-color: #929090;
        .appButton{
            font-size: 10px;
            padding: 0 15px;
        }
        .verifyButton{
            color: #ccc;
            background-color: #666;
            border: 0;
            font-size: 10px;
            padding: 0 15px;
        }
    }
    &:before{
        background: none;            
    }
    .ivu-table-overflowY::-webkit-scrollbar {
        width: 5px;
    }
    .ivu-table-overflowY::-webkit-scrollbar-track {
        background-color: #f8f8f975;
    }
    .ivu-table-overflowY::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: #969e85;
    }
    .ivu-table-overflowY::-webkit-scrollbar-thumb:hover {
        background: #555; 
    }
    .ivu-table-overflowY::-webkit-scrollbar-button {
    // display: none;
    }
}
.filterBox{
    padding: 0 20px;
    margin: 20px 0;
    .search{
        .ivu-input{
            color: #ccc;
            background-color: transparent;
        }
    }
    .select{
        color: #ccc;
        .ivu-select-selection{
            background-color: transparent;
        }
        .ivu-select-dropdown{            
            background-color: #1a1a1a;
            .ivu-select-item-selected{
                background-color: #515a6e;
            }
            .ivu-select-item{
                color: #ccc;
                &:hover{
                    background-color: #515a6e;
                }
            }
        }
    }
}
</style>