<template>
  <div class="app-container">
    <div v-show="viewState== 1">
      <!--标题按钮部分开始-->
      <div class="tab-header webtop">
        <!--标题-->
        <div>{{ viewTitle }}</div>
        <!--start 添加修改按钮-->
        <div>
          <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
        </div>
      </div>
      <!--标题按钮部分结束-->
      <!--Start 新增修改部分-->
      <div class="listconadd">
        <div class="wlInfo"><span>盘库操作</span></div>
        <el-form ref="form_obj" :model="formobj" :rules="rules" class="formaddcopy02">
          <el-row>
            <el-col :span="12">
              <div class="span-sty spanOneWidth"><span>存放地点:</span></div>
              <el-form-item>
                <el-select v-model="formobj.warehouse" placeholder="请选择" filterable clearable class="addinputwOne">
                  <el-option v-for="item in warehouse_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <div class="span-sty spanOneWidth"><span>盘库人员:</span></div>
              <el-form-item>
                <el-select v-model="formobj.staff" placeholder="请选择" filterable clearable class="addinputwOne">
                  <el-option v-for="item in staff_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" style="border-bottom: 0px !important;">
              <div class="span-sty spanOneWidth"><span>车架号:</span></div>
              <el-form-item>
                <el-input v-model="formobj.vinNo" placeholder="" clearable style="width: 30%" class="addinputwOne"/>
              </el-form-item>
            </el-col>
            <el-col :span="12" style="border-bottom: 0px !important;">
              <div class="span-sty spanOneWidth"></div>
              <el-form-item>
                <el-button type="primary" style="margin-left: 270px" size="small">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="listtop">
          <div class="tit">库存车辆列表</div>
        </div>
        <el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width: 100%;">
          <el-table-column width="80px" label="序号" type="index" :index="indexMethod" align="center"/>
          <el-table-column label="操作" width="150px" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="toEdit(scope.row)">确认</el-button>
            </template>
          </el-table-column>
          <el-table-column label="车架号" width="140px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.vehicleVersion }}</span>
            </template>
          </el-table-column>
          <el-table-column label="合格证" width="140px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.vehicleVersion }}</span>
            </template>
          </el-table-column>
          <el-table-column label="所在仓库" align="center" width="150px">
            <template slot-scope="scope">
              <span>{{ scope.row.engineTypeValue }}</span>
            </template>
          </el-table-column>
          <el-table-column label="上次盘库日期" align="center" width="150px">
            <template slot-scope="scope">
              <span>{{ scope.row.vehicleTypeCode }}</span>
            </template>
          </el-table-column>
          <el-table-column label="上次盘库人员" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.vehicleTypeCode }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" width="130px">
            <template slot-scope="scope">
              <span>{{ scope.row.vehicleTypeCode }}</span>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" width="130px">
            <template slot-scope="scope">
              <span>{{ scope.row.vehicleTypeCode }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import req from '@/api/weishoumaiduan/unsold'
import { typeValues } from '@/api/cheliang/dictcommons'

export default {
  name: 'pankuAdd',
  data() {
    return {
      viewTitle: '盘库操作',
      listLoading: false,
      viewState: 1,
      index: 0,
      tableKey: 0,
      list: [],
      warehouse_list: [],
      staff_list: [],
      // 表单数据
      formobj: {
        sid: '', // 一条数据的sid
        applicationName: window.sessionStorage.getItem('name'),
        createTime: '',
        reason: '',
        userSid: window.sessionStorage.getItem('userSid'),
        detailsList: []
      },
      rules: {},
      submitdisabled: false
    }
  },
  methods: {
    init() {
      typeValues({ type: 'warehouse' }).then((res) => {
        if (res.success) {
          this.warehouse_list = res.data
        }
      })
    },
    // 序号
    indexMethod(index) {
      var pagestart = (this.listQuery.current - 1) * this.listQuery.size
      var pageindex = index + 1 + pagestart
      return pageindex
    },
    showEdit(row) {
      this.$nextTick(() => {
        this.$refs['form_obj'].clearValidate()
      })
      console.log('编辑回显', row.sid)
      req.fetchBySid(row.sid).then((resp) => {
        const data = resp.data
        this.formobj.applicationName = data.applicationName
        this.formobj.sid = data.sid
        this.formobj.reason = data.reason
        this.formobj.createTime = data.createTime
        this.formobj.detailsList = data.voList
      }).catch((e) => {
        this.formobj = row
      })
    },
    save() {
      this.$refs['form_obj'].validate((valid) => {
        if (valid) {
          this.submitdisabled = true
          req.saveOrUpdate(this.formobj).then((resp) => {
            this.submitdisabled = false
            if (resp.success) {
              this.$message({
                showClose: true,
                type: 'success',
                message: resp.msg
              })
              this.handleReturn('true')
            }
          }).catch(() => {
            this.submitdisabled = false
          })
        } else {
          return false
        }
      })
    },
    // 返回（===既判断）
    handleReturn(isreload) {
      if (isreload === 'true') this.$emit('reloadlist')
      // 表单数据
      this.formobj = {
        sid: '', // 一条数据的sid
        applicationName: window.sessionStorage.getItem('name'),
        createTime: '',
        reason: '',
        userSid: window.sessionStorage.getItem('userSid'),
        detailsList: []
      }
      this.$refs['form_obj'].resetFields()
      this.$refs['divVehicle'].getList()
      this.$emit('doback')
    },
    closePage() {
      this.viewState = 1
    }
  }
}
</script>

<style scoped>
.wlInfo {
  text-align: center;
  font-size: 28px;
  line-height: 90px;
}
/deep/ .el-row {
  border-left: 0px;
}
/deep/ .el-col {
  border-right: 0px !important;
}
.spanOneWidth {
  width: 260px !important;
  border-right: 0px !important;
}
.addinputwOne {
  margin-left: 270px !important;
  padding: 5px 0px;
}
.listtop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #dfe4ed;
  height: 40px;
}
.tit {
  margin-bottom: -10px;
}
.pagination {
  margin-bottom: -10px;
}
</style>

