<template>
  <div class="repair-form">
    <el-row :gutter="20">
      <el-col :span="isFlow ? 18 : 24" :xs="24">
        <h2 class="form-title">维修审批表</h2>
        <el-divider></el-divider>

        <div class="mt20 mb20" v-if="showAlter && taskName">
          <el-alert title="任务被退回，请修改后重新提交" type="error" :closable="false">
            <return-comment :taskForm="taskForm" @isReturn="isReturn"></return-comment>
          </el-alert>
        </div>

        <el-form ref="form" :model="form" :rules="formRules" :disabled="taskName == ''" class="borrow-table-form">
          <div class="form-table-wrap">
            <table class="form-table">
              <tr>
                <td colspan="2" class="label-cell">申请人</td>
                <td colspan="2">
                  <el-form-item prop="applier" class="table-form-item">
                    <span class="cell-text">{{ getUserName(form.applier) }}</span>
                  </el-form-item>
                </td>
                <td colspan="2" class="label-cell">申请部门</td>
                <td colspan="2">
                  <el-form-item prop="applyDept" class="table-form-item">
                    <span class="cell-text">{{ getDeptName(form.applyDept) }}</span>
                  </el-form-item>
                </td>
                <td colspan="2" class="label-cell">申请日期</td>
                <td colspan="2">
                  <el-form-item prop="applyDate" class="table-form-item">
                    <el-date-picker v-model="form.applyDate" type="date" value-format="yyyy-MM-dd"
                      placeholder="选择日期" style="width: 100%;" disabled>
                    </el-date-picker>
                  </el-form-item>
                </td>
              </tr>

              <tr>
                <td colspan="2" class="label-cell">维修类型</td>
                <td colspan="10">
                  <el-form-item prop="repairUsage" class="table-form-item">
                    <el-radio-group v-model="form.repairUsage" :disabled="taskName != '维修申请'"
                      class="repair-type-group">
                      <el-radio label="0">电脑</el-radio>
                      <el-radio label="1">打印机</el-radio>
                      <el-radio label="2">其他</el-radio>
                      <el-radio label="3">仪器设备</el-radio>
                    </el-radio-group>
                    <el-tag v-if="taskName != '维修申请' && form.repairUsage != null" :type="repairUsageTagType"
                      effect="plain" size="small" class="type-tag">{{ repairUsageLabel }}</el-tag>
                  </el-form-item>
                </td>
              </tr>

              <tr v-if="showProjectDevice">
                <td colspan="2" class="label-cell">
                  关联项目<span class="required-mark" v-if="isInstrumentType && taskName == '维修申请'">*</span>
                </td>
                <td colspan="10">
                  <el-form-item prop="projectId" class="table-form-item">
                    <el-button type="primary" size="mini" @click="openProject = true"
                      v-if="taskName == '维修申请'">选择项目</el-button>
                    <el-button type="text" size="mini" class="ml10" @click="clearProject"
                      v-if="taskName == '维修申请' && form.projectId">清除</el-button>
                    <table class="inner-table" v-if="isProjectSelect && chooseProject">
                      <tr>
                        <td class="label-cell">项目编号</td>
                        <td>{{ chooseProject.projectNumber }}</td>
                        <td class="label-cell">项目名称</td>
                        <td>{{ chooseProject.projectName }}</td>
                      </tr>
                      <tr>
                        <td class="label-cell">项目负责人</td>
                        <td>{{ chooseProject.projectLeaderUser ? chooseProject.projectLeaderUser.nickName : '' }}</td>
                        <td class="label-cell">承担部门</td>
                        <td>{{ chooseProject.undertakingDeptName }}</td>
                      </tr>
                    </table>
                    <span v-if="!form.projectId && taskName != '维修申请'" class="text-muted">无</span>
                  </el-form-item>
                </td>
              </tr>

              <tr v-if="showProjectDevice">
                <td colspan="2" class="label-cell">
                  关联设备<span class="required-mark" v-if="isInstrumentType && taskName == '维修申请'">*</span>
                </td>
                <td colspan="10">
                  <el-form-item prop="deviceId" class="table-form-item">
                    <el-button type="primary" size="mini" @click="openDevice = true"
                      v-if="taskName == '维修申请'">选择设备</el-button>
                    <el-button type="text" size="mini" class="ml10" @click="clearDevice"
                      v-if="taskName == '维修申请' && form.deviceId">清除</el-button>
                    <table class="inner-table" v-if="chooseDevice">
                      <tr>
                        <td class="label-cell">出厂编号</td>
                        <td>{{ chooseDevice.code }}</td>
                        <td class="label-cell">设备名称</td>
                        <td>{{ chooseDevice.name }}</td>
                      </tr>
                      <tr>
                        <td class="label-cell">设备品牌</td>
                        <td>{{ chooseDevice.brand }}</td>
                        <td class="label-cell">规格型号</td>
                        <td>{{ chooseDevice.series }}</td>
                      </tr>
                    </table>
                    <span v-if="!form.deviceId && taskName != '维修申请'" class="text-muted">无</span>
                  </el-form-item>
                </td>
              </tr>

              <tr>
                <td colspan="2" class="label-cell">情况说明</td>
                <td colspan="10">
                  <el-form-item prop="applyReason" class="table-form-item">
                    <el-input v-model="form.applyReason" type="textarea" :rows="4" placeholder="请详细描述设备故障或维修需求"
                      :disabled="taskName != '维修申请'" />
                  </el-form-item>
                </td>
              </tr>

              <tr>
                <td colspan="2" class="label-cell">附件</td>
                <td colspan="10">
                  <el-form-item prop="repairDocument" class="table-form-item">
                    <FileUpload v-if="!form.repairDocument && taskName == '维修申请'" :isShowTip="false" :limit="1"
                      :filePathName="'维修/附件'"
                      :fileType="['doc', 'docx', 'xls', 'xlsx', 'pdf', 'rar', 'zip', 'jpg', 'jpeg', 'png']"
                      @input="getDocumentPath">
                    </FileUpload>
                    <div v-if="form.repairDocument" class="file-link-wrap">
                      <el-link type="primary" icon="el-icon-document"
                        @click="reviewWord(`${baseUrl}${'/profile/upload' + form.repairDocument}`)">
                        {{ getFileName(form.repairDocument) }}
                      </el-link>
                      <el-link class="ml20" type="warning" icon="el-icon-download"
                        :href="`${baseUrl}${'/profile/upload' + form.repairDocument}`" :underline="false"
                        target="_blank">下载</el-link>
                      <el-link class="ml20" type="danger" icon="el-icon-delete" @click="handleDeleteDocument"
                        v-if="taskName == '维修申请'" :underline="false">删除</el-link>
                    </div>
                    <span v-if="!form.repairDocument && taskName != '维修申请'" class="text-muted">无附件</span>
                  </el-form-item>
                </td>
              </tr>

              <tr v-if="showDeptApproval">
                <td colspan="2" class="label-cell">部门审批意见</td>
                <td colspan="10">
                  <el-form-item prop="deptComment" class="table-form-item">
                    <el-input v-model="form.deptComment" type="textarea" :rows="3" placeholder="请输入部门审批意见"
                      :disabled="taskName != '部门审批'" />
                    <auditor-row ref="deptRef" :key="'dept-' + form.deptUserId + '-' + form.deptTime"
                      :isCurrent="taskName == '部门审批'" :signature="form.deptUserId || null"
                      :signTime="formatSignTime(form.deptTime)">
                    </auditor-row>
                  </el-form-item>
                </td>
              </tr>

              <tr v-if="showManagerApproval">
                <td colspan="2" class="label-cell">分管审批意见</td>
                <td colspan="10">
                  <el-form-item prop="managerComment" class="table-form-item">
                    <el-input v-model="form.managerComment" type="textarea" :rows="3" placeholder="请输入分管审批意见"
                      :disabled="taskName != '分管审批'" />
                    <auditor-row ref="managerRef" :key="'mgr-' + form.managerUserId + '-' + form.managerTime"
                      :isCurrent="taskName == '分管审批'" :signature="form.managerUserId || null"
                      :signTime="formatSignTime(form.managerTime)">
                    </auditor-row>
                  </el-form-item>
                </td>
              </tr>

              <tr v-if="showReviewerApproval">
                <td colspan="2" class="label-cell">综合事务部审核</td>
                <td colspan="10">
                  <el-form-item prop="reviewerComment" class="table-form-item">
                    <el-input v-model="form.reviewerComment" type="textarea" :rows="3" placeholder="请输入综合事务部审核意见"
                      :disabled="taskName != '综合事务部审批'" />
                    <auditor-row ref="reviewerRef" :key="'rev-' + form.reviewerId + '-' + form.reviewerTime"
                      :isCurrent="taskName == '综合事务部审批'" :signature="form.reviewerId || null"
                      :signTime="formatSignTime(form.reviewerTime)">
                    </auditor-row>
                  </el-form-item>
                </td>
              </tr>

              <tr v-if="showHandlerApproval">
                <td colspan="2" class="label-cell">维修处理情况</td>
                <td colspan="10">
                  <el-form-item prop="handlerComment" class="table-form-item">
                    <el-input v-model="form.handlerComment" type="textarea" :rows="3" placeholder="请输入维修处理情况"
                      :disabled="taskName != '维修处理'" />
                    <auditor-row ref="handlerRef" :key="'hdl-' + form.handlerId + '-' + form.repairTime"
                      :isCurrent="taskName == '维修处理'" :signature="form.handlerId || null"
                      :signTime="formatSignTime(form.repairTime)">
                    </auditor-row>
                  </el-form-item>
                </td>
              </tr>

              <tr v-if="showHandlerApproval && (taskName == '维修处理' || form.repairMoney != null)">
                <td colspan="2" class="label-cell">维修费用</td>
                <td colspan="10">
                  <el-form-item prop="repairMoney" class="table-form-item">
                    <el-input-number v-model="form.repairMoney" :min="0" :precision="2" :step="100"
                      :disabled="taskName != '维修处理'" />
                    <span class="money-unit">元</span>
                  </el-form-item>
                </td>
              </tr>
            </table>
          </div>
        </el-form>

        <div class="form-footer" v-if="taskName">
          <el-button type="warning" icon="el-icon-folder-checked" @click="saveDraft" v-if="taskName == '维修申请'">保存
          </el-button>
          <el-button type="danger" icon="el-icon-back" @click="returnOpen = true" v-if="taskName != '维修申请'">退回
          </el-button>
          <el-button type="primary" icon="el-icon-check" @click="submitForm">
            {{ taskName != '维修处理' ? '提交下一个流程' : '完成' }}
          </el-button>
        </div>
      </el-col>

      <el-col :span="6" :xs="24" v-if="isFlow">
        <el-card class="flow-card" shadow="hover">
          <h2 class="flow-card-title">流程进度</h2>
          <flow :flowData="flowData" />
        </el-card>
      </el-col>
    </el-row>

    <el-dialog title="退回" :visible.sync="returnOpen" width="40%" append-to-body>
      <return-btn :taskForm="taskForm" :comment="commentByRole()" @goBack="$emit('goBack')" @saves=""
        @cancel="returnOpen = false"></return-btn>
    </el-dialog>
    <el-dialog title="选择项目" :visible.sync="openProject" width="70%" append-to-body>
      <project-choose @chooseProject="confirmProject"></project-choose>
    </el-dialog>
    <el-dialog title="选择设备" :visible.sync="openDevice" width="70%" append-to-body>
      <choose-device :multiple="false" @chooseList="confirmDevice"></choose-device>
    </el-dialog>
  </div>
