<template>
  <basic-container style="max-height: 800px; overflow: hidden">
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      ref="crud"
      v-model="form"
      :permission="permissionList"
      :before-open="beforeOpen"
      :before-close="beforeClose"
      @search-change="searchChange"
      @search-reset="searchReset"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot-scope="{ row }" slot="operationStatus">
        <el-tag
          size="small"
          :type="
            row.operationStatus == 1
              ? 'success'
              : row.operationStatus == 2
              ? ''
              : row.operationStatus == 3
              ? 'info'
              : ''
          "
        >
          {{
            row.operationStatus == 1
              ? "待接单"
              : row.operationStatus == 2
              ? "维修完成"
              : row.operationStatus == 3
              ? "已完成"
              : ""
          }}
        </el-tag>
      </template>
      <template slot-scope="{ type, disabled }" slot="operationStatusForm">
        <div v-if="type == 'view'">
          <el-tag
            size="small"
            :type="
              form.operationStatus == 1
                ? 'success'
                : form.operationStatus == 2
                ? ''
                : form.operationStatus == 3
                ? 'info'
                : ''
            "
          >
            {{
              form.operationStatus == 1
                ? "待接单"
                : form.operationStatus == 2
                ? "维修完成"
                : form.operationStatus == 3
                ? "已完成"
                : ""
            }}
          </el-tag>
        </div>
      </template>
      <template slot-scope="{ type, disabled }" slot="errorVideoForm">
        <div v-if="type == 'view'">
          <video
            :src="form.errorVideo"
            muted
            autoplay
            style="width: 200px; height: 200px"
          ></video>
        </div>
      </template>
      <template slot-scope="{ type, disabled }" slot="errorImgForm">
        <div v-if="type == 'view'">
          <!-- {{from.errorImg}} -->
          <img
            v-for="item in form.errorImg"
            :key="item"
            :src="item"
            alt=""
            style="width: 180px; height: 180px; margin: 0 5px"
          />
        </div>
      </template>
      <template slot-scope="scope" slot="menuLeft">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="small"
          @click="addOperation"
          >需求提报</el-button
        >
      </template>
      <template slot-scope="{ row }" slot="menu">
        <el-button @click="handleView(row)">查看</el-button>
        <el-button @click="handleEdit(row)">编辑</el-button>
        <el-button @click="handleEvaluate(row)">评价并签字</el-button>
      </template>
    </avue-crud>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="50%"
    >
      <div style="height: 500px; overflow: auto">
        <div v-for="(item, index) in addForm" :key="item">
          <div
            style="
              width: 98%;
              height: 30px;
              line-height: 30px;
              padding-left: 5px;
              border-left: 5px solid #000;
              font-size: 18px;
              font-weight: 550;
              color: #000;
              margin: 0px 0 20px;
            "
            v-show="addForm.length > 1"
          >
            填报{{ index + 1 }}
          </div>
          <avue-form :option="item.formOption" :model="item.form"></avue-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleAdd" v-show="dialogTitle == '需求填报'"
          >新 增</el-button
        >
        <el-button @click="handleCancel">取 消</el-button>
        <el-button @click="handleSave" v-show="dialogTitle == '需求填报'"
          >保 存</el-button
        >
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="detailTitle"
      :visible.sync="detailVisible"
      :append-to-body="true"
      width="50%"
    >
      <div style="height:500px;overflow:auto;" >
        <el-form ref="form" :model="detailForm" label-width="120px" label-position="left">
          <div v-show="rowStatus == 1 || rowStatus == 2 || rowStatus == 3">
            <div
              style="
                color: #101010;
                font-size: 20px;
                font-weight: 550;
                margin-bottom: 20px;
              "
            >
              故障信息
            </div>
            <el-form-item label="填报人" prop="errPosition">
              <el-input
                placeholder="请输入填报人"
                readonly
                v-model="detailForm.addPerson"
              ></el-input>
            </el-form-item>
            <el-form-item label="填报人电话" prop="errPosition">
              <el-input
                placeholder="请输入填报人电话"
                readonly
                v-model="detailForm.addPersonPhone"
              ></el-input>
            </el-form-item>
            <el-form-item label="故障位置" prop="errPosition">
              <el-input
                placeholder="请输入故障位置"
                readonly
                v-model="detailForm.errPosition"
              ></el-input>
            </el-form-item>
            <el-form-item label="设备名称" prop="deviceName">
              <el-select
                placeholder="请选择设备名称"
                disabled
                v-model="detailForm.deviceName"
                style="width: 100%"
              >
                <el-option
                  v-for="item in deviceList"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="故障专业类型" prop="errType">
              <el-select
                placeholder="请选择故障专业类型"
                disabled
                v-model="detailForm.errType"
                style="width: 100%"
              >
                <el-option
                  v-for="item in errorList"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="故障现象描述" prop="errDescirb">
              <el-input
                placeholder="请输入故障现象描述"
                readonly
                type="textarea"
                v-model="detailForm.errDescirb"
              ></el-input>
            </el-form-item>
            <el-form-item label="故障视频">
              <video
                :src="detailForm.errorVideo"
                style="width: 148px; height: 148px"
                controls
              ></video>
            </el-form-item>
            <el-form-item label="故障图片">
              <img v-for="item in detailForm.errorImg" :key="item" :src="item" alt="" style="width: 148px; height: 148px;margin-right:10px;">
            </el-form-item>
            <el-form-item label="提报时间">
              <el-date-picker
                v-model="detailForm.addTime"
                type="datetime"
                style="width:100%;"
                disabled
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </div>
          <div v-show="rowStatus == 2 || rowStatus == 3">
            <div
              style="
                color: #101010;
                font-size: 20px;
                font-weight: 550;
                margin-bottom: 20px;
              "
            >
              处理情况
            </div>
            <el-form-item label="接单时间时间">
              <el-date-picker
                v-model="detailForm.orderTime"
                type="datetime"
                disabled
                style="width:100%;"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </div>
          <div v-show="rowStatus == 2 || rowStatus == 3">
            <div
              style="
                color: #101010;
                font-size: 20px;
                font-weight: 550;
                margin-bottom: 20px;
              "
            >
              维修详情
            </div>
            <el-form-item label="填报人" prop="maintainPerson">
              <el-input
                placeholder="请输入填报人"
                readonly
                v-model="detailForm.maintainPerson"
              ></el-input>
            </el-form-item>
            <el-form-item label="设备名称" prop="maintainName">
              <el-select
                placeholder="请选择设备名称"
                disabled
                v-model="detailForm.maintainName"
                style="width: 100%"
              >
                <el-option
                  v-for="item in deviceList"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="故障原因" prop="errorReason">
              <el-input
                placeholder="请输入故障原因"
                readonly
                type="textarea"
                v-model="detailForm.errorReason"
              ></el-input>
            </el-form-item>
            <el-form-item label="处理方法" prop="dealMethod">
              <el-input
                placeholder="请输入处理方法"
                readonly
                type="textarea"
                v-model="detailForm.dealMethod"
              ></el-input>
            </el-form-item>
            <el-form-item label="维修材料">
              <el-table :data="detailForm.tableData" border style="width: 100%" show-summary>
                <el-table-column
                  prop="name"
                  align="center"
                  label="物料名称"
                  >
                </el-table-column>
                <el-table-column
                  prop="money"
                  align="center"
                  label="金额"
                  >
                </el-table-column>
              </el-table>
            </el-form-item>
          </div>
          <div v-show="rowStatus == 3 || isEvalute">
            <div
              style="
                color: #101010;
                font-size: 20px;
                font-weight: 550;
                margin-bottom: 20px;
              "
            >
              评价
            </div>
            <div>
              <p>1.您对本次维修的质量方面满意吗？</p>
              <div style="display:flex;">
                <div 
                  style="width: 150px;
                    border-radius: 5px;
                    height: 30px;
                    text-align: center;
                    line-height: 30px;
                    margin-right: 20px;
                    cursor:pointer;"
                  :style="{background:isQuality == '1' ? '#3a62d733' : 'rgb(239, 239, 239)',color:isQuality == '1' ? '#3a62d7' : '#4f4f4f'}"
                  @click="clickQualityYes">满意</div>
                <div
                  style="width: 150px;
                    border-radius: 5px;
                    height: 30px;
                    background: rgb(239, 239, 239);
                    text-align: center;
                    line-height: 30px;
                    margin-right: 20px;cursor:pointer;"
                    :style="{background:isQuality == '2' ? '#3a62d733' : 'rgb(239, 239, 239)',color:isQuality == '2' ? '#3a62d7' : '#4f4f4f'}"
                  @click="clickQualityNo">不满意</div>
              </div>
            </div>
            <div>
              <p>2.您对本次维修的安全方面满意吗？</p>
              <div style="display:flex;">
                <div 
                  style="width: 150px;
                    border-radius: 5px;
                    height: 30px;
                    background: rgb(239, 239, 239);
                    text-align: center;
                    line-height: 30px;
                    margin-right: 20px;cursor:pointer;"
                    :style="{background:isSafe == '1' ? '#3a62d733' : 'rgb(239, 239, 239)',color:isSafe == '1' ? '#3a62d7' : '#4f4f4f'}"
                    @click="clickSafeYes"
                  >满意</div>
                <div
                  style="width: 150px;
                    border-radius: 5px;
                    height: 30px;
                    background: rgb(239, 239, 239);
                    text-align: center;
                    line-height: 30px;
                    margin-right: 20px;cursor:pointer;"
                    :style="{background:isSafe == '2' ? '#3a62d733' : 'rgb(239, 239, 239)',color:isSafe == '2' ? '#3a62d7' : '#4f4f4f'}"
                    @click="clickSafeNo"
                  >不满意</div>
              </div>
            </div>
            <div>
              <p>3.您对本次维修的时效方面满意吗？</p>
              <div style="display:flex;margin-bottom:30px;">
                <div 
                  style="width: 150px;
                    border-radius: 5px;
                    height: 30px;
                    background: rgb(239, 239, 239);
                    text-align: center;
                    line-height: 30px;
                    margin-right: 20px;cursor:pointer;"
                    :style="{background:isTime == '1' ? '#3a62d733' : 'rgb(239, 239, 239)',color:isTime == '1' ? '#3a62d7' : '#4f4f4f'}"
                    @click="clickTimeYes"
                  >满意</div>
                <div
                  style="width: 150px;
                    border-radius: 5px;
                    height: 30px;
                    background: rgb(239, 239, 239);
                    text-align: center;
                    line-height: 30px;
                    margin-right: 20px;cursor:pointer;"
                    :style="{background:isTime == '2' ? '#3a62d733' : 'rgb(239, 239, 239)',color:isTime == '2' ? '#3a62d7' : '#4f4f4f'}"
                    @click="clickTimeNo"
                    >不满意</div>
              </div>
            </div>
          </div>
          <div v-show="rowStatus == 3 || isEvalute">
            <div
              style="
                color: #101010;
                font-size: 20px;
                font-weight: 550;
                margin-bottom: 20px;
              "
            >
              签名
            </div>
            <avue-sign ref="sign"></avue-sign>
            <el-button @click="clearName">清空</el-button>
            <el-button @click="confirmName">确定</el-button>
            <el-form-item label="签名人" prop="personName">
              <el-input
                placeholder="请输入签名人"
                v-model="detailForm.personName"
              ></el-input>
            </el-form-item>
            <el-form-item label="签名时间" prop="time">
              <el-date-picker
                v-model="detailForm.time"
                type="datetime"
                style="width:100%;"
                placeholder="请选择签名时间">
              </el-date-picker>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="handleConfirm">评价并签字</el-button>
      </span>
    </el-dialog>
  </basic-container>
