<script lang="ts" setup>
import { useVbenDrawer } from '@vben/common-ui';
import { reactive, ref } from 'vue';
import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue';
import type { FormInstance, FormRules, UploadFile } from 'element-plus';
const [Drawer, drawerApi] = useVbenDrawer();
interface RuleForm {
  inspectgasstation: string;
  gasStationName: string;
  radio1: string;
  discoverProblem: string;
  sllabel: string;
  handlingSuggestions: string;
  hazardDescription: string;
  riskLevel: string;
  judgmentResult: string;
  rectificationEndTime: string;
  cploadImage: Record<string, any>;
  executor: string;
  endTime: string;
  cC: string;
  Ledgertype: string;
}
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  inspectgasstation: '',
  gasStationName: '',
  radio1: '',
  discoverProblem: '',
  sllabel: '',
  handlingSuggestions: '',
  hazardDescription: '',
  riskLevel: '',
  judgmentResult: '',
  rectificationEndTime: '',
  cploadImage: {
    fileList: [],
    dialogImageUrl: '',
    dialogVisible: false,
    disabled: false,
  },
  executor: '',
  endTime: '',
  cC: '',
  Ledgertype: '',
});
const rules = reactive<FormRules<RuleForm>>({
  inspectgasstation: [
    {
      required: true,
      message: '请选择检查油站',
      trigger: 'change',
    },
  ],
  gasStationName: [
    {
      required: true,
      message: '请选择油站名称',
      trigger: 'change',
    },
  ],
  discoverProblem: [
    {
      required: true,
      message: '请输入发现问题',
      trigger: 'change',
    },
  ],
  hazardDescription: [
    {
      type: 'date',
      required: true,
      message: '请输入主要危害描述',
      trigger: 'change',
    },
  ],
  riskLevel: [
    {
      required: true,
      message: '请选择风险度',
      trigger: 'change',
    },
  ],
  rectificationEndTime: [
    {
      type: 'date',
      required: true,
      message: '请选择整改截止时间',
      trigger: 'change',
    },
  ],
  executor: [
    {
      required: true,
      message: '请选择执行人',
      trigger: 'change',
    },
  ],
  endTime: [
    {
      type: 'date',
      required: true,
      message: '请选择截止时间',
      trigger: 'change',
    },
  ],
});
//删除图片
const handleRemove = (file: UploadFile) => {
  ruleForm.cploadImage.fileList = ruleForm.cploadImage.fileList.filter(
    (item: any) => item.uid !== file.uid,
  );
};
//图片预览
const handlePictureCardPreview = (file: UploadFile) => {
  ruleForm.cploadImage.dialogImageUrl = file.url;
  ruleForm.cploadImage.dialogVisible = true;
};

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!');
    } else {
      console.log('error submit!', fields);
    }
  });
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>
<template>
  <Drawer title="新增隐患台账">
    <div>
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
      >
        <el-form-item label="检查油站" prop="inspectgasstation">
          <el-select v-model="ruleForm.inspectgasstation" placeholder="请选择">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="油站名称" prop="gasStationName">
          <el-select v-model="ruleForm.gasStationName" placeholder="请选择">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否转任务" prop="radio1">
          <el-radio-group v-model="ruleForm.radio1">
            <el-radio value="1" size="large">是</el-radio>
            <el-radio value="2" size="large">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="发现问题" prop="discoverProblem">
          <el-select v-model="ruleForm.discoverProblem" placeholder="请选择">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="标签" prop="sllabel">
          <el-select v-model="ruleForm.sllabel" placeholder="请选择">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="处理建议" prop="handlingSuggestions">
          <el-input
            v-model="ruleForm.handlingSuggestions"
            type="textarea"
            placeholder="处理建议"
          />
        </el-form-item>
        <el-form-item label="主要危害描述" prop="hazardDescription">
          <el-input
            v-model="ruleForm.hazardDescription"
            placeholder="主要危害描述"
          />
        </el-form-item>
        <el-form-item label="风险度" prop="riskLevel">
          <el-select v-model="ruleForm.riskLevel" placeholder="请选择">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="整改截止时间" prop="rectificationEndTime">
          <el-date-picker
            v-model="ruleForm.rectificationEndTime"
            type="datetime"
            placeholder="整改截止时间"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="问题图片" prop="cploadImage">
          <el-upload
            action="#"
            v-model:file-list="ruleForm.cploadImage.fileList"
            list-type="picture-card"
            :auto-upload="false"
          >
            <el-icon><Plus /></el-icon>
            <template #file="{ file }">
              <div>
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <el-icon><zoom-in /></el-icon>
                  </span>
                  <span
                    v-if="!ruleForm.cploadImage.disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <el-icon><Delete /></el-icon>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>

          <el-dialog
            v-model="ruleForm.cploadImage.dialogVisible"
            width="80%"
            :close-on-click-modal="true"
          >
            <div style=" padding: 12px 8px;text-align: center">
              <img
                :src="ruleForm.cploadImage.dialogImageUrl"
                alt="Preview Image"
                style="
                  display: inline-block;
                  width: 90vw;
                  max-height: 80vh;
                  cursor: zoom-in;
                  object-fit: contain;
                "
              />
            </div>
          </el-dialog>
        </el-form-item>
        <el-form-item label="执行人" prop="executor">
          <el-select v-model="ruleForm.executor" placeholder="请选择">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="截止时间" prop="endTime">
          <el-date-picker
            v-model="ruleForm.endTime"
            type="datetime"
            placeholder="截止时间"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="抄送人" prop="cC">
          <el-select v-model="ruleForm.cC" placeholder="请选择">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="台账类型" prop="Ledgertype">
          <el-inputh
            v-model="ruleForm.Ledgertype"
            type="textarea"
            placeholder="请输入台账类型"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            提交
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </Drawer>
</template>
