<template>
  <div class="lecturermanage">
    <div class="el-card__header">
      <span>校企合作列表</span>
      <div style="display: flex; flex-direction: row; align-items: center">
        <el-button type="primary" class="el-button--small" @click="addSchool"
          >新增</el-button
        >
        <el-button
          type="primary"
          class="el-button--small"
          :disabled="this.sels.length == 0"
          @click="delete_beach"
          >批量删除</el-button
        >
      </div>
    </div>
    <div class="content">
      <div style="display: flex; flex-direction: row; align-items: center">
        <div class="block">
          <div class="searchInput" style="width: 200px">
            <el-input
              style="display: inline-block; width: 170px; height: 30px"
              placeholder="请输入学校名称搜索"
              v-model="msg.ShoolName"
              size="small"
              @clear="getList"
              @keyup.enter.native="getList"
              clearable
            >
            </el-input>
            <span
              @click="getList"
              class="el-icon-search"
              style="
                color: #979dad;
                font-size: 14px;
                position: relative;
                top: 1px;
              "
            ></span>
          </div>
        </div>
      </div>
    </div>

    <div style="padding: 20px; background: #fff">
      <el-table
        :data="tableData"
        header-cell-class-name="headClass"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          style="text-align: center"
        ></el-table-column>

        <el-table-column prop="Id" label="ID" width="100"> </el-table-column>
        <el-table-column prop="ShoolName" label="学校名称"> </el-table-column>
        <el-table-column prop="" label="LOGO">
          <template slot-scope="scope">
            <div
              class="app-image"
              :style="{
                backgroundImage: 'url(' + scope.row.CoverPhoto + ')',
                backgroundSize: 'cover',
              }"
            ></div>
            <!-- <div flex="dir:left cross:center">
              {{ scope.row.Name }}
            </div> -->
          </template>
        </el-table-column>
        <el-table-column prop="UserCount" label="下级用户(数量)">
          <template slot-scope="scope">
            <div class="point" @click="showdig(scope.row.Id)">
              {{ scope.row.UserCount }}
            </div>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="top"
            >
              <img
                src="../../assets/img/setup/edit.png"
                alt=""
                class="imgstyle"
                @click="Edit(scope.row)"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
            >
              <img
                src="../../assets/img/setup/del.png"
                alt=""
                class="imgstyle"
                @click="delete_b(scope.row)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="text-align: right"
        background
        @current-change="handleCurrentChange"
        :page-size="msg.pageSize"
        layout="prev, pager, next"
        :current-page.sync="msg.pageIndex"
        :total="count"
      >
      </el-pagination>
    </div>
    <el-dialog title="下级用户" :visible.sync="showDialog" width="800px">
      <div style="padding: 20px; background: #fff">
        <el-table :data="digtable" header-cell-class-name="headClass" border>
          <el-table-column prop="Id" label="ID" width="100"> </el-table-column>
          <el-table-column prop="Name" width="240px" label="名称">
            <template slot-scope="scope">
              <div
                class="app-image"
                :style="{
                  backgroundImage: 'url(' + scope.row.Photo + ')',
                  backgroundSize: 'cover',
                }"
              ></div>
              <div>
                {{ scope.row.Name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="MemberGradeName" label="会员类型">
          </el-table-column>
          <el-table-column prop="CreateDate" label="加入时间" width="200px">
          </el-table-column>
        </el-table>
        <el-pagination
          style="text-align: right"
          background
          @current-change="dighandleCurrentChange"
          :page-size="digMsg.pageSize"
          layout="prev, pager, next"
          :current-page.sync="digMsg.pageIndex"
          :total="digcount"
          v-if="digcount > 0"
        >
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false" type="primary">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "schoolAndCompanyList",
  data() {
    return {
      msg: {
        pageIndex: 1,
        pageSize: 20,
        ShoolName: "",
      },
      tableData: [],
      count: 0,
      loading: false,
      sels: [], //多选框
      showDialog: false,
      digMsg: {
        EndTime: "",
        Id: 0,
        MemberGrade: 0,
        Moblie: "",
        Name: "",
        Source: 0,
        StartTime: "",
        pageIndex: 1,
        pageSize: 10,
        EduSchoolId: 0,
      },
      digtable: [],
      digcount: 0,
    };
  },
  created() {
    this.getDateList(); //获取分页
  },
  methods: {
    handleSelectionChange(val) {
      this.sels = val;
    },
    getDateList() {
      let msg = JSON.parse(JSON.stringify(this.msg));
      if (msg.ID == "") {
        msg.ID = 0;
      }
      this.loading = true;
      this.apipost("/api/Education/GetEducationSchoolPageList", msg, (res) => {
        this.loading = false;
        if (res.data.resultCode == 1) {
          this.tableData = res.data.data.pageData;
          this.count = res.data.data.count;
        } else {
          this.Info(res.data.message);
        }
      });
    },

    addSchool() {
      this.$router.push("/addSchoolAndCompany");
    },
    Edit(row) {
      this.$router.push({
        path: "addSchoolAndCompany",
        query: {
          Id: row.Id,
        },
      });
    },
    delete_b(row) {
      let that = this;
      that.Confirm("是否删除?", function () {
        that.apipost("/api/Education/DelSchoolInfo", { Ids: row.Id }, (res) => {
          if (res.data.resultCode == 1) {
            that.Success(res.data.message);
            that.getDateList();
          } else {
            that.Error(res.data.message);
          }
        });
      });
    },
    //批量删除
    delete_beach() {
      let ids = this.sels
        .map((e) => {
          return e.Id;
        })
        .toString();
      let that = this;
      that.Confirm("是否删除?", function () {
        that.apipost("/api/Education/DelSchoolInfo", { Ids: ids }, (res) => {
          if (res.data.resultCode == 1) {
            that.Success(res.data.message);
            that.getDateList();
          } else {
            that.Error(res.data.message);
          }
        });
      });
    },
    getList() {
      this.msg.pageIndex = 1;
      this.getDateList();
    },

    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.getDateList();
    },
    getMemberUserPageList() {
      this.apipost(
        "/api/Education/GetMemberUserPageList",
        this.digMsg,
        (res) => {
          if (res.data.resultCode == 1) {
            this.digtable = res.data.data.pageData;
            this.digcount = res.data.data.count;
          } else {
            this.Info(res.data.message);
          }
        }
      );
    },
    showdig(id) {
      this.showDialog = true;
      this.digMsg.EduSchoolId = id;
      this.getMemberUserPageList();
    },
    dighandleCurrentChange(val) {
      this.digMsg.pageIndex = val;
      this.getMemberUserPageList();
    },
  },
};
</script>

<style scoped>
.lecturermanage .el-card__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.lecturermanage .el-button--small {
  padding: 9px 15px;
}
.lecturermanage .content .searchInput {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  /*margin-left: 10px;*/
}
.lecturermanage .content .searchInput .el-input__inner {
  border: none;
  outline: none;
  height: 30px;
  line-height: 30px;
}
.lecturermanage .content .searchInput {
  line-height: normal;
  display: inline-table;
  border-collapse: separate;
  border-spacing: 0;
  width: 250px;
}
.lecturermanage .content {
  background: #fff;
  margin-top: 10px;
  padding: 15px;
  box-sizing: border-box;
}
.lecturermanage .el-tag {
  margin-right: 5px;
}
.lecturermanage .app-image {
  background-position: center center;
  width: 50px;
  height: 50px;
  border-radius: 0%;
  float: left;
  margin-right: 8px;
}
.point {
  color: #409eff;
  cursor: pointer;
}
</style>
