<template>
  <div class="edit-add-detail">
    <div
      v-loading="formLoading"
      class="form-content"
      element-loading-background="rgba(10 ,38 ,61, 0.95)"
      element-loading-text="数据加载中..."
    >
      <!--  label-suffix="：" -->
      <el-form
        ref="addEditForm"
        :model="addEditForm"
        :rules="addEditRules"
        label-position="right"
        label-width="180px"
      >
        <div class="rows">
          <div class="rows-left">
            <div class="rows-hr"></div>
          </div>
          <div class="rows-title">
            <div class="text-overflow">路网运行日报基础信息</div>
          </div>
        </div>
        <el-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 80px"
        >
          <el-col :span="8">
            <el-form-item label="公司：" prop="companyName">
              <el-input
                v-model="addEditForm.companyName"
                readonly
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 80px"
        >
          <el-col :span="8">
            <el-form-item label="国高网：" prop="roadCode">
              <el-input v-model="addEditForm.roadCode" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 80px"
        >
          <el-col :span="8">
            <el-form-item label="路段：" prop="roadName">
              <el-input v-model="addEditForm.roadName" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 80px"
        >
          <el-col :span="8">
            <el-form-item label="开始时间：" prop="startTime">
              <el-date-picker
                v-model="addEditForm.startTime"
                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-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 80px"
        >
          <el-col :span="8">
            <el-form-item label="结束时间：" prop="endTime">
              <el-date-picker
                v-model="addEditForm.endTime"
                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-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 80px"
        >
          <el-col :span="8">
            <el-form-item label="时间小计(分钟)：" prop="take">
              <el-input-number
                v-model="addEditForm.take"
                placeholder="请输入数值"
                controls-position="right"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 80px"
        >
          <el-col :span="12">
            <el-form-item label="起止桩号、站名、方向：" prop="placeName">
              <el-input v-model="addEditForm.placeName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 80px"
        >
          <el-col :span="20">
            <el-form-item label="事件描述：" prop="memo">
              <el-input
                type="textarea"
                v-model="addEditForm.memo"
                :rows="6"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 80px"
        >
          <el-col :span="20">
            <el-form-item label="处理措施：" prop="disposition">
              <el-input
                type="textarea"
                v-model="addEditForm.disposition"
                :rows="6"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 80px"
        >
          <el-col :span="8">
            <el-form-item label="当前状态：" prop="status">
              <el-select v-model="addEditForm.status">
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="rows">
          <div class="rows-left">
            <div class="rows-hr"></div>
          </div>
          <div class="rows-title">
            <div class="text-overflow">突发性事件</div>
          </div>
        </div>
        <el-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 80px"
        >
          <el-col :span="24">
            <div class="form-item-label">灾害天气</div>
          </el-col>
        </el-row>
        <el-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 160px"
        >
          <el-col :span="5">
            <el-form-item label="雾：" prop="fogNum" label-width="100px">
              <el-input-number
                controls-position="right"
                v-model="addEditForm.fogNum"
                placeholder="请输入数值"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="雨：" prop="rainNum" label-width="120px">
              <el-input-number
                controls-position="right"
                v-model="addEditForm.rainNum"
                placeholder="请输入数值"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="雪：" prop="snowNum" label-width="120px">
              <el-input-number
                controls-position="right"
                v-model="addEditForm.snowNum"
                placeholder="请输入数值"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item
              label="路面结冰："
              prop="icingNum"
              label-width="120px"
            >
              <el-input-number
                controls-position="right"
                v-model="addEditForm.icingNum"
                placeholder="请输入数值"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 80px"
        >
          <el-col :span="24">
            <div class="form-item-label">交通事故</div>
          </el-col>
        </el-row>
        <el-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 160px"
        >
          <el-col :span="5">
            <el-form-item
              label="隧道内(次)："
              prop="inTunnelNum"
              label-width="100px"
            >
              <el-input-number
                controls-position="right"
                v-model="addEditForm.inTunnelNum"
                placeholder="请输入数值"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item
              label="处置时间(分钟)："
              prop="inTunnelHandTime"
              label-width="120px"
            >
              <el-input-number
                controls-position="right"
                v-model="addEditForm.inTunnelHandTime"
                placeholder="请输入数值"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item
              label="特殊结构物："
              prop="structureNum"
              label-width="120px"
            >
              <el-input-number
                controls-position="right"
                v-model="addEditForm.structureNum"
                placeholder="请输入数值"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 160px"
        >
          <el-col :span="5">
            <el-form-item
              label="隧道外(次)："
              prop="outTunnelNum"
              label-width="100px"
            >
              <el-input-number
                controls-position="right"
                v-model="addEditForm.outTunnelNum"
                placeholder="请输入数值"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item
              label="处置时间(分钟)："
              prop="outTunnelHandTime"
              label-width="120px"
            >
              <el-input-number
                controls-position="right"
                v-model="addEditForm.outTunnelHandTime"
                placeholder="请输入数值"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="火灾事故：" prop="fireNum" label-width="120px">
              <el-input-number
                controls-position="right"
                v-model="addEditForm.fireNum"
                placeholder="请输入数值"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 80px"
        >
          <el-col :span="8">
            <el-form-item label="故障车占道：" prop="otRoadNum">
              <el-input-number
                controls-position="right"
                v-model="addEditForm.otRoadNum"
                placeholder="请输入数值"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 80px"
        >
          <el-col :span="8">
            <el-form-item label="突发车流量：" prop="trafficNum">
              <el-input-number
                controls-position="right"
                v-model="addEditForm.trafficNum"
                placeholder="请输入数值"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 80px"
        >
          <el-col :span="8">
            <el-form-item label="地质灾害：" prop="addressDisasterNum">
              <el-input-number
                controls-position="right"
                v-model="addEditForm.addressDisasterNum"
                placeholder="请输入数值"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 80px"
        >
          <el-col :span="8">
            <el-form-item label="非正常供电：" prop="powerNum">
              <el-input-number
                controls-position="right"
                v-model="addEditForm.powerNum"
                placeholder="请输入数值"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 80px"
        >
          <el-col :span="8">
            <el-form-item label="其他：" prop="tfOtherNum">
              <el-input-number
                controls-position="right"
                v-model="addEditForm.tfOtherNum"
                placeholder="请输入数值"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="rows">
          <div class="rows-left">
            <div class="rows-hr"></div>
          </div>
          <div class="rows-title">
            <div class="text-overflow">计划性事件</div>
          </div>
        </div>
        <el-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 80px"
        >
          <el-col :span="8">
            <el-form-item label="勤务管制" prop="dutyControlNum">
              <el-input-number
                controls-position="right"
                v-model="addEditForm.dutyControlNum"
                placeholder="请输入数值"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 80px"
        >
          <el-col :span="8">
            <el-form-item label="养护施工" prop="constructionNum">
              <el-input-number
                controls-position="right"
                v-model="addEditForm.constructionNum"
                placeholder="请输入数值"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 80px"
        >
          <el-col :span="8">
            <el-form-item label="其他" prop="jhxOtherNum">
              <el-input-number
                controls-position="right"
                v-model="addEditForm.jhxOtherNum"
                placeholder="请输入数值"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="rows">
          <div class="rows-left">
            <div class="rows-hr"></div>
          </div>
          <div class="rows-title">
            <div class="text-overflow">管制情况</div>
          </div>
        </div>
        <el-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 80px"
        >
          <el-col :span="8">
            <el-form-item label="管制措施" prop="measureType">
              <el-select v-model="addEditForm.measureType">
                <el-option
                  v-for="item in measureTypeOptions"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 80px"
        >
          <el-col :span="8">
            <el-form-item label="管制延公里数(公里)" prop="measureMileage">
              <el-input-number
                v-model="addEditForm.measureMileage"
                placeholder="请输入数值"
                controls-position="right"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 80px"
        >
          <el-col :span="8">
            <el-form-item label="管制综合Q值" prop="measureQz">
              <el-input-number
                v-model="addEditForm.measureQz"
                placeholder="请输入数值"
                controls-position="right"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="rows">
          <div class="rows-left">
            <div class="rows-hr"></div>
          </div>
          <div class="rows-title">
            <div class="text-overflow">人员伤亡信息</div>
          </div>
        </div>
        <el-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 80px"
        >
          <el-col :span="8">
            <el-form-item label="受伤人数" prop="hurtUserNum">
              <el-input-number
                v-model="addEditForm.hurtUserNum"
                placeholder="请输入数值"
                controls-position="right"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          :gutter="24"
          type="flex"
          style="flex-wrap: wrap; margin-left: 80px"
        >
          <el-col :span="8">
            <el-form-item label="死亡人数" prop="deadUserNum">
              <el-input-number
                v-model="addEditForm.deadUserNum"
                placeholder="请输入数值"
                controls-position="right"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div slot="footer" class="footer">
      <el-button
        :disabled="formLoading"
        :loading="saveLoading"
        type="primary"
        @click="handleSave"
      >
        {{ $t('domestic.save') }}
      </el-button>
      <el-button @click="changePage('TablePage')">
        {{ $t('domestic.cancel') }}
      </el-button>
    </div>

    <el-backtop :visibility-height="10" target=".el-form">
      <div class="top-box">UP</div>
    </el-backtop>
  </div>
