<template>
  <a-card :title="modalTitle" v-show="visible">
    <div style="padding: 20px;">
      <a-row :gutter="48" slot="extra">
        <a-col :md="48" :sm="48">
          <span style="float: left">
            <!-- <a-badge :count="5" title="子设备总数" :number-style="{ backgroundColor: '#52c41a' }">
              <a-button style="margin-left: 20px" type="default">子设备</a-button>
            </a-badge>
            <a-badge :count="5" title="设备部位总数" :number-style="{ backgroundColor: '#52c41a' }">
              <a-button style="margin-left: 20px" type="default">设备部位</a-button>
            </a-badge>
            <a-button style="margin-left: 20px" type="default">费用分析</a-button> -->
            <a-button style="margin-left: 20px" @click="handleCancel()">返回</a-button>

          </span>
        </a-col>
      </a-row>
    </div>
    <a-layout>
      <a-layout-sider :width="329">

        <img-code
          :src="model.qrCode"
          :type="2"
          title="点击重新生成二维码"
          :code-id="model.id"
          :width="297"
          :height="297"></img-code>
        <a-divider style="background: #D6D6D6" />
        <!-- <a-row type="flex" justify="space-between" :gutter="[16,16]">
          <a-col :span="10">
            <a-button shape="round" block>
              配件记录
            </a-button>
          </a-col>
          <a-col :span="10">
            <a-button shape="round" type="primary" block>
              配件记录
            </a-button>
          </a-col>
          <a-col :span="10">
            <a-button shape="round" block>

              配件记录
            </a-button>
          </a-col>
          <a-col :span="10">
            <a-button shape="round" block>

              配件记录
            </a-button>
          </a-col>
          <a-col :span="10">
            <a-button shape="round" block>

              配件记录
            </a-button>
          </a-col>
          <a-col :span="10">
            <a-button shape="round" block>

              配件记录
            </a-button>
          </a-col>
        </a-row> -->

      </a-layout-sider>
      <a-layout-content :style="{ background: '#fff',padding: '20px'}">
        <a-card >
          <div style="margin:0; padding:15px 30px; background:#EFEFFB;font-size:16px; color: #1890ff"><b>基础信息</b></div>
          <a-descriptions bordered :column="3">
            <a-descriptions-item label="id">{{ model.id }}</a-descriptions-item>
            <a-descriptions-item label="集团统一编码">{{ model.uniteNo }}</a-descriptions-item>
            <a-descriptions-item label="自编号">{{ model.zbh }}</a-descriptions-item>
            <a-descriptions-item label="备件编码">{{ model.no }}</a-descriptions-item>
            <a-descriptions-item label="备件名称">{{ model.name }}</a-descriptions-item>
            <a-descriptions-item label="名称编码">{{ model.nameNo }}</a-descriptions-item>
            <a-descriptions-item label="规格型号">{{ model.ggxh }}</a-descriptions-item>
            <a-descriptions-item label="规格编码">{{ model.ggNo }}</a-descriptions-item>
            <a-descriptions-item label="备件类别">{{ model.typeName }}</a-descriptions-item>
            <a-descriptions-item label="备件等级">{{ BaseTool.Object.getField(levelMap,model.level) }}</a-descriptions-item>
            <a-descriptions-item label="备件价值">{{ BaseTool.Amount.formatter(model.initialValue) }}</a-descriptions-item>
            <a-descriptions-item label="生产商">{{ model.producerName }}</a-descriptions-item>
            <a-descriptions-item label="供应商">{{ model.supplierName }}</a-descriptions-item>
            <a-descriptions-item label="原厂编号">{{ model.initNo }}</a-descriptions-item>
            <a-descriptions-item label="计量单位">{{ model.unit }}</a-descriptions-item>
            <a-descriptions-item label="包装单位">{{ model.unitBz }}</a-descriptions-item>
            <a-descriptions-item label="折算系数">{{ model.unitRate }}</a-descriptions-item>
            <a-descriptions-item label="当前库存">{{ model.currentStock }}</a-descriptions-item>
            <a-descriptions-item label="采购周期">{{ model.purchasePeriod }}天</a-descriptions-item>
            <a-descriptions-item label="使用周期">{{ model.usePeriod }}月</a-descriptions-item>
            <a-descriptions-item label="寿命周期">{{ model.agePeriod }}月</a-descriptions-item>
            <a-descriptions-item label="当前库存">{{ model.currentStock }}</a-descriptions-item>
            <a-descriptions-item label="最高库存">{{ model.maxStock }}</a-descriptions-item>
            <a-descriptions-item label="最低库存">{{ model.minStock }}</a-descriptions-item>
            <a-descriptions-item label="初始库存">{{ model.initStock }}</a-descriptions-item>
            <a-descriptions-item label="英文名称">{{ model.englishName }}</a-descriptions-item>
            <a-descriptions-item label="助记码">{{ model.zjm }}</a-descriptions-item>
            <a-descriptions-item label="产地">{{ BaseTool.Object.getField(cdMap,model.cd) }}</a-descriptions-item>
            <a-descriptions-item label="用途">{{ BaseTool.Object.getField(ytMap,model.yt) }}</a-descriptions-item>
            <a-descriptions-item label="用途">{{ BaseTool.Object.getField(specialMap,model.isSpecial) }}</a-descriptions-item>
            <a-descriptions-item label="参数">{{ model.params }}</a-descriptions-item>
            <a-descriptions-item label="备注">{{ model.remark }}</a-descriptions-item>
            <a-descriptions-item label="创建人">{{ model.createdUserName }}</a-descriptions-item>
            <a-descriptions-item label="更新人">{{ model.updateUserName }}</a-descriptions-item>
            <a-descriptions-item label="更新日期">{{ model.updateTime }}</a-descriptions-item>
          </a-descriptions>
        </a-card>
        <br>
        <a-card>
          <div style="margin:0; padding:15px 30px; background:#EFEFFB;font-size:16px; color: #1890ff"><b>图片信息</b></div>
          <br>
          <a-row type="flex" justify="space-between" :gutter="[16,16]">
            <a-col >
              <img :src="BaseTool.Constant.FILE_URL + model.image" width="200px" height="200px"/>
            </a-col>
          </a-row>
        </a-card>
      </a-layout-content>
    </a-layout>
  </a-card>
