<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.changeOrderId" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="备注">
              <el-input v-model="query.remark" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="操作部门">
              <deptSelect :value.sync="query.deptCode"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="目标部门">
              <deptSelect :value.sync="query.toDeptCode"/>
            </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 v-if="hasOrderCache" type="primary" icon="el-icon-plus" @click="openCacheOrder"
          >打开挂单
          </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>
        <el-table-column label="序号" width="50" type="index"/>
        <el-table-column label="单号" width="150" prop="orderId"/>
        <el-table-column label="类型" width="90" prop="typeName">
          <template scope="scope" >
            <el-tag :type="`${deviceChangeType[scope.row.type].tagType}`">{{scope.row.typeName}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="120" prop="statusName">
          <template scope="scope" >
            <el-tag :type="`${deviceChangeStatus[scope.row.status].tagType}`">{{scope.row.statusName}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作部门" width="100" prop="deptName"/>
        <el-table-column label="目标部门" width="100" prop="toDeptName"/>
        <el-table-column label="创建人" width="100" prop="createUserName"/>
        <el-table-column label="创建时间" width="140" prop="createTime"/>
        <el-table-column label="确认人" width="100" prop="confirmUserName"/>
        <el-table-column label="确认时间" width="140" prop="confirmTime"/>
        <el-table-column label="确认备注" width="180" prop="confirmRemark"/>
        <el-table-column label="备注" width="180" prop="remark"/>
        <el-table-column label="操作" width="120" fixed="right">
          <template scope="scope">
            <el-button type="text"
                       v-if="scope.row.status==deviceChangeStatus.WAIT_CONFIRM.key
                       &&scope.row.toDeptCode==locDeptCode"
                       @click="confirm(scope.row)"
            >接收
            </el-button>
            <el-button type="text"
                       v-if="scope.row.status==deviceChangeStatus.WAIT_CONFIRM.key
                       &&scope.row.toDeptCode==locDeptCode"
                       @click="reject(scope.row)"
            >拒绝
            </el-button>
            <el-button type="text"
                       v-if="scope.row.status==deviceChangeStatus.WAIT_CONFIRM.key
                       &&scope.row.deptCode==locDeptCode"
                       @click="cancel(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 + '(' + clickRow.orderId + ')' : ''}` }}
        </div>
        <div v-if="clickRow" class="fr">
          <el-button @click="getDetailList">刷新</el-button>
        </div>
      </div>
      <div v-if="clickRow">
        <div class="mt20 mb20">
          <el-steps align-center :active="stepActive" finish-status="success" :process-status="processStatus">
            <el-step :title="deviceChangeStatus.WAIT_CONFIRM.desc" :description="`备注说明：${clickRow.remark||''}`"/>
            <el-step v-if="!stepActive"
                     :title="`${deviceChangeStatus.FINISH.desc}/${deviceChangeStatus.CANCEL.desc}/${deviceChangeStatus.REJECT_CONFIRM.desc}`"/>
            <el-step v-else :title="clickRow.statusName" :description="`确认备注：${clickRow.confirmRemark||''}`"/>
          </el-steps>
        </div>
      </div>
      <el-table :data="detailList" v-loading="detailLoading">
        <el-table-column label="序号" width="50" type="index"/>
        <el-table-column label="设备编码" width="150" prop="deviceCode"/>
        <el-table-column label="最小销售标识" width="150" prop="nameCode"/>
        <el-table-column label="名称" width="150" prop="productName"/>
        <el-table-column label="规格型号" width="160" prop="ggxh"/>
        <el-table-column label="计量单位" width="100" prop="measname"/>
        <el-table-column label="批次号" width="100" prop="batchNo"/>
        <el-table-column label="序列号" width="100" prop="serialNo"/>
        <el-table-column label="生产日期" width="140" prop="productionDate"/>
        <el-table-column label="过期时间" width="140" prop="expireDate"/>
        <el-table-column label="供应商" width="100" prop="supName"/>
        <el-table-column label="udi码" width="150" prop="udi"/>
        <el-table-column label="注册/备案号" width="150" prop="zczbhhzbapzbh"/>
        <el-table-column label="生产企业" width="180" prop="manufactory"/>
        <!--        <el-table-column label="操作" width="90" fixed="right">-->
        <!--          <template scope="scope">-->
        <!--            <el-button type="text">详情</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 width="80%" title="创建变更单" custom-class="" :visible="true" v-if="showCreateDialog"
               @close="showCreateDialog = false">

      <el-card class="dialogCard" style="margin-top: -30px;">
        <div slot="header" class="clearfix">
          <div class="fl">
            <span>
              类型：<el-tag :type="this.type.tagType" >{{this.type.desc}}</el-tag>
            </span>
              <span class="ml10">当前部门：{{locDeptName}}</span>
          </div>
          <div class="fr">
            <el-button @click="showCreateDialog = false">关闭</el-button>
            <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 v-if="createActive==1&&itemList.length>0" type="primary" @click="saveForm">提交</el-button>
            <el-button v-if="createActive==1&&itemList.length>0" type="primary" @click="saveCache">挂起</el-button>
          </div>
        </div>
        <div>
          <el-steps align-center :active="createActive" finish-status="success" process-status="finish">
            <el-step title="基础信息"/>
            <el-step title="选择设备"/>
          </el-steps>
        </div>
        <el-form :disabled="createActive==1" :model="createData" :rules="createRule" ref="createForm"
                 label-width="auto">
          <el-row>
            <el-col>
              <el-form-item label="目标部门" prop="toDeptCode" v-if="createData.type==deviceChangeType.CHANGE.key">
                <deptSelect class="width-full" :notCode="locDeptCode" :value.sync="createData.toDeptCode"></deptSelect>
              </el-form-item>
            </el-col>
<!--            <el-col>-->
<!--              <el-form-item label="描述/名称" prop="name">-->
<!--                <el-input clearable show-word-limit maxlength="200" v-model="createData.name"/>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
            <el-col>
              <el-form-item label="备注">
                <el-input type="textarea" resize="none" :autosize="{ minRows: 4, maxRows: 4 }" clearable show-word-limit
                          maxlength="300"
                          v-model="createData.remark"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class="dialogCard" :class="{'fullScreen':fullScreenFlag}" v-if="createActive==1"
               style="margin-top: 10px;">
        <div slot="header" class="clearfix">
          <div class="fr">
            <el-button type="primary" @click="openChoose">选择设备</el-button>
            <el-switch
              class="ml10"
              v-model="fullScreenFlag"
              active-text="全屏">
            </el-switch>
          </div>
        </div>
        <div class="mb10">
          <el-tag class="ml5 mb5" type="info" color="#00a1ff" v-for="(v,i) in itemMap">{{v[0]}} * {{v[1]}}条</el-tag>
        </div>
        <el-table :data="itemList" width="100%" :height="fullScreenFlag?'93vh':'40vh'">
          <el-table-column label="序号" type="index" width="50"/>
          <el-table-column v-if="createData.type==deviceChangeType.ADD.key" label="设备号" prop="deviceCode"
                           width="200">
            <template scope="scope">
              <el-row v-if="scope.row.editFlag">
                <el-col :span="20"><el-input v-model="scope.row.deviceCode" show-word-limit maxlength="11"/></el-col>
                <el-col :span="4"><el-button class="ml5" type="text" @click="genCode(scope.row)">生成</el-button></el-col>
              </el-row>
              <span v-else>{{scope.row.deviceCode}}</span>
            </template>
          </el-table-column>
          <el-table-column v-else label="设备号" prop="deviceCode" width="140"/>
          <el-table-column label="最小销售标识" width="150" prop="nameCode"/>
          <el-table-column label="名称" width="160" prop="productName"/>
          <el-table-column label="规格型号" width="160" prop="ggxh"/>
          <el-table-column label="计量单位" width="100" prop="measname"/>
          <el-table-column label="生产企业" width="180" prop="manufactory"/>
          <el-table-column label="批次号" v-if="createData.type==deviceChangeType.ADD.key" width="160" prop="batchNo">
            <template scope="scope">
              <el-input v-if="scope.row.editFlag" v-model="scope.row.batchNo"/>
              <span v-else>{{scope.row.batchNo}}</span>
            </template>
          </el-table-column>
          <el-table-column v-else label="批次号" prop="batchNo" width="160"/>
          <el-table-column label="序列号" v-if="createData.type==deviceChangeType.ADD.key" width="160" prop="serialNo">
            <template scope="scope">
              <el-input v-if="scope.row.editFlag" v-model="scope.row.serialNo"/>
              <span v-else>{{scope.row.serialNo}}</span>
            </template>
          </el-table-column>
          <el-table-column v-else label="序列号" prop="serialNo" width="160"/>
          <el-table-column label="生产日期"  v-if="createData.type==deviceChangeType.ADD.key"width="160"
                           prop="productionDate">
            <template scope="scope">
              <el-date-picker v-if="scope.row.editFlag" type="date" v-model="scope.row.productionDate" placeholder="格式yyyy-MM-dd" />
              <span v-else>{{scope.row.productionDate}}</span>
            </template>
          </el-table-column>
          <el-table-column v-else label="生产日期" prop="productionDate" width="160"/>
          <el-table-column label="过期时间" v-if="createData.type==deviceChangeType.ADD.key" width="160"
                           prop="expireDate">
            <template scope="scope">
              <el-date-picker v-if="scope.row.editFlag" type="date" v-model="scope.row.expireDate" placeholder="格式yyyy-MM-dd" />
              <span v-else>{{scope.row.expireDate}}</span>
            </template>
          </el-table-column>
          <el-table-column v-else label="过期时间" prop="expireDate" width="160"/>
          <el-table-column label="udi码" v-if="createData.type==deviceChangeType.ADD.key" min-width="180" prop="udi">
            <template scope="scope">
              <el-input v-if="scope.row.editFlag"  v-model="scope.row.udi"/>
              <span v-else>{{scope.row.udi}}</span>
            </template>
          </el-table-column>
          <el-table-column v-else label="udi码" prop="udi" min-width="180"/>
          <el-table-column label="供应商" width="160" prop="supName"/>
          <el-table-column label="注册/备案号" width="180" prop="zczbhhzbapzbh"/>
          <el-table-column label="操作" fixed="right" :width="createData.type==deviceChangeType.ADD.key?170:50">
            <template scope="scope">
              <el-button type="text" @click="scope.row.editFlag=false" v-if="createData.type==deviceChangeType.ADD.key&&scope.row.editFlag==true"  >保存</el-button>
              <el-button type="text" @click="scope.row.editFlag=true" v-if="createData.type==deviceChangeType.ADD.key&&scope.row.editFlag==false"  >编辑</el-button>
              <el-button type="text" @click="delDeviceRow(scope.$index)">删除</el-button>
              <el-button type="text" v-if="createData.type==deviceChangeType.ADD.key" @click="copyRow(scope.$index)">复制</el-button>
              <el-button type="text" v-if="createData.type==deviceChangeType.ADD.key" @click="batchCopyRow(scope.$index)">批量</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

    </el-dialog>

    <el-dialog width="80%" title="选择设备(只能选择状态为'正常'且巡检锁定为否的设备)"
               :visible="true"
               v-if="chooseDeviceFlag"
               @close="chooseDeviceFlag = false"
    >
      <deviceInfo :is-choose="true" :chooseFunc="chooseDevice" />

    </el-dialog>

    <el-dialog width="80%" title="选择产品"
               :visible="true"
               v-if="chooseProductFlag"
               @close="chooseProductFlag = false"
    >
      <product style="margin: -30px -10px -10px -10px" :is-choose="true" :chooseFunc="chooseProduct" />

    </el-dialog>
  </div>
</template>

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

<style lang="scss" scoped>

.fullScreen {
  z-index: 9999;
  margin: 0 !important;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

.dialogCard {
  margin: 0;
}
</style>
