<template>
  <div class="common-page device-manage">
    <div class="option page-row">
      <!--工具栏-->
      <div class="head-container">
        <div class="page-title">大屏指标设置</div>
      </div>
    </div>

    <!-- 表格 -->
    <div class="panel-bottom page-row">
      <div class="ctin-box">
        <div class="content-within">
          <div class="content-fix">
            <div class="content-box">
              <el-form ref="formViewRef" :model="formData" label-width="240px">
                <div class="form-cell">
                  产量总览各项指标
                  <div class="cell-box" style="max-width: 600px;margin: auto">
                    <el-row>
                      <el-col :span="10" class="grid-content">
                        <div class="grid-label">总储量</div>
                      </el-col>
                      <el-col :span="14" class="grid-content">
                        <el-form-item prop="totality" style="margin: 0">
                          <el-input v-model="formData.mineralresources" placeholder="输入总储量" />
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="10" class="grid-content">
                        <div class="grid-label">剩余储量</div>
                      </el-col>
                      <el-col :span="14" class="grid-content">
                        <el-form-item prop="atCamp" style="margin: 0">
                          <el-input v-model="formData.dpsycl" placeholder="输入剩余储量" />
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="10" class="grid-content">
                        <div class="grid-label">当日计划量</div>
                      </el-col>
                      <el-col :span="14" class="grid-content">
                        <el-form-item prop="checkReturn" style="margin: 0">
                          <el-input v-model="formData.dpdrjh" placeholder="输入当日计划量" />
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="10" class="grid-content">
                        <div class="grid-label">当日开采量</div>
                      </el-col>
                      <el-col :span="14" class="grid-content">
                        <el-form-item prop="checkReturn" style="margin: 0">
                          <el-input v-model="formData.dpdrkc" placeholder="输入当日开采量" />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </el-form>
              <div style="width: 100%;text-align: center;margin-top: 60px">
                <el-button><a :href="'http://39.164.225.220:5003/edge/Screen?key='+tokenKey">跳转到三维大屏</a></el-button>
                <el-button type="primary" @click="submitForm()">保存</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
import {Tools, HttpReq, Dates} from '@/assets/js/common.js';

export default {
  components: { },
  data() {
    return {
      title: '',
      visible: false,
      tokenKey: getToken(),
      formData: {
        mineralresources: '', // 总量
        dpsycl: '', // 剩余量
        dpdrjh: '', // 当日计划
        dpdrkc: '', // 当日完成
      },
      rules: {}
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.loadData()
    })
  },
  methods: {
    cancelView() {
      this.$router.push({ path: `/home` })
    },
    submitForm() {
      this.$refs.formViewRef.validate(valid => {
        if (valid) {
          HttpReq.truckDispatching.dpPutUpdateDpPlan({
            ...this.formData
          }).then((res) => {
            this.$notify({
              title: res.msg,
              type: res.code === 200 ? 'success' : 'error',
              duration: 2500
            })
          })
        }
      })
    },
    loadData() {
      HttpReq.truckDispatching.dpGetFindDpPlan({}).then((res) => {
        this.formData = res.data
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.touch {
  cursor:pointer;
}
.clear {
  clear: both
}
.inline-block {
  display: inline-block;
}
.ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
}
.showcase {
  padding: 1px 0;
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
}
.form-table-box {
  width: 1080px;
  margin: 20px auto;
  padding: 30px;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.12);
  border-radius: 10px;
}
.head-box {
  top: 0;
  background: none repeat scroll 0 0 white;
  z-index: 999;
  box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
  .head-box-top {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .top-call {
      height: 80px;
      padding-top: 15px;
    }
  }
}
.content-box {
  min-height: 70vh;
  font-family: Source Han Sans CN;
  //user-select: none;
  .page-title {
    margin-top: 20px;
    padding: 0 20px;
    font-size: 26px;
    font-weight: bold;
    color: #333333;
  }
}
.line-btn {
  display: flex;
  justify-content: center;
  font-family: Source Han Sans CN;
  font-weight: 400;
  .btn-o {
    margin: 0 25px;
    width: 360px;
    padding: 6px 10px;
    background: #F7601A;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
    text-align: center;
    border: 1px solid transparent;
    font-size: 22px;
    color: #FFFFFF;
    cursor:pointer;
    //user-select: none;
  }
  .btn-o:hover {
    border: 1px solid rgba(30, 144, 255, 0.8);
    color: #1482f0;
  }
  .btn-l {
    margin: 0 25px;
    width: 360px;
    padding: 10px;
    background: #1961C5;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
    text-align: center;
    border: 1px solid transparent;
    font-size: 22px;
    color: #FFFFFF;
    cursor:pointer;
    //user-select: none;
  }
  .btn-l:hover {
    border: 1px solid rgba(0,0,0,0.3);
    color: #F7601A;
  }
  .btn-b {
    margin: 0 10px;
    width: 168px;
    padding: 6px;
    background: #EFF6FF;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
    text-align: center;
    font-size: 20px;
    color: #1961C5;
    cursor:pointer;
    //user-select: none;
  }
  .btn-b:hover {
    border: 1px solid rgba(30, 144, 255, 0.9);
  }
  .active {
    color: #FFFFFF;
    font-weight: 400;
    background: #1961C5;
  }
}
.grid-content {
  border: 1px solid rgba(100, 100, 100, 0.3);
  padding: 0;
}
.grid-label {
  background: #dedede;
  padding: 0 10px;
  line-height: 32px;
}
.editor{
  text-align:left;
  width: 680px;
}
::v-deep .w-e-text-container {
  height: 560px !important;
}
.cell-box {
  min-width: 120px;
  margin: 20px 0;
  .cell-input {
    width: 620px;
  }
  .cell-select {
    width: 320px;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 28px;
    line-height: 24px;
    padding: 0 8px;
  }
  .input-new-tag {
    width: 140px;
    height: 28px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  >>>.el-input__inner {
    border: 1px solid rgba(100, 100, 100, 0.1);
    border-bottom: 1px solid rgba(100, 100, 100, 0.2);
    border-radius: 5px;
  }
  >>>.el-input.is-disabled .el-input__inner {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid rgba(100, 100, 100, 0.4);
    background: white;
    cursor: text;
  }
  >>>.el-input.is-disabled .el-input__icon {
    cursor: text;
  }
  >>>.el-icon-circle-check {
    color: #13ce66;
  }
  >>>.el-icon-arrow-up:before {
    content: '';
  }
}
::v-deep .el-form-item__content{
  margin-left: 0 !important;
}
</style>