</template>

<script>
import DetailList from '@/components/tools/DetailList'
import { selectSbModelListBySpareId } from '@/api/sb/modelbom'
const DetailListItem = DetailList.Item

export default {
  name: 'SparePartInfoDetail',
  components: {
    DetailList,
    DetailListItem
  },
  data () {
    return {
      confirmLoading: false,
      mdl: {},
      modalTitle: null,
      visible: false,
      // 下拉框map
      levelMap: {},
      unitMap: {},
      cdMap: {},
      ytMap: {},
      specialMap: {},
      model: {
        'no': null,
        'name': null,
        'ggxh': null,
        'typeId': null,
        'level': null,
        'initialValue': null,
        'producerId': null,
        'producerName': null,
        'supplierId': null,
        'supplierName': null,
        'unit': null,
        'unitBz': null,
        'unitRate': null,
        'currentStock': null,
        'purchasePeriod': null,
        'usePeriod': null,
        'agePeriod': null,
        'maxStock': null,
        'qrCode': null,
        'applicationFileList': [],
        'minStock': null,
        'image': null,
        'initStock': null,
        'params': null,
        'remark': null,
        'createdUserId': null,
        'updateUserId': null,
        'updateTime': null,
        'createdUserName': null,
        'updateUserName': null,
        'typeName': null
      },
      periodTypeMap: {},
      // 表头
      columns: [
        {
          title: '型号',
          dataIndex: 'model'
        },
        {
          title: '名称',
          dataIndex: 'name'
        },
        {
          title: '新号',
          dataIndex: 'no'
        },
        {
          title: '旧号',
          dataIndex: 'zbh'
        },
        {
          title: '更换周期',
          dataIndex: 'period',
          customRender: (text, record, index) => {
            return text + this.BaseTool.Table.getMapText(this.periodTypeMap, record.periodType)
          }
        },
        {
          title: '数量',
          dataIndex: 'num'
        },
        {
          title: '操作',
          key: 'action',
          checked: true,
          align: 'center',
          // fixed: 'right',
          scopedSlots: { customRender: 'action' }
        }
      ],
      data: []
    }
  },
  created () {
    // 下拉框map
    this.levelMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SPARE_PART_INFO_LEVEL)
    this.unitMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SBINFO_UNIT)
    this.cdMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.PRODUCER_AREA)
    this.ytMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SPARE_USE_TYPE)
    this.specialMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.YES_NO)
    this.periodTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.CHECK_PLAN_PERIOD_TYPE)
  },
  methods: {
    base (record) {
      this.visible = true
      this.modalTitle = '详情'
      this.model = record
      selectSbModelListBySpareId({ id: record.id }).then(res => {
        this.data = res.data
      })
    },
    inited (viewer) {
      this.$viewer = viewer
      // this.$viewer.index = 0
      // // 不要他的按钮
      // this.$viewer.options.button = false
      // // 不要他的底部缩略图
      // this.$viewer.options.navbar = false
      // // 不要他的底部标题
      // this.$viewer.options.title = false
      // // 不要他的底部工具栏
      // this.$viewer.options.toolbar = false
    },
    handleCancel () {
      this.visible = false
      this.confirmLoading = false
      this.$emit('ok')
    }

  }
}
</script>
<style scoped scoped>
 .ant-layout-sider {
background: #fff !important;
padding: 20px 16px !important;
}
.ant-card-body{
  padding: 0  !important;
}
</style>
