<template>
  <div class="edit-add-detail">
    <div class="form-content">
      <el-form
        ref="addEditForm"
        :model="addEditForm"
        :rules="addEditRules"
        label-position="left"
        label-width="135px"
      >
        <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" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="事件标题" prop="eventName">
              <el-input v-model="addEditForm.eventName" type="textarea" :autosize="{ minRows: 2, maxRows: 6}" placeholder="请输入事件标题" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="事件描述" prop="eventDetail">
              <el-input
                v-model="addEditForm.eventDetail"
                type="textarea"
                placeholder="请输入事件描述"
                :autosize="{ minRows: 2, maxRows: 6}">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="事件发生路段" prop="roadName">
              <el-input
                v-model="addEditForm.roadName"
                :disabled="true"
                clearable
                readonly
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="桩号" prop="pegVal">
              <el-input
                v-model="addEditForm.pegVal"
                :disabled="true"
                clearable
                readonly
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="事件发生时间" prop="eventTime">
              <el-date-picker
                v-model="addEditForm.eventTime"
                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" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="方向" prop="direction">
              <el-input
                v-model="addEditForm.directions"
                clearable
                disabled
                placeholder="请输入方向"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="报告类型" prop="reportType">
              <el-select
                v-model="addEditForm.reportType"
                placeholder="报告类型"
                style="width: 100%"
                @change="reportChange"
              >
                <el-option
                  v-for="(item, index) in getDictionaryByCode('jzsb-jzlx')"
                  :key="index"
                  :label="item.name"
                  :value="Number(item.value)"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="人员伤亡情况" prop="casualties">
              <el-input
                v-model="addEditForm.casualties"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 6}"
                placeholder="请输入人员伤亡情况"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="路产损失情况" prop="lossSituation">
              <el-input
                v-model="addEditForm.lossSituation"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 6}"
                placeholder="请输入路产损失情况"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="交通管制情况" prop="controlSituation">
              <el-input
                v-model="addEditForm.controlSituation"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 6}"
                placeholder="交通管制情况"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="事件处置情况" prop="handleSituation">
              <el-input
                v-model="addEditForm.handleSituation"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 6}"
                placeholder="事件处置情况"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="现场道路排查情况" prop="roadChecksSituation">
              <el-input
                v-model="addEditForm.roadChecksSituation"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 6}"
                placeholder="现场道路排查情况"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="下一步措施" prop="measure">
              <el-input
                v-model="addEditForm.measure"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 6}"
                placeholder="下一步措施"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="上报时间" prop="uploadTime">
              <el-date-picker
                v-model="addEditForm.uploadTime"
                clearable
                placeholder="选择上报时间"
                style="width: 100%"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
              <!--              <el-input v-model="addEditForm.uploadTime" clearable placeholder="上报时间"></el-input>-->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="上报人姓名" prop="uploadUserName">
              <el-input
                v-model="addEditForm.uploadUserName"
                clearable
                placeholder="上报人姓名"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="联系人" prop="head">
              <el-input
                v-model="addEditForm.head"
                clearable
                placeholder="联系人"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="联系电话" prop="headTel">
              <el-input
                v-model="addEditForm.headTel"
                clearable
                placeholder="联系电话"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="编辑人" prop="editor">
              <el-input
                v-model="addEditForm.editor"
                clearable
                placeholder="编辑人"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="核稿人" prop="verifier">
              <el-input
                v-model="addEditForm.verifier"
                clearable
                placeholder="核稿人"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="8">
            <el-form-item label="签发人" prop="issued">
              <el-input
                v-model="addEditForm.issued"
                clearable
                placeholder="签发人"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer" class="footer">
      <el-button :loading="saveLoading" type="primary" @click="handleSave">
        {{ $t('domestic.save') }}
      </el-button>
      <el-button @click="changePage('AbnormalListPageBack')">
        {{ $t('domestic.cancel') }}
      </el-button>
    </div>
  </div>
</template>

