<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card>
          <el-table
            v-loading="listLoading"
            :data="orgList"
            style="width: 100%;"
            border
            fit
            stripe
            highlight-current-row
            :height="leftHeight"
            ref="filterTable"
            @row-click="clickRow"
          >
            <el-table-column type="index" width="50"/>
            <el-table-column label="名称" prop="name">
            </el-table-column>
            <el-table-column label="服务" prop="service">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card>
          <el-row class="filterTop" :gutter="6">
            <el-col :xs="24" :md="8">
              <el-input
                v-model="listQuery.search"
                placeholder="资质/服务"
                style="width: 100%;"
                class="filter-item"
                @keyup.enter.native="handleFilter"
              />
            </el-col>
            <el-col :xs="24" :md="6">
              <el-button
                class="filter-item"
                type="primary"
                icon="el-icon-search"
                @click="handleFilter"
              >搜索
              </el-button>
              <el-button
                class="filter-item"
                type="primary"
                icon="el-icon-refresh-left"
                @click="resetFilter"
              >重置
              </el-button>
            </el-col>
          </el-row>
          <el-table
            v-loading="listLoading"
            :data="qualityList.results"
            style="width: 100%;"
            border
            fit
            stripe
            highlight-current-row
            :height="rightHeight"
            ref="filterTable"
          >
            <el-table-column type="index" width="45"/>
            <el-table-column label="名称">
              <template slot-scope="scope">
                <span v-html="showlight(scope.row.name)"></span>
              </template>
            </el-table-column>
            <el-table-column label="资质认定">
              <template slot-scope="scope">
                <span v-html="showlight(scope.row.type)"></span>
              </template>
            </el-table-column>
            <el-table-column label="资质类型">
              <template slot-scope="scope">
                <span v-if="scope.row.type==='OTHER'" v-html="showlight(scope.row.level)">{{scope.row.level}}</span>
                <span v-else v-html="showlight(typeOptions[scope.row.grade])">{{typeOptions[scope.row.grade]}}</span>
              </template>
            </el-table-column>
            <el-table-column label="备案城市">
              <template slot-scope="scope">
                <span v-if="scope.row.province_name"></span>
                <span  v-if="scope.row.city_name" ></span>
                <span  v-if="scope.row.citys_" v-for="item in scope.row.citys_">
                  {{item.name}}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="所属单位">
              <template slot-scope="scope">
                <span v-if="scope.row.org_" v-html="showlight(scope.row.org_.name)"></span>
              </template>
            </el-table-column>
           <!-- <el-table-column label="主要服务" prop="service">
            </el-table-column>-->
            <el-table-column label="资质范围">
              <template slot-scope="scope">
                <span v-html="showlight(scope.row.scope)"></span>
              </template>
            </el-table-column>
            <el-table-column label="描述">
              <template slot-scope="scope">
                <span v-html="showlight(scope.row.description)"></span>
              </template>
            </el-table-column>
            <el-table-column label="截止日期">
              <template slot-scope="scope">
                <span v-if="scope.row.end_date">
                  {{scope.row.end_date.substring(0, 10)}}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="变更日期">
              <template slot-scope="scope">{{scope.row.update_time.substring(0, 10)}}</template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="qualityList.count > 0"
            :total="qualityList.count"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.page_size"
            @pagination="getList"
          />
        </el-card>

      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {getOrgList,getOrgAll} from "@/api/org";
  import {getCMAGroup} from "@/api/cma";
  import { getAbilityQuality} from "@/api/ability";
  import checkPermission from "@/utils/permission";
  import Pagination from "@/components/Pagination";

  export default {
    components: {Pagination},
    name: "abilityQuality",
    data() {
      return {
        qualityList: {count: 0},
        listQuery: {
          page: 1,
          page_size: 20,
          org: '',
          search: ''
        },
        leftHeight:null,
        rightHeight:null,
        org: [],
        orgList: [],
        listLoading: true,
        dialogVisible: false,
        dialogType: "new",
        typeOptions: {
          10: '国家级',
          20: '省级',
          30: '市级',
          40: '实验室',
          50: '检验机构',
        },
      };
    },
    mounted() {
      let height1 = document.getElementsByClassName('app-main')[0].clientHeight;
      this.leftHeight = height1-30;
      let height2 = document.getElementsByClassName('filterTop')[0].clientHeight;
      let height3 = document.getElementsByClassName('pagination-container')[0].clientHeight;
      this.leftHeight = height1-28;
      this.rightHeight = height1-height2-height3-60;
      this.getList();
      this.getGroup();
    },
    methods: {
      showlight(val) {
        val = val + "";
        if (this.listQuery.search !== "") {
          let searchList = this.listQuery.search.split(" ");
          let reg = null;
          for (let i = 0; i < searchList.length; i++) {
            reg=new RegExp(searchList[i],"g");
            val = val.replace(reg, '<span style="color:red;font-weight:bold">' + searchList[i] + '</span>');
          }
          return val;
        } else {
          return val;
        }
      },
      checkPermission,
      getList() {
        this.listLoading = true;
        getAbilityQuality(this.listQuery).then((response) => {
          if (response.data) {
            this.qualityList = response.data;
          }
          this.listLoading = false;
        });
      },
      getGroup() {
        getOrgList({ can_supervision: true }).then((res) => {
          this.org = res.data;
        });
        getOrgList({service_ok:1}).then((response) => {
          this.orgList = response.data;
        });
      },
      handleFilter() {
        this.getList();
      },
      resetFilter() {
        this.listQuery.search = '';
        this.listQuery.org = '';
        this.getList();
      },
      clickRow(data){
        this.listQuery.org = data.id;
        this.getList();
      },
    },
  }
</script>

<style scoped>

</style>
