<template>
  <div class="app-container">
        <div>
          <el-input
            v-model="listQuery.search"
            placeholder="项目/标准/编号/中心"
            style="width: 600px;"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          />
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >搜索</el-button>
          <el-button
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            icon="el-icon-refresh-left"
            @click="resetFilter"
          >刷新重置</el-button>
        </div>
        <div style="margin-top:10px">
          <el-button type="primary" icon="el-icon-plus" @click="handleAdd" v-if="checkPermission(['cma_create'])">新增</el-button>
          <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=".rar"
  :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>
        </div>
        <el-table
          v-loading="listLoading"
          :data="cmaList.results"
          style="width: 100%;margin-top:10px;"
          border
          fit
          stripe
          highlight-current-row
          max-height="600"
        >
          <el-table-column type="index" width="50" />
          <el-table-column align="center" label="大类名称">
            <template slot-scope="scope">{{ scope.row.dlmc }}</template>
          </el-table-column>
          <el-table-column align="header-center" label="类别名称">
            <template slot-scope="scope">{{ scope.row.lbmc }}</template>
          </el-table-column>
          <el-table-column align="header-center" label="项目序号">
            <template slot-scope="scope">{{ scope.row.xmxh }}</template>
          </el-table-column>
          <el-table-column align="header-center" label="项目名称">
            <template slot-scope="scope">{{ scope.row.xmmc }}</template>
          </el-table-column>
          <el-table-column align="header-center" label="标准名称">
            <template slot-scope="scope">{{ scope.row.bzmc }}</template>
          </el-table-column>
          <el-table-column align="header-center" label="标准编号">
            <template slot-scope="scope">{{ scope.row.bzbh }}</template>
          </el-table-column>
          <el-table-column align="header-center" label="所属中心">
            <template slot-scope="scope">{{ scope.row.sszx }}</template>
          </el-table-column>
          <el-table-column align="header-center" label="限制范围">
            <template slot-scope="scope">{{ scope.row.xzfw}}</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-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>
<script>
import { getCMAList, createCMA, deleteCMA, updateCMA, importCMA } 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,

};
export default {
  components: { Pagination },
  data() {
    return {
      cma: defaultCMA,
      upHeaders: upHeaders(),
      upUrl: upUrl(),
      cmaList: {count:0},
      listLoading: true,
      listQuery: {
        page: 1,
        page_size: 20
      },
      enabledOptions: [
        { key: "true", display_name: "激活" },
        { key: "false", display_name: "禁用" }
      ],
      dialogVisible: false,
      dialogType: "new",
      popovervisible: false,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getList()
  },
  methods: {
    checkPermission,
    handleUploadSuccess(res, file) {
      if (res.code >= 200) {
        const loading = this.openLoading()
        let data = {path:res.data.path}
        importCMA(data).then(res=>{
          if(res.code >= 200){
      this.$message({
          message: '导入成功',
          type: 'success'
        })
        loading.close()
        this.resetFilter()
          }
        })

      }else{
        this.$message.error("解析失败!");
      }
    },
    getList() {
      this.listLoading = true;
      getCMAList(this.listQuery).then(response => {
        if (response.data) {
          this.cmaList = response.data
        }
        this.listLoading = false
      })
    },
    resetFilter() {
      this.listQuery = {
        page: 1,
        page_size: 20
      }
      this.getList()
    },
    handleFilter() {
      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 => {
          console.error(err);
        });
    },
    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>