<script>
import PubSub from 'pubsub-js'
import {
  tableAdd,
  tableEdit,
  tableDetail
} from '@/api/patrolAndRescue/videoPatrol/videoInspectionResults'
// import {getDictionaryByCode} from '@/utils/dictionary'
import {dictionaryEscape, getDictionaryByCode} from '@/utils/dictionary'
import moment from 'moment'
export default {
  name: 'EditAddPage',
  props: {
    componentName: {
      default: 'TablePage',
      type: String,
    },
  },
  data() {
    return {
      addEditForm: {
        eventTime: '', // 新增
        direction: '', // 新增
        reportType: 2,
        casualties: '',
        lossSituation: '',
        controlSituation: '',
        handleSituation: '',
        measure: '',
        uploadTime: moment().format('YYYY-MM-DD HH:mm:ss'),
        uploadUserName: '',
        head: '',
        headTel: '',
        editor: '',
        verifier: '',
        issued: '',
        roadId: '',
        roadName: '',
        eventName: '',
        eventDetail: '',
        pegVal: '',
        eventId: '',
      },
      addEditRules: {
        eventName: [{required: true, message: '事件标题不能为空'}],
        eventDetail: [{required: true, message: '事件描述不能为空'}],
        reportType: [{required: true, message: '请选择报告类型'}],
        uploadUserName: [
          {required: true, message: '上报人姓名不能为空', trigger: 'blur'},
        ],
        code: [
          {
            required: true,
            message: '公司营业执照编码不能为空',
            trigger: 'blur',
          },
          {
            pattern:
              /(^(?:(?![IOZSV])[\dA-Z]){2}\d{6}(?:(?![IOZSV])[\dA-Z]){10}$)|(^\d{15}$)/,
            message: '公司营业执照编码输入格式有误',
            trigger: 'blur',
          },
        ],
        headTel: [
          {required: true, message: '联系电话不能为空', trigger: 'blur'},
          // {
          //   pattern:
          //     /\d{3}-\d{8}|\d{4}-\d{7}|^1(3[0-9]|4[57]|5[0-35-9]|7[0678]|8[0-9])\d{8}$/,
          //   message: '联系电话有误',
          //   trigger: 'blur',
          // },
        ],
        uploadTime: [
          {required: true, message: '上报时间不能为空', trigger: 'blur'},
        ],
      },
      saveLoading: false, // 上传loading
      id: '', // id标识符
      pubSub: null,
      treeData: [],
      titleType:''
    }
  },
  created() {},
  mounted() {
    // 原有的事件订阅
    this.pubSub = PubSub.subscribe('AddPage', (_, data) => {
      console.log(data,'----------')
      const userDetail = sessionStorage.getItem('currentUserDetail')
      let userData = {}
      if (userDetail) {
        userData = {...JSON.parse(userDetail).user}
      }
      if (data.id) {
        this.id = data.id
        this.getDetail(data.id)
      } else {
        const formData = {}
        // 设置从index.vue传递过来的值
        if (data.direction) {
          formData.direction = data.direction
          formData.directions = dictionaryEscape('xsfx', data.direction + '')
        }
        formData.pegVal = data.pegVal || ''
        formData.eventDetail = ''
        formData.roadId = data.roadId || ''
        formData.eventId = data.eventId || ''
        formData.roadName = data.roadName || ''
        formData.eventTime = data.eventTime || ''
        formData.eventName = data.eventName || ''
        formData.reportType = 2
        formData.uploadTime = moment().format('YYYY-MM-DD HH:mm:ss')
        formData.uploadUserName = userData.fullname || ''
        formData.editor = userData.fullname || ''
        formData.headTel = userData.mobile || ''
        this.titleType = JSON.parse(JSON.stringify(data.eventDetail))
        Object.assign(this.addEditForm, formData)
      }
    })
  },
  methods: {
    dictionaryEscape,
    getDictionaryByCode,
    reportChange(){
      if(this.addEditForm.reportType === 1){
        this.addEditForm.eventDetail = this.titleType
      }else{
        this.addEditForm.eventDetail = ''
      }
    },

    // 获取详情
    async getDetail(id) {
     this.addEditForm = await tableDetail(id)
      this.addEditForm.reportType = Number(this.addEditForm.reportType)
      if (this.addEditForm.direction) {
        this.addEditForm.directions = dictionaryEscape('xsfx', this.addEditForm.direction + '')
      }
    },

    // 关闭页面执行
    closePage() {
      // 重置组件数据
      Object.assign(this.$data, this.$options.data.call(this), {
        pubSub: this.pubSub,
      })
      this.$nextTick((_) => {
        this.$refs.addEditForm.$el.scrollTop = 0
        this.$refs.addEditForm.clearValidate()
      })
    },

    // 保存
    handleSave() {
      console.log('表单数据据:', this.addEditForm)
      this.$refs.addEditForm.validate(async (valid, object) => {
        if (!valid) {
          this.$message.warning(
            `有${
              Object.keys(object).length
            }个字段未通过校验，请正确填写表单内容。`
          )
        } else {
          this.saveLoading = true
          const myInterFace = this.id ? tableEdit : tableAdd
          try {
            let {state, message} = await myInterFace({
              ...this.addEditForm,
            })
            if (state) {
              message = this.id ? '修改' : '新增'
              this.$message.success(`事件进展上报成功`)
              this.changePage('AbnormalListPageBack', this.id ? 'edit' : 'add')
            }
          } finally {
            this.saveLoading = false
          }
        }
      })
    },

    // 改变页面
    changePage(pageName = '', type = '') {
      if (!pageName) return
      this.$emit('changePage', pageName, (_) => {
        PubSub.publish(pageName, {type})
      })
    },
  },
  beforeDestroy() {
    // 在组件销毁之前 清除订阅消息
    PubSub.unsubscribe(this.pubSub)
  },
}
</script>

<style lang="scss" scoped></style>
