<template>
  <div class="app-container">
    <el-card>
      <el-row :gutter="6">
       <!-- <el-col :xs="24" :md="4">
          <el-select v-model="listQuery.org" placeholder="所属单位" @change="handleFilter" clearable style="width: 100%;">
            <el-option
              v-for="item in org"
              :key="item.value"
              :label="item.text"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>-->
        <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-card>
    <el-card style="margin-top: 10px">
      <el-table
        v-loading="listLoading"
        :data="qualityList.results"
        style="width: 100%;"
        border
        fit
        stripe
        highlight-current-row
        max-height="700"
        ref="filterTable"
      >
        <el-table-column type="index" width="50"/>
        <el-table-column label="名称" prop="name">
        </el-table-column>
        <el-table-column label="资质类型" prop="type">
        </el-table-column>
        <el-table-column label="等级">
          <template slot-scope="scope">
            <span v-if="scope.row.grade">{{ scope.row.grade}}</span>
            <span v-if="scope.row.level">、{{ scope.row.level}}</span>
          </template>
        </el-table-column>
        <el-table-column label="备案城市" prop="citys">
         <!-- <template slot-scope="scope">
            <span v-if="scope.row.grade">{{ scope.row.grade}}</span>
            <span v-if="scope.row.level">、{{ scope.row.level}}</span>
          </template>-->
        </el-table-column>
        <!--<el-table-column
          align="header-center"
          label="所属单位"
          prop="org"
          column-key="org"
          :filters="org"
          :filter-multiple="false"
          fixed="right"
        >
          <template slot-scope="scope">{{ scope.row.org}}</template>
        </el-table-column>-->
        <el-table-column label="所属单位" prop="org"></el-table-column>
        <el-table-column label="主要服务" prop="service">
        </el-table-column>
        <el-table-column label="资质范围" prop="scope">
        </el-table-column>
        <el-table-column label="描述" prop="description">
        </el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="scope">{{scope.row.create_time.substring(0, 10)}}</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>
  </div>

</template>

<script>
  import {getOrgList} 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: ''
        },
        org: [],
        listLoading: true,
        dialogVisible: false,
        dialogType: "new",
        typeOptions: {
          'CMA': '',
          'CNAS': '',
          'OTHER': ''
        },
      };
    },
    mounted() {
      this.getList();
      this.getGroup();
    },
    methods: {
      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;
        });
        /*getCMAGroup({page: 0, group_by: 'sszx'}).then((response) => {
          this.org = response.data;
        });*/
      },
      handleFilter() {
        this.getList();
      },
      resetFilter() {
        this.listQuery.search = '';
      },
    },
  }
</script>

<style scoped>

</style>
