<template>
  <div class="mainContentBox">
    <avue-crud
      ref="crudRef"
      v-model="form"
      v-model:page="page"
      v-model:search="search"
      :data="data"
      :option="option"
      @row-save="createRow"
      @row-update="updateRow"
      @row-del="deleteRow"
      @search-change="searchChange"
      @search-reset="resetChange"
      @size-change="dataList"
      @current-change="dataList"
      @selection-change="selectionChange"
    >
      <template #menu-left="{ size }">
        <el-button
          v-hasPerm="[ButtonPermKeys.DEVICE.BTNS.repair_del]"
          :disabled="toDeleteIds.length < 1"
          :size="size"
          icon="el-icon-delete"
          type="danger"
          @click="multipleDelete"
        >删除
        </el-button
        >
      </template>
      <template #menu="{ size, row, index }">
        <el-button :size="size" text type="primary" @click="maintenance(row, 0)"
        >流程
          <template #icon>
            <svg-icon icon-class="liucheng"></svg-icon>
          </template>
        </el-button>
        <!--        <el-button @click="maintenance(row,1)"
                   icon="el-icon-fold"
                   text
                   type="primary"
                   :size="size">记录</el-button>-->
      </template>
    </avue-crud>
    <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      width="850px"
      @close="dialog.visible = false"
    >
      <device-page @deviceInfo="deviceInfo"/>
    </el-dialog>

    <el-dialog
      v-model="dialog1.visible"
      :title="dialog1.title"
      height="80%"
      width="750px"
      @close="dialog1.visible = false"
    >
      <el-timeline style="max-width: 500px; margin-left: 100px">
        <el-timeline-item center placement="top" type="success">
          <el-card>
            <h4>设备报故</h4>
            <p>设备编号： {{ maintenanceInfo.deviceNo }}</p>
            <p>设备名称： {{ maintenanceInfo.deviceName }}</p>
            <p>报故人员： {{ maintenanceInfo.creator }}</p>
            <p>故障描述： {{ maintenanceInfo.bugRemark }}</p>
            <p>报故时间： {{ maintenanceInfo.created }}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item
          :type="maintenanceInfo.state === 0 ? 'primary' : 'success'"
          center
          placement="top"
        >
          <el-card v-if="viewPage">
            <h4>设备维修</h4>
            <p>维修人员： {{ maintenanceInfo.handleUser }}</p>
            <p>维修内容： {{ maintenanceInfo.handleContent }}</p>
            <p>
              处理结果：
              {{
                maintenanceInfo.handleUser
                  ? maintenanceInfo.handleResult === 0
                    ? "可正常运行"
                    : "报废"
                  : ""
              }}
            </p>
          </el-card>
          <el-card v-if="!viewPage">
            <h4>设备维修</h4>
            <el-form
              ref="maintenanceInfoForm1"
              :model="maintenanceInfo"
              :rules="rules1"
              label-width="auto"
              style="max-width: 400px"
            >
              <el-form-item label="维修人员" prop="handleUser">
                <!--                <el-input :disabled="maintenanceInfo.state !== 0" v-model="maintenanceInfo.handleUser" />-->
                <el-select
                  v-model="maintenanceInfo.handleUser"
                  :disabled="maintenanceInfo.state !== 0"
                  filterable
                  placeholder="维修人员"
                  size="large"
                >
                  <el-option
                    v-for="item in userList"
                    :key="item.userName"
                    :label="item.userName"
                    :value="item.userName"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="维修内容" prop="handleContent">
                <el-input
                  v-model="maintenanceInfo.handleContent"
                  :disabled="maintenanceInfo.state !== 0"
                  :rows="2"
                  type="textarea"
                />
              </el-form-item>
              <el-form-item label="处理结果">
                <el-radio-group
                  v-model="maintenanceInfo.handleResult"
                  :disabled="maintenanceInfo.state !== 0"
                  class="ml-4"
                >
                  <el-radio :value="0">可正常运行</el-radio>
                  <el-radio :value="1">报废</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item style="margin-left: 45%">
                <el-button
                  v-if="maintenanceInfo.state === 0"
                  v-hasPerm="[ButtonPermKeys.DEVICE.BTNS.repair_repair]"
                  :disabled="maintenanceInfo.state !== 0"
                  type="primary"
                  @click="maintenanceSubmit1"
                >维修
                </el-button
                >
              </el-form-item>
            </el-form>
          </el-card>
        </el-timeline-item>
        <el-timeline-item
          :type="
            maintenanceInfo.state === 1
              ? 'primary'
              : maintenanceInfo.state === 0
                ? 'info'
                : 'success'
          "
          center
          placement="top"
        >
          <el-card v-if="viewPage">
            <h4>设备审批</h4>
            <p>审批人员： {{ maintenanceInfo.auditUser }}</p>
            <p>
              审批结果：
              {{
                maintenanceInfo.auditUser
                  ? maintenanceInfo.auditResult === 0
                    ? "通过"
                    : "不通过"
                  : ""
              }}
            </p>
          </el-card>
          <el-card v-if="!viewPage">
            <h4>设备审批</h4>
            <el-form
              v-if="maintenanceInfo.state >= 1"
              ref="maintenanceInfoForm2"
              :model="maintenanceInfo"
              :rules="rules2"
              label-width="auto"
              style="max-width: 400px"
            >
              <el-form-item label="审批人员" prop="auditUser">
                <!--                <el-input :disabled="maintenanceInfo.state !== 1 && readonly"  v-model="maintenanceInfo.auditUser" />-->
                <el-select
                  v-model="maintenanceInfo.auditUser"
                  :disabled="maintenanceInfo.state !== 1 && readonly"
                  filterable
                  placeholder="审批人员"
                  size="large"
                >
                  <el-option
                    v-for="item in userList"
                    :key="item.userName"
                    :label="item.userName"
                    :value="item.userName"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="审批结果">
                <el-radio-group
                  v-model="maintenanceInfo.auditResult"
                  :disabled="maintenanceInfo.state !== 1 && readonly"
                  class="ml-4"
                >
                  <el-radio :value="0">通过</el-radio>
                  <el-radio :value="1">不通过</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item style="margin-left: 45%">
                <el-button
                  v-if="maintenanceInfo.state === 1"
                  v-hasPerm="[ButtonPermKeys.DEVICE.BTNS.repair_audit]"
                  :disabled="maintenanceInfo.state !== 1"
                  type="primary"
                  @click="maintenanceSubmit2"
                >审批
                </el-button
                >
              </el-form-item>
            </el-form>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>
