<template>
  <el-dialog
    title="气瓶档案详情"
    :visible.sync="dialogVisible"
    width="1000px"
    :before-close="handleClose">
    <el-row class="gasCylinderDialogSty">
      <el-col :span="24">
        <el-radio-group v-model="form.infoType">
          <el-radio-button  v-for="(item,index) in infoTypeList" :label="item" :key="item"></el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col :span="24" style="margin-top: 15px;" >
        <component v-for="(item,index) in infoComponentsList" :rowData="rowData" :form="form" v-if="form.infoType === item.name" v-show="form.infoType === item.name" :key="item.name" :is='item.component' :ref='item.component'></component>
      </el-col>
    </el-row>
<!--    <span slot="footer" class="dialog-footer">-->
<!--    <el-button @click="dialogVisible = false">取 消</el-button>-->
<!--    <el-button type="primary" @click="handleSubmit">确 定</el-button>-->
<!--  </span>-->
  </el-dialog>
</template>

<script>
import basicInfo from "./components/basicInfo";
import photoInfo from "./components/photoInfo";
import flowInfo from "./components/flowInfo";
export default {
  components: {
    basicInfo,
    photoInfo,
    flowInfo
  },
  data() {
    return {
      infoComponentsList:[
        {name: '基本信息', component: 'basicInfo'},
        {name: '照片信息', component: 'photoInfo'},
        {name: '充装信息', component: 'basicInfo'},
        {name: '充前检查信息', component: 'basicInfo'},
        {name: '充后检查信息', component: 'basicInfo'},
        {name: '检验信息', component: 'basicInfo'},
        {name: '流转信息', component: 'flowInfo'},
      ],
      dialogVisible: false,
      form:{
        infoType:'基本信息',
        dialogType:''
      },
      rowData:{},
      infoTypeList:['基本信息','照片信息','充装信息','充前检查信息','充后检查信息','检验信息','流转信息']
    }
  },
  methods: {
    open(type,row) {
      console.log('打印详情部分row===>',row)
      this.rowData ={
        ...row
      }
      this.dialogVisible = true;
      this.form.dialogType = type;
    },
    handleClose(done) {
      this.form.infoType = '基本信息';
      this.dialogVisible = false;
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done();
      //   })
      //   .catch(_ => {});
    },
    handleSubmit() {
      this.form.infoType = '基本信息';
      this.dialogVisible = false
      this.$emit('handleRefresh')
    }
  }
}
</script>
<style lang="scss" >
.gasCylinderDialogSty{
  el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background-color: #5875eb!important;
  }
}
</style>