</template>

<script>
import flow from '@/views/flowable/task/todo/detail/flow'
import { flowXmlAndNode } from "@/api/flowable/definition";
import { getRepair, addRepair, updateRepair } from "@/api/oa/repair/repair";
import { getProject } from "@/api/oa/project/project";
import { getDevice } from "@/api/oa/device/device";
import { complete, getNextFlowNode } from "@/api/flowable/todo";
import { getUsersDeptLeader, getUsersManageLeaderByDept } from '@/api/system/post.js'
import { getUserByRole } from "@/api/system/role";
import ReturnComment from "@/views/flowable/form/components/flowBtn/returnComment.vue";
import ReturnBtn from "@/views/flowable/form/components/flowBtn/returnBtn.vue";
import AuditorRow from '@/views/flowable/form/components/auditorRow.vue';
import projectChoose from '@/views/flowable/form/components/chooseProject.vue';
import ChooseDevice from '@/views/flowable/form/budget/components/chooseDevice.vue';

const REPAIR_TYPE_MAP = {
  '0': '电脑',
  '1': '打印机',
  '2': '其他',
  '3': '仪器设备'
};

const REPAIR_TYPE_TAG = {
  '0': 'primary',
  '1': 'success',
  '2': 'info',
  '3': 'warning'
};

