<template>
  <div class="app-container">
    <el-card>
    <el-row :gutter="6">
      <el-col :xs="24" :md="4">
        <el-select
          v-model="listQuery.ssgs"
          placeholder="所属公司"
          @change="handleFilter2"
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="item in groupBy.ssgs"
            :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>
    <div style="margin-top: 10px">
       <el-popover
        placement="top"
        width="160"
        v-if="checkPermission(['ability_inspection'])"
        v-model="popovervisible"
      >
        <p>导入能力列表excel</p>
        <div style="text-align: left; margin: 0">
          <el-upload
            :action="upUrl"
            :on-success="handleUploadSuccess"
            accept=".xlsx"
            :headers="upHeaders"
            :show-file-list="false"
          >
            <el-button
              size="small"
              type="primary"
              @click="popovervisible = false"
              >上传导入</el-button
            >
          </el-upload>
        </div>
        
       
        <el-button slot="reference">导入校准能力</el-button>
         
      </el-popover>
       <el-button @click="delAll()"  v-if="checkPermission(['inspection_deletes'])">批量删除</el-button>
    </div>
    </el-card>
    <el-card style="margin-top: 10px">
    <el-table
      v-loading="listLoading"
      :data="istList.results"
      style="width: 100%; margin-top: 10px"
      border
      fit
      stripe
      highlight-current-row
      max-height="700"
      ref="filterTable"
       @selection-change="handleSelectionChange"
      @filter-change="filterChange"
    >
     <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column type="index" width="50" />
      <el-table-column label="大类序号">
        <template slot-scope="scope" v-if="showlight(scope.row.dlxh)!='null'"
          ><span v-html="showlight(scope.row.dlxh)" ></span
        ></template>
      </el-table-column>
      <el-table-column label="大类名称" >
        <template slot-scope="scope" v-if="showlight(scope.row.dlmc)!='null'"
          ><span v-html="showlight(scope.row.dlmc)"></span
        ></template>
      </el-table-column>
      <el-table-column label="序号">
        <template slot-scope="scope"
          ><span v-html="showlight(scope.row.dlxh)"></span
        ></template>
      </el-table-column>
      <el-table-column label="校准对象">
        <template slot-scope="scope"
          ><span v-html="showlight(scope.row.lbmc)"></span
        ></template>
      </el-table-column>
       <el-table-column label="被测量">
      <el-table-column label="序号">
        <template slot-scope="scope"
          ><span v-html="showlight(scope.row.bclxh)"></span
        ></template>
      </el-table-column>
       <el-table-column label="名称">
        <template slot-scope="scope"
          ><span v-html="showlight(scope.row.bclmc)"></span
        ></template>
      </el-table-column>
       </el-table-column>
        <el-table-column label="校准规范">
        <template slot-scope="scope"
          ><span v-html="showlight(scope.row.jzgc)"></span
        ></template>
      </el-table-column>
        <el-table-column label="测量范围">
        <template slot-scope="scope"
          ><span v-html="showlight(scope.row.clfw)"></span
        ></template>
      </el-table-column>
       <el-table-column label="准确度等级">
        <template slot-scope="scope"
          ><span v-html="showlight(scope.row.zqddj)"></span
        ></template>
      </el-table-column>
       <el-table-column label="说明">
        <template slot-scope="scope" v-if="showlight(scope.row.note)!='null'"
          ><span v-html="showlight(scope.row.note)"></span
        ></template>
      </el-table-column>
      
     
      <el-table-column
        align="header-center"
        label="所属公司"
        prop="ssgs"
        column-key="ssgs"
        :filters="groupBy.ssgs"
        :filter-multiple="false"
        fixed="right"
      >
         <template slot-scope="scope"
            ><span v-html="showlight(scope.row.ssgs)"></span
          ></template>
           </el-table-column>
    </el-table>

    <pagination
      v-show="istList.count > 0"
      :total="istList.count"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.page_size"
      @pagination="getList"
    />
    </el-card>
   
  </div>
