<template>
  <div class="mod-config pad" style="margin-top: 10px">
    <h5 style="margin-left: 20px">产品属性</h5>
    <el-form inline="true" style="margin-top: -10px;margin-left: 20px" label-position="top">
      <el-form-item :label="'工厂编号：'">
        <el-input v-model="searchData.site" readonly style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'产品编码：'" style="margin-left: 20px">
        <el-input v-model="searchData.partNo" readonly style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item :label="'产品名称/规格型号：'" style="margin-left: 20px">
        <el-input v-model="partDescription" readonly style="width: 300px"></el-input>
      </el-form-item>
    </el-form>
    <el-form inline="true" style="margin-top: 26px;margin-left: 20px" label-position="top">
      <el-form-item :label="'序号：'">
        <el-input v-model="num" style="width: 120px" readonly></el-input>
      </el-form-item>
      <el-form-item :label="'描述：'" style="margin-left: 20px">
        <el-input v-model="subCodeDesc" style="width: 200px" readonly></el-input>
      </el-form-item>
          <el-form-item :label="' '">
            <el-button @click="lastData()" style="margin-left: 24px;height: 35px;width: 90px" type="primary">上一条</el-button>
          </el-form-item>
          <el-form-item :label="' '">
            <el-button @click="nextData()" style="margin-left: 24px;height: 35px;width: 90px" type="primary">下一条</el-button>
          </el-form-item>
          <el-form-item :label="' '">
            <el-button @click="jump()" style="margin-left: 24px;height: 35px;width: 80px" type="primary">关闭</el-button>
          </el-form-item>
    </el-form>
    <el-table
      :height="height"
      :data="tableData"
      border

      style="width: 100%;margin-top: 20px">
      <el-table-column
        prop="propertiesItemNo"
        header-align="center"
        align="left"
        min-width="60"
        label="属性编码">
      </el-table-column>
      <el-table-column
        prop="itemDesc"
        header-align="center"
        align="left"
        min-width="60"
        label="属性描述">
      </el-table-column>
      <el-table-column
        prop="valueType"
        header-align="center"
        align="left"
        min-width="60"
        label="属性类型">
      </el-table-column>
      <el-table-column
        prop="numValue"
        header-align="center"
        align="left"
        min-width="60"
        label="属性值">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import {
    getPartSubPropertiesValueData,
    getPartSubPropertiesValueHeaderData
  } from '@/api/pad.js'
  export default {
    name: 'padPartAttribute',
    data () {
      return {
        height:200,
        tableData:[],
        currentData: {},
        searchData:{
          site:'',
          partNo:'',
        },
        partDescription:'',
        num:'',
        subCodeDesc:'',
        list:[],

      }

    },
    mounted () {
      this.$nextTick(() => {
        this.height = window.innerHeight - 250
      })
    },
    methods: {
      getData(){
        this.currentData = JSON.parse(localStorage.getItem("partData"))
        this.searchData.partNo = this.currentData.partNo
        this.num=1;
        this.remark=this.currentData.remark;
        this.searchData.site=  this.currentData.site;
        this.partDescription= this.currentData.partDescription+'/'+this.currentData.spec;
        getPartSubPropertiesValueHeaderData(this.searchData).then(({data}) => {
          this.list = data.rows;
          if(data.rows.length==0){
            this.$alert('该物料没有设置属性！', '错误', {
              confirmButtonText: '确定'
            })
            return false;
          }

          this.subCodeDesc=this.list[this.num-1].subCodeDesc;
          this.search();
        })


      },
      search(){
        if( this.list.length==0){

          return false;
        }
        let postData={
          site:this.searchData.site,
          partNo:this.searchData.partNo,
          subCodeSeqNo:this.num,
        }
        getPartSubPropertiesValueData(postData).then(({data}) => {
            this.tableData = data.rows
          })
      },
      jump(){
        this.$router.push('/padPart');
      },
      nextData(){
        if(this.list.length==0){
          this.$alert('该物料没有设置属性！', '错误', {
            confirmButtonText: '确定'
          })
          return false;
        }
        if(this.num==this.list.length){
          this.num=1;
        }else{
          this.num=this.num+1;
        }
        let i=this.num-1;
        this.subCodeDesc=this.list[i].subCodeDesc;

        this.search();
      },
      lastData(){
        if(this.list.length==0){
          this.$alert('该物料没有设置属性！', '错误', {
            confirmButtonText: '确定'
          })
          return false;
        }
        if(this.num==1){
          this.num=this.list.length;
        }else{
          this.num=this.num-1;
        }
        let i=this.num-1;
        this.subCodeDesc=this.list[i].subCodeDesc;
        this.search();
      },
    },
    created () {
      this.getData();

    }
  }
</script>

<style scoped>

</style>
