<template>
  <div>
    <el-card>

      <el-form :model="query" v-if="showSearch" label-width="auto">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="项目编码">
              <el-input v-model="query.code" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目名称">
              <el-input v-model="query.name" clearable/>
            </el-form-item>
          </el-col>
          <!--<el-col :span="6">-->
          <!--  <el-form-item label="项目类型">-->
          <!--    <el-select v-model="query.type" clearable placeholder="请选择">-->
          <!--      <el-option-->
          <!--        :key="index"-->
          <!--        :label="item.label"-->
          <!--        :value="item.value"-->
          <!--        v-for="(item, index) in options">-->
          <!--      </el-option>-->
          <!--    </el-select>-->
          <!--  </el-form-item>-->
          <!--</el-col>-->
        </el-row>
      </el-form>
      <div class="top-right-btn">
        <el-button-group>
          <el-button icon="el-icon-view" type="primary" @click="showSearch = !showSearch">显示/隐藏搜索栏</el-button>
          <el-button
              type="primary"
              icon="el-icon-refresh"
              @click="onReset"
          >重置
          </el-button>
          <el-button type="primary" icon="el-icon-search" @click="search"
          >查询
          </el-button>
          <el-button type="primary" icon="el-icon-plus" @click="openCreate"
          >新增
          </el-button>
        </el-button-group>
      </div>
      <el-divider style="margin: 15px"></el-divider>

      <el-table :data="list" @selection-change="(val)=>{if(isChoose){selectChangFunc(val)}}"
                @row-click="(row)=>{if(isChoose){$refs.table.toggleRowSelection(row)}}" ref="table"
                v-loading="loading"
                click-row-light>
        <el-table-column type="selection" width="55" v-if="isChoose"></el-table-column>
        <el-table-column label="序号" width="50" type="index"/>
        <el-table-column label="项目编码" width="150" prop="code"/>
        <el-table-column label="项目名称" width="200" prop="name"/>
        <el-table-column label="项目内容" width="500" prop="content"/>
        <el-table-column label="项目类型" width="120" prop="type">
          <template slot-scope="scope">
            <div v-if="scope.row.type == 1">巡检项目</div>
            <div v-if="scope.row.type == 2">保养项目</div>
          </template>
        </el-table-column>
        <el-table-column label="创建人" width="120" prop="createUserName"/>
        <el-table-column label="创建时间" width="140" prop="createTime"/>
        <el-table-column label="操作" v-if="!isChoose" fixed="right" width="80">
          <template slot-scope="scope">
            <el-button type="text"@click="delFunc(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
          v-show="total>0"
          :total="total"
          :page.sync="query.page"
          :limit.sync="query.limit"
          @pagination="getList"
      />
    </el-card>

    <el-dialog
        :visible="createFlag"
        v-if="createFlag"
        width="50%"
        title="创建巡检项目"
        @close="createFlag = false"
    >
      <el-card>
        <div slot="header" class="clearfix">
          <div class="fr">
            <el-button @click="createFlag = false">取消</el-button>
            <el-button type="primary" @click="saveFunc" :loading="saveLoading">保存</el-button>
          </div>
        </div>
        <el-form :model="saveData" ref="saveForm" :rules="formRule" label-width="auto">
          <el-row>
            <el-col>
              <el-form-item label="项目编码" prop="code">
                <el-input v-model="saveData.code" clearable show-word-limit maxlength="20">
                  <el-button slot="append" @click="genCode">生成</el-button>
                </el-input>

              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="项目名称" prop="name">
                <el-input v-model="saveData.name" clearable show-word-limit maxlength="100"/>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="项目内容" prop="content">
                <el-input v-model="saveData.content" type="textarea" resize="none"
                          :autosize="{ minRows: 8, maxRows: 8 }" clearable show-word-limit maxlength="500"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </el-dialog>

  </div>
</template>

<script src="./js/deviceUpkeepItemDict.js"/>

<style scoped>

/deep/ .el-dialog__body {
  padding: 0 0 20px 0;
}

</style>
