<template>
  <div class="app-container">
    
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['pms:repair:add']"
          v-if="status == 'PREPARE'||status == 'NOTPASS'||status == 'APPROVED'|| status == 'SENDBACK'"
        >{{ tLang('common','新增') }}</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="repairlineList">
      <el-table-column :label="tLang('pms','故障描述')" align="center" prop="malfunction" >
        <template #default="scope">
          <el-input v-model="scope.row.malfunction" type="textarea" :placeholder="tLang('common','请输入') + tLang('PMS','故障描述')" :disabled="status != 'PREPARE'&&status != 'APPROVING'&&status != 'SENDBACK'&&status != 'NOTPASS'" />
        </template>
      </el-table-column>
      <el-table-column :label="tLang('pms','故障描述内容')" align="center" prop="malfunctionUrl" >
        <template #default="scope">
          <el-input type="textarea" v-model="scope.row.malfunctionUrl" :placeholder="tLang('common','请输入') + tLang('PMS','故障描述内容')" :disabled="status != 'PREPARE'&&status != 'APPROVING'&&status != 'SENDBACK'&&status != 'NOTPASS'" />
        </template>
      </el-table-column>
      <el-table-column :label="tLang('pms','维修情况')" align="center" prop="repairDes" >        
        <template #default="scope">
          <el-input  v-model="scope.row.repairDes" type="textarea" :placeholder="tLang('common','请输入') + tLang('pms','维修情况')" :disabled="status != 'APPROVED'&&status != 'NOTPASS'" />
        </template>
      </el-table-column>
      <el-table-column :label="tLang('common','操作')" align="center" class-name="small-padding fixed-width">
        <template #default="{row,$index}">
          <el-button
            size="mini"
            type="text"
            icon="delete"
            @click="handleDelete($index)"
            v-hasPermi="['pms:repair:remove']"
            v-if="status == 'PREPARE'||status == 'NOTPASS'||status == 'APPROVED'||status == 'SENDBACK'"
          >{{ tLang('common','删除') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    
  </div>
</template>

<script setup>

const prop = defineProps({
  repairlineList: {
    type: Array,
    default: () => []
  },
  status: {
    type: String,
    default: "PREPARE"
  }
});
const emit = defineEmits();
let loading = ref(false);

//新增
function handleAdd() {
  let list = prop.repairlineList || [];
  list.push({
    malfunction: "",
    malfunctionUrl: "",
    repairDes: ""
  });
  emit("update:repairlineList", list);
}

//删除
function handleDelete(i) {
  let list = prop.repairlineList || [];
  let length = list.length;
  list.splice(i, 1);
  emit("update:repairlineList", list);
}

</script>

<style lang="scss" scoped>

</style>