<script setup>
import {ref, getCurrentInstance} from "vue";
import {useCrud} from "@/hooks/userCrud";
import ButtonPermKeys from "@/common/configs/buttonPermission";
import {checkPerm} from "@/directive/permission";
import {getUserList} from "@/api/system/user";
import {repair, audit} from "@/api/device/index";
import {useCommonStoreHook} from "@/store";
import dictDataUtil from "@/common/configs/dictDataUtil";

const {isShowTable, tableType} = toRefs(useCommonStoreHook());
const test = () => {
  isShowTable.value = true;
  tableType.value = tableType.value == 1 ? 2 : 1;
};
const permission = reactive({
  delBtn: checkPerm(ButtonPermKeys.DEVICE.BTNS.repair_del),
  addBtn: checkPerm(ButtonPermKeys.DEVICE.BTNS.repair_add),
  editBtn: checkPerm(ButtonPermKeys.DEVICE.BTNS.repair_edit),
  menu: true,
});
const viewPage = ref(true);

const dialog = reactive({
  title: "设备选择",
  visible: false,
});
const dialog1 = reactive({
  title: "设备维修",
  visible: false,
});
const userList = ref([]);
// 传入一个url，后面不带/
const {form, data, option, search, page, toDeleteIds, Methords, Utils} =
  useCrud({
    src: "/api/v1/device/repair",
  });
const {dataList, createRow, updateRow, deleteRow, searchChange, resetChange} =
  Methords; //增删改查
