<!--
    filename: dialogForm.vue
    author: liubin
    date: 2023-10-31 15:55:13
    description:
-->

<template>
  <el-drawer :visible.sync="visible" :show-close="false" :wrapper-closable="disabled" class="drawer"
    custom-class="mes-drawer" size="50%" @closed="$emit('destroy')">
    <small-title slot="title" :no-padding="true">
      {{ disabled ? '查看详情' : !dataForm.maintenanceStatus ? '修改' : '完成' }}
    </small-title>
    <div class="drawer-body flex">
      <div class="drawer-body__content">
        <div>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="blodTip">故障发生时间</div>
              <div class="lightTip">{{ parseTime(dataForm.faultTime) }}</div>
            </el-col>
            <el-col :span="8">
              <div class="blodTip">故障级别</div>
              <div class="lightTip">{{ getDictDataLabel('fault-level', dataForm.faultLevel) }}</div>
            </el-col>
            <el-col :span="8">
              <div class="blodTip">故障类型</div>
              <div class="lightTip">{{ getDictDataLabel('fault-type', dataForm.faultType) }}</div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="blodTip">维修工</div>
              <div class="lightTip">{{ dataForm.repairman }}</div>
            </el-col>
            <el-col :span="8">
              <div class="blodTip">联系方式</div>
              <div class="lightTip">{{ dataForm.repairmanPhone }}</div>
            </el-col>
            <el-col :span="8">
              <div class="blodTip">维修方式</div>
              <div class="lightTip">{{ getDictDataLabel('repair-mode', dataForm.repairMode) }}</div>
            </el-col>
          </el-row>
          <el-row>
            <div class="blodTip">维修附件</div>
            <div v-if="dataForm.files && dataForm.files.length > 0">
              <uploadedFile
                class="file"
                v-for="file in dataForm.files"
                :file="file"
                :key="file.fileUrl"
                :disabled="disabled"
                @delete="!disabled && handleDeleteFile(file, col.prop)" />
            </div>
            <p v-else>暂无附件</p>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="blodTip">创建时间</div>
              <div class="lightTip">{{ parseTime(dataForm.createTime) }}</div>
            </el-col>
            <el-col :span="8">
              <div class="blodTip">创建人</div>
              <div class="lightTip">{{ dataForm.creator }}</div>
            </el-col>
          </el-row>
          <el-row>
            <div class="blodTip">备注</div>
              <div class="lightTip">{{ dataForm.remark }}</div>
          </el-row>
        </div>
        <!-- <el-divider style="margin-top: -10px" />
        <small-title style="margin: 16px 0; padding-left: 8px" :no-padding="true">
          {{ '设备维修信息' }}
        </small-title> -->
        <!-- <el-form ref="form" :model="dataForm" label-width="100px" label-position="top" v-loading="formLoading">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="维修开始时间" prop="maintenanceStartTime"
                :rules="[{ required: true, message: '维修开始时间不能为空', trigger: 'blur' }]">
                <el-date-picker v-model="dataForm.maintenanceStartTime" type="datetime" :disabled="disabled"
                  placeholder="请选择维修开始时间" value-format="timestamp" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="维修结束时间" prop="maintenanceFinishTime"
                :rules="[{ required: true, message: '维修结束时间不能为空', trigger: 'blur' }]">
                <el-date-picker v-model="dataForm.maintenanceFinishTime" type="datetime" :disabled="disabled"
                  placeholder="请选择维修开始时间" value-format="timestamp" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="维修方式" prop="repairMode"
                :rules="[{ required: true, message: '维修方式不能为空', trigger: 'blur' }]">
                <el-select :disabled="disabled" v-model="dataForm.repairMode" placeholder="请选择维修方式">
                  <el-option v-for="opt in getDictDatas('repair-mode')" :key="opt.value" :label="opt.label"
                    :value="opt.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="故障类型" prop="faultType">
                <el-select :disabled="disabled" v-model="dataForm.faultType" placeholder="请选择故障类型">
                  <el-option v-for="opt in getDictDatas('fault-type')" :key="opt.value" :label="opt.label"
                    :value="opt.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col>
              <el-form-item label="故障明细" prop="faultDetail"
                :rules="[{ required: true, message: '故障明细不能为空', trigger: 'blur' }]">
                <editor v-model="dataForm.faultDetail" :read-only="disabled" :min-height="150" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col>
              <el-form-item label="维修记录" prop="maintenanceDetail">
                <editor v-model="dataForm.maintenanceDetail" :read-only="disabled" :min-height="150" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col>
              <el-form-item label="维修附件" prop="file">
                <FileUpload v-model="file" :limit="1" :f-name="fileName" :disabled="disabled" @name="setFileName" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col>
              <el-form-item label="备注" prop="remark">
                <el-input v-model="dataForm.remark" :placeholder="`请输入备注`" :disabled="disabled" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form> -->

        <div v-if="!disabled" class="drawer-body__footer">
          <el-button style="" @click="goback()">取消</el-button>
          <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import SmallTitle from '../../base/alarm/Record/SmallTitle.vue';
