<template>
      <el-dialog title="故障案例详情" :visible.sync="open" width="80%" append-to-body @close="cancel">
        <el-form ref="form" :model="form" :rules="rules"  label-width="100px" label-position="top">
          <el-row :gutter="10">
            <el-col :span="8"><el-form-item label="故障名称" prop="faultName">
                <el-input v-model="form.faultName" placeholder="请输入故障名称" disabled/>
              </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="案例编号" prop="caseNo">
                  <el-input v-model="form.caseNo" placeholder="请输入案例编号" disabled/>
                </el-form-item></el-col>
            <el-col :span="8"> <el-form-item label="系统" prop="useSystem">
                <el-input v-model="form.useSystem" placeholder="请输入系统" disabled/>
              </el-form-item></el-col>
  
  
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8"><el-form-item label="分系统" prop="subsystem">
                <el-input v-model="form.subsystem" placeholder="请输入分系统" disabled/>
              </el-form-item></el-col>
            <el-col :span="8"><el-form-item label="机件名称" prop="partName">
                <el-input v-model="form.partName" placeholder="请输入机件名称" disabled/>
              </el-form-item></el-col>
            <el-col :span="8"><el-form-item label="专业" prop="specialty" >
              <el-input v-model="form.specialty" placeholder="请输入专业" disabled/>
              </el-form-item></el-col>
  
  
          </el-row>
          <el-row :gutter="20">
  
              <el-col :span="8"> <el-form-item label="故障原因" prop="faultCause">
                  <el-input v-model="form.faultCause" type="textarea" placeholder="请输入内容" disabled/>
                </el-form-item></el-col>
            <el-col :span="8"><el-form-item label="故障描述" prop="faultDetail">
                <el-input v-model="form.faultDetail" type="textarea" placeholder="请输入内容" disabled/>
              </el-form-item></el-col>
            <el-col :span="8"><el-form-item label="处置方式" prop="handlingMethod">
                <el-input v-model="form.handlingMethod" type="textarea" placeholder="请输入内容" disabled/>
              </el-form-item></el-col>
            <!--
            <el-col :span="6"> <el-form-item label="图片路径" prop="imagePath">
                <file-upload v-model="form.imagePath" />
              </el-form-item></el-col>
            <el-col :span="6"><el-form-item label="备注" prop="remarks">
                <el-input v-model="form.remarks" type="textarea" placeholder="请输入内容" style="width: 105%;"/>
              </el-form-item></el-col>-->
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8"> <el-form-item label="文件路径" prop="filePath">
                <file-upload v-model="form.filePath" :belongType="belongType" :belongId="belongId" disabled :isShowTip="false" />
              </el-form-item></el-col>
            <!--
            <el-col :span="6"> <el-form-item label="图片路径" prop="imagePath">
                <file-upload v-model="form.imagePath" />
              </el-form-item></el-col>
            <el-col :span="6"><el-form-item label="备注" prop="remarks">
                <el-input v-model="form.remarks" type="textarea" placeholder="请输入内容" style="width: 105%;"/>
              </el-form-item></el-col>-->
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
  </template>
  
  <script>
  import { listFaultCase, getFaultCase, delFaultCase, addFaultCase, updateFaultCase } from "@/api/fault/faultCase";
  import { listSpeciality, getSpeciality, delSpeciality, addSpeciality, updateSpeciality } from "@/api/basic/speciality";
  import FileUpload from "@/components/FileUpload/upload.vue";
  export default {
    name: "FaultCase",
    components: { FileUpload },
    props: ["showFlag",'belongId'],
    watch: {
    // 监听父组件传递过来的showFlag的变化,控制dialog的显示
    showFlag(newVal) {
      this.open = newVal; // Set the dialog's visibility based on showFlag
      this.handleUpdate(this.belongId)
    },
  },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 故障案例表格数据
        faultCaseList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          faultName: null,
          specialty: null,
          aircraftType: null,
          caseNo: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        },
        specialityList:[],
        belongType: 'case',
      };
    },
    // created() {
    //   this.getList();
    //   this.getSpList();
    // },
    methods: {
    //   dialogOpen() {
    //     this.getSpList();
    //   },
      /** 查询故障案例列表 */
      getList() {
        this.loading = true;
        listFaultCase( this.queryParams ).then( response => {
          this.faultCaseList = response.rows;
          this.total = response.total;
          this.loading = false;
        } );
      },
      getSpList() {
        const queryParams = {
          pageNum: 1,
          pageSize: 50
        };
        listSpeciality(queryParams).then(response => {
          this.specialityList = response.rows;
        });
      },
      // 取消按钮
      cancel() {
        // this.belongId = null;
        this.reset();
        this.$emit("close");
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          faultName: null,
          useSystem: null,
          subsystem: null,
          partName: null,
          specialty: null,
          aircraftType: null,
          faultCause: null,
          faultDetail: null,
          handlingMethod: null,
          caseNo: null,
          filePath: null,
          imagePath: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remarks: null
        };
        this.resetForm( "form" );
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm( "queryForm" );
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange( selection ) {
        this.ids = selection.map( item => item.id )
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加故障案例";
      },
      /** 修改按钮操作 */
      handleUpdate(id) {
        // this.reset();
        // const id = row.id || this.ids
        getFaultCase(id).then( response => {
          this.form = response.data;
        //   this.open = true;
          this.title = "修改故障案例";
        } );
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate( valid => {
          if ( valid ) {
            if ( this.form.id != null ) {
              updateFaultCase( this.form ).then( response => {
                this.$modal.msgSuccess( "修改成功" );
                this.open = false;
                this.getList();
              } );
            } else {
              addFaultCase( this.form ).then( response => {
                this.$modal.msgSuccess( "新增成功" );
                this.open = false;
                this.getList();
              } );
            }
          }
        } );
      },
      /** 删除按钮操作 */
      handleDelete( row ) {
        const ids = row.id || this.ids;
        this.$modal.confirm( '是否确认删除故障案例编号为"' + ids + '"的数据项？' ).then( function () {
          return delFaultCase( ids );
        } ).then( () => {
          this.getList();
          this.$modal.msgSuccess( "删除成功" );
        } ).catch( () => { } );
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download( 'fault/faultCase/export', {
          ...this.queryParams
        }, `faultCase_${new Date().getTime()}.xlsx` )
      }
    }
  };
  </script>
  