const {selectionChange, multipleDelete} = Methords; //选中和批量删除事件
const {checkBtnPerm, downloadTemplate, exportData} = Utils; //按钮权限等工具
const crudRef = ref(null); //crudRef.value 获取avue-crud对象
const deviceInfo = (value) => {
  form.value.deviceNo = value.deviceNo;
  form.value.deviceName = value.deviceName;
  form.value.deviceType = value.deviceType;
  form.value.devicePosition = value.devicePosition;
  dialog.visible = false;
};
const maintenanceInfo = ref(null);
const maintenance = (row, type) => {
  viewPage.value = type === 0 ? false : true;
  maintenanceInfo.value = row;
  maintenanceInfo.value.handResult = 0;
  dialog1.visible = true;
};
const queryUserList = () => {
  getUserList({}).then((data) => {
    userList.value = data.data;
  });
};
const maintenanceInfoForm1 = ref("maintenanceInfoForm1");
const maintenanceInfoForm2 = ref("maintenanceInfoForm2");
const maintenanceSubmit1 = () => {
  //alert(JSON.stringify(maintenanceInfo.value))
  maintenanceInfoForm1.value.validate((isValid, invalidFields) => {
    if (isValid) {
      repair(maintenanceInfo.value).then((data) => {
        ElMessage({
          message: data.msg,
          type: "success",
        });
        dialog1.visible = false;
        dataList();
      });
    }
  });
};
const maintenanceSubmit2 = () => {
  //alert(JSON.stringify(maintenanceInfo.value))
  maintenanceInfoForm2.value.validate((isValid, invalidFields) => {
    if (isValid) {
      audit(maintenanceInfo.value).then((data) => {
        ElMessage({
          message: data.msg,
          type: "success",
        });
        dialog1.visible = false;
        dataList();
      });
    }
  });
};
const rules1 = reactive({
  handleUser: [
    {required: true, message: "维修人员不能为空", trigger: "blur"},
  ],
  handleContent: [
    {required: true, message: "维修内容不能为空", trigger: "blur"},
  ],
});
const rules2 = reactive({
  auditUser: [{required: true, message: "审批人员不能为空", trigger: "blur"}],
});
// 设置表格列或者其他自定义的option
option.value = Object.assign(option.value, {
  delBtn: false,
  selection: true,
  labelWidth: 150,
  viewBtn: false,
  editBtn: false,
  selectable: (row, index) => {
    return row.state === 0;
  },
  column: [
    {
      label: "设备编号",
      prop: "deviceNo",
      search: true,
      rules: [
        {
          required: true,
          message: "设备编号不能为空",
          trigger: "trigger",
        },
      ],
      click: ({value, column}) => {
        if (column.boxType) {
          dialog.visible = true;
        }
      },
    },
    {
      label: "设备名称",
      prop: "deviceName",
      addDisabled: true,
      search: true,
    },
    {
      label: "设备类型",
      prop: "deviceType",
      type: "select",
      addDisabled: true,
      overHidden: true,
      search: true,
      dicUrl: dictDataUtil.request_url + dictDataUtil.TYPE_CODE.device_type,
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
      rules: [
        {
          required: true,
          message: "设备类型不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "设备位置",
      addDisabled: true,
      prop: "devicePosition",
    },
    {
      label: "故障描述",
      prop: "bugRemark",
      minRows: 2, //最小行/最小值
      type: "textarea", //类型为多行文本域框
      maxlength: 512, //最大输入长度,
      overHidden: true,
      rules: [
        {
          required: true,
          message: "故障描述不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "维修状态",
      prop: "state",
      type: "select",
      display: false,
      dicData: [
        {label: "待维修", value: 0},
        {label: "待审批 ", value: 1},
        {label: "已完成", value: 2},
      ],
    },
    {
      label: "报故人",
      prop: "creator",
      display: false,
    },
    {
      label: "报故日期",
      prop: "created",
      width: "180",
      display: false,
    },
  ],
});

onMounted(() => {
  dataList();
  queryUserList();
});
</script>
