<template>
  <div>
    <!--    编辑-->
    <xy-dialog :is-show.sync="isShow" title="图书查看" ref="addActivity">

      <el-descriptions title="图书信息" column=2>
        <el-descriptions-item label="所属类目">
          <el-tag>{{detail.type?detail.type.name:""}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="图片"><img :src="detail.small_cover?detail.small_cover.url:''"
            style="width: 120px;height: 120px;"></img></el-descriptions-item>
        <el-descriptions-item label="书名">{{detail.name}}</el-descriptions-item>
        <el-descriptions-item label="ISBN">{{detail.isbn}}</el-descriptions-item>
        <el-descriptions-item label="作者">{{detail.author}}</el-descriptions-item>
        <el-descriptions-item label="描述">{{detail.content}}</el-descriptions-item>
        <el-descriptions-item label="页数">{{detail.font_total}}</el-descriptions-item>
        <el-descriptions-item label="出版社">{{detail.publish_house}}</el-descriptions-item>
        <el-descriptions-item label="出版日期">{{detail.publish_date}}</el-descriptions-item>

      </el-descriptions>
      <el-descriptions title="库存信息">
      </el-descriptions>
      <el-table :data="detail.details" style="width: 100%">
        <el-table-column prop="enter_date" label="入库日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="条形码" align="center" width="180">
          <template slot-scope="scope">
            <img :src="scope.row.barcode" style="width: 120px;height: 90px;" />
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注">
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center" width="180">
          <template slot-scope="scope">
            <el-tag>{{scope.row.status=="0"?"未打印":"已打印"}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="opt" label="操作">
          <template slot-scope="scope">
            <el-button @click="toPrint(scope.row)">打印</el-button>
            <el-button @click="toDelete(scope.row)" type='danger' style='margin-left: 10px;'>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </xy-dialog>

  </div>
</template>

<script>
  import {
    show
  } from "@/api/bookStore/bookIndex";

  import {
    del as delStore
  } from "@/api/bookStore/storeList";

  export default {

    data() {

      return {
        isShow: false,
        id: "",
        window: {},
        detail: {
          isbn: "",
          name: "",
          sub_title: "",
          author: "",
          bind_way: "",
          type_id: "",
          publish_date: "",
          publish_house: "",
          font_total: "",
          content: "",
          small_cover_id: "",
          small_cover: "",
          big_cover: "",
          big_cover_id: ""
        }
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          this.getDetail()
        } else {
          this.id = ''
          this.type = ''
          this.$refs['addActivity'].reset()
        }
      }
    },
    methods: {
      toDelete(row) {
        delStore({
          id: row.id
        }).then(res => {
          this.getDetail();
          this.$Message.success("操作成功");
        })
      },
      toPrint(row) {
        // this.window.width = screen.availWidth * 0.95
        // this.window.height = screen.availHeight * 0.95
        // this.window.top = (window.screen.height - 30 - this.window.height) / 2
        // this.window.left = (window.screen.width - 10 - this.window.width) / 2

        // let obj = {
        //   id: row.id,
        //   barcode: row.barcode
        // }
        // let url = `${process.env.VUE_APP_PUBLIC}print.html?json=${JSON.stringify(obj)}`
        // window.open(url, 'toPrint',
        //   `top=${this.window.top},left=${this.window.left},width=${this.window.width},height=${this.window.height},location=0`
        // )

        let baseUrl = process.env.VUE_APP_BASE_API + "/print?id=" + row.id;
        window.open(baseUrl)
      },
      async getDetail() {
        let res = await show({
          id: this.id
        })
        Object.assign(this.detail, res);
        if(!this.detail.small_cover){
          this.detail.small_cover=res.big_cover;
        }
      }
    },
    computed: {

    },
    created() {
      let that = this;
    },
    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>
