<template>
  <div>
    <el-button type="primary" @click="handleEdit(state.addFormData)"
      >新增</el-button
    >
    <el-upload
      style="display: inline-block; margin: 0 10px 10px 10px"
      class="upload-demo"
      action="/sharding/device/faultmode/input"
      :show-file-list="false"
      :on-success="handleSuccess"
      :on-progress="handleProgress"
      :on-error="handleError"
    >
      <el-button type="primary" :disabled="state.faultmodeTableData.length == 0"
        >导入</el-button
      >
    </el-upload>
    <el-button
      type="primary"
      @click="export2Excel"
      :disabled="state.faultmodeTableData.length == 0"
      >导出</el-button
    >

    <el-table
      :data="state.faultmodeTableData"
      stripe
      style="width: 100%"
      height="700"
    >
      <el-table-column type="index" width="50" />
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="code" label="故障编码"></el-table-column>
      <el-table-column label="频度" width="50">
        <template #default="scope">
          {{ rank(scope.row.occurence) }}
        </template>
      </el-table-column>
      <el-table-column label="严酷度" width="70">
        <template #default="scope">
          {{ rank(scope.row.severity) }}
        </template>
      </el-table-column>
      <el-table-column label="难检度" width="70">
        <template #default="scope">
          {{ rank(scope.row.detection) }}
        </template>
      </el-table-column>
      <el-table-column prop="cause" label="原因"></el-table-column>
      <el-table-column prop="effects" label="导致结果"></el-table-column>
      <el-table-column prop="measure" label="处理方法"></el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            icon="el-icon-delete"
            style="color: red"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 传感点编辑弹出框 -->
    <el-dialog v-model="editVisible" width="40%">
      <el-form :model="editFormData" label-width="80px">
        <el-form-item label="故障编码">
          <el-input v-model="editFormData.code"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="editFormData.name"></el-input>
        </el-form-item>
        <el-form-item label="导致结果">
          <el-input
            v-model="editFormData.effects"
            :rows="2"
            clearable
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="原因">
          <el-input
            v-model="editFormData.cause"
            :rows="2"
            clearable
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="处理方法">
          <el-input
            v-model="editFormData.measure"
            :rows="3"
            clearable
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="严酷度">
              <el-select v-model="editFormData.severity">
                <el-option
                  v-for="item in selectOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="频度">
              <el-select v-model="editFormData.occurence">
                <el-option
                  v-for="item in selectOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option
              ></el-select> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item label="难检度">
              <el-select v-model="editFormData.detection">
                <el-option
                  v-for="item in selectOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option
              ></el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结构">
              <el-cascader
                v-model="editFormData.structurecode"
                :options="cascaderdata"
                :props="{ checkStrictly: true, emitPath: false }"
                clearable
              /> </el-form-item
          ></el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveEdit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, inject, watch } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { outExportExcel } from "/@/utils/exportExcel"; //引入文件
import {
  faultmode_windturbine,
  faultmode_structurecode,
  faultmode_delete,
  faultmode_add_edit,
} from "/@/api/api.js";
import config from "/@/api/config.js";
let cascaderdata = inject("cascaderdata");
let desc = inject("desc");
let treeId = inject("treeId");
watch(
  () => treeId,
  (val, old) => {
    getfaultmode(desc.value.code);
  },
  {
    deep: true,
  }
);
let editVisible = ref(false);
let editFormData = ref({});
onMounted(() => {
  getfaultmode(desc.value.code);
});
const selectV = {
  1: "I",
  2: "II",
  3: "III",
  4: "IV",
  5: "V",
};
const selectOptions = [
  {
    label: "I",
    value: 1,
  },
  {
    label: "II",
    value: 2,
  },
  {
    label: "III",
    value: 3,
  },
  {
    label: "IV",
    value: 4,
  },
  {
    label: "V",
    value: 5,
  },
];
const rank = (v) => {
  return selectV[v] || "";
};
let state = reactive({
  faultmodeTableData: [],
  addFormData: {
    code: "",
    name: "",
    effects: "",
    cause: "",
    measure: "",
    severity: null,
    occurence: null,
    detection: null,
    deviceid: "windturbine",
    structurecode: "",
    models: null,
  },
});
// 新增 编辑
const handleEdit = (row) => {
  editFormData.value = row;
  editVisible.value = true;
};

// 测点 删除
const handleDelete = (row) => {
  // 二次确认删除
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    type: "warning",
  })
    .then(async () => {
      console.warn(row);
      const res = await faultmode_delete(row.id);
      console.warn(res);
      if (res == 1) {
        ElMessage.success(`删除成功!`);
      } else {
        ElMessage.success("删除失败");
      }
      getfaultmode(desc.value.code);
    })
    .catch(() => {});
};
// 保存编辑
const saveEdit = async () => {
  const res = await faultmode_add_edit(editFormData.value);
  console.warn(res);
  if (res.status == 20000) {
    ElMessage.success(`操作成功!`);
    editVisible.value = false;
    getfaultmode(desc.value.code);
  } else {
    ElMessage.success(res.msg);
  }
};
// getData
const getfaultmode = async (code) => {
  const res = await faultmode_structurecode(code);
  state.faultmodeTableData = res;
  console.warn(res);
};

// 批量导入
const handleSuccess = (response, file, fileList) => {
  ElMessage.success(response.msg);
  getfaultmode(desc.value.code);
};
const handleProgress = (response, file, fileList) => {};
const handleError = (response, file, fileList) => {
  ElMessage.success("导入失败!");
};
// 批量导出
const export2Excel = () => {
  const tableData = state.faultmodeTableData;
  // loading.close();
  ElMessage.success(`导出成功!`);
  const tableHeader = [
    "上级结构编码",
    "名称",
    "故障编码",
    "频度",
    "严酷度",
    "难检度",
    "原因",
    "导致结果",
    "处理方法",
  ];
  const tableKey = [
    "structurecode",
    "name",
    "code",
    "occurence",
    "severity",
    "detection",
    "cause",
    "effects",
    "measure",
  ];
  outExportExcel(tableHeader, tableKey, tableData, "故障模式导出excel");
};

</script>
<style lang="scss" scoped>
</style>