<template>
  <div>
    <!--    编辑-->
    <xy-dialog :is-show.sync="isShow" title="图书入库" type="form" :form="detail" :rules="rules" @submit="editor"
      ref="addActivity">
      <template v-slot:booknum>
        <div class="xy-table-item">
          <div class="xy-table-item-label">入库数量
          </div>
          <div class="xy-table-item-content">
            <el-input-number v-model="detail.booknum" :min="1" :max="1"></el-input-number>
          </div>
        </div>
      </template>
      <template v-slot:enter_date>
        <div class="xy-table-item">
          <div class="xy-table-item-label">入库日期
          </div>
          <div class="xy-table-item-content">
            <el-date-picker style="width: 150px;" clearable v-model="detail.enter_date" type="date"
              value-format="yyyy-MM-dd" placeholder="选择日期时间">
            </el-date-picker>
          </div>
        </div>
      </template>

      <template v-slot:bookshelf>
        <div class="xy-table-item">
          <div class="xy-table-item-label">书架
          </div>
          <div class="xy-table-item-content">
            <el-input clearable placeholder="请输入书架号" type="text" v-model="detail.bookshelf" style="width: 120px;">
            </el-input>
          </div>
        </div>
      </template>

      <template v-slot:rows>
        <div class="xy-table-item">
          <div class="xy-table-item-label">行
          </div>
          <div class="xy-table-item-content">
            <el-input-number v-model="detail.rows" :min="1" :max="99"></el-input-number>
          </div>
        </div>
      </template>

      <template v-slot:sort>
        <div class="xy-table-item">
          <div class="xy-table-item-label">排序
          </div>
          <div class="xy-table-item-content">
            <el-input-number v-model="detail.sort" :min="1" :max="999"></el-input-number>
          </div>
        </div>
      </template>

      <template v-slot:line>
        <div class="xy-table-item">
          <div class="xy-table-item-label">列
          </div>
          <div class="xy-table-item-content">
            <el-input-number v-model="detail.line" :min="1" :max="99"></el-input-number>
          </div>
        </div>
      </template>

      <template v-slot:borrow_status>
        <div class="xy-table-item">
          <div class="xy-table-item-label">状态
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="detail.borrow_status" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>

      <template v-slot:remark>
        <div class="xy-table-item">
          <div class="xy-table-item-label">备注
          </div>
          <div class="xy-table-item-content">
            <el-input clearable placeholder="请填写备注" type="textarea" rows="4" v-model="detail.remark"
              style="width: 220px;" />
          </div>
        </div>
      </template>
    </xy-dialog>

  </div>
</template>

<script>
  import {
    saveDetail,
    showDetail
  } from "@/api/bookStore/bookIndex";

  export default {

    data() {

      return {

        isShow: false,
        id: "",
        options: [{
          value: 0,
          label: '在库'
        }, {
          value: 1,
          label: '借出'
        }],
        bookid: "",
        type: "add",
        detail: {
          book_id: "",
          id: "",
          no: "",
          enter_date: "",
          remark: "",
          status: 0,
          booknum: 1,
          bookshelf: "",
          line: "",
          rows: "",
          borrow_status: 0,
          sort:""
        },
        rules: {
          enter_date: [{
            required: true,
            message: "入库日期必填"
          }]
        }

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

      async getDetail() {
        let res = await showDetail({
          id: this.id
        });
        console.log(res)
        this.detail.book_id = res.book_id;
        this.detail.id = res.id;
        this.detail.no = res.no;
        this.detail.enter_date = res.enter_date;
        this.detail.remark = res.remark;
        this.detail.status = res.status;
        this.detail.bookshelf = res.bookshelf;
        this.detail.line = res.line;
        this.detail.rows = res.rows;
        this.detail.borrow_status = res.borrow_status;
        this.detail.sort = res.sort;
        

      },
      editor() {
        console.log("this.detail", this.detail)
        saveDetail(this.detail).then(res => {


          this.isShow = false
          this.$Message.success("操作成功");
          this.$emit('refresh')
        })

      },

    },
    computed: {

    },
    created() {
      let that = this;
      that.detail.enter_date = this.$moment().format("YYYY-MM-DD")
    },
    mounted() {

    }
  }
</script>

<style scoped lang="scss">
  .contract-add-plan {
    min-height: 30px;
    border: 1px solid #dcdee2;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;

    padding: 0 8px;

    &-no-plan {
      height: 30px;
      line-height: 30px;
      color: #CDD0D5;
    }
  }

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

  .xy-table-item-price {
    position: relative;

    &::after {
      z-index: 1;
      position: absolute;
      right: 0;
      top: 0;
      content: '（元）'
    }

    ::v-deep .el-input__clear {
      position: relative;
      right: 30px;
      z-index: 2;
    }
  }

  .xy-table-item-price-wan {
    position: relative;

    &::after {
      position: absolute;
      right: 0;
      top: 0;
      content: '（万元）'
    }

    ::v-deep .el-input__clear {
      position: relative;
      right: 46px;
      z-index: 2;
    }
  }
</style>
