<template>
  <div class="goodsAllocationSet-page">
    <a-spin :spinning="spinning" tip="Loading...">
      <a-page-header :ghost="false" :backIcon="false" class="goodsAllocationSet-baseInfo">
        <template slot="subTitle">
          <a href="javascript:;" @click="handleBack" id="goodsAllocationSet-handleBack">
            <a-icon type="left"></a-icon> 返回列表
          </a>
          <span style="margin: 0 15px;color: #666;font-weight: bold;">{{ pageInfo&&pageInfo.shelfName?pageInfo.shelfName:'--' }}</span>
        </template>
      </a-page-header>
      <a-card :bordered="false" size="small" class="goodsAllocationSet-baseInfo">
        <a-collapse :activeKey="['1']">
          <a-collapse-panel key="1" header="基础信息">
            <a-descriptions size="small" :column="3">
              <a-descriptions-item label="配件经销商">{{ pageInfo&&pageInfo.dealerName?pageInfo.dealerName:'--' }}</a-descriptions-item>
              <a-descriptions-item label="汽车修理厂">{{ pageInfo&&pageInfo.storeName?pageInfo.storeName:'--' }}</a-descriptions-item>
              <a-descriptions-item label="货架归属">{{ pageInfo&&pageInfo.ownerType==0?'自有':'平台' }}</a-descriptions-item>
              <a-descriptions-item label="货架图片" v-if="pageInfo&&pageInfo.ownerType==0">
                <div v-if="pageInfo && images&&images.length>0">
                  <img :src="images[0]|| ''" width="30" height="30" class="imageUrl" @click="inited(images)" /> {{ '共'+images?images.length+'张':'' }}
                </div>
                <span v-else>--</span>
              </a-descriptions-item>
              <a-descriptions-item label="备注">{{ pageInfo&&pageInfo.remarks?pageInfo.remarks:'--' }}</a-descriptions-item>
            </a-descriptions>
          </a-collapse-panel>
        </a-collapse>
      </a-card>
      <a-card :bordered="false" size="small" class="pages-wrap">
        <div class="goodsAllocationSet-baseInfo">
          <a-button id="goodsAllocationSet-impoort" type="primary" class="button-info" @click="addHW(0,pageInfo)">批量导入货位</a-button>
          <a-button id="goodsAllocationSet-addHW" type="primary" class="button-error" @click="addHW(1,pageInfo)">新增货位</a-button>
        </div>
        <a-table
          class="sTable fixPagination"
          ref="table"
          size="small"
          :pagination="false"
          :columns="columns"
          :data-source="loadData"
          bordered>
          <template slot="status" slot-scope="text, record">
            <a-button size="small" type="link" id="goodsAllocationSet-handleEdit" @click="handleEdit(record)" v-if="!record.shelfProductEntity">编辑</a-button>
            <a-button size="small" type="link" id="goodsAllocationSet-handleDel" @click="handleDel(record)" v-if="!record.shelfProductEntity">删除</a-button>
            <span v-if="record.shelfProductEntity" style="display: inline-block;padding-left: 7px;">--</span>
          </template>
        </a-table>
      </a-card>
      <!-- 导入货位模板 -->
      <importHuoweiModal :openModal="openModal" @close="openModal=false" @refresh="getHwList" :shelfSn="shelfSn" @ok="handleOk"></importHuoweiModal>
      <!-- 新增货位 -->
      <addHWModal :openHWModal="openHWModal" @refresh="getHwList" :shelfSn="shelfSn" :nowData="itemData" @close="openHWModal=false"></addHWModal>
    </a-spin>
  </div>
</template>

