<template>
    <div>
         <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-row>
        <el-form-item label="退料单位" prop="backUnit">
          <el-input
            v-model="queryParams.backUnit"
            placeholder="退料单位"
            clearable
            style="width: 240px"
            disabled
          />
        </el-form-item>
        <el-form-item label="退料工程" prop="backPro">
          <el-input
            v-model="queryParams.backPro"
            placeholder="退料工程"
            clearable
            style="width: 240px"
            disabled
          />
        </el-form-item>
        <el-form-item label="维修单号" prop="repairCode">
          <el-input
            v-model="queryParams.repairCode"
            placeholder="维修单号"
            clearable
            style="width: 240px"
            disabled
          />
        </el-form-item>
      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-back"
          size="mini"
          @click="goBack"
          >维修管理</el-button
        >
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      :data="equipmentList"
    >
      <el-table-column
        label="序号"
        type="index"
        align="center"
        min-width="80"
      />
      <el-table-column
        label="类型名称"
        align="center"
        prop="typeName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="规格型号"
        align="center"
        prop="type"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="计量单位" align="center" prop="unitName"  show-overflow-tooltip/>
      <el-table-column
        label="退料数量"
        align="center"
        prop="typeRepairNum"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="已维修数量"
        align="center"
        prop="typeRepairedNum"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="报废数量"
        align="center"
        prop="typeScrapNum"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="待修数量"
        align="center"
        prop="disrepairNum"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column label="管理模式" align="center" prop="manageType">
        <template slot-scope="scope">
          <!-- 0编码1数量 -->
          <div v-if="scope.row.manageType == 0">编码管理</div>
          <div v-if="scope.row.manageType == 1">数量管理</div>
        </template>
      </el-table-column>
    </el-table>

    </div>
</template>

<script>
import {
  getAppRepairMaTypeList,
} from "@/api/repair/repair.js";
import { mapState } from 'vuex'
import { getToken } from "@/utils/auth";
export default {
    name: 'ReturnApplyAdd',
    dicts: ["ma_machine_status"],
    props: {
        repairRow: {
        type: [Object],
        },
    },
    data() {
        return {
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 弹出层标题
            title: '',
            // 查询参数
            queryParams: {
                backUnit: "",
                backPro: "",
                repairCode: "",
                equipmentList: [],
            },
            equipmentList: [],

            // 选中的设备类型
            deviceType: null,
            companyId: '',
            createBy: '',
            rowId: '',
        }
    },
    mounted() {
         this.GetViewByApply();
    },
    computed: {
        ...mapState(["user"]),
    },
    methods: {
    goBack() {
      this.$emit("goBackPage");
    },
    // 获取 任务详情数据
    async GetViewByApply() {
      console.log(this.repairRow);
      this.queryParams.backUnit = this.repairRow.backUnit;
      this.queryParams.backPro = this.repairRow.backPro;
      this.queryParams.repairCode = this.repairRow.repairCode;
      let param = {
        taskId: this.repairRow.taskId,
        keyword: "",
      };
      const res = await getAppRepairMaTypeList(param);
      this.equipmentList = res.data;
      this.equipmentList.forEach((e) => {
        e.disrepairNum = Number(e.typeRepairNum) - Number(e.typeRepairedNum) - Number(e.typeScrapNum);
      });
    },
    },
}
</script>
