<template>
  <div class="report_config">
    <div class="top1 mb20">
      <div class="center">
        <span class="title" v-text="$t('200074')">设置计划维护异常上报时间条件</span>
        <span class="unit" v-text="$t('200192')">单位:天</span>
      </div>
    </div>
    <div class="body">
      <Row type="flex" justify="space-between" class="code-row-bg">
        <Col span="3">
        <ul>
          <li class="li0"></li>
          <li class="li1"><span class="level" v-text="$t('200025')">等级1</span></li>
          <li class="li2">
            <span class="downArrow">
              <Icon type="md-arrow-down" />
            </span>
          </li>
          <li class="li3"><span class="level" v-text="$t('200029')">等级2</span></li>
          <li class="li4">
            <span class="downArrow">
              <Icon type="md-arrow-down" />
            </span>
          </li>
          <li class="li5"><span class="level" v-text="$t('200043')">等级3</span></li>
          <li class="li6">
            <span class="downArrow">
              <Icon type="md-arrow-down" />
            </span>
          </li>
          <li class="li7"><span class="level" v-text="$t('200044')">等级4</span></li>
        </ul>
        </Col>

        <Col span="2">
        <ul>
          <li class="li0">
            <span class="flow" v-text="$t('1101')">天</span>
          </li>
          <li class="li1"></li>
          <li class="li2">
            <InputNumber :style="{width: inputNumberWidth+'px'}" :min="1" empty v-model="formObj.data.m_1_1_2"
              :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li3"></li>
          <li class="li4">
            <InputNumber :style="{width: inputNumberWidth+'px'}" :min="1" empty v-model="formObj.data.m_1_2_3"
              :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li5"></li>
          <li class="li6">
            <InputNumber :style="{width: inputNumberWidth+'px'}" :min="1" empty v-model="formObj.data.m_1_3_4"
              :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li7"></li>
        </ul>
        </Col>

        <Col span="2">
        <ul>
          <li class="li0">
            <span class="flow" v-text="$t('1136')">周</span>
          </li>
          <li class="li1"></li>
          <li class="li2">
            <InputNumber :style="{width: inputNumberWidth+'px'}" :min="1" empty v-model="formObj.data.m_2_1_2"
              :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li3"></li>
          <li class="li4">
            <InputNumber :style="{width: inputNumberWidth+'px'}" :min="1" empty v-model="formObj.data.m_2_2_3"
              :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li5"></li>
          <li class="li6">
            <InputNumber :style="{width: inputNumberWidth+'px'}" :min="1" empty v-model="formObj.data.m_2_3_4"
              :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li7"></li>
        </ul>
        </Col>

        <Col span="2">
        <ul>
          <li class="li0">
            <span class="flow" v-text="$t('1137')">两周</span>
          </li>
          <li class="li1"></li>
          <li class="li2">
            <InputNumber :style="{width: inputNumberWidth+'px'}" :min="1" empty v-model="formObj.data.m_3_1_2"
              :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li3"></li>
          <li class="li4">
            <InputNumber :style="{width: inputNumberWidth+'px'}" :min="1" empty v-model="formObj.data.m_3_2_3"
              :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li5"></li>
          <li class="li6">
            <InputNumber :style="{width: inputNumberWidth+'px'}" :min="1" empty v-model="formObj.data.m_3_3_4"
              :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li7"></li>
        </ul>
        </Col>

        <Col span="2">
        <ul>
          <li class="li0">
            <span class="flow" v-text="$t('1138')">月</span>
          </li>
          <li class="li1"></li>
          <li class="li2">
            <InputNumber :style="{width: inputNumberWidth+'px'}" :min="1" empty v-model="formObj.data.m_4_1_2"
              :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li3"></li>
          <li class="li4">
            <InputNumber :style="{width: inputNumberWidth+'px'}" :min="1" empty v-model="formObj.data.m_4_2_3"
              :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li5"></li>
          <li class="li6">
            <InputNumber :style="{width: inputNumberWidth+'px'}" :min="1" empty v-model="formObj.data.m_4_3_4"
              :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li7"></li>
        </ul>
        </Col>

        <Col span="2">
        <ul>
          <li class="li0">
            <span class="flow" v-text="$t('1139')">两月</span>
          </li>
          <li class="li1"></li>
          <li class="li2">
            <InputNumber :style="{width: inputNumberWidth+'px'}" :min="1" empty v-model="formObj.data.m_5_1_2"
              :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li3"></li>
          <li class="li4">
            <InputNumber :style="{width: inputNumberWidth+'px'}" :min="1" empty v-model="formObj.data.m_5_2_3"
              :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li5"></li>
          <li class="li6">
            <InputNumber :style="{width: inputNumberWidth+'px'}" :min="1" empty v-model="formObj.data.m_5_3_4"
              :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li7"></li>
        </ul>
        </Col>

        <Col span="2">
        <ul>
          <li class="li0">
            <span class="flow" v-text="$t('1140')">季度</span>
          </li>
          <li class="li1"></li>
          <li class="li2">
            <InputNumber :style="{width: inputNumberWidth+'px'}" :min="1" empty v-model="formObj.data.m_6_1_2"
              :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li3"></li>
          <li class="li4">
            <InputNumber :style="{width: inputNumberWidth+'px'}" :min="1" empty v-model="formObj.data.m_6_2_3"
              :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li5"></li>
          <li class="li6">
            <InputNumber :style="{width: inputNumberWidth+'px'}" :min="1" empty v-model="formObj.data.m_6_3_4"
              :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li7"></li>
        </ul>
        </Col>

        <Col span="2">
        <ul>
          <li class="li0">
            <span class="flow" v-text="$t('1141')">半年</span>
          </li>
          <li class="li1"></li>
          <li class="li2">
            <InputNumber :style="{width: inputNumberWidth+'px'}" :min="1" empty v-model="formObj.data.m_7_1_2"
              :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li3"></li>
          <li class="li4">
            <InputNumber :style="{width: inputNumberWidth+'px'}" :min="1" empty v-model="formObj.data.m_7_2_3"
              :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li5"></li>
          <li class="li6">
            <InputNumber :style="{width: inputNumberWidth+'px'}" :min="1" empty v-model="formObj.data.m_7_3_4"
              :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li7"></li>
        </ul>
        </Col>

        <Col span="2">
        <ul>
          <li class="li0">
            <span class="flow" v-text="$t('1142')">年</span>
          </li>
          <li class="li1"></li>
          <li class="li2">
            <InputNumber :style="{width: inputNumberWidth+'px'}" :min="1" empty v-model="formObj.data.m_8_1_2"
              :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li3"></li>
          <li class="li4">
            <InputNumber :style="{width: inputNumberWidth+'px'}" :min="1" empty v-model="formObj.data.m_8_2_3"
              :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li5"></li>
          <li class="li6">
            <InputNumber :style="{width: inputNumberWidth+'px'}" :min="1" empty v-model="formObj.data.m_8_3_4"
              :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li7"></li>
        </ul>
        </Col>
      </Row>
    </div>
    <div class="foot center">
      <span v-text="$t('200212')">推送时间设置</span>
      <InputNumber :min="1" style="width:75px;margin-left: 5px;" empty v-model="formObj.message_repeat_time" :disabled="(!isEdit)"></InputNumber>
      <span class="ml5" v-text="$t('200028')">分钟 </span>
      <Button v-show="!isEdit" type="primary" @click="set()" class="ml5" v-text="$t('200212')">推送时间设置</Button>
      <Button v-show="isEdit" type="primary" @click="submit()" class="ml5" v-text="$t('900306')">保存</Button>
    </div>
  </div>
