<template>
  <super-dialog
    v-model="isShowDialog"
    :modal="false"
    :top="top"
    :width="width"
    class="corporate-customers"
    title="完结记录单"
    v-bind="$attrs"
    @closed="closed"
    @open="open"
  >
    <div :style="{height}" class="eventInfo-dialog edit-add-detail">
      <div class="form-module form-content">
        <el-form
          ref="addEditForm"
          :model="addEditForm"
          :rules="rules"
          label-position="right"
          label-suffix="："
          label-width="120px"
        >
          <div class="rows">
            <div class="rows-left">
              <div class="rows-hr"></div>
            </div>
            <div class="rows-title">
              <div class="text-overflow">基本情况</div>
            </div>
          </div>

          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="完成时间" prop="recoverTime">
                <el-date-picker
                  v-model="addEditForm.recoverTime"
                  default-time="12:00:00"
                  placeholder="选择完成时间"
                  style="width: 100%"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="执法人员" prop="enforcementUser">
                <el-input
                  v-model="addEditForm.enforcementUser"
                  clearable
                  placeholder="请输入执法人员"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="执法时间" prop="enforcementTime">
                <el-date-picker
                  v-model="addEditForm.enforcementTime"
                  default-time="12:00:00"
                  placeholder="选择执法时间"
                  style="width: 100%"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="发布内容" prop="submitContent">
                <el-input
                  v-model="addEditForm.submitContent"
                  clearable
                  placeholder="请输入发布内容"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="发布区域" prop="submitArea">
                <el-input
                  v-model="addEditForm.submitArea"
                  clearable
                  placeholder="请输入发布区域"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="汇报时间" prop="reportTime">
                <el-date-picker
                  v-model="addEditForm.reportTime"
                  default-time="12:00:00"
                  placeholder="选择汇报时间"
                  style="width: 100%"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="汇报人" prop="reportUser">
                <el-input
                  v-model="addEditForm.reportUser"
                  clearable
                  placeholder="请输入汇报人"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="接受人" prop="receiveUser">
                <el-input
                  v-model="addEditForm.receiveUser"
                  clearable
                  placeholder="请输入接受人"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="简要经过" prop="elapse">
                <el-input
                  v-model="addEditForm.elapse"
                  clearable
                  placeholder="请输入简要经过"
                  type="textarea"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="管制措施" prop="controlMeasures">
                <el-input
                  v-model="addEditForm.controlMeasures"
                  clearable
                  placeholder="请输入管制措施"
                  type="textarea"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="content-bottom">
          <el-button size="small" @click="isShowDialog = false">
            取 消
          </el-button>
          <el-button size="small" type="primary" @click="handleSave">
            确 定
          </el-button>
        </div>
      </div>
    </div>
  </super-dialog>
</template>

<script>
import SuperDialog from '@/components/SuperDialog/index.vue'
import {getDictionaryByCode} from '@/utils/dictionary'
import {saveList, tableDetail} from '@/api/patrolAndRescue/commandDispatch/eventManagement/eventEdit'
import moment from 'moment'