import { getEqRepair, updateEqRepair } from '@/api/equipment/base/repair'
import Editor from "@/components/Editor";
// import FileUpload from "@/components/FileUpload";
import { getDictDatas } from "@/utils/dict";
import { parseTime } from '@/utils/ruoyi'
import { getDictDataLabel } from '@/utils/dict';

const uploadedFile = {
	name: 'UploadedFile',
	props: ['file', 'disabled'],
	data() {
		return {};
	},
	methods: {
		handleDelete() {
			this.$emit('delete', this.file);
		},
		async handleDownload() {
			const data = await this.$axios({
				url: this.file.fileUrl,
				method: 'get',
				responseType: 'blob',
			});

			await this.$message.success('开始下载');
			// create download link
			const url = window.URL.createObjectURL(data);
			const link = document.createElement('a');
			link.href = url;
			link.download = this.file.fileName;
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
		},
	},
	mounted() {
	},
	render: function (h) {
		return (
			<div
				title={this.file.fileName}
				onClick={this.handleDownload}
				style={{
					background: `url(${tupleImg}) no-repeat`,
					backgroundSize: '14px',
					backgroundPosition: '0 55%',
					paddingLeft: '20px',
					paddingRight: '24px',
					textOverflow: 'ellipsis',
					whiteSpace: 'nowrap',
					overflow: 'hidden',
					cursor: 'pointer',
					display: 'inline-block',
				}}>
				{this.file.fileName}
				{!this.disabled && (
					<el-button
						type="text"
						icon="el-icon-close"
						style="float: right; position: relative; top: 2px; left: 8px; z-index: 100"
						class="dialog__upload_component__close"
						onClick={this.handleDelete}
					/>
				)}
			</div>
		);
	},
};

export default {
  name: 'DialogForm',
  model: {
    prop: 'dataForm',
    event: 'update',
  },
  emits: ['update'],
  components: { SmallTitle, Editor, uploadedFile },
  props: {
    // dataForm: {
    // 	type: Object,
    // 	default: () => ({}),
    // },
    // disabled: {
    // 	type: Boolean,
    // 	default: false
    // },
  },
  data() {
    return {
      formLoading: true,
      visible: false,
      disabled: false,
      dataForm: {},
      file: '',
      fileName: ''
    };
  },
  mounted() { },
  methods: {
    setFileName(val) {
      this.fileName = val
    },
    goback() {
      this.$emit('refreshDataList');
      this.visible = false;
    },
    goEdit() {
      this.disabled = false;
    },
    /** 模拟透传 ref  */
    validate(cb) {
      return this.$refs.form.validate(cb);
    },
    resetFields(args) {
      return this.$refs.form.resetFields(args);
    },
    initData() {
      this.file = ''
      this.fileName = ''
    },
    init(row, isdetail) {
      this.initData();
      this.disabled = isdetail || false;
      this.dataForm.id = row.id || undefined;
      this.visible = true;

      this.$nextTick(() => {
        // this.$refs['form'].resetFields();

        if (this.dataForm.id) {
          // 获取设备维修
          getEqRepair(this.dataForm.id).then(response => {
            this.formLoading = false
            this.dataForm = response.data;
            // this.dataForm.maintenanceStatus = row.maintenanceStatus || 0
            // if (this.dataForm.files.length > 0) {
            //   this.file = this.dataForm.files[0].fileUrl
            //   this.fileName = this.dataForm.files[0].fileName
            // }
          });
        } else {
          // if (this.urlOptions.isGetCode) {
          //   this.getCode()
          // }
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return false;
        }
        // 修改的提交
        if (this.file) {
          const temp = this.file.split(',') // 获取文件个数
          let arry = []
          temp.forEach(item => {
            arry.push({
              fileName: this.fileName,
              fileType: 2,
              fileUrl: item
            })
          })
          this.dataForm.files = arry
        }
        if (this.dataForm.id) {
          updateEqRepair(this.dataForm).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.visible = false;
            this.$emit("refreshDataList");
          });
          return;
        }
        // 添加的提交
        // this.urlOptions.createURL(this.dataForm).then(response => {
        //   this.$modal.msgSuccess("新增成功");
        //   this.visible = false;
        //   this.$emit("refreshDataList");
        // });
      });
    },
  },
};
</script>

<style scoped>
.drawer>>>.el-drawer {
  border-radius: 8px 0 0 8px;
}

.drawer>>>.el-drawer__header {
  margin: 0;
  padding: 32px 32px 24px;
  border-bottom: 1px solid #dcdfe6;
  margin-bottom: 0px;
}

.small-title::before {
  content: '';
  display: inline-block;
  vertical-align: top;
  width: 4px;
  height: 22px;
  border-radius: 1px;
  margin-right: 8px;
  background-color: #0b58ff;
}

.drawer-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.drawer-body__content {
  flex: 1;
  /* background: #eee; */
  padding: 20px 30px;
  overflow-y: auto;
}

.drawer-body__footer {
  display: flex;
  justify-content: flex-end;
  padding: 18px;
}
.blodTip {
	height: 16px;
	font-size: 14px;
	font-weight: 600;
	color: rgba(0,0,0,0.85);
	margin-bottom: 8px;
}
.lightTip {
	/* height: 16px; */
	font-size: 14px;
	font-weight: 400;
	color: rgba(102,102,102,0.75);
	margin-bottom: 12px;
}
</style>
