<template>
  <div>
    <el-card>
      <el-form :model="filterQuery" class="query-form" size="mini" label-width="auto" v-if="showSearch">
        <el-row>
          <el-col :span="6">
            <el-form-item class="query-form-item" label="记录号:">
              <el-input v-model="filterQuery.id" placeholder="请输入记录号"
                        style="width: 90%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="query-form-item" label="状态:">
              <el-select v-model="filterQuery.status" @clear="filterQuery.status=null" placeholder="请选择状态"
                         style="width: 90%" clearable>
                <el-option v-for="item in stockCompareStatusEnum" :key="item.key" :label="item.desc" :value="item.key"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="query-form-item" label="备注描述:">
              <el-input v-model="filterQuery.remark" clearable placeholder="请输入备注描述" style="width: 90%"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="query-form-item" label="第三方系统:">
              <thirdSysSelect :value.sync="filterQuery.thrSysId"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="query-form-item" label="所属仓库:">
              <invSelect :value.sync="filterQuery.invCode"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="query-form-item" label="出入库类型:">
              <mainActionSelect :value.sync="filterQuery.mainAction"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="query-form-item" label="单据类型:">
              <actionSelect :value.sync="filterQuery.action" :mainAction="filterQuery.mainAction"
                            :invCode="filterQuery.invCode"/>
            </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="hideSearch">显示/隐藏搜索栏</el-button>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="onReset"
          >重置
          </el-button>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit"
          >查询
          </el-button>
          <el-button type="primary" icon="el-icon-plus" @click="add"
          >添加
          </el-button>
        </el-button-group>
      </div>
      <el-divider style="margin: 15px"></el-divider>

      <el-table
        v-loading="loading"
        :data="list"
        @row-click="handleSelectionChange"
        style="width: 100%; margin-top: 20px"
        highlight-current-row
        border
      >
        <el-table-column label="序号" width="50" type="index"></el-table-column>
        <el-table-column label="记录号" width="160" prop="id"/>
        <el-table-column label="备注描述" width="160" prop="remark"/>
        <el-table-column label="状态" width="80" prop="statusDesc"/>
        <el-table-column label="第三方系统" width="160" prop="thrSysName"/>
        <el-table-column label="仓库" width="110" prop="invName"/>
        <el-table-column label="对比日期区间" width="170">
          <template slot-scope="scope">
            {{ scope.row.compareStartDate }} 至 {{ scope.row.compareEndDate }}
          </template>
        </el-table-column>
        <el-table-column label="出入库类型" width="110" prop="mainAction">
          <template slot-scope="scope">
            {{ mainActionMap[scope.row.mainAction] || '全部' }}
          </template>
        </el-table-column>
        <el-table-column label="单据类型" width="110" prop="actionName">
          <template slot-scope="scope">
            {{ scope.row.actionName || '未选择' }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="160" prop="createTime"/>
        <el-table-column label="对比时间" width="160" prop="compareTime"/>
        <el-table-column label="操作人" width="110" prop="createUserName"/>
        <el-table-column fixed="right" width="100" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="edit(scope.row)" v-if="scope.row.status == 'DRAFT'">编辑</el-button>
            <el-button type="text" @click="exportExcel(scope.row)" v-if="scope.row.status == 'FINISHED'">导出</el-button>
            <el-button type="text" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :limit.sync="filterQuery.limit"
        :page.sync="filterQuery.page"
        @pagination="getList"
      ></pagination>
    </el-card>
    <el-tabs type="border-card" style="margin: 15px">
      <el-tab-pane>
        <span slot="label"> {{ currentRow == null ? '' : currentRow.id }}-库存对比结果</span>
        <el-table v-loading="stockCompareDetailLoading"
                  :data="stockCompareDetailList"
                  highlight-current-row
                  max-height="300"
                  height="300">
          <el-table-column label="序号" width="50" type="index"/>
          <el-table-column label="DI/物资编码" width="120" prop="nameCode" show-overflow-tooltip/>
          <!--          <el-table-column label="第三方产品编码" width="120" prop="nameCode" show-overflow-tooltip/>-->
          <el-table-column label="产品名称" width="120" prop="productName" show-overflow-tooltip/>
          <el-table-column label="规格型号" width="120" prop="ggxh" show-overflow-tooltip/>
          <el-table-column label="批次号" width="110" prop="batchNo" show-overflow-tooltip/>
          <el-table-column label="出入库类型" width="90" prop="mainAction" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ mainActionMap[scope.row.mainAction] }}
            </template>
          </el-table-column>

          <el-table-column label="数量" header-align="center">
            <el-table-column header-align="center"
                             label="UDI" width="100"
                             prop="count"
                             show-overflow-tooltip
            ></el-table-column>
            <el-table-column header-align="center"
                             label="第三方" width="100"
                             prop="thrCount"
                             show-overflow-tooltip
            ></el-table-column>
          </el-table-column>

          <el-table-column label="价格" header-align="center">
            <el-table-column header-align="center"
                             label="UDI" width="100"
                             prop="price"
                             show-overflow-tooltip
            ></el-table-column>
            <el-table-column header-align="center"
                             label="第三方" width="100"
                             prop="thrPrice"
                             show-overflow-tooltip
            ></el-table-column>
          </el-table-column>

          <el-table-column label="产品描述" width="110" prop="cpms" show-overflow-tooltip/>
          <el-table-column label="生产厂家" width="110" prop="manufactory" show-overflow-tooltip/>
          <el-table-column label="注册/备案人名称" width="220" prop="ylqxzcrbarmc" show-overflow-tooltip/>
          <el-table-column label="注册/备案证号" width="220" prop="zczbhhzbapzbh" show-overflow-tooltip/>
          <!--          <el-table-column label="操作" v-if="editRow&&editRow.status==stockCompareStatusEnum.DRAFT.key" width="80"-->
          <!--                           fixed="right">-->
          <!--            <template scope="scope">-->
          <!--              <el-button type="text" @click="removeDetail(scope.row)">移除</el-button>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
        </el-table>
        <pagination
          v-show="stockCompareDetailTotal>0"
          :total="stockCompareDetailTotal"
          :limit.sync="stockCompareDetailQuery.limit"
          :page.sync="stockCompareDetailQuery.page"
          @pagination="getList"
        ></pagination>

      </el-tab-pane>
    </el-tabs>
    <el-dialog
      append-to-body
      :title="compareId?'编辑对比':'新增对比'"
      :visible="true"
      v-if="showDialog"
      @close="showDialog = false;filterQuery.page = 1;getList()"
      width="80%"
    >
      <el-card class="dialogCard">
        <el-form :model="param" ref="stockCompare" :disabled="compareId" :rules="paramRules" class="query-form"
                 size="mini" label-width="auto">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item class="query-form-item" prop="thrSysId" label="第三方系统:">
                <thirdSysSelect :value.sync="param.thrSysId"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item class="query-form-item" prop="invCode" label="所属仓库:">
                <invSelect :value.sync="param.invCode"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item class="query-form-item" label="出入库类型:">
                <mainActionSelect :value.sync="param.mainAction"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item class="query-form-item" label="单据类型:">
                <actionSelect :value.sync="param.action" :mainAction="param.mainAction" :invCode="param.invCode"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item class="query-form-item" prop="compareDate" label="对比时间:">
                <el-date-picker
                  style="width: 90%"
                  v-model="param.compareDate"
                  type="daterange"
                  align="right"
                  unlink-panels
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item class="query-form-item" label="备注描述:" prop="remark">
                <el-input class="w90-percent" type="textarea" v-model="param.remark"
                          :autosize="{minRows: 2, maxRows: 6}" show-word-limit clearable :maxlength="500"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="!compareId">
            <el-col align="center">
              <el-button @click="saveStockCompare" :loading="saveLoading" type="primary">下一步</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card v-if="compareId" class="dialogSecCard">
        <el-row v-if="editRow&&editRow.status==stockCompareStatusEnum.DRAFT.key">
          <el-col align="right">
            <el-button-group>
              <el-button type="primary" icon="el-icon-plus" @click="showAddProduct">添加本地产品</el-button>
              <el-button type="primary" icon="el-icon-download" @click="compareFunc" :loading="compareFuncLoading">下载第三产品</el-button>
              <el-button type="primary" icon="el-icon-upload2"
                         @click="uploadCompare" :loading="uploadCompareLoading">提交比对
              </el-button>
            </el-button-group>


          </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-table v-loading="stockCompareDetailLoading"
                    :data="stockCompareDetailList"
                    highlight-current-row
                    max-height="300"
                    height="300">
            <el-table-column label="序号" width="50" type="index"/>
            <el-table-column label="DI/物资编码" width="120" prop="nameCode" show-overflow-tooltip/>
            <!--            <el-table-column label="第三方产品编码" width="120" prop="nameCode" show-overflow-tooltip/>-->
            <el-table-column label="产品名称" width="120" prop="productName" show-overflow-tooltip/>
            <el-table-column label="规格型号" width="120" prop="ggxh" show-overflow-tooltip/>
            <el-table-column label="出入库类型" width="90" prop="mainAction" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ mainActionMap[scope.row.mainAction] }}
              </template>
            </el-table-column>
            <el-table-column label="批次号" width="110" prop="batchNo" show-overflow-tooltip/>
            <el-table-column label="数量" header-align="center">
              <el-table-column header-align="center"
                               label="UDI" width="100"
                               prop="count"
                               show-overflow-tooltip
              ></el-table-column>
              <el-table-column header-align="center"
                               label="第三方" width="100"
                               prop="thrCount"
                               show-overflow-tooltip
              ></el-table-column>
            </el-table-column>

            <el-table-column label="价格" header-align="center">
              <el-table-column header-align="center"
                               label="UDI" width="100"
                               prop="price"
                               show-overflow-tooltip
              ></el-table-column>
              <el-table-column header-align="center"
                               label="第三方" width="100"
                               prop="thrPrice"
                               show-overflow-tooltip
              ></el-table-column>
            </el-table-column>

            <el-table-column label="产品描述" width="110" prop="cpms" show-overflow-tooltip/>
            <el-table-column label="生产厂家" width="110" prop="manufactory" show-overflow-tooltip/>
            <el-table-column label="注册/备案人名称" width="220" prop="ylqxzcrbarmc" show-overflow-tooltip/>
            <el-table-column label="注册/备案证号" width="220" prop="zczbhhzbapzbh" show-overflow-tooltip/>
            <el-table-column label="操作" v-if="editRow&&editRow.status==stockCompareStatusEnum.DRAFT.key" width="80"
                             fixed="right">
              <template slot-scope="scope">
                <el-button type="text" @click="removeDetail(scope.row)">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="stockCompareDetailTotal>0"
            :total="stockCompareDetailTotal"
            :limit.sync="stockCompareDetailQuery.limit"
            :page.sync="stockCompareDetailQuery.page"
            @pagination="getList"
          ></pagination>
        </el-row>
      </el-card>

    </el-dialog>

    <el-dialog
      :visible="showAddProductDialog"
      v-if="showAddProductDialog"
      width="60%"
      @close="showAddProductDialog=false"
    >
      <el-card>
        <template slot="header">
          <el-row>
            <el-col :span="12" align="left">选择产品</el-col>
            <el-col :span="12" align="right">
              <el-button icon="el-icon-check" type="primary" :disabled="!checkProductList.length"
                         @click="checkProduct(false)">选中选入
              </el-button>
              <el-button icon="el-icon-check" type="primary" @click="checkProduct(true)">结果全部选入</el-button>

              <el-button icon="el-icon-refresh" @click="selectProductQuery.page = 1;selectInvProductDetailList()">刷新
              </el-button>
            </el-col>
          </el-row>
        </template>
        <el-table
          v-loading="productLoading"
          :data="productList"
          ref="addProductTable"
          style="width: 100%; margin-top: 20px"
          @selection-change="addProductSelectionChange"
          @row-click="(row)=>{this.$refs.addProductTable.toggleRowSelection(row)}"
          max-height="300"
          height="300"
        >
          <el-table-column label="" width="50" type="selection"/>
          <!--          <el-table-column label="序号" width="50" type="index"/>-->
          <el-table-column label="最小销售标识" width="120" prop="nameCode"/>
          <el-table-column label="产品名称" width="120" prop="cpmctymc"/>
          <el-table-column label="规格型号" width="120" prop="ggxh"/>
          <el-table-column label="出入库类型" width="90" prop="mainAction">
            <template slot-scope="scope">
              {{ mainActionMap[scope.row.mainAction] }}
            </template>
          </el-table-column>
          <el-table-column label="数量" width="80" prop="count"/>
          <el-table-column label="产品描述" width="120" prop="cpms"/>
          <el-table-column label="生产厂家" width="110" prop="manufactory"/>
          <el-table-column label="注册/备案人名称" width="220" prop="ylqxzcrbarmc" show-overflow-tooltip/>
          <el-table-column label="注册/备案证号" width="220" prop="zczbhhzbapzbh" show-overflow-tooltip/>
        </el-table>
        <pagination
          v-show="productTotal>0"
          :total="productTotal"
          :limit.sync="selectProductQuery.limit"
          :page.sync="selectProductQuery.page"
          @pagination="selectInvProductDetailList"
        ></pagination>
      </el-card>
    </el-dialog>
  </div>
</template>

<script src="./stockCompare.js"/>
<style></style>
<style scoped>
.dialogCard {
  margin: -30px -5px 0px;
}

.dialogSecCard {
  margin: 5px -5px -10px;
}
</style>
