<template>
  <el-dialog :title="storeInfo.title + '出入库记录'" :visible.sync="recordOpen" width="800px" append-to-body :close-on-click-modal="false">
    <el-tabs v-model="activeName" @tab-click="handleClick" v-if="recordOpen">
      <el-tab-pane label="入库记录" name="import">
        <RecordInfo tab="import" :id="storeInfo.id" v-if="activeName == 'import'"/>
      </el-tab-pane>
      <el-tab-pane label="出库记录" name="export">
        <RecordInfo tab="export" :id="storeInfo.id" v-if="activeName == 'export'"/>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
  import RecordInfo from "./RecordInfo";
  export default {
    name: "record",
    components:{
      RecordInfo
    },
    data(){
        return{
          recordOpen: false,
          activeName: "import",
          storeInfo: {}
        }
    },
    watch:{
      recordOpen(){
        if(this.recordOpen){
          this.activeName = 'import';
        }
      }
    },
    methods:{
      initRecordInfo(row){
        this.storeInfo = row;
        this.recordOpen = true;
      },
      handleClick(tab,event){
        this.activeName = tab.name;
      }
    }
  }
</script>

<style scoped>

</style>
