<template>
  <div class="report_config">
    <div class="top1">
      <div class="center">
        <span class="title" v-text="$t('200016')">设置应急维修流程节点上报时间条件</span>
        <span class="unit" v-text="$t('800224')">单位：分钟</span>
      </div>
    </div>
    <div class="top2 center">
      <span class="red">*</span><span v-text="$t('900795')">时间间隔请设置大于2分钟</span></div>
    <div class="body">
      <Row type="flex" justify="space-between" class="code-row-bg">
        <Col span="5">
        <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="5">
        <ul>
          <li class="li0">
            <span class="flow" v-text="$t('200018')">接单</span>
            <span class="rightArrow">
              <Icon type="md-arrow-forward" />
            </span>
          </li>
          <li class="li1"></li>
          <li class="li2">
            <InputNumber :min="1" empty v-model="formObj.data.m_1_1_2" :placeholder="$t('200028')" :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li3"></li>
          <li class="li4">
            <InputNumber :min="1" empty v-model="formObj.data.m_1_2_3" :placeholder="$t('200028')" :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li5"></li>
          <li class="li6">
            <InputNumber :min="1" empty v-model="formObj.data.m_1_3_4" :placeholder="$t('200028')" :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li7"></li>
        </ul>
        </Col>
        <Col span="5">
        <ul>
          <li class="li0">
            <span class="flow" v-text="$t('200019')" style="width:100px;vertical-align:top;display:inline-block">签到</span>
            <span class="rightArrow">
              <Icon type="md-arrow-forward" />
            </span>
          </li>
          <li class="li1"></li>
          <li class="li2">
            <InputNumber :min="1" empty v-model="formObj.data.m_2_1_2" :placeholder="$t('200028')" :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li3"></li>
          <li class="li4">
            <InputNumber :min="1" empty v-model="formObj.data.m_2_2_3" :placeholder="$t('200028')" :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li5"></li>
          <li class="li6">
            <InputNumber :min="1" empty v-model="formObj.data.m_2_3_4" :placeholder="$t('200028')" :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li7"></li>
        </ul>
        </Col>
        <Col span="5">
        <ul>
          <li class="li0">
            <span class="flow" v-text="$t('200021')" style="width:100px;vertical-align:top;display:inline-block">完成维修</span>
            <span class="rightArrow">
              <Icon type="md-arrow-forward" />
            </span>
          </li>
          <li class="li1"></li>
          <li class="li2">
            <InputNumber :min="1" empty v-model="formObj.data.m_3_1_2" :placeholder="$t('200028')" :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li3"></li>
          <li class="li4">
            <InputNumber :min="1" empty v-model="formObj.data.m_3_2_3" :placeholder="$t('200028')" :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li5"></li>
          <li class="li6">
            <InputNumber :min="1" empty v-model="formObj.data.m_3_3_4" :placeholder="$t('200028')" :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li7"></li>
        </ul>
        </Col>
        <Col span="4">
        <ul>
          <li class="li0">
            <span class="flow" v-text="$t('200024')">复线</span>
          </li>
          <li class="li1"></li>
          <li class="li2">
            <InputNumber :min="1" empty v-model="formObj.data.m_4_1_2" :placeholder="$t('200028')" :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li3"></li>
          <li class="li4">
            <InputNumber :min="1" empty v-model="formObj.data.m_4_2_3" :placeholder="$t('200028')" :disabled="(!isEdit)"></InputNumber>
          </li>
          <li class="li5"></li>
          <li class="li6">
            <InputNumber :min="1" empty v-model="formObj.data.m_4_3_4" :placeholder="$t('200028')" :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: {
            //   machineLevel: 1, //1-普通设备,2-重点设备,3-瓶颈设备,4-非生产设备
            //   title: '设置应急维修流程节点上报时间条件' //暂时没用，后续可能会用上
            // },
            isEdit: false,
            formObj: {
                data: {
                    m_1_1_2: 0,
                    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
                },
                message_repeat_time: 0
            }
        }
    },
    created () {
        this.initData()
    },
    methods: {
        initData () {
            let params = {
                machinelevel: this.reportConfig.machineLevel
            }
            axios.request({
                url: '/tpm/RepairReport/getSetTime',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.data != undefined && res.data.data.length > 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_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
                    }
                    this.formObj.message_repeat_time = 0
                }
            })
        },
        set () {
            this.isEdit = true
        },
        submit () {
            let data = {
                data: [],
                machinelevel: this.reportConfig.machineLevel,
                message_repeat_time: parseInt(this.formObj.message_repeat_time)
            }
            if (this.formObj.message_repeat_time === null) {
                window_warning(this.$t('8000002'))
                // alert('推送时间不可以小于1天')
                return false
            }
            for (let property in this.formObj.data) {
                let arr = property.split('_')
                // 验证时间间隔不可以小于2分钟
                if (this.formObj.data[property] <= 2) {
                    window_warning(this.$t('900794'))
                    // alert('时间间隔不可以小于2分钟，请增大时间间隔')
                    return false
                }
                data.data.push({
                    type: parseInt(arr[1]),
                    start_level: parseInt(arr[2]),
                    end_level: parseInt(arr[3]),
                    space_time: this.formObj.data[property]
                })
            }
            axios.request({
                url: '/tpm/RepairReport/SetTime',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.$Message.success(this.$t('1112'))
                    this.initData()
                    this.isEdit = false
                } else {
                    this.$Message.error(this.$t('8000003'))
                }
            })
        }

    }, // end methods
    watch: {
        'reportConfig.machineLevel' (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 .top2 {
    color: #808080;
  }

  .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 .rightArrow {
    color: red;
    display: inline-block;
    font-size: 16px;
  }

  .report_config .body .downArrow {
    color: red;
    text-align: center;
    height: 30px;
    display: block;
    width: 70px;
    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>
