<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 {
  complaintStation: string;
  complaintChannels: string;
  complainttype: string;
  complaintime: string;
  complaintdesc: string;
  cploadImage: Record<string, any>;
  judgmentResult: string;
  startTime: string;
  endTime: string;
  Executor: string;
}
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  complaintStation: '',
  complaintChannels: '',
  complainttype: '',
  complaintime: '',
  complaintdesc: '',
  cploadImage: {
    fileList: [],
    dialogImageUrl: '',
    dialogVisible: false,
    disabled: false,
  },
  judgmentResult: '',
  startTime: '',
  endTime: '',
  Executor: '',
});
const rules = reactive<FormRules<RuleForm>>({
  complaintStation: [
    {
      required: true,
      message: '请选择投诉油站',
      trigger: 'change',
    },
  ],
  complaintChannels: [
    {
      required: true,
      message: '请选择投诉渠道',
      trigger: 'change',
    },
  ],
  complainttype: [
    {
      required: true,
      message: '请选择类型',
      trigger: 'change',
    },
  ],
  complaintime: [
    {
      type: 'date',
      required: true,
      message: '请选择投诉时间',
      trigger: 'change',
    },
  ],
  complaintdesc: [
    {
      required: true,
      message: '请输入投诉问题',
      trigger: 'change',
    },
  ],
  startTime: [
    {
      type: 'date',
      required: true,
      message: '请选择开始时间',
      trigger: 'change',
    },
  ],
  endTime: [
    {
      type: 'date',
      required: true,
      message: '请选择截止时间',
      trigger: 'change',
    },
  ],
  Executor: [
    {
      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="客户投诉新增">
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
    >
      <el-form-item label="投诉油站" prop="complaintStation">
        <el-select v-model="ruleForm.complaintStation" 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="complaintChannels">
        <el-select v-model="ruleForm.complaintChannels" 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="complainttype">
        <el-select v-model="ruleForm.complainttype" placeholder="请选择">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="投诉时间" required>
        <el-col :span="11">
          <el-form-item prop="complaintime">
            <el-date-picker
              v-model="ruleForm.complaintime"
              type="date"
              placeholder="选择日期时间"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="投诉问题" prop="complaintdesc">
        <el-input
          v-model="ruleForm.complaintdesc"
          type="textarea"
          placeholder="投诉问题"
        />
      </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="text-align: center; padding: 12px 8px">
            <img
              :src="ruleForm.cploadImage.dialogImageUrl"
              alt="Preview Image"
              style="
                width: 90vw;
                max-height: 80vh;
                display: inline-block;
                object-fit: contain;
                cursor: zoom-in;
              "
            />
          </div>
        </el-dialog>
      </el-form-item>
      <el-form-item label="判定结果" prop="judgmentResult">
        <el-select v-model="ruleForm.judgmentResult" 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="startTime">
        <el-date-picker
          v-model="ruleForm.startTime"
          type="datetime"
          placeholder="选择日期时间"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="截止时间" prop="endTime">
        <el-date-picker
          v-model="ruleForm.startTime"
          type="datetime"
          placeholder="选择日期时间"
          style="width: 100%"
        />
      </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>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          提交
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
  </Drawer>
</template>
