<template>
  <div>
    <basicDetails
        ref="details"
        :titleText="mainData.sku"
        :editData="mainData"
        :mainAreaData="mainAreaData"
        turnPageId="20221215101003"
        idname="sa_itemskuid"
        ownertable="sa_itemsku"
        delApiId="20221215101103"
        tags=""
        :tabs="['详细信息']"
        @pageChange="pageChange"
        @onEditSuccess="queryMainData($route.query.id)">
      <div slot="tags">
      </div>
      <div slot="customOperation" >
        <Edit class="inline-16" v-if="tool.checkAuth($route.name,'update')" :data="mainData" @onSuccess="queryMainData"></Edit>
      </div>
      <div slot="slot0" >
        <base-info v-if="detailInfo" :detailInfo="detailInfo"></base-info>
      </div>
      <div slot="slot1" >
      </div>
    </basicDetails>
  </div>
</template>

<script>
import BaseInfo from '@/HDrpManagement/projectChange/modules/modules/baseInfo/baseInfo'
import Edit from '../components/edit'
export default {
  name: "detail",
  data() {
    return {
      mainData:{},
      mainAreaData:{},
      detailInfo:'',
    }
  },
  components:{
    BaseInfo,
    Edit
  },
  methods:{
    async queryMainData(id) {
      const res = await this.$api.requested({
        "id":20221215100903,
        "content": {
          "sa_itemskuid": this.$route.query.id
        }
      })
      this.mainData = res.data
      console.log(this.mainData);
      
      this.changeDataStructure()
    },
    changeDataStructure() {
      let that = this
      this.mainAreaData = [
        {
          label:'序列号',
          value:this.mainData.sku
        },
        {
          label:'产品编号',
          value:this.mainData.itemno
        },
        {
          label:'产品名称',
          value:this.mainData.itemname
        },
        {
          label:'型号',
          value:this.mainData.model
        },
        {
          label:'是否限制使用',
          value:this.mainData.islimit ? '是':'否'
        },
        {
          label:'状态',
          value:this.mainData.status,
          style:function () {
            let style = {}
            switch (that.mainData.status) {
              case '在库':
                style = {color:"#000000"}
                break;
              case '借出':
                style = {color:"#d90a0a"}
                break;
              case '售出':
                style = {color:"#52C41A"}
                break;
              case '报废':
                style = {color:"#b2c0ea"}
                break;
              default:
                break;
            }
            return style
          }
        },
        {
          label:'客户',
          value:this.mainData.enterprisename
        },
        {
          label:'是否使用',
          value:this.mainData.isused ? '是':'否'
        },
      ]
      this.detailInfo = {
        baseInfo:[
          {
            label:'产品编号',
            value:this.mainData.itemno
          },
          {
            label:'产品名称',
            value:this.mainData.itemname
          },
          {
            label:'型号',
            value:this.mainData.model
          },
          {
            label:'是否限制使用',
            value:this.mainData.islimit ? '是':'否'
          },
          {
            label:'序列号',
            value:this.mainData.sku
          },
          // {
          //   label:'出库时间',
          //   value:this.mainData.time
          // },
          {
            label:'状态',
            value:this.mainData.status,
            style:function () {
              let style = {}
              switch (that.mainData.status) {
                case '在库':
                  style = {color:"#000000"}
                  break;
                case '借出':
                  style = {color:"#d90a0a"}
                  break;
                case '售出':
                  style = {color:"#52C41A"}
                  break;
                case '报废':
                  style = {color:"#b2c0ea"}
                  break;
                default:
                  break;
              }
              return style
            }
          },
          {
            label:'客户',
            value:this.mainData.enterprisename
          },
          {
            label:'是否使用',
            value:this.mainData.isused ? '是':'否'
          },
        ],
        systemInfo: [
          {label:'录入人',value:this.mainData.createby},
          {label:'录入时间',value:this.mainData.createdate},
          {label:'修改人',value:this.mainData.changeby},
          {label:'修改时间',value:this.mainData.changedate},
        ]
      }
    },
    // 监听切换数据,上一页,下一页
    pageChange (id,rowindex,tabIndex) {
      this.flag = false
      tabIndex = this.$route.query.tabIndex
      this.$router.replace({path:'/numberManageDetail',query:{id:id,rowindex:rowindex,tabIndex:tabIndex}})
      this.queryMainData(id)
    },
    onSuccess(){
      this.visible = false
      this.queryMainData(this.$route.query.id)
      this.$emit('onSuccess')
    }
  },
  mounted () {
    this.queryMainData(this.$route.query.id)
  },
  created() {
  }
}
</script>

<style scoped>

</style>