</template>
<style >
.el-table-filter {
  width: 400px;
  max-height: 300px;
  overflow-y: auto;
}
</style>
<script>
import {getCorrectList,correctimport,getCorrecGroup,deletes
} from "@/api/correct";
import checkPermission from "@/utils/permission";
import { upUrl, upHeaders } from "@/api/file";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
const defaultCMA = {
  id: "",
  dlxh: null,
  dlmc: null,
};
const dflistQuery = {
  page: 1,
  page_size: 20,
  search:""
};
export default {
  components: { Pagination },
  data() {
    return {
      delarr: [],
      groupBy: { ssgs: []},
       upHeaders: upHeaders(),
      upUrl: upUrl(),
      istList: { count: 0 },
      listLoading: true,
      listQuery: Object.assign({}, dflistQuery),
     popovervisible: false,
  
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getList();
    this.getGroup();
  },
  methods: {
    showlight(val) {
      val = val + "";
      if (this.listQuery.search != "") {
        let searchList = this.listQuery.search.split(" ");
        for (var i = 0; i < searchList.length; i++) {
          val = val.replace(
            searchList[i],
            '<span style="color:red;font-weight:bold">' +
              searchList[i] +
              "</span>"
          );
        }
        return val;
      } else {
        return val;
      }
    },
    checkPermission,
    handleUploadSuccess(res, file) {
      const loading = this.openLoading();
      let data = { path: res.data.path };
      correctimport(data)
        .then((res) => {
          this.$message({
            message: "导入成功",
            type: "success",
          });
          loading.close();
          this.resetFilter();
        })
        .catch((error) => {
          loading.close();
        });
    },
    getList() {
      this.listLoading = true;
      getCorrectList(this.listQuery).then((response) => {
        if (response.data) {
          this.istList = response.data;
          console.log(this.istList)
        }
        this.listLoading = false;
      });
    },
    
   //所属公司列表
    getGroup() {
      for (let key in this.groupBy) {
        let data = Object.assign({}, this.listQuery);
        data.group_by = key;
        getCorrecGroup(data).then((response) => {
          this.groupBy[key] = response.data;
        });
      }
    },
     resetFilter() {
      (this.listQuery = Object.assign({}, dflistQuery)), this.getList();
      this.getGroup();
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
      this.getGroup();
    },
     handleFilter2() {
      this.listQuery.page = 1;
      this.getList();
    },
    
    handleDelete(scope) {
      this.$confirm("确认删除?", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(async () => {
          await deleteCMA(scope.row.id);
          this.istList.splice(scope.row.index, 1);
          this.$message({
            type: "success",
            message: "成功删除!",
          });
        })
        .catch((err) => {
          console.error(err);
        });
    },
      handleSelectionChange(val) {
                this.multipleSelection = val;
            },
     delAll() {
         this.$confirm("确认删除?", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(async () => {
        const lengths = this.multipleSelection.length;
        for (let i = 0; i < lengths; i++) {
               this.delarr.push(this.multipleSelection[i].id);
         }
     
      let data = { ids: this.delarr };
      deletes(data)
        .then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
           this.getList();
        })
     })
        .catch((err) => {
          console.error(err);
        });
    },
            
  
    filterChange(obj) {
      for (let key in obj) {
        this.listQuery[key] = obj[key][0];
      }
      this.listQuery.page = 1;
      this.getList();
    },
    async confirm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          const isEdit = this.dialogType === "edit";
          if (isEdit) {
            updateCMA(this.cma.id, this.cma).then((res) => {
              if (res.code >= 200) {
                this.getList();
                this.dialogVisible = false;
                this.$notify({
                  title: "成功",
                  message: "编辑成功",
                  type: "success",
                  duration: 2000,
                });
              }
            });
          } else {
            createCMA(this.cma).then((res) => {
              if (res.code >= 200) {
                this.getList();
                this.dialogVisible = false;
                this.$notify({
                  title: "成功",
                  message: "新增成功",
                  type: "success",
                  duration: 2000,
                });
              }
            });
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>
