<template>
  <div>
    <Spin size="large" fix v-if="loading"/>
    <Form ref="model" :model="model" :rules="ruleValidate" label-position="top">
      <Row :gutter="16">
        <Col span="8">
          <FormItem label="风险类型">
            <Input type="text" disabled v-model="model.riskType1" placeholder="一般矛盾风险"/>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="黄灯预警天数/天" prop="yellowWarnDays1">
            <InputNumber :min="1" v-model="model.yellowWarnDays1" placeholder="请输入黄灯预警天数" style="width: 100%"/>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="红灯预警天数/天" prop="redWarnDays1">
            <InputNumber :min="1" v-model="model.redWarnDays1" placeholder="请输入红灯预警天数" style="width: 100%"/>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="8">
          <FormItem label="风险类型">
            <Input type="text" disabled v-model="model.riskType2" placeholder="一般矛盾风险"/>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="黄灯预警天数/天" prop="yellowWarnDays2">
            <InputNumber :min="1" v-model="model.yellowWarnDays2" placeholder="请输入黄灯预警天数" style="width: 100%"/>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="红灯预警天数/天" prop="redWarnDays2">
            <InputNumber :min="1" v-model="model.redWarnDays2" placeholder="请输入红灯预警天数" style="width: 100%"/>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="8">
          <FormItem label="风险类型">
            <Input type="text" disabled v-model="model.riskType3" placeholder="一般矛盾风险"/>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="黄灯预警天数/天" prop="yellowWarnDays3">
            <InputNumber :min="1" v-model="model.yellowWarnDays3" placeholder="请输入黄灯预警天数" style="width: 100%"/>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="红灯预警天数/天" prop="redWarnDays3">
            <InputNumber :min="1" v-model="model.redWarnDays3" placeholder="请输入红灯预警天数" style="width: 100%"/>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16" style="display:flex;justify-content: center;">
        <Button type="primary" @click="add">保存</Button>
      </Row>
    </Form>
  </div>
</template>

<script>

import { getEventOverdueWarningConfigList, saveEventOverdueWarningConfigList } from '@/api/contradiction'

export default {
  data () {
    return {
      model: {},
      ruleValidate: {
        yellowWarnDays1: [
          { required: true, message: '请输入黄灯预警天数', trigger: 'blur', type: 'number' }
        ],
        redWarnDays1: [
          { required: true, message: '请输入红灯预警天数', trigger: 'blur', type: 'number' }
        ],
        yellowWarnDays2: [
          { required: true, message: '请输入黄灯预警天数', trigger: 'blur', type: 'number' }
        ],
        redWarnDays2: [
          { required: true, message: '请输入红灯预警天数', trigger: 'blur', type: 'number' }
        ],
        yellowWarnDays3: [
          { required: true, message: '请输入黄灯预警天数', trigger: 'blur', type: 'number' }
        ],
        redWarnDays3: [
          { required: true, message: '请输入红灯预警天数', trigger: 'blur', type: 'number' }
        ]
      },
      loading: false
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    add () {
      this.$Modal.confirm({
        title: '确认保存？',
        onOk: () => {
          this.$refs['model'].validate((valid) => {
            if (valid) {
              this.loading = true
              saveEventOverdueWarningConfigList(this.model).then((res) => {
                if (res.data.errcode === 0) {
                  this.$Message.success('保存成功')
                } else {
                  this.$Message.error(res.data.errmsg)
                }
              }).finally(() => {
                this.loading = false
              })
            }
          })
        }
      })
    },
    getList () {
      this.model = {}
      this.loading = true
      getEventOverdueWarningConfigList({}).then((res) => {
        if (res.data.errcode === 0) {
          let data = res.data.data
          this.model = {
            riskType1: data[0].riskType,
            yellowWarnDays1: data[0].yellowWarnDays,
            redWarnDays1: data[0].redWarnDays,
            riskType2: data[1].riskType,
            yellowWarnDays2: data[1].yellowWarnDays,
            redWarnDays2: data[1].redWarnDays,
            riskType3: data[2].riskType,
            yellowWarnDays3: data[2].yellowWarnDays,
            redWarnDays3: data[2].redWarnDays
          }
        } else {
          this.$Message.error(res.data.errmsg)
        }
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
