<template>
  <div class="fault" v-if="faultDetails!=null">
    <div class="title-fault" >
      产品名称:&nbsp;&nbsp;{{faultDetails.materialName}}
    </div>
    <div class="title-fault">
      产品编码:&nbsp;&nbsp;{{faultDetails.materialCode}}
    </div>
  </div>
  <div class="mainContentBox">

    <avue-crud
      ref="crudRef"
      v-model:search="search"
      v-model="form"
      :data="data"
      :option="option"
      v-model:page="page"
      @row-save="createRow"
      @row-update="updateRow"
      @row-del="deleteRow"
      @search-change="searchChange"
      @search-reset="resetChange"
      @selection-change="selectionChange"
    >



    </avue-crud>

  </div>
  <div class="fault">
    <div class="image-title">图片</div>
      <div v-for="(image, index) in faultImg" :key="index" class="fault-image">
        <!-- 使用v-for循环渲染图片列表 -->
        <img :src="dictDataUtil.img_url+image.fileUrl" alt="图片" width="150px" class="fault-img">
      </div>

  </div>
  <div class="fault" v-if="faultDetails!=null">
    <div class="fault-detail" >序列号:&nbsp;&nbsp;{{faultDetails.seqNo}}</div>
    <div class="fault-detail">故障描述:&nbsp;&nbsp;{{faultDetails.remark}}</div>

    <div class="title-fault" style="margin-top: 10px">
      报故人:&nbsp;&nbsp;{{faultDetails.creator}}
    </div>
    <div class="title-fault" style="margin-top: 10px">
      报故工位:&nbsp;&nbsp;{{faultDetails.stationName}}
    </div>
    <div class="title-fault" style="margin-top: 10px;margin-bottom: 10px">
      报故数量:&nbsp;&nbsp;{{faultDetails.unqualifiedNum}}
    </div>
    <div class="title-fault" style="margin-top: 10px;margin-bottom: 10px" v-if="faultDetails.result!=undefined&&faultDetails.result!=null">
      处理结果:&nbsp;&nbsp;{{faultDetails.result}}
    </div>
  </div>
  <avue-form
    ref="formRef"
    v-model="form"
    :option="option2"
  >
  </avue-form>
  <div class="fault" v-if="faultDetails!=null">



    <el-radio-group v-model="radio1" size="large">
      <el-radio-button label="维修" value="repair" />
      <el-radio-button label="报废" value="scrapped" />
    </el-radio-group>
  </div>
  <div style="overflow: hidden">
  <div class="detail-footer">
    <el-button type="primary" @click="onHandle"> 确定 </el-button>
    <el-button @click="cancelWindow">取消</el-button>

  </div>
  </div>
</template>
<script setup>
  import { ref, getCurrentInstance } from "vue";
  import { useCrud } from "@/hooks/userCrud";
  import ButtonPermKeys from "@/common/configs/buttonPermission";
  import { useCommonStoreHook, useDictionaryStore } from "@/store";
  const { isShowTable, tableType } = toRefs(useCommonStoreHook());
  import {getFault,getFaultDetails,handleEscalationFault} from "@/api/fault"
  import dictDataUtil from "@/common/configs/dictDataUtil";
  // 数据字典相关
  const { dicts } = useDictionaryStore();

  const test = () => {
    isShowTable.value = true;
    tableType.value = tableType.value == 1 ? 2 : 1;
  };
  const props = defineProps({
    escalationId: {
      type: String,
      default: () => {
        return 0;
      }
    },
    dia:{
      type:Object,
      default:()=>{
        return {};
      }
    }
  })
  // 传入一个url，后面不带/
  const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
    useCrud({
      src: "/api/v1/process/escalationDefects",
    });
  const { dataNoPageList, createRow, updateRow, deleteRow, searchChange, resetChange } =
    Methords; //增删改查
  const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
  const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
  // checkBtnPerm(ButtonPermKeys.PLAN.BTNS.order_add) :permission="permission"
  // const permission = reactive({
  //   delBtn: checkPerm(buttonPermission.PLAN.BTNS.order_del),
  //   addBtn: checkPerm(buttonPermission.PLAN.BTNS.order_add),
  //   editBtn: checkPerm(buttonPermission.PLAN.BTNS.order_edit),
  //   menu: true,
  // });
  const radio1=ref('repair');
  const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  const router = useRouter();

  const faultImg=ref(null);
  const formData=ref({});
  const faultDetails=ref(null);
  onMounted(() => {
    // console.log("crudRef", crudRef)
    search.value.escalationFaultId=props.escalationId;
    dataNoPageList();
    formData.value.escalationFaultId=props.escalationId;
    getFault(formData.value).then((data) => {

      faultImg.value=data.data;
    });
    getFaultDetails(props.escalationId).then((data) => {

      faultDetails.value=data.data;
      for(let i=0;i<dicts.disposal_measures_type.length;i++){
        if(faultDetails.value.disposalMeasures===dicts.disposal_measures_type[i].dictValue){
          faultDetails.value.disposalMeasures=dicts.disposal_measures_type[i].dictLabel;
        }
      }
    });

  });

const faultHandle=ref({});
 const onHandle=()=>{
   faultHandle.value.id=faultDetails.value.id;
   faultHandle.value.disposalMeasures=radio1.value;
   faultHandle.value.trackingNumber=form.value.trackingNumber;
   faultHandle.value.result=form.value.result;
   handleEscalationFault(faultHandle.value).then((data)=>{
     if(data.code==="200") {
       ElMessage({
         message: data.msg,
         type: "success",
       });
       props.dia.visible=false;
     }
     else {
       ElMessage({
         message: data.msg,
         type: "error",
       });
     }
   });

 }

  // 设置表格列或者其他自定义的option
  option.value = Object.assign(option.value, {
    addBtn: false,
    editBtn:false,
    delBtn:false,
    viewBtn:false,
    menu:false,
    column: [
      {
        label: "缺陷大类",
        prop: "bugType",
        dicData:dicts.defect_mana,
        props: { label: "dictLabel", value: "dictValue" },
      },
      {
        label: "缺陷小类",
        prop: "bugName",
      },
    ],
  });
  const option2=ref(null);
  // 设置表格列或者其他自定义的option
  option2.value = {
    addBtn: false,
    editBtn:false,
    delBtn:false,
    viewBtn:false,
    submitBtn:false,
    emptyBtn:false,
    menu:false,
    column: [
      {
        label: "不合格审理单号",
        prop: "trackingNumber",
        labelWidth:130,
        span:24,
        rules: [{
          required: true,
          message: "请输入不合格审理单号",
          trigger: "blur"
        }],
      },
      {
        label: "处理结果",
        prop: "result",
        labelWidth:130,
        span:24,
        type:"textarea",
        rules: [{
          required: true,
          message: "请输入处理结果",
          trigger: "blur"
        }],
      },
    ],
  };
  const cancelWindow=()=>{
    console.info(props);
    props.dia.visible=false;
  }

</script>
<style>
  .title-fault{
    float: left;
    width: 300px;
  }
  .fault{
    margin-left: 15px;
    margin-top: 10px;
    display: block;
    overflow: hidden;
  }
  .fault-image{
    width: 150px;
    float: left;
    margin-left: 10px;
    overflow: hidden;
  }
  .image-title{
    margin-bottom: 15px;
  }
  .fault-img{
    display: inline-block;
  }
  .fault-detail{
    margin-top: 20px;
  }
  .detail-footer{
    float: right;
    overflow: hidden;
  }
</style>
