<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="24">
              <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-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="方向" prop="direction">
                <el-radio-group v-model="addEditForm.direction">
                  <el-radio
                    v-for="(item, index) in getDictionaryByCode('yxjc-fx')"
                    :key="index"
                    :label="item.value"
                    :value="item.value"
                    border
                  >
                    {{ item.name }}
                  </el-radio>
                </el-radio-group>
              </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 {bhConfirmation} from '@/api/patrolAndRescue/operationalMonitoring/specialWarningInformation'

export default {
  name: 'rescueCostDialog',
  inheritAttrs: false,
  components: {
    SuperDialog
  },
  props: {
    isShow: {
      default: false,
      type: Boolean
    },
    top: {
      default: '14vh',
      type: String
    },
    width: {
      default: '40%',
      type: String
    },
    height: {
      default: '50vh',
      type: String
    },
    confirmCloseDialog: {
      default: true,
      type: Boolean
    },
    listId: {
      default: () => [],
      type: Array
    }
  },

  data() {
    return {
      addEditForm: {
        publishDeviceType: '门架情报板',
        direction: '1'
      },
      rules: {
        publishDeviceName: [
          {
            required: true,
            message: '发布设备名称不能为空',
            trigger: ['change', 'blur']
          }
        ],
        publishDeviceType: [
          {
            required: true,
            message: '发布设备类型不能为空',
            trigger: ['change', 'blur']
          }
        ],
        direction: [
          {
            required: true,
            message: '方向不能为空',
            trigger: ['change', 'blur']
          }
        ]
      },
      saveLoading: false
    }
  },
  computed: {
    isShowDialog: {
      get() {
        return this.isShow
      },
      set(val) {
        this.$emit('update:isShow', val)
      }
    }
  },
  methods: {
    getDictionaryByCode,
    // 打开弹层时触发
    open() {
    },

    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, ids: this.listId}
          try {
            const {state, value, message} = await bhConfirmation(query)
            if (state) {
              this.isShowDialog = false
              this.$emit('change')
            }
          } catch (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;

  .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>
