<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>专家库检索</span>
      </div>
      <el-row type="flex">
        <el-col :sm="18">
          <el-row :gutter="8">
            <el-col :xs="16" :sm="20">
              <el-input
                v-model="listQuery.search"
                placeholder="请输入关键字"
                @keyup.enter.native="handleFilter"
              ></el-input>
            </el-col>
            <el-col :xs="8" :sm="4">
              <el-button
                type="primary"
                style="width: 100%"
                @click="handleFilter"
                >搜索一下</el-button
              >
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row style="margin-top:6px">
        <el-col :xs="12" :sm="12" :lg="6" :xl="6">
        <el-select
            v-model="listQuery.hdegree"
            placeholder="最高学历"
            clearable
            @change="handleFilter"
            style="width:100%"
          >
            <el-option
              v-for="item in degreeOptions"
              :key="item.key"
              :label="item.label"
              :value="item.key"
            />
          </el-select>
        </el-col>
      </el-row>
    </el-card>
    <el-card style="margin-top: 6px">
      <div slot="header" class="clearfix">
        <span>专家库</span>
      </div>
      <p
        style="text-align: center; font-weight: bold; color: gray"
        v-if="tableData.count == 0"
      >
        暂无数据
      </p>
      <el-row :gutter="10" v-else v-loading="listLoading">
        <el-col
          :xs="12"
          :sm="6"
          :lg="6"
          :xl="4"
          v-for="item in tableData.results"
          v-bind:key="item.id"
        >
          <el-card>
            <div slot="header" class="clearfix">
              <span>{{ item.name }}</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                >更多信息</el-button
              >
            </div>

            <div>
              <el-row :gutter="8">
                <el-col :xs="9" :sm="10" :lg="8" :xl="8">
                  <el-image
                    style="width: 80px"
                    :src="item.photo"
                    :preview-src-list="[item.photo]"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </el-col>
                <el-col :xs="15" :sm="14" :lg="16" :xl="16">
                  <div >
                    <div
                      style="
                        font-weight: bold;
                        font-size: 18px;
                        margin-top: 4px;
                      "
                    >
                      
                      {{ item.name }}
                      <i
                        class="el-icon-male"
                        style="color: blue; font-weight: bold"
                        v-if="item.gender == '男'"
                      ></i>
                      <i
                        class="el-icon-female"
                        style="color: blue; font-weight: red"
                        v-else
                      ></i>
                    </div>
                    <div style="margin-top: 4px">{{ item.hdegree }}</div>
                    <div style="margin-top: 4px">{{ item.idnumber }}</div>
                  </div>
                </el-col>
              </el-row>

              <el-row :gutter="2" style="font-size: 14px" v-if="item.project_.length">
                <el-col
                  :xs="24"
                  :sm="24"
                  :lg="6"
                  :xl="4"
                  style="color: gray; font-weight: bold; margin-top: 2px"
                  
                  >项目经历</el-col
                >
                <el-col
                  :xs="24"
                  :sm="24"
                  :lg="18"
                  :xl="20"
                  style="margin-top: 2px"
                >
                  <div v-for="x in item.project_" v-bind:key="x.id" v-html="x.name_">
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="2" style="font-size: 14px" v-if="item.paper_.length">
                <el-col
                  :xs="24"
                  :sm="24"
                  :lg="6"
                  :xl="4"
                  style="color: gray; font-weight: bold; margin-top: 2px"
                  v-if="item.paper_.length"
                  >论文/著作</el-col
                >
                <el-col
                  :xs="24"
                  :sm="24"
                  :lg="18"
                  :xl="20"
                  style="margin-top: 2px"
                >
                  <div v-for="x in item.paper_" v-bind:key="x.id" class="tip" v-html="x.name_">
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="2" style="font-size: 14px" v-if="item.award_.length">
                <el-col
                  :xs="24"
                  :sm="24"
                  :lg="6"
                  :xl="4"
                  style="color: gray; font-weight: bold; margin-top: 2px"
                  v-if="item.award_.length"
                  >所获奖项</el-col
                >
                <el-col
                  :xs="24"
                  :sm="24"
                  :lg="18"
                  :xl="20"
                  style="margin-top: 2px"
                >
                  <div v-for="x in item.award_" v-bind:key="x.id" class="tip" v-html="x.name_">
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <pagination
        style="margin-top: 6px"
        v-show="tableData.count > 0"
        :total="tableData.count"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.page_size"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>
<script>
import { getExpertList } from "@/api/expert";
import checkPermission from "@/utils/permission";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
export default {
  components: { Pagination },
  data() {
    return {
      search: null,
      listQuery: {
        page: 1,
        page_size: 12,
        search: "",
      },
      listLoading: false,
      tableData: {
        count: 0,
        results: [],
      },
      degreeOptions:[
        { key: "博士研究生", value: "博士研究生" },
        { key: "硕士研究生", value: "硕士研究生" },
        { key: "本科", value: "本科" },
        { key: "大专", value: "大专" },
      ]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    checkPermission,
    getList() {
      this.listLoading = true;
      getExpertList(this.listQuery)
        .then((res) => {
          this.listLoading = false;
          this.tableData = res.data;
          //高亮显示
          this.showLight();
        })
        .catch((e) => {
          this.listLoading = false;
        });
    },
    handleFilter() {
      this.page = 1;
      this.getList();
    },
    lessStr(data, arg) {
      for (var i = 0; i < data.length; i++) {
        let len1 = data[i][arg].length;
        if (len1 > 2) {
          data[i][arg] = data[i][arg].slice(0, 2);
        }
        for (var x = 0; x < data[i][arg].length; x++) {
          data[i][arg][x].name_ = data[i][arg][x].name.substr(0, 14) + "...";
        }
      }
    },
    lessStr2(data, arg, searchList) {
      for (var i = 0; i < data.length; i++) {
          //项目经历
          var ll = [];
          for (var x = 0; x < data[i][arg].length; x++) {
            for (var m = 0; m < searchList.length; m++) {
              if (data[i][arg][x].name.indexOf(searchList[m]) != -1) {
                let sm = data[i][arg][x]
                sm.name_ = data[i][arg][x].name.replace(
                  searchList[m],
                  '<span style="color:red;font-weight:bold">' + searchList[m] + "</span>"
                );
                ll.push(sm);
              }
            }
          }
          data[i][arg]=ll
        }

    },
    showLight() {
      var data = this.tableData.results
      if (this.listQuery.search == "") {
        
        //项目经历
        this.lessStr(data, "project_");
        //论文
        this.lessStr(data, "paper_");
        //获奖
        this.lessStr(data, "award_");
      } else {
        let searchList = this.listQuery.search.split(" ");
        this.lessStr2(data, 'project_', searchList)
        this.lessStr2(data, 'paper_', searchList)
        this.lessStr2(data, 'award_', searchList)
      }
    },
  },
};
</script>
<style lang="scss" scoped>
</style>