<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)"
          >新增
          </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="150" prop="chargeDeptName"/>
        <el-table-column label="设备数量" width="150" prop="deviceCount"/>
        <el-table-column label="执行情况" width="150" prop="chargeDeptName">
          <template 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 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="240" fixed="right">
          <template scope="scope">
            <el-button type="text" @click.stop="openCreate(scope.row.planId)">
              编辑
            </el-button>
            <el-button type="text" @click.stop="openCreate(scope.row.planId,null,1)">
              添加巡检设备
            </el-button>
            <el-button type="text" @click.stop="delplan(scope.row)">
              删除
            </el-button>
            <el-button type="text" @click="deviceCheckGenFunc(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 class="fr" v-if="clickRow">
          <el-button type="primary" @click="openCreate(clickRow.planId,null,1)">选择设备</el-button>
          <el-button type="" @click="getDetailList">刷新</el-button>
        </div>
      </div>
      <el-table :data="detailList" v-loading="detailLoading" ref="table" row-key="productId"
                @row-click="(row)=>{$refs.table.toggleRowExpansion(row)}" @expand-change="handleExpendRow"
                :expandRowKeys="expandRowKeys">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-card class="mb10" v-if="scope.row.detailData!=null">
              <el-form :model="scope.row.detailData.query" inline>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="设备编号">
                      <el-input v-model="scope.row.detailData.query.deviceCode" clearable/>
                    </el-form-item>
                    <el-button-group>
                      <el-button
                        type="primary"
                        icon="el-icon-refresh"
                        @click="onReset"
                      >重置
                      </el-button>
                      <el-button type="primary" icon="el-icon-search"
                                 @click="scope.row.detailData.query.page=1;getRowDetailList(scope.row.detailData)"
                      >查询
                      </el-button>
                    </el-button-group>
                  </el-col>
                </el-row>
              </el-form>
              <el-table :data="scope.row.detailData.list"
                        v-loading="scope.row.detailData.loading">
                <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 scope="prop">
                    <el-button type="text" @click="openCreate(prop.row.planId,prop.row,2,true)"
                    >巡检项目
                    </el-button>
                    <el-button type="text" @click="delDetail(prop.row)"
                    >删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                v-show="scope.row.detailData.total>0"
                :total="scope.row.detailData.total"
                :page.sync="scope.row.detailData.query.page"
                :limit.sync="scope.row.detailData.query.limit"
                @pagination="getRowDetailList(scope.row.detailData)"
              />
            </el-card>
          </template>
        </el-table-column>
        <el-table-column label="序号" width="50" type="index"/>
        <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="count"/>
        <el-table-column label="生产企业" prop="manufactory"/>
        <el-table-column label="注册/备案号" prop="zczbhhzbapzbh"/>
        <el-table-column label="操作" width="120">
          <template scope="scope">
            <el-button type="text" @click.stop="openCreate(scope.row.planId,scope.row,2)"
            >巡检项目
            </el-button>
            <el-button type="text" @click.stop="delDetail(scope.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="`编辑巡检计划信息${planData.planId?'--('+planData.name+')':''}`"
      :visible="true"
      v-if="createFlag"
      @close="createFlag = false"
      width="80%"
    >
      <el-card>
        <div slot="header" class="clearfix">
          <div class="fl"><span style="color: red;">* 巡检任务单将于执行周期的00:05分生成</span></div>
          <div class="fr">
            <el-button v-if="createActive==0" @click="changeActive(true)" type="primary">保存</el-button>
            <el-button v-else @click="changeActive(false)" type="primary">上一步</el-button>
            <el-button @click="createFlag = false;query.page=1;getList()">关闭</el-button>
            <el-button type="success" v-if="createActive==2" @click="changeActive(false)">完成</el-button>
          </div>
        </div>
        <div>
          <el-steps align-center :active="createActive" finish-status="success" process-status="finish">
            <el-step title="基础信息"/>
            <el-step title="选择设备"/>
            <el-step title="选择巡检项目" :description="createActive==2?itemQuery.title:''"/>
          </el-steps>
        </div>
        <el-form v-if="createActive==0" :model="planData" :rules="formRule" ref="saveForm" label-width="auto">
          <el-row :gutter="20">
            <el-col>
              <el-form-item label="计划名称" prop="name">
                <el-input v-model.trim="planData.name" show-word-limit maxlength="100" clearable/>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="负责部门" prop="chargeDeptCode">
                <deptSelect :value.sync="planData.chargeDeptCode"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="执行区间" prop="dateInterval">
                <el-date-picker
                  style="width: 100%"
                  v-model.trim="planData.dateInterval"
                  type="daterange"
                  align="right"
                  editable
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item prop="frequency">
                <template slot="label">
                  执行周期（次）
                  <el-tooltip class="item" effect="dark" content="执行周期（次），例：每30天执行一次"
                              placement="top">
                    <el-icon class="el-icon-question"/>
                  </el-tooltip>
                </template>
                <el-input-number :min="1" :max="999999" v-model.trim="planData.frequency"/>
                <span class="ml10">天</span>
                <span class="ml10">快捷选项：</span>
                <el-button type="" @click="planData.frequency=30">一个月</el-button>
                <el-button type="" @click="planData.frequency=30*3">三个月</el-button>
                <el-button type="" @click="planData.frequency=30*6">半年</el-button>
                <el-button type="" @click="planData.frequency=365">一年</el-button>
                <el-button type="" @click="planData.frequency=365*2">两年</el-button>
                <el-button type="" @click="planData.frequency=365*3">三年</el-button>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="备注">
                <el-input type="textarea" v-model.trim="planData.remark" resize="none" :autosize="{minRows:8,maxRows:8}"
                          show-word-limit maxlength="500" clearable/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-card v-show="createActive==1">
          <div slot="header" class="clearfix">
            <div class="fr">
              <el-button type="primary" @click="chooseDeviceFlag=true">选择设备</el-button>
              <el-button type="" @click="getDetailList">刷新</el-button>
            </div>
          </div>
          <el-table :data="detailList" v-loading="detailLoading" ref="dialogTable"
                    :row-key="row=>{return row.productId+'_'+row.planId}"
                    @row-click="(row)=>{$refs.dialogTable.toggleRowExpansion(row)}" @expand-change="handleExpendRow"
                    :expandRowKeys="dialogExpandRowKeys">
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-card class="mb10" v-if="scope.row.detailData">
                  <el-form :model="scope.row.detailData.query" inline>
                    <el-row :gutter="20">
                      <el-col :span="24">
                        <el-form-item label="设备编号">
                          <el-input v-model="scope.row.detailData.query.deviceCode" clearable/>
                        </el-form-item>
                        <el-button-group>
                          <el-button
                            type="primary"
                            icon="el-icon-refresh"
                            @click="onReset"
                          >重置
                          </el-button>
                          <el-button type="primary" icon="el-icon-search"
                                     @click="scope.row.detailData.query.page=1;getRowDetailList(scope.row.detailData)"
                          >查询
                          </el-button>
                        </el-button-group>
                      </el-col>

                    </el-row>
                  </el-form>
                  <el-table :data="scope.row.detailData.list"
                            v-loading="scope.row.detailData.loading" row-key="deviceCode">
                    <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 scope="prop">
                        <el-button type="text" @click="openCreate(prop.row.planId,prop.row,2,true)"
                        >巡检项目
                        </el-button>
                        <el-button type="text" @click="delDetail(prop.row)"
                        >删除
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <pagination
                    v-show="scope.row.detailData.total>0"
                    :total="scope.row.detailData.total"
                    :page.sync="scope.row.detailData.query.page"
                    :limit.sync="scope.row.detailData.query.limit"
                    @pagination="getRowDetailList(scope.row.detailData)"
                  />
                </el-card>
              </template>
            </el-table-column>

            <el-table-column label="序号" width="50" type="index"/>
            <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="count"/>
            <el-table-column label="生产企业" prop="manufactory"/>
            <el-table-column label="注册/备案号" prop="zczbhhzbapzbh"/>
            <el-table-column label="操作" width="120">
              <template scope="scope">
                <el-button type="text" @click.stop="changeActive(true,scope.row)"
                >巡检项目
                </el-button>
                <el-button type="text" @click.stop="delDetail(scope.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-card v-show="createActive == 2">
          <div slot="header" class="clearfix">
            <div class="fr">
              <el-button type="primary" @click="chooseItemList=[];chooseDetailItemFlag=true">选入巡检项目</el-button>
              <el-button type="" @click="getDetailItemList">刷新</el-button>
            </div>
          </div>
          <el-table :data="itemList" ref="itemTable" v-loading="itemLoading" row-key="itemCode">
            <el-table-column label="序号" width="50" type="index"/>
            <el-table-column label="项目编码" width="150" prop="itemCode"/>
            <el-table-column label="项目名称" width="150" prop="name"/>
            <el-table-column label="项目内容" width="500" prop="content"/>
            <el-table-column label="操作" width="50">
              <template scope="scope">
                <el-button type="text"
                           v-if="!itemQuery.deviceCode&&!scope.row.deviceCode || itemQuery.deviceCode&&scope.row.deviceCode"
                           @click="delDetailItem(scope.row)"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="itemTotal>0"
            :total="itemTotal"
            :page.sync="itemQuery.page"
            :limit.sync="itemQuery.limit"
            @pagination="getDetailItemList"
          />
        </el-card>
      </el-card>

    </el-dialog>


    <el-dialog width="80%" title="选择设备"
               :visible="true"
               v-if="chooseDeviceFlag"
               @close="chooseDeviceFlag = false"
    >
      <el-card>
        <div class="align-right" v-if="chooseDeviceList&&chooseDeviceList.length>0">
          <el-button class="mr20" style="font-size: 20px" type="primary" @click="chooseDevice">确定选入</el-button>
        </div>
        <planChooseDevice style="margin: 0" :planId="detailQuery.planId" :selectChangeFunc="deviceSelectChangFunc"/>
      </el-card>

    </el-dialog>


    <el-dialog width="80%" title="选择巡检项目"
               :visible="true"
               v-if="chooseDetailItemFlag"
               @close="chooseDetailItemFlag = false"
    >
      <el-card>
        <div class="align-right" v-if="chooseItemList&&chooseItemList.length>0">
          <el-button class="mr20" style="font-size: 20px" type="primary" @click="chooseDetailItem">确定选入</el-button>
        </div>
        <DeviceCheckItemDict style="margin: 0" :is-choose="true" :selectChangFunc="itemSelectChangFunc"/>
      </el-card>

    </el-dialog>
  </div>

</template>

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

<style scoped>

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