<template>
  <super-dialog
    v-model="isShowDialog"
    :modal="false"
    :top="top"
    :width="width"
    title="批量确认"
    v-bind="$attrs"
    @closed="closed"
    @open="open"
  >
    <div :style="{height}" class="eventInfo-dialog">
      <div class="form-module">
        <el-form
          ref="addEditForm"
          :model="addEditForm"
          :rules="rules"
          label-position="top"
          label-suffix="："
          label-width="100px"
        >
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="预警信息来源" prop="publishDeviceName">
                <el-input
                  v-model="addEditForm.publishDeviceName"
                  class="el-click-input"
                  clearable
                  placeholder="请输入预警信息来源"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="预警类型" prop="warningType">
                <el-radio-group
                  v-model="addEditForm.warningType"
                  border
                  size="medium"
                  @change="warnTypeChange"
                >
                  <el-radio
                    v-for="item in getDictionaryByCode('yxjc-yjlx')"
                    :key="item.value"
                    :label="Number(item.value)"
                    :value="Number(item.value)"
                    border
                    >{{ item.name }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="addEditForm.warningType === 1">
              <el-form-item label="预警灾害类型" prop="warningValue">
                <el-select
                  v-model="addEditForm.warningValue"
                  clearable
                  placeholder="请选择预警灾害类型"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in getDictionaryByCode('yjlxdm')"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="发布设备类型" prop="publishDeviceType">
                <el-radio-group
                  v-model="addEditForm.publishDeviceType"
                  size="medium"
                >
                  <el-radio
                    v-for="(item, index) in getDictionaryByCode('yxjc-fbsblx')"
                    :key="index"
                    :label="item.value"
                    :value="item.value"
                    border
                    >{{ item.name }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                :rules="[
                  {
                    required: addEditForm.warningType === 1,
                    message: '请选择预警等级',
                    trigger: 'change'
                  }
                ]"
                label="预警等级"
                prop="warningLevel"
              >
                <el-radio-group
                  v-model="addEditForm.warningLevel"
                  border
                  size="medium"
                >
                  <el-radio
                    v-for="item in getDictionaryByCode('yxjc-yjdj')"
                    :key="item.value"
                    :label="Number(item.value)"
                    :value="Number(item.value)"
                    @click.native.stop.prevent="handleChange(item.value)"
                    >{{ item.name }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="预警时间" prop="warningTime">
                <el-date-picker
                  v-model="addEditForm.warningTime"
                  default-time="12:00:00"
                  format="yyyy-MM-dd HH:mm:ss"
                  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="12">
              <el-form-item label="预警解除时间" prop="relieveWarningTime">
                <el-date-picker
                  v-model="addEditForm.relieveWarningTime"
                  default-time="12:00:00"
                  format="yyyy-MM-dd HH:mm:ss"
                  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-form>
        <div class="content-bottom">
          <el-button size="small" @click="isShowDialog = false">
            取 消
          </el-button>
          <el-button
            :disabled="saveLoading"
            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 {batchSave} from '@/api/patrolAndRescue/operationalMonitoring/informatiOnForAttention'

export default {
  name: 'batchDialog',
  inheritAttrs: false,
  components: {
    SuperDialog
  },
  props: {
    isShow: {
      default: false,
      type: Boolean
    },
    top: {
      default: '14vh',
      type: String
    },
    width: {
      default: '60%',
      type: String
    },
    height: {
      default: '60vh',
      type: String
    },
    confirmCloseDialog: {
      default: true,
      type: Boolean
    },
    list: {
      default: () => [],
      type: Array
    },
    defaultData: {
      default: () => ({}),
      type: Object
    }
  },

  data() {
    return {
      addEditForm: {},
      rules: {
        publishDeviceName: [
          {
            required: true,
            message: '发布设备名称不能为空',
            trigger: ['change', 'blur']
          }
        ],
        warningType: [
          {required: true, message: '请选择预警类型', trigger: 'change'}
        ],
        warningValue: [
          {required: true, message: '请选择预警灾害类型', trigger: 'change'}
        ],
        warningLevel: [
          {
            required: true,
            message: '预警等级不能为空',
            trigger: ['change', 'blur']
          }
        ],
        warningTime: [
          {
            required: true,
            message: '预警时间不能为空',
            trigger: ['change', 'blur']
          }
        ],
      },
      saveLoading: false
    }
  },
  computed: {
    isShowDialog: {
      get() {
        return this.isShow
      },
      set(val) {
        this.$emit('update:isShow', val)
      }
    }
  },
  methods: {
    getDictionaryByCode,
    // 打开弹层时触发
    open() {
      console.log('打开弹层', this.defaultData)
      const {defaultData} = this
      if (defaultData) {
        this.addEditForm = {...defaultData}
      }
    },
    warnTypeChange(val) {
      this.addEditForm.warningValue =
        val === 1 ? getDictionaryByCode('yjlxdm')[0].value : ''
    },
    handleSave() {
      this.$refs.addEditForm.validate(async (valid, object) => {
        if (!valid) {
          this.$message.warning(
            `有${
              Object.keys(object).length
            }个字段未通过校验，请正确填写表单内容。`
          )
        } else {
          this.saveLoading = true
          const query = this.list.map(item => {
            item.publishDeviceName = this.addEditForm.publishDeviceName
            item.warningType = this.addEditForm.warningType
            item.warningValue = this.addEditForm.warningValue
            item.publishDeviceType = this.addEditForm.publishDeviceType
            item.warningLevel = this.addEditForm.warningLevel
            item.warningTime = this.addEditForm.warningTime
            item.relieveWarningTime = this.addEditForm.relieveWarningTime
            item.pubStatus = 1
            return item
          })
          try {
            const {state, value, message} = await batchSave(query)
            if (state) {
              this.isShowDialog = false
              this.$emit('change')
            }
          } catch (error) {
          } finally {
            this.saveLoading = false
          }
        }
      })
    },
    // 重置表单数据
    resetForm() {
      this.addEditForm = this.defaultData ? {...this.defaultData} : {}
      this.$nextTick(() => {
        this.$refs.addEditForm?.clearValidate()
      })
    },
    // 关闭弹层触发
    closed() {
      this.resetForm()
    }
  }
}
</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;

  .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: center;
      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>
