<template>
  <div>
    <el-row :gutter="20" class="elrow">
      <el-col :span="8">
        <el-card shadow="hover" class="paddcontent">
          <div class="handle-box">
            <!-- <el-button
                    type="primary"
                    icon="el-icon-delete"
                    class="handle-del mr10"
                    @click="delAllSelection"
                >批量删除</el-button> -->
            <el-input
              v-model="query.name"
              placeholder="姓名"
              class="handle-input mr10"
            ></el-input>
            <el-input
              v-model="query.number"
              placeholder="编号"
              class="handle-input mr10"
            ></el-input>
            <el-input
              v-model="query.cardId"
              placeholder="卡号"
              class="handle-input mr10"
            ></el-input>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleSearch"
              >查询</el-button
            >
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-row :gutter="20" class="marginb20">
          <el-col :span="12">
            <el-card shadow="hover" class="cardrelative aftercolor1">
              <div class="contentc">
                <div class="contenttitle">挂失</div>
                <div class="contentnum">{{ lose }}</div>
                <img src="../assets/img/pz15.png" alt="" class="pzimg" />
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="hover" class="cardrelative aftercolor2">
              <div class="contentc">
                <div class="contenttitle">冻结</div>
                <div class="contentnum">{{ frozen }}</div>
                <img src="../assets/img/pz16.png" alt="" class="pzimg" />
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="marginb20">
          <el-col :span="12">
            <el-card shadow="hover" class="cardrelative aftercolor3">
              <div class="contentc">
                <div class="contenttitle">总数</div>
                <div class="contentnum">{{ total }}</div>
                <img src="../assets/img/pz14.png" alt="" class="pzimg" />
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="hover" class="cardrelative aftercolor4">
              <div class="contentc">
                <div class="contenttitle">正常</div>
                <div class="contentnum">{{ normal }}</div>
                <img src="../assets/img/pz13.png" alt="" class="pzimg" />
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" class="cardrelative aftercolor5 heightbt">
          <div class="contentc contentc1">
            <div class="contentleft">
              <div class="contenttitle">凭证</div>
              <div class="contentnum">40</div>
              <ul class="contentul">
                <li><span>密码凭证</span><span>28</span></li>
                <li><span>身份凭证</span><span>10</span></li>
                <li><span>其他</span><span>2</span></li>
              </ul>
              <img src="../assets/img/pz15.png" alt="" class="pzimg" />
            </div>
            <div class="pieChart">
              <schart
                ref="bar"
                class="schart"
                canvasId="bar"
                :options="options"
              ></schart>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="userlist" v-if="activeiconfont">
      <div class="switchiconfont">
        <i
          class="iconfont httpicon-liebiao1"
          :class="activeiconfont ? 'active' : ''"
          @click="activeiconfun(true)"
        ></i>
        <i
          class="iconfont httpicon-liebiao"
          :class="activeiconfont ? '' : 'active'"
          @click="activeiconfun(false)"
        ></i>
      </div>
      <div class="userli add">
        <div class="adddiv" @click="handleSearch1">
          <img src="../assets/img/add.png" alt="" />
        </div>
      </div>
      <div class="userli" v-for="(item, index) in userlist" :key="index">
        <userContent :userInfo="item" v-on:func="handleEdit1"></userContent>
      </div>
      <div class="userli ko"></div>
      <div class="userli ko"></div>
      <div class="userli ko"></div>
      <div class="userli ko"></div>
      <div class="userli ko"></div>
    </div>
    <div class="tablelist" v-if="!activeiconfont">
      <div class="switchiconfont">
        <i
          class="iconfont httpicon-liebiao1"
          :class="activeiconfont ? 'active' : ''"
          @click="activeiconfun(true)"
        ></i>
        <i
          class="iconfont httpicon-liebiao"
          :class="activeiconfont ? '' : 'active'"
          @click="activeiconfun(false)"
        ></i>
      </div>
      <div class="adddbtn">
        <el-button type="primary" @click="handleSearch1" size="mini">添加</el-button>
        <el-button type="primary" @click="selectmoredel" size="mini">批量删除</el-button>
        <el-button type="primary" @click="exportfun" size="mini">导出教师卡信息</el-button>
      </div>
      <el-table
        :data="userlist"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="id"
          label="ID"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="siteName" label="绑定房间"></el-table-column>
        <el-table-column prop="number" label="编号"></el-table-column>
        <el-table-column prop="cardId" label="卡号"></el-table-column>
        <el-table-column prop="phone" label="电话"></el-table-column>
        <el-table-column label="性别" align="center">
          <template #default="scope">
            {{ scope.row.sex == 1 ? "男" : "女" }}
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="scope">
            <span v-if="scope.row.cardState == 1">正常</span>
            <span v-if="scope.row.cardState == 2">挂失</span>
            <span v-if="scope.row.cardState == 3">挂失冻结</span>
            <span v-if="scope.row.cardState == 4">冻结</span>
            <span v-if="scope.row.cardState == 5">预开户</span>
            <span v-if="scope.row.cardState == 6">过期</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              icon="el-icon-delete"
              class="red"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="nulldiv" v-if="userlist.length == 0">
        <img src="../assets/img/no-rooms.dfc2fbf1.png" alt="" class="nullimg" />
        <div>暂无房源</div>
      </div> -->
    </div>
    <el-dialog title="编辑" :visible.sync="editVisiblelist" width="30%">
      <el-form ref="form" :model="form" label-width="70px">
        <el-form-item label="名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="编号">
          <el-input v-model="form.number"></el-input>
        </el-form-item>
        <el-form-item label="卡号">
          <el-input v-model="form.cardId"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="卡状态">
          <el-select v-model="form.cardState" placeholder="请选择">
            <el-option
              v-for="item in cardstatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="form.sex" :label="1">男</el-radio>
          <el-radio v-model="form.sex" :label="2">女</el-radio>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editVisiblelist = false">取 消</el-button>
          <el-button type="primary" @click="saveEdit" v-if="modify"
            >确 定</el-button
          >
          <el-button type="primary" @click="modifyEdit" v-else>修 改</el-button>
        </span>
      </template>
    </el-dialog>

    <div class="paging">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Schart from "vue-schart";
