<template>
  <div class="camerasMg">
    <el-row class="topBar">
      <el-col>
        <el-form :inline="true" :model="searchData">
          <el-form-item label>
            <el-input v-model="searchData.planTitle" placeholder="请输预案标题"></el-input>
          </el-form-item>
          <el-form-item label>
            <el-select v-model="searchData.planLevel" placeholder="请输预案等级">
              <el-option label="Ⅰ级" value="Ⅰ"></el-option>
              <el-option label="Ⅱ级" value="Ⅱ"></el-option>
              <el-option label="Ⅲ级" value="Ⅲ"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchFun()">
              <i class="el-icon-search"></i> 搜索
            </el-button>
            <el-button type="primary" @click="resetFun()">
              <i class="el-icon-refresh"></i> 重置
            </el-button>
          </el-form-item>
          <el-form-item class="fr" v-if="qyvisble">
            <el-button plain type="primary" @click="addFun()">
              <i class="el-icon-plus"></i> 添加预案
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table :data="tableData.pageData" stripe border style="width:100%;" :loading="false">
      <el-table-column width="50" type="index" label="序号"></el-table-column>
      <el-table-column prop="planTitle" label="预案标题"></el-table-column>
      <el-table-column prop="planLevel" label="预案等级">
        <template slot-scope="scope">
          <font>{{scope.row.planLevel + '级'}}</font>
        </template>
      </el-table-column>
      <el-table-column prop="planType" label="预案分类"></el-table-column>
      <el-table-column prop="isReported" label="是否上报" v-if="qyvisble">
        <template slot-scope="scope">
          <font v-if="scope.row.isReported == 0" class="colorM">
            已上报
          </font>
          <font v-else-if="scope.row.isReported != 0" class="colorR">
            未上报
          </font>
        </template>
      </el-table-column>
      <el-table-column prop="checkStatus" label="审核状态">
        <template slot-scope="scope">
          <font v-if="scope.row.checkStatus == 0" class="colorP">
            审核中
          </font>
          <font v-else-if="scope.row.checkStatus == 1" class="colorM">
            审核通过
          </font>
          <font v-else-if="scope.row.checkStatus == 2" class="colorR">
            审核未通过
          </font>
        </template>
      </el-table-column>
      <el-table-column prop="sourceFile" label="预案文件">
        <template slot-scope="scope">
          <span
            class="dbtn sd qiCr"
            @click="checkFile(scope.row.sourceFile)"
            v-if="scope.row.sourceFile != ''"
          >
            <i class="el-icon el-icon-view"></i>查看/下载
          </span>
          <!-- <a
            class="dbtn sd qiCr"
            :href="fileUrl(scope.row.sourceFile)"
            :download="fileUrl(scope.row.sourceFile)"
            v-if="scope.row.sourceFile != ''"
          >
            <i class="el-icon el-icon-download"></i>下载
          </a> -->
        </template>
      </el-table-column>
      <!-- <el-table-column prop="createTime" label="创建时间"></el-table-column> -->
      <el-table-column label="操作" width="300" align="center">
        <template slot-scope="scope">
          <el-button @click="editFun(scope.row)" size="small" v-if="qyvisble">
            <i class="el-icon-edit-outline"></i> 编辑
          </el-button>
          <el-button type="success" @click="checkFun(scope.row)" size="small" v-if="qyvisble" :disabled="scope.row.checkStatus != 0?true:false">
            <i class="el-icon-key"></i> 审核
          </el-button>
          <el-button type="primary" plain @click="editFun(scope.row)" size="small" v-if="!qyvisble">
            查看详情
          </el-button>
          <el-button type="danger" @click="delFun(scope.row)" size="small" v-if="qyvisble">
            <i class="el-icon-delete"></i> 删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total,sizes, prev, pager, next, jumper"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="PAGE.page"
      :page-size="PAGE.size"
    ></el-pagination>
    <PlansMgEdit
      v-if="dialogVisible"
      :dialogVisible="dialogVisible"
      :editForm="formData"
      :title="dialogTit"
      @dialogFun="closeDialog"
      @refreshTableData="getTableData"
      :key="zjKey"
    ></PlansMgEdit>
    <PlansMgCheck
      v-if="dialogVisible2"
      :dialogVisible="dialogVisible2"
      :editForm="formData"
      :title="dialogTit"
      @dialogFun="closeDialog"
      @refreshTableData="getTableData"
      :key="chKey"
    ></PlansMgCheck>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import PlansMgEdit from "./PlansMgEdit.vue";
import PlansMgCheck from "./PlansMgCheck.vue";
import METHOD from "@/utils/methods";
@Component({
  components: { PlansMgEdit, PlansMgCheck }
})
export default class CamerasMg extends Vue {
  @Provide() enterpriseId: String = "";
  @Provide() signId: String = "";
  @Provide() tableData: Object = { pageData: [], total: 0 };
  @Provide() PAGE: any = { page: 1, size: 10 };
  @Provide() searchData: any = {};
  @Provide() loading: Boolean = false;
  //编辑组件
  @Provide() dialogVisible: Boolean = false;
  @Provide() dialogVisible2: Boolean = false;
  @Provide() dialogTit: String = "新增预案";
  @Provide() formData: Object = {};
  @Provide() zjKey: any = 0;
  @Provide() chKey: any = 0;
  @Provide() qyvisble: boolean = true;//政府端隐藏项
  getTableData() {
    let that = this,
      param = Object.assign({enterpriseId: that.enterpriseId, isReported: that.enterpriseId ? '' : 0 }, that.PAGE, that.searchData);
    that.loading = true;
    METHOD.axiosPost(
      that,
      `/planInfo/selectPlanInfoList`,
      param,
      function(res: any) {
        that.loading = false;
        if (res.code == 0) {
          that.tableData = res.data;
        }
      }
    );
  }
  searchFun() {
    this.PAGE = { page: 1, size: 10 };
    this.getTableData();
  }
  resetFun() {
    this.PAGE = { page: 1, size: 10 };
    this.searchData = {};
    this.getTableData();
  }
  addFun() {
    this.zjKey++;
    this.dialogVisible = true;
  }
  editFun(row: any) {
    this.dialogTit = "编辑预案";
    this.formData = Object.assign({}, row);
    this.zjKey++;
    this.dialogVisible = true;
  }
  checkFun(row: any){
    this.dialogTit = "预案审核";
    this.formData = Object.assign({}, row);
    this.chKey++;
    this.dialogVisible2 = true;
  }
  delFun(row: any) {
    let that = this as any;
    METHOD.deleteFun(
      that,
      `/planInfo/deletePlanInfoById/${row.id}`,
      function() {
        that.getTableData();
      }
    );
  }
  handleSizeChange(val: any) {
    this.PAGE.size = val;
    this.getTableData();
  }
  handleCurrentChange(val: any) {
    this.PAGE.page = val;
    this.getTableData();
  }
  closeDialog() {
    //关闭窗口
    this.dialogVisible = false;
    this.dialogVisible2 = false;
    this.formData = {};
  }
  checkFile(url: any) {
    window.open(METHOD.URL + url,'_blank')
  }
  fileUrl(url: any){
    url = METHOD.URL + url;
  }
  created() {
    this.enterpriseId = METHOD.enterpriseId;
    // if( this.enterpriseId ){
    //   this.qyvisble = true;
    // }else{
    //   this.qyvisble = false;
    // }
    this.getTableData();
  }
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
</style>