<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="billNo"/>
        <el-table-column label="类型" width="90" prop="typeName">
          <template slot-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" v-if="!this.type == deviceChangeType.DESTROY">
          <template slot-scope="scope">
            <el-tag :type="`${deviceChangeStatus[scope.row.status].tagType}`">{{ scope.row.statusName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" width="120" prop="flowStatus" v-if="this.type == deviceChangeType.DESTROY">
          <template slot-scope="scope">
            <el-tag :type="`${ApprovalFlowEnum[scope.row.flowStatus].tagType}`">{{ApprovalFlowEnum[scope.row.flowStatus].desc}}</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 slot-scope="scope">
            <el-button type="text"
                       v-if="scope.row.status==deviceChangeStatus.DRAFT.key"
                       @click="openEdit(scope.row)">
              编辑
            </el-button>
            <el-button type="text"
                       v-if="scope.row.status==deviceChangeStatus.DRAFT.key"
                       @click="delOrder(scope.row)">
              删除
            </el-button>
            <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>
            <el-button type="text"
                       v-if="scope.row.flowStatus == 2 "
                       @click="showApprovalFlowDetail(scope.row)"
            >审核
            </el-button>
            <el-button type="text"
                       v-if="scope.row.flowStatus == 3 ||  scope.row.flowStatus == 4"
                       @click="showApprovalFlowDetail(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="createTitle" 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">-->
<!--            &lt;!&ndash;            <span>&ndash;&gt;-->
<!--            &lt;!&ndash;              类型：<el-tag :type="this.type.tagType">{{ this.type.desc }}</el-tag>&ndash;&gt;-->
<!--            &lt;!&ndash;            </span>&ndash;&gt;-->
<!--&lt;!&ndash;            <span class="ml10">当前部门：{{ locDeptName }}</span>&ndash;&gt;-->

<!--          </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-group>
              <el-button :disabled="itemList.length===0" type="primary" @click="saveCache" :loading="draftLoading">草稿保存</el-button>
              <el-button :disabled="itemList.length===0" type="primary" @click="saveForm" :loading="submitLoading">立即提交</el-button>
            </el-button-group>
          </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 :span="6">
            <el-form-item label="操作部门: " prop="deptCode">
              <deptSelect class="width-full" :value.sync="createData.deptCode"/>
            </el-form-item>
            </el-col>
            <el-col :span="6">
            <el-form-item label="移除类型: " prop="destroyType" v-if="createData.type == deviceChangeType.DESTROY.key" >
              <el-select v-model="createData.destroyType" style="width: 85%" placeholder="请选择移除类型" clearable="true"  >
                <el-option key=1 label="报废"  :value=1> </el-option>
                <el-option key=2 label="销毁"  :value=2> </el-option>
              </el-select>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="目标部门: " prop="toDeptCode" v-if="createData.type==deviceChangeType.CHANGE.key">
                <deptSelect class="width-full" :notCode="createData.deptCode" :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="createTitle+'说明:'">-->
<!--                <el-input type="textarea" resize="none" :autosize="{ minRows: 2, maxRows: 4 }" clearable show-word-limit-->
<!--                          maxlength="300"-->
<!--                          v-model="createData.remark"/>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="设备来源:">-->
<!--                <el-select v-model="createData.sourceType" style="width: 14%" placeholder="请选择设备来源"-->
<!--                           clearable="true" @change="updateItem()" >-->
<!--                  <el-option-->
<!--                    v-for="item in dict.type.device_source_type"-->
<!--                    :key="item.value"-->
<!--                    :label="item.label"-->
<!--                    :value="item.value">-->
<!--                    <span style="float: left;font-size: 13px">{{ item.label }}</span>-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class="dialogCard" :class="{'fullScreen':fullScreenFlag}"
               style="margin-top: 10px;">
        <div slot="header" class="clearfix">
          <div class="fr">
            <el-button type="primary" @click="openChoose(1)" v-if="createData.type==deviceChangeType.ADD.key">产品录入</el-button>
            <el-button type="primary" @click="openChoose(2)" v-if="createData.type==deviceChangeType.ADD.key">库存物资录入</el-button>
            <el-button type="primary" @click="openChoose(3)" v-if="createData.type==deviceChangeType.CHANGE.key || createData.type==deviceChangeType.DESTROY.key" :disabled="!this.createData.deptCode">添加设备</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"  :key="v[0]">{{ 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 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 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 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 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 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 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 slot-scope="scope">
              <el-button type="text"
                         @click="editDeviceRow(scope.row)"
                         v-if="createData.type==deviceChangeType.ADD.key">编辑
              </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" v-if="createData.type==deviceChangeType.ADD.key" @click="copyRow(scope.row)">
                复制
              </el-button>
              <el-button type="text" @click="delDeviceRow(scope.row.deviceCode)">删除</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>

        <pagination
          v-show="detailTotal>0"
          :total="detailTotal"
          :page.sync="detailQuery.page"
          :limit.sync="detailQuery.limit"
          @pagination="getDetailList"
        />
      </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"
               :listType="2"
               :attributeType="1"
               :chooseFunc="chooseProduct"/>
    </el-dialog>

    <el-dialog
       title="库存物资录入"
      :visible.sync="selectInvProductVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="85%"
      v-if="selectInvProductVisible"
      :append-to-body='true'
    >
      <dialogDeviceInvProduct
        :closeDialog="closeDialogC2"
        :invQueryData="invQueryData"
        :orderQuery="thisData"
        :listType="2"
        :type="2"
        :chooseFunc="chooseProduct"
      ></dialogDeviceInvProduct>
    </el-dialog>

    <el-dialog
      title="设备添加"
      :visible.sync="selectDeviceAddVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="85%"
      v-if="selectDeviceAddVisible"
      :append-to-body='true'
    >
      <dialogDeviceSelectAdd
        :deptCode="this.createData.deptCode"
        :closeDialog="closeDialogC2"
        :invQueryData="invQueryData"
        :orderQuery="thisData"
        :listType="2"
        :type="2"
        :chooseFunc="chooseProduct"
      ></dialogDeviceSelectAdd>
    </el-dialog>

    <el-dialog
      width="65%"
      title="设备信息-编辑"
      :visible="true"
      v-if="deviceInfoFlag"
      @close="deviceInfoFlag = false"
    >
<!--      <deviceModifyDialog-->
<!--        :rowData="curDevRow"-->
<!--        :editSaveDev="editSaveDev"-->
<!--      >-->
<!--      </deviceModifyDialog>     -->
      <deptDeviceDetail
        :rowData="this.curDevRow"
        :editSaveDev="editSaveDev"
        :visible="false"
      >
      </deptDeviceDetail>
    </el-dialog>
    <el-dialog
      title="审批详情"
      :visible.sync="approvalFlowDetailVisible"
      width="80%"
      v-if="approvalFlowDetailVisible"
      @close='closeDialog'
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="handleClose"
    >
      <approvalFlowDetail
        :isChang="true"
        :closeDialog="closeDialog"
        :idQuery="idQuery"
      ></approvalFlowDetail>
    </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>
