<template>
  <el-dialog :before-close="dialogClose" class="assignmentDialog" title="任务派遣" :visible.sync="visible">
    <img src="../../../assets/img/command/dialog-task.png">
    <el-form ref="form" :model="ruleForm" :label-width="formLabelWidth+'px'">
      <el-form-item label="人员派遣:">
        <el-select filterable @change="assignUserClick" :class="ruleForm.assignUser?'check-select':void(0)" clearable v-model="ruleForm.assignUser" placeholder="">
          <el-option
            v-for="item in userList"
            :key="item.id"
            :label="item.realname"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系方式:">
        <el-input :disabled="true" clearable v-model="ruleForm.assignContact"></el-input>
      </el-form-item>
      <el-form-item label="备注信息:">
        <el-input
          type="textarea"
          :rows="4"
          placeholder=""
          v-model="ruleForm.assignNote">
        </el-input>
      </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'
  import questionApi from "@/api/question/list";

  export default {
    name: "assignmentDialog",
    data() {
      return {
        submitLoading:false,
        ruleForm: {
          assignUser:'',
          assignContact:'',
          assignNote:''
        },
        formLabelWidth: this.$root.$options.filters.filterPx(0.83, this.fontSize),
      }
    },
    props: {
      isQuality:{
        type: Boolean,
        default() {
          return false
        }
      },
      id:{
        type: Number,
        default() {
          return 0
        }
      },
      visible: {
        type: Boolean,
        default() {
          return false
        }
      },
      userList:{
        type: Array,
        default() {
          return []
        }
      }
    },
    computed: {
      ...mapGetters(["fontSize"])
    },
    methods: {
      assignUserClick() {
        let ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
        if (ruleForm.assignUser) {
          let child = this.userList.find(item => item.id == ruleForm.assignUser)
          if (child) {
            ruleForm.assignContact = child.mobile
          }
        } else {
          ruleForm.assignContact = ''
        }
        this.ruleForm = Object.assign({}, ruleForm)
      },
      dialogClose() {
        this.$emit('dialogClose')
      },
      submit(){
        this.submitLoading=false
        this.ruleForm.id=this.id
        if(!this.isQuality){
          api.questionAssign(this.ruleForm).then(res => {
            this.submitLoading=false
            this.$emit('successSubmit')
          }).catch(err => {
            this.submitLoading=false
          });
        }else{
          this.ruleForm.waterAlarmId=this.id
          questionApi.waterAssign(this.ruleForm).then(res => {
            this.submitLoading=false
            this.$emit('successSubmit')
          }).catch(err => {
            this.submitLoading = false
          });
        }
      }
    }
  }
</script>

<style lang="less">
  .assignmentDialog {

    .el-input.is-disabled .el-input__inner{
      color: #ffffff;
    }
    .el-dialog {
      background-color: inherit;
      width: 5.6rem;

      .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.098rem;
          padding: 0 0.4rem;
          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.2rem;
        }

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