<template>
  <div class="app-container">
    <el-card>
    <el-row :gutter="6">
      <el-col :xs="24" :md="4">
        <el-select
          v-model="listQuery.sszx"
          placeholder="所属公司"
          @change="handleFilter2"
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="item in groupBy.sszx"
            :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_import'])"
        v-model="popovervisible"
      >
        <p>导入能力列表压缩包.</p>
        <div style="text-align: left; margin: 0">
          <el-upload
            :action="upUrl"
            :on-success="handleUploadSuccess"
            accept=".zip"
            :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(['cma_deletes'])">批量删除</el-button>
    </div>
    </el-card>
    <el-card style="margin-top: 10px">
    <el-table
      v-loading="listLoading"
      :data="cmaList.results"
      style="width: 100%;"
      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"
          ><span v-html="showlight(scope.row.dlmc)" v-if="scope.row.dlmc"></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="项目序号">
        <template slot-scope="scope"
          ><span v-html="showlight(scope.row.xmxh)"></span
        ></template>
      </el-table-column>
      <el-table-column label="项目名称">
        <template slot-scope="scope"
          ><span v-html="showlight(scope.row.xmmc)"></span
        ></template>
      </el-table-column>
      <el-table-column label="标准名称" width="300">
        <template slot-scope="scope"
          ><span v-html="showlight(scope.row.bzmc)"></span
        ></template>
      </el-table-column>
      <el-table-column label="标准编号">
        <template slot-scope="scope"
          ><span v-html="showlight(scope.row.bzbh)" v-if="scope.row.bzbh"></span
        ></template>
      </el-table-column>
      <el-table-column label="限制范围">
        <template slot-scope="scope"
          ><span v-html="showlight(scope.row.xzfw)" v-if="scope.row.xzfw"></span
        ></template>
      </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-column
        label="关联资质"
        prop="glzz"
        column-key="glzz"
        :filters="groupBy.glzz"
        :filter-multiple="false"
      >
        <template slot-scope="scope">{{ scope.row.glzz }}</template>
      </el-table-column>
      <el-table-column
        align="header-center"
        label="所属中心"
        prop="sszx"
        column-key="sszx"
        :filters="groupBy.sszx"
        :filter-multiple="false"
        fixed="right"
      >
        <template slot-scope="scope">{{ scope.row.sszx }}</template>
      </el-table-column>
      <!-- <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                :disabled="!checkPermission(['cma_update'])"
                type="primary"
                size="small"
                icon="el-icon-edit"
                @click="handleEdit(scope)"
              />
              <el-button
                :disabled="!checkPermission(['cma_delete'])"
                type="danger"
                size="small"
                icon="el-icon-delete"
                @click="handleDelete(scope)"
              />
            </template>
          </el-table-column> -->
    </el-table>
    <pagination
      v-show="cmaList.count > 0"
      :total="cmaList.count"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.page_size"
      @pagination="getList"
    />
    </el-card>
    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogType === 'edit' ? '编辑' : '新增'"
    >
      <el-form
        ref="Form"
        :model="cma"
        label-width="80px"
        label-position="right"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="cma.name" placeholder="姓名" />
        </el-form-item>
        <el-form-item label="账户" prop="username">
          <el-input v-model="cma.username" placeholder="账户" />
        </el-form-item>
      </el-form>
      <div style="text-align: right">
        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirm('Form')">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style >
.el-table-filter {
  width: 400px;
  max-height: 300px;
  overflow-y: auto;
}
</style>
<script>
import {
  getCMAList,
  createCMA,
  deleteCMA,
  deletes,
  updateCMA,
  importCMA2,
  getCNASList,
  importCNAS,
  getCMAGroup,
} from "@/api/cma";
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,
  type: "sub",
  search: "",
};
export default {
  components: { Pagination },
  data() {
    return {
      cma: defaultCMA,
      upHeaders: upHeaders(),
      upUrl: upUrl(),
      delarr: [],
      groupBy: { sszx: [], glzz: [] },
      cmaList: { count: 0 },
      listLoading: true,
      listQuery: Object.assign({}, dflistQuery),
      enabledOptions: [
        { key: "true", display_name: "激活" },
        { key: "false", display_name: "禁用" },
      ],
      dialogVisible: false,
      dialogType: "new",
      popovervisible: false,
    };
  },
  computed: {},
  watch: {},
  created() {
    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,
    handleUploadSuccess(res, file) {
      const loading = this.openLoading();
      let data = { path: res.data.path };
      importCMA2(data)
        .then((res) => {
          this.$message({
            message: "导入成功",
            type: "success",
          });
          loading.close();
          this.resetFilter();
        })
        .catch((error) => {
          loading.close();
        });
    },
    getList() {
      this.listLoading = true;
      getCMAList(this.listQuery).then((response) => {
        if (response.data) {
          this.cmaList = response.data;
        }
        this.listLoading = false;
      });
    },
    getGroup() {
      for (let key in this.groupBy) {
        let data = Object.assign({}, this.listQuery);
        data.group_by = key;
        getCMAGroup(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();
    },
    handleAdd() {
      this.cma = Object.assign({}, defaultCMA);
      this.dialogType = "new";
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["Form"].clearValidate();
      });
    },
    handleEdit(scope) {
      this.cma = Object.assign({}, scope.row); // copy obj
      this.dialogType = "edit";
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["Form"].clearValidate();
      });
    },
    handleDelete(scope) {
      this.$confirm("确认删除?", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(async () => {
          await deleteCMA(scope.row.id);
          this.cmaList.splice(scope.row.index, 1);
          this.$message({
            type: "success",
            message: "成功删除!",
          });
        })
        .catch((err) => {
        });
    },
   
    delAll() {
         this.$confirm("确认删除?", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(async () => {
        const length = this.multipleSelection.length;
        for (let i = 0; i < length; 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) => {
        });
    },
            
    handleSelectionChange(val) {
                this.multipleSelection = val;
            },
    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>
