<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="planBillNo"/>
        <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>