</template>

<script>
import axios from '@/libs/api.request'
export default {
    name: 'report-config',
    props: ['reportConfig'],
    data () {
        return {
            // reportConfig: {
            //   mode: 1, //1-AM,2-PM
            //   title: '设置应急维修流程节点上报时间条件' //暂时没用，后续可能会用上
            // },
            isEdit: false,
            inputNumberWidth: 54,
            formObj: {
                data: {
                    m_1_1_2: 0, // m_type_start_end_spacetime
                    m_1_2_3: 0,
                    m_1_3_4: 0,

                    m_2_1_2: 0,
                    m_2_2_3: 0,
                    m_2_3_4: 0,

                    m_3_1_2: 0,
                    m_3_2_3: 0,
                    m_3_3_4: 0,

                    m_4_1_2: 0,
                    m_4_2_3: 0,
                    m_4_3_4: 0,

                    m_5_1_2: 0,
                    m_5_2_3: 0,
                    m_5_3_4: 0,

                    m_6_1_2: 0,
                    m_6_2_3: 0,
                    m_6_3_4: 0,

                    m_7_1_2: 0,
                    m_7_2_3: 0,
                    m_7_3_4: 0,

                    m_8_1_2: 0,
                    m_8_2_3: 0,
                    m_8_3_4: 0
                },
                message_repeat_time: 0
            }
        }
    },
    created () {
        this.initData()
    },
    methods: {
        initData () {
            let params = {
                mode: this.reportConfig.mode
            }
            axios.request({
                url: '/tpm/PlanReport/GetSelectedtime',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.data != undefined && res.data.ret != 0) {
                    res.data.data.forEach(item => {
                        let property = 'm_' + item.type + '_' + item.start_level + '_' + item.end_level
                        this.formObj.data[property] = item.space_time
                    })
                    this.formObj.message_repeat_time = parseInt(res.data.time)
                } else {
                    // 初始化formData
                    this.formObj.data = {
                        m_1_1_2: 0, // m_type_start_end_spacetime
                        m_1_2_3: 0,
                        m_1_3_4: 0,

                        m_2_1_2: 0,
                        m_2_2_3: 0,
                        m_2_3_4: 0,

                        m_3_1_2: 0,
                        m_3_2_3: 0,
                        m_3_3_4: 0,

                        m_4_1_2: 0,
                        m_4_2_3: 0,
                        m_4_3_4: 0,

                        m_5_1_2: 0,
                        m_5_2_3: 0,
                        m_5_3_4: 0,

                        m_6_1_2: 0,
                        m_6_2_3: 0,
                        m_6_3_4: 0,

                        m_7_1_2: 0,
                        m_7_2_3: 0,
                        m_7_3_4: 0,

                        m_8_1_2: 0,
                        m_8_2_3: 0,
                        m_8_3_4: 0
                    }
                    this.formObj.message_repeat_time = 0
                }
            })
        },
        set () {
            this.isEdit = true
        },
        submit () {
            let data = {
                data: [],
                message_repeat_time: parseInt(this.formObj.message_repeat_time)
            }
            if (this.formObj.message_repeat_time === null) {
                alert('推送时间不可以小于1天')
                return false
            }
            for (let property in this.formObj.data) {
                // 验证时间间隔不可以小于1天
                if (this.formObj.data[property] < 1) {
                    alert('时间间隔不可以小于1天')
                    return false
                }

                let arr = property.split('_')
                data.data.push({
                    mode: this.reportConfig.mode,
                    type: parseInt(arr[1]),
                    start_level: parseInt(arr[2]),
                    end_level: parseInt(arr[3]),
                    space_time: this.formObj.data[property]
                })
            }
            axios.request({
                url: '/tpm/PlanReport/SetTime',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.$Message.success(this.$t(1112))
                    this.isEdit = false
                } else {
                    this.$Message.error(this.$t(8000003))
                }
            })
        }

    }, // end methods
    watch: {
        'reportConfig.mode' (v) {
            this.initData()
        }
    }
}
</script>

<style>
  .report_config {
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    background-color: white;
  }

  .report_config .top1 .title {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    background-color: #347ab8;
    border-radius: 5px;
    font-size: 16px;
    color: white;
  }

  .report_config .top1 .unit {
    padding: 2px 5px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    vertical-align: bottom;
    border-radius: 4px;
    background-color: #347ab8;
    color: white;
    margin-left: 5px;
  }

  .report_config .body .level {
    display: block;
    height: 30px;
    line-height: 30px;
    border: 1px solid #ddd;
    border-radius: 3px;
    text-align: center;
    background-color: #b7b7b7;
    font-size: 14px;
    color: #333;
    width: 70px;
  }

  .report_config .body .flow {
    padding: 0 8px;
    display: inline-block;
    font-size: 16px;
  }

  .report_config .body li {
    height: 32px;
  }

  .foot span {
    font-weight: bold;
    font-size: 14px;
  }

  .ivu-input-number-input[disabled]{
    color:#666 !important;
  }
</style>