export default {
  name: 'RepairForm',
  components: {
    flow,
    ReturnComment,
    ReturnBtn,
    AuditorRow,
    projectChoose,
    ChooseDevice
  },
  props: {
    taskForm: {
      type: Object,
      required: true
    },
    flowDisabled: {
      type: Boolean,
      default: true
    },
    taskName: {
      type: String,
      required: true
    },
    isFlow: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    'taskForm.formId'() {
      this.initFormData();
    },
    'form.repairUsage'(val) {
      if (val !== '3' && this.taskName === '维修申请') {
        this.$nextTick(() => {
          this.$refs.form && this.$refs.form.clearValidate(['projectId', 'deviceId']);
        });
      }
    }
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      flowData: {},
      isEdit: false,
      form: {
        repairId: null,
        applier: null,
        applyDept: null,
        applyReason: null,
        applyDate: null,
        repairUsage: null,
        repairDocument: null,
        deptUserId: null,
        deptComment: null,
        deptTime: null,
        managerUserId: null,
        managerComment: null,
        managerTime: null,
        reviewerId: null,
        reviewerComment: null,
        reviewerTime: null,
        handlerId: null,
        handlerComment: null,
        repairTime: null,
        repairMoney: null,
        projectId: null,
        deviceId: null
      },
      returnOpen: false,
      showAlter: true,
      openProject: false,
      openDevice: false,
      isProjectSelect: false,
      chooseProject: null,
      chooseDevice: null
    }
  },
  computed: {
    repairUsageLabel() {
      return REPAIR_TYPE_MAP[this.form.repairUsage] || '';
    },
    repairUsageTagType() {
      return REPAIR_TYPE_TAG[this.form.repairUsage] || 'info';
    },
    isInstrumentType() {
      return this.form.repairUsage === '3';
    },
    showProjectDevice() {
      return this.isInstrumentType || this.form.projectId || this.form.deviceId || this.taskName !== '维修申请';
    },
    showDeptApproval() {
      return this.taskName !== '维修申请';
    },
    showManagerApproval() {
      return (this.needManagerApproval() && this.taskName !== '维修申请') ||
        this.form.managerUserId || this.form.managerComment;
    },
    showReviewerApproval() {
      return ['综合事务部审批', '维修处理', ''].includes(this.taskName) ||
        this.form.reviewerId || this.form.reviewerComment;
    },
    showHandlerApproval() {
      return this.taskName === '维修处理' || this.taskName === '' ||
        this.form.handlerId || this.form.handlerComment || this.form.repairMoney != null;
    },
    formRules() {
      if (this.taskName == '') {
        return {};
      } else if (this.taskName == '维修申请') {
        return {
          repairUsage: [
            { required: true, message: '请选择维修类型', trigger: 'change' }
          ],
          applyReason: [
            { required: true, message: '请输入情况说明', trigger: 'blur' }
          ],
          projectId: [
            {
              validator: (rule, value, callback) => {
                if (this.form.repairUsage === '3' && !value) {
                  callback(new Error('请选择关联项目'));
                } else {
                  callback();
                }
              },
              trigger: 'change'
            }
          ],
          deviceId: [
            {
              validator: (rule, value, callback) => {
                if (this.form.repairUsage === '3' && !value) {
                  callback(new Error('请选择关联设备'));
                } else {
                  callback();
                }
              },
              trigger: 'change'
            }
          ]
        };
      } else if (this.taskName == '部门审批') {
        return {
          deptComment: [
            { required: true, message: '请填写部门审批意见', trigger: 'blur' }
          ]
        };
      } else if (this.taskName == '分管审批') {
        return {
          managerComment: [
            { required: true, message: '请填写分管审批意见', trigger: 'blur' }
          ]
        };
      } else if (this.taskName == '综合事务部审批') {
        return {
          reviewerComment: [
            { required: true, message: '请填写综合事务部审核意见', trigger: 'blur' }
          ]
        };
      } else if (this.taskName == '维修处理') {
        return {
          handlerComment: [
            { required: true, message: '请填写维修处理情况', trigger: 'blur' }
          ]
        };
      }
      return {};
    }
  },
  created() {
    if (this.isFlow) {
      flowXmlAndNode({ procInsId: this.taskForm.procInsId, deployId: this.taskForm.deployId }).then(res => {
        this.flowData = res.data;
      });
    }
    this.initFormData();
  },
  methods: {
    initFormData() {
      getRepair(this.taskForm.formId).then(res => {
        if (res.data) {
          this.form = res.data;
          this.isEdit = true;
          this.loadProjectDeviceInfo();
        } else {
          this.form.applier = this.$store.getters.userId;
          this.form.applyDept = this.$store.getters.deptId;
          this.form.applyDate = this.parseTime(new Date(), '{y}-{m}-{d}');
          this.isProjectSelect = false;
          this.chooseProject = null;
          this.chooseDevice = null;
        }
      });
    },
    loadProjectDeviceInfo() {
      if (this.form.projectId) {
        getProject(this.form.projectId).then(response => {
          this.chooseProject = response.data;
          this.isProjectSelect = true;
        });
      } else {
        this.chooseProject = null;
        this.isProjectSelect = false;
      }
      if (this.form.deviceId) {
        getDevice(this.form.deviceId).then(response => {
          this.chooseDevice = response.data;
        });
      } else {
        this.chooseDevice = null;
      }
    },
    confirmProject(val) {
      if (val.length > 1) {
        this.$message.error('请选择一个项目');
        return;
      }
      if (val.length === 1) {
        this.chooseProject = val[0];
        this.isProjectSelect = true;
        this.$set(this.form, 'projectId', val[0].projectId);
        this.$refs.form && this.$refs.form.validateField('projectId');
      }
      this.openProject = false;
    },
    clearProject() {
      this.form.projectId = null;
      this.chooseProject = null;
      this.isProjectSelect = false;
      this.$refs.form && this.$refs.form.validateField('projectId');
    },
    confirmDevice(val) {
      if (val) {
        const device = Array.isArray(val) ? val[0] : val;
        if (device && device.deviceId) {
          this.chooseDevice = device;
          this.$set(this.form, 'deviceId', device.deviceId);
          this.$refs.form && this.$refs.form.validateField('deviceId');
        }
      }
      this.openDevice = false;
    },
    clearDevice() {
      this.form.deviceId = null;
      this.chooseDevice = null;
      this.$refs.form && this.$refs.form.validateField('deviceId');
    },
    hasProject() {
      return this.form.projectId != null && this.form.projectId !== '';
    },
    getRepairHandlerRoleId() {
      return (this.isInstrumentType || this.hasProject()) ? 4 : 21;
    },
    async assignZhDeptReviewer() {
      const roleId = this.hasProject() ? 4 : 21;
      const result = await getUserByRole({ roleId });
      this.$set(this.taskForm.variables, "approval", result.data[0]);
    },
    formatSignTime(val) {
      if (!val) return '';
      if (typeof val === 'string') {
        return val.substring(0, 10);
      }
      return this.parseTime(val, '{y}-{m}-{d}');
    },
    getDocumentPath(val) {
      if (val == "") {
        this.form.repairDocument = "";
        return;
      }
      let arr = val.split('/upload');
      this.form.repairDocument = arr[1];
    },
    handleDeleteDocument() {
      this.$modal.confirm('是否确认删除该附件？').then(() => {
        this.form.repairDocument = '';
      }).catch(() => { });
    },
    isComputerType() {
      return this.form.repairUsage === '0';
    },
    /** 电脑、仪器设备需走分管审批（流程变量 isComputer 控制是否跳过分管节点） */
    needManagerApproval() {
      return this.form.repairUsage === '0' || this.form.repairUsage === '3';
    },
    async saveDraft() {
      if (this.taskName == '') {
        this.$message.info('当前为只读模式，无法保存');
        return;
      }
      this.syncApprovalFields();
      if (this.isEdit) {
        await updateRepair(this.form);
      } else {
        this.form.repairId = this.taskForm.formId;
        await addRepair(this.form);
        this.isEdit = true;
      }
      this.$message.success('保存成功');
    },
    syncApprovalFields() {
      if (this.taskName == '部门审批' && this.$refs.deptRef) {
        this.form.deptUserId = this.$refs.deptRef.localSignatureUserId;
        this.form.deptTime = this.$refs.deptRef.loaclSignTime;
      } else if (this.taskName == '分管审批' && this.$refs.managerRef) {
        this.form.managerUserId = this.$refs.managerRef.localSignatureUserId;
        this.form.managerTime = this.$refs.managerRef.loaclSignTime;
      } else if (this.taskName == '综合事务部审批' && this.$refs.reviewerRef) {
        this.form.reviewerId = this.$refs.reviewerRef.localSignatureUserId;
        this.form.reviewerTime = this.$refs.reviewerRef.loaclSignTime;
      } else if (this.taskName == '维修处理' && this.$refs.handlerRef) {
        this.form.handlerId = this.$refs.handlerRef.localSignatureUserId;
        this.form.repairTime = this.$refs.handlerRef.loaclSignTime;
      }
    },
    submitForm() {
      if (this.taskName == '') {
        this.$message.info('当前为只读模式，无法提交');
        return;
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          let msg = '确认提交维修审批表？';
          if (this.taskName == '维修处理') {
            msg = '最后一个节点，提交将无法修改，是否确认提交？';
          }
          this.$confirm(msg, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.submitFlow();
          }).catch(() => {
            this.$message.info('已取消提交');
          });
        } else {
          this.$message.error('请完善表单信息');
        }
      });
    },
    async submitFlow() {
      await this.saveDraft();
      const needManager = this.needManagerApproval();
      this.$set(this.taskForm.variables, "isComputer", needManager);

      if (this.taskName == '维修申请') {
        const res = await getUsersDeptLeader({ userId: this.$store.getters.userId });
        this.$set(this.taskForm.variables, "approval", res.data.userId);
        if (!needManager) {
          this.$set(this.taskForm.variables, "approvalList", []);
        }
      } else if (this.taskName == '部门审批') {
        if (needManager) {
          let managerList = [];
          const result = await getUsersManageLeaderByDept({ deptId: this.form.applyDept });
          result.data.forEach(element => { managerList.push(element.userId); });
          this.$set(this.taskForm.variables, "approvalList", managerList);
        } else {
          this.$set(this.taskForm.variables, "approvalList", []);
          await this.assignZhDeptReviewer();
        }
      } else if (this.taskName == '分管审批') {
        await this.assignZhDeptReviewer();
      } else if (this.taskName == '综合事务部审批') {
        const result = await getUserByRole({ roleId: this.getRepairHandlerRoleId() });
        this.$set(this.taskForm.variables, "approval", result.data[0]);
      }

      await getNextFlowNode({ taskId: this.taskForm.taskId });
      const response = await complete(this.taskForm);
      this.$modal.msgSuccess(response.msg);
      this.$emit('goBack');
    },
    isReturn(val) {
      this.showAlter = val;
    },
    commentByRole() {
      if (this.taskName == '部门审批') {
        return this.form.deptComment;
      } else if (this.taskName == '分管审批') {
        return this.form.managerComment;
      } else if (this.taskName == '综合事务部审批') {
        return this.form.reviewerComment;
      } else if (this.taskName == '维修处理') {
        return this.form.handlerComment;
      }
      return '';
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/element-reset.scss";

$border-light: #dcdfe6;
$border-soft: #e4e7ed;
$label-bg: #f0f2f5;
$label-color: #606266;
$text-primary: #303133;
$accent: #409eff;

.repair-form {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
}

.form-title {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: $text-primary;
  margin: 0;
  letter-spacing: 2px;
}

.borrow-table-form {
  margin-top: 16px;

  .table-form-item {
    margin-bottom: 0;

    ::v-deep .el-form-item__content {
      margin-left: 0 !important;
      line-height: normal;
    }

    ::v-deep .el-form-item__error {
      position: relative;
      padding-top: 2px;
    }
  }

  ::v-deep .el-input__inner,
  ::v-deep .el-textarea__inner {
    border-color: $border-light;
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;

    &:hover {
      border-color: #c0c4cc;
    }

    &:focus {
      border-color: $accent;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.12);
    }
  }

  ::v-deep .el-input.is-disabled .el-input__inner,
  ::v-deep .el-textarea.is-disabled .el-textarea__inner {
    background-color: #f5f7fa;
    color: #606266;
  }
}

