<!-- 自定义封装弹层 -->
<template>
  <el-dialog
    :show-close="false"
    :visible.sync="dialogFormVisible"
    custom-class="formDialog"
    title="救援单信息"
    top="10vh"
    width="60%"
  >
    <!-- 关闭图标 -->
    <i class="el-icon-close close-icon" @click="handleClose" />
    <!-- 自定义头部内容 -->
    <div class="edit-add-detail">
      <div class="edit-add-detail-new-content">
        <div
          v-loading="false"
          class="form-content"
          element-loading-background="rgba(10 ,38 ,61, 0.95)"
          element-loading-text="数据加载中..."
          style="min-height: 65vh"
        >
          <el-form
            ref="rescueInfo"
            :model="rescueInfo"
            :rules="rescueInfoRules"
            label-position="top"
            label-suffix="："
            label-width="100px"
          >
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="报案时间" prop="rescueTime">
                  <el-date-picker
                    v-model="rescueInfo.rescueTime"
                    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-col :span="8">
                <el-form-item label="故障车牌">
                  <el-input
                    v-model="rescueInfo.carCode"
                    clearable
                    placeholder="故障车牌"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="故障车类" prop="carCalss">
                  <el-select
                    v-model="rescueInfo.carCalss"
                    clearable
                    placeholder="故障车类"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="(item, index) in getDictionaryByCode('gzcl')"
                      :key="index"
                      :label="item.name"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="故障车型" prop="carType">
                  <el-select
                    v-model="rescueInfo.carType"
                    clearable
                    placeholder="故障车类"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="(item, index) in getDictionaryByCode('gzcx')"
                      :key="index"
                      :label="item.name"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="车主姓名">
                  <el-input v-model="rescueInfo.carUser" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="车主电话">
                  <el-input
                    v-model="rescueInfo.carUserTel"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="车载重量（吨）" prop="carWeight">
                  <el-input
                    v-model="rescueInfo.carWeight"
                    class="number-input"
                    placeholder="请输入内容"
                    type="number"
                  >
                    <template slot="append">吨</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="派遣时间" prop="dispatchTime">
                  <el-date-picker
                    v-model="rescueInfo.dispatchTime"
                    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-col :span="8">
                <el-form-item label="现场情况" prop="sceneInfo">
                  <el-select
                    v-model="rescueInfo.sceneInfo"
                    clearable
                    placeholder="现场情况"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="(item, index) in getDictionaryByCode('xcqk')"
                      :key="index"
                      :label="item.name"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="占道情况" prop="occupy">
                  <el-select
                    v-model="rescueInfo.occupy"
                    clearable
                    placeholder="占道情况"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="(item, index) in getDictionaryByCode('zdqk')"
                      :key="index"
                      :label="item.name"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="救援类型" prop="rescueType">
                  <el-select
                    v-model="rescueInfo.rescueType"
                    clearable
                    placeholder="救援类型"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="(item, index) in getDictionaryByCode('jylx')"
                      :key="index"
                      :label="item.name"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="派遣队伍" prop="teamId">
                  <el-cascader
                    ref="rescueInfoCascader"
                    v-model="rescueInfo.teamId"
                    :options="teamTreeData"
                    :props="{
                      emitPath: false,
                      checkStrictly: true,
                      label: 'name',
                      value: 'id',
                    }"
                    :show-all-levels="false"
                    clearable
                    filterable
                    style="width: 100%"
                    @change="teamIdChange"
                  ></el-cascader>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="事发天气" prop="weather">
                  <el-input
                    v-model="rescueInfo.weather"
                    clearable
                    placeholder="事发天气"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="saveLoading" type="primary" @click="affirmAppoint"
      >确认委派
      </el-button
      >
      <el-button @click="handleClose">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {getDictionaryByCode} from '@/utils/dictionary'
import {orgTree} from '@/api/systemInterface'
import {eventAppoint} from '@/api/patrolAndRescue/commandDispatch/eventInquiry'

export default {
  name: 'RescueInfoDialog',
  data() {
    return {
      dialogFormVisible: false,
      rescueInfo: {},
      rescueInfoRules: {
        rescueStatus: [
          {
            required: true,
            message: '请选择救援状态',
            trigger: ['change']
          }
        ],
        teamId: [
          {
            required: true,
            message: '派遣队伍不能为空',
            trigger: ['change']
          }
        ],
        rescueTime: [
          {
            required: true,
            message: '报案时间不能为空',
            trigger: ['change']
          }
        ]
      },
      teamTreeData: [],
      eventInfo: null,
      saveLoading: false
    }
  },
  mounted() {
    // this.pubSub = PubSub.subscribe('EditAddPage', (_, data) => {
    //     if (data.id) {
    //         this.id = data.id
    //         this.getDetail(data.id)
    //     }
    // })
  },
  methods: {
    getDictionaryByCode,
    // 获取公司树
    async getOrgTreeData() {
      let data = await orgTree()
      this.teamTreeData = data
    },
    teamIdChange() {
      this.rescueInfo.teamFullId =
        this.$refs.rescueInfoCascader?.getCheckedNodes()[0]?.data?.path || ''
      this.rescueInfo.teamId =
        this.$refs.rescueInfoCascader?.getCheckedNodes()[0]?.value || ''
    },
    open(data) {
      this.getOrgTreeData()
      this.dialogFormVisible = true
      this.eventInfo = data
    },
    affirmAppoint() {
      this.$refs.rescueInfo.validate(async (valid, object) => {
        if (!valid) {
          this.$message.warning(
            `有${
              Object.keys(object).length
            }个字段未通过校验，请正确填写表单内容。`
          )
        } else {
          this.saveLoading = true
          let data = JSON.parse(JSON.stringify(this.eventInfo))
          data.pegSVal =
            'k' + (data.startPeg || '') + '+' + (data.startPegAdd || '')
          data.pegEVal =
            'k' + (data.endPeg || '') + '+' + (data.endPegAdd || '')
          data.rescueInfo = JSON.parse(JSON.stringify(this.rescueInfo))
          try {
            let {state, message, value} = await eventAppoint({
              ...data,
              ...data.road
            })
            if (state) {
              this.$message.success(`委派成功`)
              this.handleClose()
              this.$emit('offPage')
            }
          } finally {
            this.saveLoading = false
          }
        }
      })
    },
    handleClose() {
      this.dialogFormVisible = false
      this.rescueInfo = {}
      this.$nextTick((_) => {
        this.$refs.rescueInfo.clearValidate()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-add-detail {
  padding: 10px 20px;

}

::v-deep .el-dialog__body {
  padding: 0 !important;
  height: 69vh;

  .edit-add-detail-new-content,
  .form-content {
    border-radius: 5px !important;
  }
}

::v-deep .el-dialog__footer {
  background: #114066;
}

::v-deep .el-dialog__header {
  width: 100%;
  height: 44px;
  line-height: 44px;
  background: url("~@/assets/img/publicLayout/header-bg.png") no-repeat 50% 50%, linear-gradient(180deg, $--system-module-color1 0%, $--system-module-color1 100%);
  background-size: 100% 100%;
  color: $--color-white;
  padding: 0 20px;
  box-sizing: border-box;
  user-select: none;

  span {
    color: $--color-white;
  }
}


.close-icon {
  position: absolute;
  top: 14px;
  right: 16px;
  color: $--color-white;
  cursor: pointer;
  transition: color 0.15s;

  &::before {
    font-size: 18px !important;
  }

  &:hover {
    color: $--system-hover-active-text;
  }
}
</style>
