<template>
  <div id="index">
    <list-normal>
      <template #title>
        <el-row :span="24" class="tit">
          <h4>入驻学校</h4>
        </el-row>
      </template>
      <template #functionBar>
        <el-col :span="5">
          <el-input v-model="search" placeholder="请输入学校名称"></el-input>
        </el-col>
        <el-col :span="5">
          <el-button type="primary" @click="Search">搜索</el-button>
        </el-col>
      </template>
      <template #main>
        <el-row>
          <div v-if="searchData.length > 0">
            <el-col :span="12" class="schoolList" v-for="(item, index) in searchData" :key="index">
              <el-col :span="4" class="nameConImg">
                <el-image style="width:64px;height:64px;" :src="schoolRul"></el-image>
              </el-col>
              <el-col :span="15" class="nameConTit">
                <el-link @click="$router.push('/jobs/school/detail')">{{ item.name }}</el-link>
              </el-col>
              <el-col :span="5" class="nameConBtn">
                <el-button type="primary" v-if="item.status === '未入驻'" @click="join(item.code, item.name)">入驻</el-button>
              </el-col>
            </el-col>
          </div>
          <div v-else>
            <el-col class="schoolList" :span="12" v-for="(item, index) in schoolList" :key="index">
              <el-col :span="4" class="nameConImg">
                <el-image style="width:64px;height:64px;" :src="schoolRul"></el-image>
              </el-col>
              <el-col :span="15" class="nameConTit">
                <el-link @click="$router.push('/jobs/school/detail')">{{ item.name }}</el-link>
              </el-col>
              <el-col :span="5" class="nameConBtn">
                <el-button type="primary" v-if="item.status === '未入驻'" @click="join(item.code, item.name)">入驻</el-button>
              </el-col>
            </el-col>
          </div>
        </el-row>
        <!-- <el-row class="row_pagination">
          <el-col :span="24">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="15"
              layout="total, prev, pager, next, jumper"
              :total="totalRow"
            >
            </el-pagination>
          </el-col>
        </el-row> -->
      </template>
    </list-normal>
  </div>
</template>

<script>
import listNormal from '@/layout/list-normal.vue';
import { mapActions, mapState } from 'vuex';
export default {
  name: 'index',
  props: {},
  components: {
    listNormal,
  },
  data: () => ({
    input: '',
    currentPage: 1,
    totalRow: 60,
    activeIndex: '1',
    schoolList: [],
    search: '',
    // 搜索后的展示数据
    searchData: [],
    selfSch: {},
    schoolRul: require('../../../assets/schoolLogo.png'),
  }),
  created() {
    this.getInfo();
    this.otherList();
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    ...mapActions(['corpSchInfo', 'joinSch', 'dicOperation']),
    async getInfo() {
      let result = await this.corpSchInfo({ type: 'list', data: { corpid: this.user.corpid } });
      if (`${result.errcode}` === '0') {
        this.$set(this, `selfSch`, result.data);
        this.$set(this, `totalRow`, result.total);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
    },
    async join(code, name) {
      console.log(code, name);
      let result = await this.joinSch({ schid: code, schname: name, corpid: this.user.corpid });
      if (`${result.errcode}` === '0') {
        console.log(result);
        this.$message.success('申请成功,请等待校方审核');
      } else {
        this.$message.error('申请失败,请重新尝试');
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.search();
    },
    async otherList() {
      let result = await this.dicOperation('yx');
      if (`${result.errcode}` === '0') {
        let allList = result.data;
        allList.map(item => {
          let res = this.selfSch.filter(fil => `${fil.schid}` === `${item.code}`);
          if (res.length > 0) {
            item.status = res[0].status;
          } else {
            item.status = '未入驻';
          }
          return item;
        });
        console.log(result.data);
        this.$set(this, `schoolList`, result.data);
      }
    },
    Search() {
      var search = this.search;
      if (search) {
        this.searchData = this.schoolList.filter(function(product) {
          return Object.keys(product).some(function(key) {
            return (
              String(product[key])
                .toLowerCase()
                .indexOf(search) > -1
            );
          });
        });
      } else if (search.length === 0) {
        this.searchData = this.schoolList;
      } else {
        return this.searchData;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.el-menu--horizontal > .el-menu-item {
  height: 45px;
  margin-bottom: 1rem;
}
li {
  list-style: none;
}
p {
  margin: 0;
  padding: 0;
}
.tit h4 {
  color: #333;
  font-size: 16px;
  font-weight: 500;
}
.search {
  width: 100%;
  float: left;
  height: 33px;
  margin-bottom: 10px;
  color: #333;
  font-size: 15px;
  margin-bottom: 10px;
}
/deep/.searchInput .el-input__inner {
  height: 33px;
  line-height: 33px;
  border: 1px solid #ccc;
  border-radius: 0px;
}
/deep/.searchBtn .el-button {
  width: 35px;
  height: 33px;
  border: 1px solid #ccc;
  border-radius: 0px;
  padding: 6px 7px;
  color: #555555;
  font-weight: bold;
  font-size: 15px;
  background-color: #eeeeee;
}
.Name {
  float: left;
  width: 100%;
}
.Name .nameTit {
  float: left;
  width: 100%;
  padding: 0;
  border-bottom: 1px solid #e7e7eb;
}
.Name .nameTit li {
  float: left;
  padding: 8px 15px;
  text-align: center;
}
.tab-text {
  font-size: 15px;
  text-align: center;
  height: 22px;
  line-height: 22px;
}
.tab-num {
  font-size: 12px;
  text-align: center;
  height: 19px;
  line-height: 19px;
}
.schoolList {
  padding: 20px;
  border-bottom: 1px solid #cccccc;
}
.nameConTit {
  height: 64px;
  line-height: 30px;
  padding: 0 10px;
}
/deep/.nameConTit .el-link {
  font-size: 20px;
}
.nameConBtn {
  height: 64px;
  line-height: 64px;
  text-align: center;
}
</style>