.form-table-wrap {
  border: 1px solid $border-soft;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.form-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
  color: $text-primary;

  tr {
    transition: background-color 0.15s;
  }

  tr:hover td:not(.label-cell) {
    background-color: #fafcff;
  }

  td {
    padding: 12px 14px;
    border-bottom: 1px solid $border-light;
    vertical-align: middle;
    word-break: break-word;
    background: #fff;
  }

  tr:last-child td {
    border-bottom: none;
  }

  .label-cell {
    width: 120px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: $label-color;
    background-color: $label-bg;
    border-right: 1px solid $border-light;
    white-space: nowrap;
  }
}

.cell-text {
  color: $text-primary;
  font-weight: 500;
}

.repair-type-group {
  display: inline-block;
  vertical-align: middle;
}

.type-tag {
  margin-left: 12px;
  vertical-align: middle;
}

.required-mark {
  color: #f56c6c;
  margin-left: 2px;
}

.inner-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 8px;
  font-size: 13px;
  border: 1px solid $border-light;
  border-radius: 8px;
  overflow: hidden;

  td {
    padding: 8px 12px;
    border-bottom: 1px solid $border-light;
    border-right: 1px solid $border-light;
    vertical-align: middle;
    background: #fff;
  }

  tr:last-child td {
    border-bottom: none;
  }

  td:last-child {
    border-right: none;
  }

  .label-cell {
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    color: $label-color;
    background-color: $label-bg;
    white-space: nowrap;
  }
}

.ml10 {
  margin-left: 10px;
}

.file-link-wrap {
  line-height: 28px;
}

.money-unit {
  margin-left: 8px;
  color: #909399;
  font-size: 14px;
}

.text-muted {
  color: #c0c4cc;
  font-size: 14px;
}

.form-footer {
  margin-top: 24px;
  padding-bottom: 20px;
  text-align: center;
}

.flow-card {
  border-radius: 8px;

  .flow-card-title {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: $text-primary;
    margin: 0 0 12px;
  }
}

.mt20 {
  margin-top: 20px;
}

.mb20 {
  margin-bottom: 20px;
}

.ml20 {
  margin-left: 20px;
}
</style>

<style>
.repair-form ::v-deep .el-input.is-disabled .el-input__inner {
  color: #121212 !important;
}

.repair-form ::v-deep .el-textarea.is-disabled .el-textarea__inner {
  color: #121212 !important;
}
</style>