import { httpPost,download } from "../api";
import userContent from "../components/usercontent.vue";
export default {
  name: "campus",
  data() {
    return {
      cardstatus: [
        {
          value: 1,
          label: "正常",
        },
        {
          value: 2,
          label: "挂失",
        },
        {
          value: 3,
          label: "挂失冻结",
        },
        {
          value: 4,
          label: "冻结",
        },
        {
          value: 5,
          label: "预开户",
        },
        {
          value: 6,
          label: "过期",
        },
      ],
      currentPage4: 1,
      editVisiblelist: false,
      userlist: [],
      options: {
        type: "pie",
        xRorate: 25,
        legend: {
          position: "left",
        },
        showValue: false,
        bgColor: "rgba(255,255,255,0)",
        labels: ["密码凭证", "身份凭证", "其他"],
        datasets: [
          {
            data: [28, 10, 2],
          },
        ],
      },
      query: {
        cardId: "",
        number: "",
        name: "",
        type:1
      },
      tableData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      pageTotal: 0,
      form: {
        sex: 1,
        cardState: 1,
        name: "",
        number: "",
        cardId: "",
        phone: "",
      },
      idx: -1,
      id: -1,
      activeiconfont: false,
      modify: true,
      normal: 0,
      total: 0,
      frozen: 0,
      lose: 0,
    };
  },
  created() {
    this.getlist(); //总列表
    this.getlist1(); //正常卡数量
    this.getlist2(); //挂失
    this.getlist3(); //冻结
  },
  components: { Schart, userContent },
  methods: {
    // 导出
    exportfun() {
      var q={
          type:"1"
      }
      var data = {
        q:JSON.stringify(q),
        fileName:'学生卡信息'
      };
      download(data, this.$api.exportCard).then((res) => {
         const link = document.createElement('a');
          let blob = new Blob([res], { type: 'application/vnd.ms-excel' });
          link.href  = URL.createObjectURL(blob);
          link.download = '学生卡信息';
          link.click()
          URL.revokeObjectURL(objectUrl);
      });
    },
    // 获取人员列表
    getlist() {
      var q={
        type:1
      }
      var data = {
        pageNum: 1,
        pageSize: 10,
        q:JSON.stringify(q)
      };
      httpPost(data, this.$api.getlistNum).then((res) => {
        this.userlist = res.data.list;
        this.form = res.data.list;
        this.total = res.data.total;
      });
    },
    // 获取正常卡数量
    getlist1() {
      var str = {
        cardState: 1,
        type:1
      };
      var data = {
        q: JSON.stringify(str),
      };
      httpPost(data, this.$api.getlistNum).then((res) => {
        this.normal = res.data.total;
      });
    },
    // 获取挂失卡数量
    getlist2() {
      var str = {
        cardState: 2,
        type:1
      };
      var data = {
        q: JSON.stringify(str),
      };
      httpPost(data, this.$api.getlistNum).then((res) => {
        this.normal = res.data.total;
      });
    },
    // 获取冻结卡数量
    getlist3() {
      var str = {
        cardState: 4,
        type:1
      };
      var data = {
        q: JSON.stringify(str),
      };
      httpPost(data, this.$api.getlistNum).then((res) => {
        this.normal = res.data.total;
      });
    },
    activeiconfun(t) {
      this.activeiconfont = t;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.getlistNum(0,val)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.getlistNum(val,10)
    },
    getlistNum(val,size) {
      var str = {
        type:1
      };
      var data = {
        q: JSON.stringify(str),
        pageNum:val,
        pageSize:size
      };
      httpPost(data, this.$api.getlistNum).then((res) => {
        this.userlist = res.data.list;
        this.total = res.data.total;
      });
    },
    handleChange(value) {
      console.log(value);
    },
    // 触发搜索按钮
    handleSearch() {
      var data = {
        q: JSON.stringify(this.query),
        pageNum:1,
        pageSize:10
      };
      httpPost(data, this.$api.getlistNum).then((res) => {
        this.normal = res.data.total
        this.userlist=res.data.list
      });
    },
    //添加
    handleSearch1() {
      this.form = {
        sex: 1,
        number: "",
        name: "",
        phone: "",
        cardId: "",
        cardState: 1,
      };
      this.modify = true;
      this.editVisiblelist = true;
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          console.log(row)
          var data = {
            ids: [parseInt(row.id)],
          };
          httpPost(data, this.$api.deleteCard).then((res) => {
            if(res.success){
              this.$message.success("删除成功");
              this.getlist();
            }else{
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          this.$message.error("删除失败");
        });
    },
    // 多个删除
    selectmoredel(){
      var list=this.multipleSelection
      var idlist=[]
      list.map(li=>{
        idlist.push(parseInt(li.id))
      })
      if(list.length==0){
        this.$message.error('请勾选需要删除的数据')
      }else{
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          var data = {
            ids: idlist,
          };
          httpPost(data, this.$api.deleteCard).then((res) => {
            if(res.success){
              this.$message.success("删除成功");
              this.getlist();
            }else{
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          this.$message.error("删除失败");
        });
      }
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delAllSelection() {
      const length = this.multipleSelection.length;
      let str = "";
      this.delList = this.delList.concat(this.multipleSelection);
      for (let i = 0; i < length; i++) {
        str += this.multipleSelection[i].name + " ";
      }
      this.$message.error(`删除了${str}`);
      this.multipleSelection = [];
    },
    // 编辑操作
    handleEdit(index, row) {
      this.modify = false;
      this.idx = index;
      this.form = row;
      this.editVisiblelist = true;
    },
    // 子组件触发修改
    handleEdit1(row) {
      this.modify = false;
      this.form = row;
      this.editVisiblelist = true;
    },
    // 保存编辑
    saveEdit() {
      var data = {
        cardId: parseInt(this.form.cardId),
        cardState: 1,
        name: this.form.name,
        number: this.form.number,
        phone: this.form.phone,
        sex: parseInt(this.form.sex),
        type: 1,
      };
      httpPost(data, this.$api.addCard).then((res) => {
        this.editVisiblelist = false;
        this.getlist();
      });
    },
    modifyEdit() {
      var data = {
        id: this.form.id,
        cardId: parseInt(this.form.cardId),
        cardState: this.form.cardState,
        name: this.form.name,
        number: this.form.number,
        phone: this.form.phone,
        sex: parseInt(this.form.sex),
        type: 1,
      };
      httpPost(data, this.$api.updateCard).then((res) => {
        this.editVisiblelist = false;
        this.getlist();
      });
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "pageIndex", val);
      this.getData();
    },
  },
};
</script>

<style scoped>
.handle-box .handle-input:last-child {
  display: inline-block;
}
.handle-input {
  width: 75%;
  display: inline-block;
  margin-bottom: 10px;
}
.mr10 {
  margin-right: 10px;
}
.marginb20 {
  margin-bottom: 20px;
}
.contentc {
  display: flex;
  align-items: center;
}
.cardrelative::before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 8px;
  height: 57px;
}
.aftercolor1::before {
  background: #f2827c;
}
.aftercolor2::before {
  background: #ffd791;
}
.aftercolor3::before {
  background: #90d09e;
}
.aftercolor4::before {
  background: #73cde2;
}
.aftercolor5::before {
  background: #128bf1;
  top: 40px;
  transform: none;
}
.contentc .contenttitle {
  font-size: 16px;
  color: #333;
  line-height: 30px;
  margin-left: 10px;
}
.contentc .contentnum {
  font-size: 35px;
  color: #333;
  line-height: 58px;
  margin-left: 30px;
}
.cardrelative {
  position: relative;
}
.cardrelative .pzimg {
  position: absolute;
  max-width: 100%;
  bottom: -15px;
  right: 0;
}
.paddcontent {
  padding: 14px 0;
}
.contentc1 {
  display: block;
}
.contentleft {
  width: 48%;
  box-sizing: border-box;
  margin-left: 30px;
  display: inline-block;
  vertical-align: top;
}
.pieChart {
  width: 50%;
  height: 200px;
  display: inline-block;
  vertical-align: top;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.pieChart .schart {
  height: 100%;
}
.heightbt {
  height: 220px;
}
.contentleft .contenttitle {
  display: inline-block;
}
.contentleft .contentnum {
  display: inline-block;
}
.contentleft > ul {
  box-sizing: border-box;
  margin-left: 30px;
}
.contentul li {
  display: flex;
  align-items: center;
  line-height: 40px;
  position: relative;
  color: #333333;
}
.contentul li::before {
  content: "●";
  position: absolute;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
  color: #128bf1;
}
.contentul li > span {
  width: 50%;
}
.userlist {
  justify-content: space-between;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;
}
/* .userlist::after{
  content: '';
  flex: auto;
} */
.userlist .userli {
  display: inline-block;
  box-sizing: border-box;
  overflow: hidden;
}
.userlist .ko {
  height: 0;
  overflow: hidden;
  padding: 0;
  width: 264px;
}
.paging {
  margin-top: 30px;
  text-align: center;
}
.add {
  width: 264px;
  height: 276px;
  cursor: pointer;
}
.add .adddiv {
  margin-top: 50px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0px 0px 9px 0px rgba(6, 6, 6, 0.06);
  height: 226px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.add .adddiv img {
  max-width: 100%;
}
.switchiconfont {
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  color: #333;
  display: flex;
}
.switchiconfont .iconfont {
  font-size: 16px;
  padding: 4px 6px;
  border: 1px solid #dcdfe6;
  cursor: pointer;
}
.switchiconfont .active {
  color: #fff;
  cursor: pointer;
  background: #3a8ee6;
  border: 1px solid #3a8ee6;
}
.nulldiv {
  text-align: center;
  color: #999;
  font-size: 16px;
  font-weight: 400;
}
.nullimg {
  margin: 30px auto;
  max-width: 300px;
}
.tablelist {
  position: relative;
  padding-top: 40px;
}
.adddbtn {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 100px;
}
</style>