<script>
import {
  STable
} from '@/components'
import { shelfDetail, shelfHWList, delHw } from '@/api/shelf.js'
import importHuoweiModal from './importHuoweiModal.vue'
import addHWModal from './addHWModal.vue'
export default {
  components: {
    STable, importHuoweiModal, addHWModal },
  data () {
    return {
      spinning: false,
      openModal: false, // 货位模板弹窗初始状态（批量导入）
      openHWModal: false, // 新增货位初始弹窗
      pageInfo: null,
      itemData: null,
      shelfSn: '', // 货架sn
      images: [], // 货架图片
      // 表头
      columns: [
        {
          title: '序号',
          width: '4%',
          align: 'center',
          customRender: function (text, record, index) {
            return index + 1
          }
        },
        {
          title: '货位号',
          dataIndex: 'shelfPlaceCode',
          width: '11%',
          align: 'center',
          customRender: function (text) {
            return text || '--'
          }
        },
        {
          title: '绑定产品编码',
          dataIndex: 'shelfProductEntity.productCode',
          width: '10%',
          align: 'center',
          customRender: function (text) {
            return text || '--'
          }
        },
        {
          title: '绑定产品名称',
          dataIndex: 'shelfProductEntity.productName',
          width: '16%',
          align: 'left',
          customRender: function (text) {
            return text || '--'
          }
        },
        {
          title: '创建时间',
          dataIndex: 'createDate',
          width: '18%',
          align: 'center',
          customRender: function (text) {
            return text || '--'
          },
          ellipsis: true
        },
        {
          title: '操作',
          width: '9%',
          align: 'left',
          scopedSlots: {
            customRender: 'status'
          }
        }
      ],
      loadData: []
    }
  },
  methods: {
    handleBack () {
      this.$router.go(-1)
    },
    // 查看图片
    inited (viewer) {
      if (viewer) {
        const imageUrl = []
        viewer.map(item => {
          imageUrl.push(item)
        })
        this.$viewerApi({
          images: imageUrl
        })
      }
    },
    // 导入或新增
    addHW (type, val) {
      this.shelfSn = val.shelfSn
      if (type == 0) {
        this.openModal = true
      } else {
        this.itemData = null
        this.openHWModal = true
      }
    },
    // 获取货位列表
    getHwList () {
      this.spinning = true
      this.shelfSn = this.$route.params.shelfSn
      shelfHWList(Object.assign({ shelfSn: this.$route.params.shelfSn, shelfProductEntity: {} })).then(res => {
        if (res.status == 200) {
          this.loadData = res.data
        }
        this.spinning = false
      })
    },
    // 删除
    handleDel (row) {
      const _this = this
      this.$confirm({
        title: '警告',
        content: '删除后无法恢复，确认删除?',
        centered: true,
        onOk () {
          _this.spinning = true
          delHw({
            shelfPlaceSn: row.shelfPlaceSn
          }).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              _this.getHwList()
            }
            _this.spinning = false
          })
        }
      })
    },
    // 编辑
    handleEdit (row) {
      this.shelfSn = row.shelfSn
      this.itemData = row
      this.openHWModal = true
    },
    // 货架详情
    getShelfDetail () {
      this.spinning = true
      shelfDetail({
        shelfSn: this.$route.params.shelfSn
      }).then(res => {
        if (res.status == 200) {
          this.pageInfo = Object.assign({}, res.data)
          if (res.data.ownerType == 0 && res.data.images) {
            this.images = res.data.images.split(',')
          }
        } else {
          this.pageInfo = null
        }
        this.spinning = false
      })
    },
    // 货位导入成功
    handleOk (obj) {
      console.log(obj, 'obj')
      this.getHwList()
    },
    pageInit () {
      this.getShelfDetail()
      this.getHwList()
    }
  },
  mounted () {
    if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
      this.pageInit()
    }
  },
  activated () {
    // 如果是新页签打开或者进入新的子页（例：存在列表第2条数据编辑页页签时再打开第4条数据的编辑页），则重置当前页面
    if (this.$store.state.app.isNewTab || !this.$store.state.app.isNewSubTab) {
      this.pageInit()
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {})
  }
}
</script>

<style lang="less">
  .goodsAllocationSet-page {
    position: relative;
    height: 100%;
    padding-bottom: 51px;
    box-sizing: border-box;

    .goodsAllocationSet-baseInfo {
      margin-bottom: 10px;
    }
  }
</style>
