<template>
  <div>
    <xy-dialog ref="dialog" :width='70' :is-show.sync="isShow" type="form" title="库存明细" :form="form"
      :rules="rules" @submit="submit">
      <template v-slot:wuzibianma>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>物资编码：
          </div>
          <div class="xy-table-item-content">
            <div style='width:300px'>
            {{form.wuzibianma}}
            </div>
          </div>
        </div>
      </template>
      <template v-slot:zichanmingcheng>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>资产名称：
          </div>
          <div class="xy-table-item-content">
            <div style='width:300px'>
            {{form.zichanmingcheng}}
            </div>
          </div>
        </div>
      </template>
      <template v-slot:guigexinghao>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>规格型号：
          </div>
          <div class="xy-table-item-content">
            <div style='width:300px'>
            {{form.wuzibianma}}
            </div>
          </div>
        </div>
      </template>
      <template v-slot:wuzileixing>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>物资类型：
          </div>
          <div class="xy-table-item-content">
            <div style='width:300px'>
            {{form.wuzibianma}}
            </div>
          </div>
        </div>
      </template>
      <template v-slot:jiliangdanwei>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>计量单位：
          </div>
          <div class="xy-table-item-content">
            <div style='width:300px'>
            {{form.jiliangdanwei}}
            </div>
          </div>
        </div>
      </template>
      <template v-slot:rukushuliang>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>库数量：
          </div>
          <div class="xy-table-item-content">
            {{form.rukushuliang}}
            <!-- <el-input v-model="form.rukushuliang" placeholder="请填写入库数量" clearable style="width: 300px;"></el-input> -->
          </div>
        </div>
      </template>
      <template v-slot:zaikushuliang>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>实盘数量：
          </div>
          <div class="xy-table-item-content">
              <el-input v-model="form.zaikushuliang" placeholder="请填写在库数量" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:rukupici>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>入库批次：
          </div>
          <div class="xy-table-item-content">
            {{form.rukupici}}
            <!-- <el-input v-model="form.rukupici" placeholder="请填写入库批次" clearable style="width: 300px;"></el-input> -->
          </div>
        </div>
      </template>
      <template v-slot:gudingzichanbianhao>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>固定资产编号：
          </div>
          <div class="xy-table-item-content">
            <div style='width:300px'>
            {{form.gudingzichanbianhao}}
            </div>
          </div>
        </div>
      </template>
      <template v-slot:suozaicangku>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>所在仓库：
          </div>
          <div class="xy-table-item-content">
            <div style='width:300px'>
            {{form.suozaicangku}}
            </div>
          </div>
        </div>
      </template>
      <template v-slot:suozaihuojia>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>所在货架：
          </div>
          <div class="xy-table-item-content">
            <div style='width:300px'>
            {{form.suozaihuojia}}
            </div>
          </div>
        </div>
      </template>

    </xy-dialog>
  </div>
</template>

<script>
  import {
    save,
    index,
    show
  } from "@/api/system/baseForm.js"
  import {
    Message
  } from 'element-ui'
  export default {

    data() {
      return {
        isShow: false,
        type: 'add',
        id: '',
        tableName:'inventorys',
        form: {
          wuzibianma:'',
          zichanmingcheng:'',
          guigexinghao:'',
          wuzileixing:'',
          jiliangdanwei:'',
          rukushuliang:'',
          zaikushuliang:'',
          rukupici:'',
          gudingzichanbianhao:'',
          suozaicangku:'',
          suozaihuojia:''
        },
        rules: {
        },
      }
    },
    created() {

    },
    methods: {
      async getDetail() {
        const res = await show({
          id: this.id,
          table_name: this.tableName
        })
        this.form = {
          wuzibianma:res.wuzibianma_material_infos_wuzibianma_relation?.wuzibianma,
          zichanmingcheng:res.wuzibianma_material_infos_wuzibianma_relation?.zichanmingcheng,
          guigexinghao:res.wuzibianma_material_infos_wuzibianma_relation?.guigexinghao,
          wuzileixing:res.wuzibianma_material_infos_wuzibianma_relation?.wuzileixing,
          jiliangdanwei:res.wuzibianma_material_infos_wuzibianma_relation?.jiliangdanwei,
          rukushuliang:res?.rukushuliang,
          zaikushuliang:res?.zaikushuliang,
          rukupici:res?.rukupici,
          gudingzichanbianhao:res.wuzibianma_material_infos_wuzibianma_relation?.gudingzichanbianhao,
          suozaicangku:res.wuzibianma_material_infos_wuzibianma_relation?.suozaicangku,
          suozaihuojia:res.wuzibianma_material_infos_wuzibianma_relation?.suozaihuojia
        }
      },
      submit() {
        if (this.type === 'editor') {
          save({
            id: this.id,
            table_name: this.tableName,
            ...this.form
          }).then(res => {
            Message({
              type: 'success',
              message: '编辑成功'
            })
            this.isShow = false
            this.$emit('refresh')
          })
        }
      },

    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          this.getDetail()
        } else {
          this.id = ''
          this.type = ''
          this.$refs['dialog'].reset()
        }
      }
    }

  }
</script>

<style scoped lang="scss">
  .mingxiwrap {
    display: flex;
    flex-wrap: wrap;
  }

  .mingxiwrap .xy-table-item {
    margin-bottom: 10px
  }

  .searchCompanys {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
  }

  ::v-deep .searchCompanys .el-input {
    width: 82%
  }

  .xy-table-item-label {
    width: 160px;
  }

  .img__delete {
    transform: scale(0.8, 0.8);

    position: absolute;
    top: 4px;
    right: 4px;
  }

  ::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  ::v-deep .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  ::v-deep .el-upload--picture-card {
    font-size: 28px;
    color: #8c939d;
    width: 80px !important;
    height: 80px !important;
    line-height: 80px !important;
    text-align: center;
  }

  ::v-deep .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px !important;
    height: 80px !important;
    line-height: 80px !important;
    text-align: center;
  }

  ::v-deep .avatar {
    width: 80px !important;
    display: block;
    border-radius: 6px;
  }

  ::v-deep .xy-table-item-label {
    width: 160px !important;
  }

  ::v-deep .el-date-editor .el-range-separator {
    width: auto !important;
  }

  ::v-deep .el-input-number .el-input__inner {
    text-align: left !important;
  }
</style>