</template>

<script>
import { mapGetters } from "vuex";
import { dateFormat } from "../../util/date";
let action = "https://api.avuejs.com/imgupload";

export default {
  data() {
    return {
      showPrint: false,
      dialogTitle: "需求填报",
      dialogVisible: false,
      detailTitle: "需求详情",
      detailVisible: true,
      uploadUrl: "",
      form: {},
      addForm: [
        {
          form: {
            errPosition: "",
            deviceName: "",
            errType: "",
            errDescirb: "",
            errorVideo: "",
            errorImgs: [],
          },
          formOption: {
            emptyBtn: false,
            submitBtn: false,
            column: [
              {
                label: "故障位置",
                labelWidth: 120,
                prop: "errPosition",
                type: "input",
                span: 24,
              },
              {
                label: "设备名称",
                labelWidth: 120,
                span: 24,
                prop: "deviceName",
                type: "select",
                dicData: [
                  {
                    label: "名称1",
                    value: 0,
                  },
                  {
                    label: "名称2",
                    value: 1,
                  },
                ],
              },
              {
                label: "故障专业类型",
                labelWidth: 120,
                span: 24,
                prop: "errType",
                type: "select",
                dicData: [
                  {
                    label: "类型1",
                    value: 0,
                  },
                  {
                    label: "类型2",
                    value: 1,
                  },
                ],
              },
              {
                label: "故障现象描述",
                labelWidth: 120,
                span: 24,
                prop: "errDescirb",
                type: "textarea",
                minRows: 3,
                maxRows: 5,
              },
              {
                label: "故障视频",
                labelWidth: 120,
                prop: "errorVideo",
                type: "upload",
                propsHttp: {
                  res: "data",
                  url: "url",
                  name: "name",
                  home: "https://www.w3school.com.cn",
                },
                fileType: "video", //img/video/audio
                listType: "picture-img",
                span: 24,
                action: action,
              },
              {
                label: "照片墙",
                labelWidth: 120,
                span: 24,
                prop: "imgUrl",
                listType: "picture-card",
                type: "upload",
                fileType: "img", //img/video/audio
                action: action,
              },
            ],
          },
        },
      ],
      query: {},
      loading: true,
      parentId: 0,
      direction: "rtl",
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      deviceList: [
        { label: "设备一", value: "001" },
        { label: "设备二", value: "002" },
        { label: "设备三", value: "003" },
        { label: "设备四", value: "004" },
      ],
      errorList: [
        { label: "类别一", value: "01" },
        { label: "类别二", value: "02" },
        { label: "类别三", value: "03" },
        { label: "类别四", value: "04" },
      ],
      isRegister: false,
      option: {
        height: "auto",
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        dialogType: "dialog",
        dialogClickModal: false,
        addBtn: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        searchShowBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menuWidth: 320,
        column: [
          {
            label: "提报时间",
            prop: "addTime",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            search: true,
            hide: true,
            viewDisplay: false,
            searchValue: dateFormat(new Date(), "yyyy-MM-dd"),
            searchClearable: false,
          },
          {
            label: "需求单号",
            labelWidth: 120,
            prop: "operationNo",
            overHidden: true,
          },
          {
            label: "设备名称",
            labelWidth: 120,
            prop: "deviceName",
            overHidden: true,
          },
          {
            label: "故障位置",
            labelWidth: 120,
            prop: "errPosition",
            type: "select",
            overHidden: true,
            // hide: true,
            search: true,
            // viewDisplay: false,
            // dicUrl: '/api/blade-system/dict-biz/get-hc-project',
            props: {
              label: "dictValue",
              value: "dictValue",
            },
          },
          {
            label: "故障专业类型",
            labelWidth: 120,
            prop: "errType",
            overHidden: true,
            type: "select",
            searchLabelWidth: 100,
            hide: true,
            search: true,
            viewDisplay: false,
            // dicUrl: '/api/blade-system/dict-biz/get-hc-project',
            props: {
              label: "dictValue",
              value: "dictValue",
            },
          },
          {
            label: "故障现象描述",
            labelWidth: 120,
            prop: "errDescirb",
            overHidden: true,
            slot: true,
          },
          {
            label: "故障视频",
            labelWidth: 120,
            prop: "errorVideo",
            // hide:true,
            // propsHttp: {
            //   res: 'data',
            //   url:'url',
            //   name:'name',
            //   home: 'https://www.w3school.com.cn'
            // },
            // action: 'https://api.avuejs.com/imgupload',
            // listType: 'picture-img',
            // formslot:true,
          },
          {
            label: "故障图片",
            labelWidth: 120,
            prop: "errorImg",
            type: "upload",
            hide: true,
            formslot: true,
          },
          {
            label: "提报时间",
            labelWidth: 120,
            prop: "operationDate",
            slot: true,
          },
          {
            label: "状态",
            labelWidth: 120,
            prop: "operationStatus",
            slot: true,
            formslot: true,
          },
          {
            label: "完成时间",
            labelWidth: 120,
            prop: "finishDate",
            slot: true,
          },
        ],
      },
      data: [],
      videoList: "", //上传成功的视频
      form2Option: {
        emptyBtn: false,
        submitBtn: false,
        column: [
          {
            label: "故障位置",
            labelWidth: 120,
            prop: "errPosition",
            type: "input",
            span: 24,
          },
          {
            label: "设备名称",
            labelWidth: 120,
            span: 24,
            prop: "deviceName",
            type: "select",
            dicData: [
              {
                label: "名称1",
                value: 0,
              },
              {
                label: "名称2",
                value: 1,
              },
            ],
          },
          {
            label: "故障专业类型",
            labelWidth: 120,
            span: 24,
            prop: "errType",
            type: "select",
            dicData: [
              {
                label: "类型1",
                value: 0,
              },
              {
                label: "类型2",
                value: 1,
              },
            ],
          },
          {
            label: "故障现象描述",
            labelWidth: 120,
            span: 24,
            prop: "errDescirb",
            type: "textarea",
            minRows: 3,
            maxRows: 5,
          },
          {
            label: "故障视频",
            labelWidth: 120,
            prop: "errorVideo",
            type: "upload",
            propsHttp: {
              res: "data",
              url: "url",
              name: "name",
              home: "https://www.w3school.com.cn",
            },
            fileType: "video", //img/video/audio
            listType: "picture-img",
            span: 24,
            action: action,
          },
          {
            label: "照片墙",
            labelWidth: 120,
            span: 24,
            prop: "imgUrl",
            listType: "picture-card",
            type: "upload",
            fileType: "img", //img/video/audio
            action: action,
          },
        ],
      },
      detailForm: {},
      rowStatus:'',
      isEvalute:false,
      isQuality:0,
      isSafe:0,
      isTime:0,
      nameImg:''
    };
  },
  directives: {
    print,
  },

  computed: {
    ...mapGetters(["userInfo", "permission", "systemTime"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.notice_add, false),
        viewBtn: this.vaildData(this.permission.notice_view, false),
        delBtn: this.vaildData(this.permission.notice_delete, false),
        editBtn: this.vaildData(this.permission.notice_edit, false),
      };
    },
  },
  created() {},
  mounted() {},
  methods: {
    // 需求提报
    addOperation() {
      this.dialogTitle = "需求填报";
      this.addForm = [
        {
          form: {
            errPosition: "",
            deviceName: "",
            errType: "",
            errDescirb: "",
            errorVideo: "",
            errorImgs: [],
          },
          formOption: {
            emptyBtn: false,
            submitBtn: false,
            column: [
              {
                label: "故障位置",
                labelWidth: 120,
                prop: "errPosition",
                type: "input",
                span: 24,
              },
              {
                label: "设备名称",
                labelWidth: 120,
                span: 24,
                prop: "deviceName",
                type: "select",
                dicData: [
                  {
                    label: "名称1",
                    value: 0,
                  },
                  {
                    label: "名称2",
                    value: 1,
                  },
                ],
              },
              {
                label: "故障专业类型",
                labelWidth: 120,
                span: 24,
                prop: "errType",
                type: "select",
                dicData: [
                  {
                    label: "类型1",
                    value: 0,
                  },
                  {
                    label: "类型2",
                    value: 1,
                  },
                ],
              },
              {
                label: "故障现象描述",
                labelWidth: 120,
                span: 24,
                prop: "errDescirb",
                type: "textarea",
                minRows: 3,
                maxRows: 5,
              },
              {
                label: "故障视频",
                labelWidth: 120,
                prop: "errorVideo",
                type: "upload",
                propsHttp: {
                  res: "data",
                  url: "url",
                  name: "name",
                  home: "https://www.w3school.com.cn",
                },
                fileType: "video", //img/video/audio
                listType: "picture-img",
                span: 24,
                action: action,
              },
              {
                label: "照片墙",
                labelWidth: 120,
                span: 24,
                prop: "imgUrl",
                listType: "picture-card",
                type: "upload",
                fileType: "img", //img/video/audio
                action: action,
              },
            ],
          },
        },
      ];
      this.dialogVisible = true;
    },
    // 视频上传成功
    handleSuccessVideo(response, file, fileList, item) {
      console.log("response--------------->", response);
      console.log("file--------------->", file);
      console.log("fileList--------------->", fileList);
      console.log("item--------------->", item);
    },
    // 点击新增按钮
    handleAdd() {
      console.log("addForm --------------->", this.addForm);
      let emptyPos = this.addForm.find((item) => item.form.errPosition == "");
      let emptyDevice = this.addForm.find((item) => item.form.deviceName == "");
      let emptyType = this.addForm.find((item) => item.form.errType == "");
      let emptyDes = this.addForm.find((item) => item.form.errDescirb == "");
      let emptyVideo = this.addForm.find((item) => item.form.errorVideo == "");
      let emptyImg = this.addForm.find(
        (item) => item.form.errorImgs.length == 0
      );
      if (
        emptyPos ||
        emptyDevice ||
        emptyType ||
        emptyDes ||
        emptyVideo ||
        emptyImg
      ) {
        this.$message.error("需求填报时各内容均不可为空，请填写完全");
      } else {
        this.addForm.push({
          form: {
            errPosition: "",
            deviceName: "",
            errType: "",
            errDescirb: "",
            errorVideo: "",
            errorImgs: [],
          },
          formOption: {
            emptyBtn: false,
            submitBtn: false,
            column: [
              {
                label: "故障位置",
                labelWidth: 120,
                prop: "errPosition",
                type: "input",
                span: 24,
              },
              {
                label: "设备名称",
                labelWidth: 120,
                span: 24,
                prop: "deviceName",
                type: "select",
                dicData: [
                  {
                    label: "名称1",
                    value: 0,
                  },
                  {
                    label: "名称2",
                    value: 1,
                  },
                ],
              },
              {
                label: "故障专业类型",
                labelWidth: 120,
                span: 24,
                prop: "errType",
                type: "select",
                dicData: [
                  {
                    label: "类型1",
                    value: 0,
                  },
                  {
                    label: "类型2",
                    value: 1,
                  },
                ],
              },
              {
                label: "故障现象描述",
                labelWidth: 120,
                span: 24,
                prop: "errDescirb",
                type: "textarea",
                minRows: 3,
                maxRows: 5,
              },
              {
                label: "故障视频",
                labelWidth: 120,
                prop: "errorVideo",
                type: "upload",
                propsHttp: {
                  res: "data",
                  url: "url",
                  name: "name",
                  home: "https://www.w3school.com.cn",
                },
                fileType: "video", //img/video/audio
                listType: "picture-img",
                span: 24,
                action: action,
              },
              {
                label: "照片墙",
                labelWidth: 120,
                span: 24,
                prop: "imgUrl",
                listType: "picture-card",
                type: "upload",
                fileType: "img", //img/video/audio
                action: action,
              },
            ],
          },
        });
      }
    },
    // 点击关闭按钮
    handleClose(){
      this.detailForm = {}
      this.detailVisible = false
    },
    // 点击取消按钮
    handleCancel() {
      this.dialogVisible = false;
      this.addForm = [
        {
          form: {
            errPosition: "",
            deviceName: "",
            errType: "",
            errDescirb: "",
            errorVideo: "",
            errorImgs: [],
          },
          formOption: {
            emptyBtn: false,
            submitBtn: false,
            column: [
              {
                label: "故障位置",
                labelWidth: 120,
                prop: "errPosition",
                type: "input",
                span: 24,
              },
              {
                label: "设备名称",
                labelWidth: 120,
                span: 24,
                prop: "deviceName",
                type: "select",
                dicData: [
                  {
                    label: "名称1",
                    value: 0,
                  },
                  {
                    label: "名称2",
                    value: 1,
                  },
                ],
              },
              {
                label: "故障专业类型",
                labelWidth: 120,
                span: 24,
                prop: "errType",
                type: "select",
                dicData: [
                  {
                    label: "类型1",
                    value: 0,
                  },
                  {
                    label: "类型2",
                    value: 1,
                  },
                ],
              },
              {
                label: "故障现象描述",
                labelWidth: 120,
                span: 24,
                prop: "errDescirb",
                type: "textarea",
                minRows: 3,
                maxRows: 5,
              },
              {
                label: "故障视频",
                labelWidth: 120,
                prop: "errorVideo",
                type: "upload",
                propsHttp: {
                  res: "data",
                  url: "url",
                  name: "name",
                  home: "https://www.w3school.com.cn",
                },
                fileType: "video", //img/video/audio
                listType: "picture-img",
                span: 24,
                action: action,
              },
              {
                label: "照片墙",
                labelWidth: 120,
                span: 24,
                prop: "imgUrl",
                listType: "picture-card",
                type: "upload",
                fileType: "img", //img/video/audio
                action: action,
              },
            ],
          },
        },
      ];
    },
    // 点击编辑按钮
    handleEdit(row) {
      console.log("row--------------------->", row);
      this.dialogTitle = "编辑";
      this.addForm = [
        {
          form: {
            errPosition: "",
            deviceName: "",
            errType: "",
            errDescirb: "",
            errorVideo: "",
            errorImgs: [],
          },
          formOption: {
            emptyBtn: false,
            submitBtn: false,
            column: [
              {
                label: "故障位置",
                labelWidth: 120,
                prop: "errPosition",
                type: "input",
                span: 24,
              },
              {
                label: "设备名称",
                labelWidth: 120,
                span: 24,
                prop: "deviceName",
                type: "select",
                dicData: [
                  {
                    label: "名称1",
                    value: 0,
                  },
                  {
                    label: "名称2",
                    value: 1,
                  },
                ],
              },
              {
                label: "故障专业类型",
                labelWidth: 120,
                span: 24,
                prop: "errType",
                type: "select",
                dicData: [
                  {
                    label: "类型1",
                    value: 0,
                  },
                  {
                    label: "类型2",
                    value: 1,
                  },
                ],
              },
              {
                label: "故障现象描述",
                labelWidth: 120,
                span: 24,
                prop: "errDescirb",
                type: "textarea",
                minRows: 3,
                maxRows: 5,
              },
              {
                label: "故障视频",
                labelWidth: 120,
                prop: "errorVideo",
                type: "upload",
                propsHttp: {
                  res: "data",
                  url: "url",
                  name: "name",
                  home: "https://www.w3school.com.cn",
                },
                fileType: "video", //img/video/audio
                listType: "picture-img",
                span: 24,
                action: action,
              },
              {
                label: "照片墙",
                labelWidth: 120,
                span: 24,
                prop: "imgUrl",
                listType: "picture-card",
                type: "upload",
                fileType: "img", //img/video/audio
                action: action,
              },
            ],
          },
        },
      ];
      this.dialogVisible = true;
    },

    clickQualityYes(){
      this.isQuality = 1
    },
    clickQualityNo(){
      this.isQuality = 2
    },
    clickSafeYes(){
      this.isSafe = 1
    },
    clickSafeNo(){
      this.isSafe = 2
    },
    clickTimeYes(){
      this.isTime = 1
    },
    clickTimeNo(){
      this.isTime = 2
    },

    confirmName(){
      this.nameImg = this.$refs.sign.submit(80, 50);
    },

    clearName(){
     this.$refs.sign.clear()
     this.nameImg = ''
    },
    

    // 点击行内的评价并签字按钮
    handleEvaluate(row){
      this.rowStatus = row.operationStatus
      this.detailVisible = true
      this.detailForm = row
      this.isEvalute = true
    },

    // 查看
    handleView(row){
      this.rowStatus = row.operationStatus 
      this.detailVisible = true
      this.detailForm = row
    },

    // 点击保存按钮
    handleSave() {
      this.dialogVisible = false;
    },
    // 点击确定按钮
    handleConfirm() {
      this.dialogVisible = false;
    },
    beforeOpen(done, type) {
      done();
    },
    beforeClose(done) {
      done();
    },
    searchReset(params, done) {
      //   params.releaseTimeRange = dateFormat(new Date(), 'yyyy-MM-dd');
      this.query = params;
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    closeDraw() {
      this.isRegister = false;
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.data = [
        {
          addPerson:'张三',
          addPersonPhone:'13325412312',
          operationNo: "WX-20240820-01",
          deviceName: "通风柜",
          errPosition: "一楼102室",
          errType: "暖通自控",
          errDescirb: "通风柜无风，不通风",
          operationDate: "2024-02-15",
          operationStatus: 1,
          finishDate: "2024-02-26",
          addTime:'2024-02-15 16:00:05',
          errorVideo: "/i/movie.ogg",
          errorImg: [
            "https://api.avuejs.com/imgview/1721789673575.jpg",
            "https://api.avuejs.com/imgview/1721800386561.jpg",
          ],
        },
        {
          addPerson:'张三',
          addPersonPhone:'13325412312',
          operationNo: "WX-20240820-01",
          deviceName: "通风柜",
          errPosition: "一楼102室",
          errType: "暖通自控",
          errDescirb: "通风柜无风，不通风",
          operationDate: "2024-02-15",
          operationStatus: 2,
          finishDate: "2024-02-26",
          addTime:'2024-02-15 16:00:05',
          errorVideo: "https://api.avuejs.com/imgview/主动管控页面.mp4",
          errorImg: [],
          orderTime:'2024-02-18 15:32:10',
          maintainPerson:'李四',
          maintainName:'通风柜',
          errorReason:'故障原因故障原因故障原因故障原因故障原因故障原因故障原因故障原因故障原因故障原因',
          dealMethod:'处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法',
          tableData:[
            {name:'物料1',money:100.00},
            {name:'物料2',money:100.00},
            {name:'物料3',money:58.50},
            {name:'物料4',money:32.00},
          ]
        },
        {
          addPerson:'张三',
          addPersonPhone:'13325412312',
          operationNo: "WX-20240820-01",
          deviceName: "通风柜",
          errPosition: "一楼102室",
          errType: "暖通自控",
          errDescirb: "通风柜无风，不通风",
          operationDate: "2024-02-15",
          operationStatus: 3,
          finishDate: "2024-02-26",
          addTime:'2024-02-15 16:00:05',
          errorVideo: "https://api.avuejs.com/imgview/主动管控页面.mp4",
          errorImg: [],
          orderTime:'2024-02-18 15:32:10',
          maintainPerson:'李四',
          maintainName:'通风柜',
          errorReason:'故障原因故障原因故障原因故障原因故障原因故障原因故障原因故障原因故障原因故障原因',
          dealMethod:'处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法处理方法',
          tableData:[
            {name:'物料1',money:100.00},
            {name:'物料2',money:100.00},
            {name:'物料3',money:58.50},
            {name:'物料4',money:32.00},
          ]
        },
      ];
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped></style>
<style lang="scss">
.el-drawer__wrapper {
  .register_box {
    width: 800px !important;
    // padding: 0 40px;

    .title_box {
      // padding: 0 40px;
      // margin-top: 40px;

      .title_txt {
        display: flex;
        height: 30px;
        align-items: center;
        justify-content: space-between;

        .txt {
          color: rgba(0, 0, 0, 0.85);
          font-weight: 500;
          line-height: 24px;
        }

        .img_box {
          img {
            width: 30px;
            height: 30px;
          }
        }
      }

      .sub_txt {
        font-size: 12px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #999999;
        line-height: 16px;
      }
    }

    .tip_box {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 60px 0 20px 0;

      .img {
        width: 30px;
        height: 30px;
      }

      .tip_txt {
        font-size: 24px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #00b578;
        margin-left: 10px;
      }

      .fail_txt {
        color: #f93a4a;
      }

      .warn_txt {
        color: #ff6010;
      }
    }

    .tips_txt {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #f93a4a;
    }

    .tips_warn {
      color: #ff6010;
    }

    .fail_tip {
      color: #ff6010;
    }

    .account_mess {
      .mess_tit {
        font-size: 16px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        margin: 40px 0 20px 0;
      }

      .mess_box {
        width: 100%;
        min-height: 123px;
        background: #f5f6fa;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left_box {
          width: 25%;
          margin-left: 30px;

          .acc_text {
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #999999;
            margin-bottom: 14px;
          }

          .acc_txt {
            font-size: 16px;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-weight: bold;
            color: #00b578;
          }
        }

        .fail_box {
          .acc_txt {
            color: #333333;
          }
        }

        .warn_box {
          .acc_txt {
            color: #333333;
          }
        }

        .right_box {
          display: flex;
          width: 75%;
          align-items: center;
          justify-content: space-between;

          .acc_box {
            .acc_text {
              font-size: 14px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
              font-weight: 400;
              color: #999999;
              margin-bottom: 14px;
            }

            .acc_txt {
              font-size: 16px;
              font-family: Microsoft YaHei-Bold, Microsoft YaHei;
              font-weight: bold;
              color: #00b578;
            }
          }
        }

        .fail_right {
          .acc_box {
            .acc_txt {
              color: #333333;
            }
          }
        }

        .warn_right {
          .acc_box {
            .acc_txt {
              color: #333333;
            }
          }
        }
      }

      .reg_box {
        justify-content: start;

        .left_box {
          .acc_txt {
            color: #333333;
          }
        }

        .right_box {
          .acc_box {
            .acc_txt {
              color: #333333;
            }

            .acc_warn {
              color: #ff6010;
            }
          }
        }
      }
    }

    .btn {
      width: 151px;
      height: 50px;
      background: #1677ff;
      border-radius: 2px 2px 2px 2px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
      margin-top: 50px;
    }
  }

  .prin_table table tr td {
    padding: 4px 0;
  }
}
</style>
