<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.trim="query.name" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="负责部门">
            <deptSelect :value.sync="query.chargeDeptCode"/>
          </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(null,null)"
        >新增
        </el-button>
      </el-button-group>
    </div>
    <el-divider style="margin: 15px"></el-divider>
    <el-table :data="list" @row-click="rowClick" v-loading="loading" click-row-light
              highlight-current-row>
      <el-table-column label="序号" width="50" type="index"/>
      <el-table-column label="计划名称" width="150" prop="name"/>
      <el-table-column label="负责部门" width="120" prop="chargeDeptName"/>
      <el-table-column label="设备数量" width="120" prop="deviceCount"/>
      <el-table-column label="单据状态" width="120" prop="chargeDeptName">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status==1" type="warning">草稿</el-tag>
          <el-tag v-if="scope.row.status==2" type="success">已提交</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="执行状态" width="120" prop="chargeDeptName">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isActive==true" type="success">执行中</el-tag>
          <el-tag v-if="scope.row.isActive==false" type="info">未执行</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="开始日期" width="150" prop="startDate"/>
      <el-table-column label="结束日期" width="150" prop="endDate"/>
      <el-table-column label="执行频率" width="160" prop="frequency">
        <template slot-scope="scope">
          {{ `${scope.row.frequency}天` }}
        </template>
      </el-table-column>
      <el-table-column label="已执行次数" width="200" prop="execCount"/>
      <el-table-column label="备注" width="200" prop="remark"/>
      <el-table-column label="操作" width="200" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click.stop="openCreate(scope.row.planId,scope.row)">
            编辑
          </el-button>
          <el-button type="text" @click="deviceCheckGenFunc(scope.row)"
          >生成保养单
          </el-button>
          <el-button type="text" @click.stop="delplan(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-card>
      <div slot="header" class="clearfix">
        <div class="fl">
          {{ `计划详情 ${clickRow ? '——' + clickRow.name : ''}` }}
        </div>
      </div>
      <el-table :data="detailList"
                v-loading="detailLoading" click-row-light
                highlight-current-row>
        <el-table-column label="序号" width="50" type="index"/>
        <el-table-column label="科室名称" prop="deptName"/>
        <el-table-column label="设备编号" prop="deviceCode"/>
        <el-table-column label="最小销售标识" prop="nameCode"/>
        <el-table-column label="名称" prop="productName"/>
        <el-table-column label="规格型号" prop="ggxh"/>
        <el-table-column label="计量单位" prop="measname"/>
        <el-table-column label="生产企业" prop="manufactory"/>
        <el-table-column label="注册/备案号" prop="zczbhhzbapzbh"/>
        <el-table-column label="操作" width="120">
          <template slot-scope="prop">
            <el-button type="text" @click="setProject(prop.row)"
            >保养项目
            </el-button>
            <!--            <el-button type="text" @click="delDetail(prop.row)"-->
            <!--            >移除-->
            <!--            </el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="detailTotal>0"
        :total="detailTotal"
        :page.sync="detailQuery.page"
        :limit.sync="detailQuery.limit"
        @pagination="getDetailList"
      />
    </el-card>


    <el-dialog
      title="编辑保养项目"
      :visible="true"
      v-if="projectVisible"
      @close="projectVisible = false"
      width="80%"
    >
      <DevicePlanProject style="margin: 0"
                         :planId="detailQuery.planId"
                         :projectItem="projectItem"
                         :pullData="planData"
                         :closeAddDevice="closeAddDevice"/>
    </el-dialog>

    <!--新增保养计划-->
    <el-dialog
      :title="planEditTitle"
      :visible="true"
      v-if="createFlag"
      @close="createFlag = false"
      width="80%"
    >
      <devicePlanEdit :originData="planData"
                      :closePlanEdit="closePlanEdit"
                      :createFlag="createFlag"/>
    </el-dialog>




  </div>
</template>


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


<style scoped>

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