export default {
  name: 'FinishDialog',
  inheritAttrs: false,
  components: {
    SuperDialog
  },
  props: {
    isShow: {
      default: false,
      type: Boolean
    },
    top: {
      default: '10vh',
      type: String
    },
    width: {
      default: '70%',
      type: String
    },
    height: {
      default: '76vh',
      type: String
    },
    confirmCloseDialog: {
      default: true,
      type: Boolean
    },
    itemDetail: {
      default: () => {
      },
      type: Object
    },
    eventId: {
      // 新增 prop，用于接收事件 ID
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 初始化表单数据结构
      addEditForm: {
        enforcementUser: '', // 执法人员
        enforcementTime: '', // 执法时间
        submitContent: '', // 发布内容
        submitArea: '', // 发布区域
        elapse: '', // 简要经过
        controlMeasures: '', // 管制措施
        reportTime: moment().format('YYYY-MM-DD HH:mm:ss'), // 汇报时间
        reportUser: '', // 汇报人
        receiveUser: '', // 接受人
        recoverTime: ''
      },
      rules: {
        recoverTime: [
          {
            required: true,
            message: '事件完成时间不能为空',
            trigger: ['change', 'blur']
          }
        ]
        // enforcementUser: [
        //   {required: true, message: '请输入执法人员', trigger: 'blur'}
        // ],
        // enforcementTime: [
        //   {required: true, message: '请选择执法时间', trigger: 'change'}
        // ],
        // submitContent: [
        //   {required: true, message: '请输入发布内容', trigger: 'blur'}
        // ],
        // submitArea: [
        //   {required: true, message: '请输入发布区域', trigger: 'blur'}
        // ],
        // reportTime: [
        //   {required: true, message: '请选择汇报时间', trigger: 'change'}
        // ],
        // reportUser: [
        //   {required: true, message: '请输入汇报人', trigger: 'blur'}
        // ],
        // receiveUser: [
        //   {required: true, message: '请输入接受人', trigger: 'blur'}
        // ],
        // elapse: [{required: true, message: '请输入简要经过', trigger: 'blur'}],
        // controlMeasures: [
        //   {required: true, message: '请输入管制措施', trigger: 'blur'}
        // ]
      },
      detailData: {} // 存储获取的详情数据
    }
  },
  computed: {
    isShowDialog: {
      get() {
        return this.isShow
      },
      set(val) {
        this.$emit('update:isShow', val)
      }
    }
  },
  created() {
  },
  methods: {
    getDictionaryByCode,
    // 打开弹层时触发
    open() {
      if (this.eventId) {
        this.getDetail(this.eventId) // 调用接口获取详情数据
      }
    },
    // 获取详情数据
    async getDetail(id) {
      console.log(id, '6666666666666666')
      try {
        this.detailData = await tableDetail(id)
        console.log(this.detailData)
      } catch (error) {
        console.error('获取事件详情失败：', error)
        this.$message.error('获取事件详情失败！')
      }
    },

    // 展示弹层
    showDialog() {
      this.rescueDialogVisible = true
    },
    handleSave() {
      this.$refs.addEditForm.validate(async (valid, object) => {
        if (!valid) {
          this.$message.warning(
            `有${
              Object.keys(object).length
            }个字段未通过校验，请正确填写表单内容。`
          )
        } else {
          this.saveLoading = true
          const query = {...this.addEditForm, ...this.detailData}
          try {
            const {state, message} = await saveList(query)
            if (state) {
              this.$message.success('事件完结成功！')
              this.$emit('change', true) // 通知父组件刷新数据
              this.isShowDialog = false // 关闭弹窗
            } else {
              this.$message.error(message || '完结失败！')
            }
          } catch (error) {
            console.error('保存失败:', error)
            this.$message.error('保存失败，请重试！')
          } finally {
            this.saveLoading = false
          }
        }
      })
    },
    // 关闭弹层触发
    closed() {
      const {orgData} = this
      // 重置data中的数据
      Object.assign(this.$data, this.$options.data.call(this), {orgData})
      this.$nextTick(() => {
        this.$refs.addEditForm?.clearValidate()
      })
      if (this.confirmCloseDialog) this.isShowDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables';

.eventInfo-dialog {
  width: 100%;
  display: flex;
  flex-direction: column;
  column-gap: 16px;
  min-height: 50vh;
  padding: 0 !important;

  .form-module {
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    background-color: $--system-module-color1;
    padding: 16px;
    box-sizing: border-box;
    border-radius: 8px;

    .el-form {
      height: calc(100% - 40px);
      overflow-y: scroll;
    }

    .content-bottom {
      display: flex;
      justify-content: flex-end;
      height: 40px;
    }
  }
}

::v-deep::-webkit-scrollbar-thumb,
::v-deep::-webkit-scrollbar {
  display: none;
}

.input-unit {
  font-size: 14px;
  color: #e4e4e4;
  margin: 0 5px;
  font-style: normal;
}
</style>