</template>

<script>
import PubSub from 'pubsub-js'
import moment from 'moment'
import 'moment-duration-format'
import {getDictionaryByCode} from '@/utils/dictionary'
import {dailyReportUpdate} from '@/api/patrolAndRescue/commandDispatch/roadNetworkReport'
import { rest } from 'lodash'

export default {
  name: 'EditAddPage',
  props: {
    componentName: {
      default: 'TablePage',
      type: String
    }
  },
  data() {
    return {
      addEditForm: {},
      addEditRules: {},
      saveLoading: false, // 上传loading
      formLoading: true, // 上传loading
      id: '', // id标识符
      pubSub: null,
      statusOptions: [],
      measureTypeOptions: []
    }
  },
  watch: {
    componentName: {
      handler(newVal) {
        if (newVal === this.$options.name) {
          this.openPage()
        } else {
          this.closePage()
        }
      }
    }
  },
  created() {},
  mounted() {
    this.pubSub = PubSub.subscribe('EditAddPage', (_, data) => {
      const {...rest } = data
      this.addEditForm = rest 
      this.formLoading = false
      this.statusOptions = getDictionaryByCode('gzzt')
      this.measureTypeOptions = getDictionaryByCode('gzcs')
    })
  },
  methods: {
    // 打开页面执行
    openPage() {},

    // 关闭页面执行
    closePage() {
      const {addEditRules, pubSub} = this

      // 重置组件数据
      Object.assign(this.$data, this.$options.data.call(this), {
        addEditRules,
        pubSub
      })

      this.$nextTick(_ => {
        this.$refs.addEditForm.$el.scrollTop = 0
        this.$refs.addEditForm.clearValidate()
      })
    },
    // 保存
    handleSave() {
      this.$refs.addEditForm.validate(async (valid, object) => {
        if (!valid) {
          this.$message.warning(
            `有${
              Object.keys(object).length
            }个字段未通过校验，请正确填写表单内容。`
          )
        } else {
          this.saveLoading = true
          try {
            let {state, message} = await dailyReportUpdate({...this.addEditForm})
            if (state) {
              this.$message.success(`路网运行信息日报编辑成功`)
              this.changePage('TablePage', this.id ? 'edit' : 'add')
            } else {
              this.$message.warning(message || `路网运行信息日报编辑失败`)
            }
          } catch (error) {
            this.$message.warning(
              error?.message || `路网运行信息日报编辑异常，请稍后重试`
            )
          } finally {
            this.saveLoading = false
          }
        }
      })
    },

    // 改变页面
    changePage(pageName = '', type = '') {
      if (!pageName) return
      this.$emit('changePage', pageName, _ => {
        PubSub.publish(pageName, {type})
      })
    },

    moment,
    getDictionaryByCode
  },
  beforeDestroy() {
    // 在组件销毁之前 清除订阅消息
    PubSub.unsubscribe(this.pubSub)
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables';

.edit-add-detail {
  .form-item-label {
    font-size: 15px;
    color: #fff;
    padding-left: 20px;
    margin-bottom: 20px;
  }
  ::v-deep {
    .el-input-number__increase,
    .el-input-number__decrease {
      background: #0d5497;
      border-bottom: 1px solid rgba(67, 161, 255, 0.3);
      border-left: 1px solid rgba(67, 161, 255, 0.3);
      color: #fff;
    }
  }
  ::v-deep .plan-details {
    .el-form-item__label {
      width: 100%;
      display: flex;

      .label {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        font-size: 14px;

        .el-icon-close {
          cursor: pointer;
          transition: color 0.25s;
          user-select: none;

          &:hover {
            color: $--color-error;
          }
        }
      }
    }

    .el-scrollbar {
      border: 1px solid $--system-border-color3;
      border-radius: 4px;
      transition: border-color 0.25s;

      &:hover,
      &:focus-within {
        border-color: $--system-border-color1 !important;
      }

      .el-tree {
        background: transparent;
        height: 450px;
        border: 0;
        padding: 5px 0 5px 5px;

        .el-tree-node {
          .el-tree-node__content {
            &:hover {
              background-color: $--system-box-color5;
            }

            .el-checkbox {
              &.is-disabled {
                //display: none;
              }
            }

            .tree-label {
              font-size: 14px;

              .point {
                font-size: 14px;
                color: $--color-warning;
              }
            }
          }

          &:focus > .el-tree-node__content {
            background: $--system-box-color3;
          }
        }
      }
    }

    &.is-error {
      .el-scrollbar {
        border-color: $--color-error;
      }
    }
  }
}

.plan-details .label {
  display: flex;
  align-items: center;
}

.plan-details .el-icon-close {
  margin-left: 10px;
  cursor: pointer;
  color: #f56c6c;
}

.plan-details .el-icon-close:hover {
  color: #ff0000;
}
</style>
