<template>
  <div>
    <el-card>
      <el-card>
        <h5>备件记录</h5>
        <el-button plain type="primary" icon="el-icon-search" size="small" @click="requestNewSpareParts()">申请新备件</el-button>
      </el-card>
    </el-card>
    <el-dialog :title="orderMapTitle" :visible.sync="orderMapDialogFormVisible" center width="1000px">
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="equipmentTableData"
        :header-cell-style="{background:'#F5F5F5'}"
        element-loading-spinner="el-icon-loading"
        stripe
        tooltip-effect="dark"
        style="width: 100%;margin-top: 10px; height: 300px"
        border
        size="mini"
        highlight-current-row>
        <el-table-column align="center" label="时间日期" prop="date" min-width="90" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.时间日期 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="类型" min-width="90" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.类型 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="新值" min-width="90" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.新值 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="原值" min-width="90" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.原值 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="用户" min-width="90" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.用户 }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog :title="faultTreeAnalysisTitle" :visible.sync="faultTreeAnalysisDialogFormVisible" center width="1000px">
      <div class="block">
        <span class="demonstration">选择时间和日期</span>
        <el-date-picker
          :picker-options="pickerOptions"
          v-model="faultTreeAnalysisValue"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"/>
        <el-button size="mini" type="primary" plain>查询</el-button>
    </div>    </el-dialog>
    <el-dialog :title="requestNewSparePartsTitle" :visible.sync="requestNewSparePartsDialogFormVisible" center width="1800px">
      <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple">
          <h5>搜索类型</h5>
          <el-collapse v-model="requestNewSparePartsActiveNames" @change="requestNewSparePartsHandleChange">
            <el-collapse-item title="按类型" name="1">
              tree
            </el-collapse-item>
            <el-collapse-item title="按设备组" name="2">
              <el-select v-model="value" clearable placeholder="请选择设备组">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-collapse-item>
            <el-collapse-item title="按关键词" name="3">
              <div><el-input
                v-model="requestNewSparePartsInput"
                placeholder="请输入查询条件"
                clearable
                style="width: 200px"/>
                <el-button plain type="primary" icon="el-icon-search" size="small" @click="searchTable()">查询</el-button>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div></el-col>
        <el-col :span="18"><div class="grid-content bg-purple">
          <h5>维修单号：获取当前单号</h5>
          <el-card style="width: 200px">
            <el-button type="text" @click="sparePartsInformation()">点击文字弹出备件弹框</el-button>
          </el-card>
        </div></el-col>
    </el-row></el-dialog>
    <el-dialog :title="sparePartsInformationTitle" :visible.sync="sparePartsInformationDialogFormVisible" center width="1800px">
      <h5>物料号：当前物料号</h5>
      <el-card>
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple">
            备件图片
          </div></el-col>
          <el-col :span="18"><div class="grid-content bg-purple">
            <el-collapse v-model="sparePartsInformationActiveNames" @change="sparePartsInformationHandleChange">
              <el-collapse-item title="基础信息" name="1">
                <div>描述</div>
                <div>型号</div>
                <div>品牌</div>
                <div>最大库存值</div>
                <div>最小库存值</div>
                <div>分类信息</div>
              </el-collapse-item>
            </el-collapse>
          </div></el-col>
        </el-row>
      </el-card>
      <el-card>
        <el-collapse v-model="sparePartsInformationActiveNames2" @change="sparePartsInformationHandleChange2">
          <el-collapse-item title="价格信息" name="1">
            <el-table
              v-loading="loading"
              ref="multipleTable"
              :data="sparePartsPriceInformationTableData"
              :header-cell-style="{background:'#F5F5F5'}"
              element-loading-spinner="el-icon-loading"
              stripe
              tooltip-effect="dark"
              style="width: 100%;margin-top: 10px; height: 150px"
              border
              size="mini"
              highlight-current-row
              @row-click="fangfa">
              <el-table-column align="center" label="备件类型" prop="date" min-width="90" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.备件类型 }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="价格" min-width="90" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.价格 }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="货币" min-width="90" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.货币 }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </el-card>
      <el-card>
        <el-collapse v-model="sparePartsInformationActiveNames3" @change="sparePartsInformationHandleChange3">
          <el-collapse-item title="库存信息" name="1">
            <el-table
              v-loading="loading"
              ref="multipleTable"
              :data="sparePartsStockInformationTableData"
              :header-cell-style="{background:'#F5F5F5'}"
              element-loading-spinner="el-icon-loading"
              stripe
              tooltip-effect="dark"
              style="width: 100%;margin-top: 10px; height: 150px"
              border
              size="mini"
              highlight-current-row
              @row-click="fangfa">
              <el-table-column align="center" label="备件" prop="date" min-width="90" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.备件 }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="库位" min-width="90" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.库位 }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="可用库存" min-width="90" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.可用库存 }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </el-card>
      <div style="border: 2px; margin-top: 20px">1</div>
      <el-button type="primary" plain size="mini" @click="sparePartsInformationMore">详情</el-button>
    </el-dialog>
    <el-dialog :title="sparePartsInformationMoreTitle" :visible.sync="sparePartsInformationMoreDialogFormVisible" center width="1000px">
      <h5>备件信息</h5>
      <el-card>
        <el-row :gutter="20">
          <el-col :span="8"><div class="grid-content bg-purple">
            <h5>备件号</h5>
            <el-input v-model="input" style="width: 200px" placeholder="请输入内容"/>
            <h5>型号</h5>
            <el-input v-model="input" style="width: 200px" placeholder="请输入内容"/>
            <h5>最小库存值</h5>
            <el-input v-model="input" style="width: 200px" placeholder="请输入内容"/>
            <h5>单位</h5>
            <el-select v-model="value" style="width: 200px" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
            <h5>新品价格</h5>
            <el-input v-model="input" style="width: 200px" placeholder="请输入内容"/>
            <h5>交货日期</h5>
            <el-input v-model="input" style="width: 200px" placeholder="请输入内容"/>
            <div style="margin-top:20px">
              <el-switch
                v-model="switchValue"
                active-text="报废"/>
            </div>
          </div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <h5>备件名称</h5>
            <el-input v-model="input" style="width: 200px" placeholder="请输入内容"/>
            <h5>品牌</h5>
            <el-input v-model="input" style="width: 200px" placeholder="请输入内容"/>
            <h5>最大库存值</h5>
            <el-input v-model="input" style="width: 200px" placeholder="请输入内容"/>
            <h5>设备组</h5>
            <el-select v-model="value" style="width: 200px" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
            <h5>返修品价格</h5>
            <el-input v-model="input" style="width: 200px" placeholder="请输入内容"/>
            <h5>备注</h5>
            <el-input v-model="input" style="width: 200px" placeholder="请输入内容"/>
          </div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-upload
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"/>
            </el-upload>
            <el-button plain type="primary" icon="el-icon-upload" size="small">上传</el-button>
          </div></el-col>
        </el-row>
      </el-card>
      <el-card>
        <el-tabs v-model="classificationActiveName" @tab-click="handleClick">
          <el-tab-pane label="备件分类信息" name="first">
            <h5>备件分类</h5>
            <el-button type="primary" plain size="mini" @click="sparePartsClassification"> {{ this.备件分类 }} </el-button>
          </el-tab-pane>
          <el-tab-pane label="参考文档" name="second">
            <el-button plain size="mini" type="primary" icon="el-icon-upload" style="margin-top: 20px">上传新文件</el-button>
            <div><el-button plain size="mini" type="primary" icon="el-icon-search" style="margin-top: 20px" @click="sparePartsAccessories">关联已有文件</el-button></div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-dialog>
    <el-dialog :title="sparePartsClassificationTitle" :visible.sync="sparePartsClassificationDialogFormVisible" center width="1800px">
      tree
      <el-button>确认</el-button>
      <el-button>取消</el-button>
    </el-dialog>
    <el-dialog :title="sparePartsAccessoriesTitle" :visible.sync="sparePartsAccessoriesDialogFormVisible" center width="1000px">
      <el-card>
        <el-input style="width: 300px"/>
        <el-button plain type="primary" icon="el-icon-search" style="margin-top: 20px">查找</el-button>
        <el-button plain type="primary" icon="el-icon-search" style="margin-top: 20px">选择</el-button>
      </el-card>
      <el-card>
        <el-table
          v-loading="loading"
          ref="multipleTable"
          :data="sparePartsAccessoriesTableData"
          :header-cell-style="{background:'#F5F5F5'}"
          element-loading-spinner="el-icon-loading"
          stripe
          tooltip-effect="dark"
          style="width: 100%;margin-top: 10px; height: 300px"
          border
          size="mini"
          highlight-current-row>
          <el-table-column align="center" label="文件名" prop="date" min-width="90" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.文件名 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="文件大小" min-width="90" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.文件大小 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建日期" min-width="90" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.创建日期 }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-dialog>
  </div>
</template>
<script>
</script>
<style>
</style>
