<template>
  <el-dialog :before-close="dialogClose" class="addDialog" title="新建任务" :visible.sync="visible">
    <img src="../../../assets/img/command/ask-new.png">
    <el-form ref="form" :model="ruleForm" :label-width="formLabelWidth+'px'">
      <el-form-item label="河道名称:">
        <el-select :class="ruleForm.driverId?'check-select':void(0)" filterable clearable v-model="ruleForm.driverId" placeholder="">
         <el-option
              v-for="item in driverDataList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="任务选择:">
        <el-select :class="ruleForm.type?'check-select':void(0)"  clearable v-model="ruleForm.type" placeholder="">
          <el-option
            key="1"
            label="可见光巡检"
            value="1">
          </el-option>
          <el-option
            key="2"
            label="多光谱巡检"
            value="2">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="巡检日期:">
        <el-date-picker
          style="width: 100%"
          v-model="ruleForm.inspectTime"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div class="foot-btn">
      <div @click="dialogClose">取消</div>
      <div @click="submit">
        <span v-show="!submitLoading">新建</span>
        <i v-show="submitLoading" class="el-icon-loading"></i>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import {mapGetters} from "vuex";
  import api from '@/api/command/index'

  export default {
    name: "addDialog",
    data() {
      return {
        submitLoading:false,
        ruleForm: {
          inspectTime:'',
          driverId:'',
          type:''
        },
        formLabelWidth: this.$root.$options.filters.filterPx(0.83, this.fontSize),
      }
    },
    props: {
      visible: {
        type: Boolean,
        default() {
          return false
        }
      },
      driverDataList: {
        type: Array,
        default() {
          return []
        }
      }
    },
    computed: {
      ...mapGetters(["fontSize"])
    },
    methods: {
      dialogClose() {
        this.$emit('dialogClose')
      },
      submit(){
        this.submitLoading=true
        let params = {
          inspectTime:this.ruleForm.inspectTime,
          type:this.ruleForm.type,
          inspectDriverList:[{driverId:this.ruleForm.driverId}]
        }
        api.addTask(params).then(res => {
          this.$emit('successSubmit')
          this.submitLoading=false
        }).catch(err => {
          this.submitLoading=false
        });
      }
    }
  }
</script>

<style lang="less">
  .addDialog{
    .el-dialog {
      background-color: inherit;
      width: 5.1rem;

      .el-date-editor.el-input{
        .el-input__icon{
          display: none;
        }
      }

      .el-dialog__header {
        display: none;
      }



      .el-dialog__body {
        padding: 0.423rem 0.75rem 0.39rem 0.735rem;
        background-position: center center;
        background-size: cover;
        background-image: url(../../../assets/img/command/assignment-popup.png);
        text-align: left;

        .check-select{
          .el-input__inner {
            background: rgba(46,156,152,0.61);
            border: 1px solid #009F9A;
          }
        }

        .foot-btn {
          margin-top: 0.64rem;
          display: flex;
          justify-content: space-between;
          >div{
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 1.5rem;
            height: 0.4rem;
            font-family: PingFangSC-Regular;
            font-size: 0.14rem;
            color: #FFFFFF;
            background: rgba(86,244,248,0.70);
          }
          >div:first-child{
            opacity: 0.62;
            background: rgba(86,244,248,0.50)
          }
        }

        > img {
          height: 0.31rem;
          margin-bottom: 0.391rem;
        }

        .el-input__inner {
          padding-left: 0.1rem;
          background-color:inherit;
          border: 0.01rem solid #36B8B3;
        }

        .el-textarea__inner {
          padding: 0.1rem;
          opacity: 0.8;
          line-height: 0.2rem;
          font-family: PingFangSC-Regular;
          font-size: 0.14rem;
          color: #FFFFFF;
          background-color: inherit;
          border: 0.01rem solid #36B8B3;
          border-radius: 0;
        }

        .el-form-item {
          margin-bottom: 0.12rem;
        }

        .driver-name {
          font-family: PingFangSC-Medium;
          font-size: 0.2rem;
          color: #FFFFFF;
          line-height: 0.28rem;
        }
      }
    }
  }
</style>
