<template>
<div>
  <el-row class="EmergencyMainHeader">
        <el-col>
          <span>急修派工</span>
        </el-col>
      </el-row>
  <div class="EmergencyDispatch">
    <el-form :model="repairEmerg" :rules="rules" ref="repairEmerg" label-width="100px">
      <el-row class="EmergencyMainTitle">
        <el-col :xs="8" :sm="8" :lg="4">
          <span>故障电梯信息描述</span>
        </el-col>
      </el-row>
      <el-row class="marT20">
        <el-col :xs="12" :sm="12" :lg="8">
          <el-form-item prop="projectId" label="项目名称" label-width="80px">
            <el-select
              v-model="repairEmerg.projectId"
              filterable
              :filter-method="myFilter"
              placeholder="请选择项目"
              @change="changeProjectid"
            >
              <el-option
                v-for="item in selectOptions.projectOption"
                :key="item.projectId"
                :label="item.projectName"
                :value="item.projectId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="8">
          <el-form-item prop="liftId" label="项目电梯">
            <el-select v-model="repairEmerg.liftId" filterable placeholder="请选择电梯">
              <el-option
                v-for="item in selectOptions.ElevatorOption"
                :key="item.id"
                :label="item.devicePosition+'('+item.registrationCode+')'"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="marT20">
        <el-col :xs="12" :sm="12" :lg="8" class="MarB10">
          <el-form-item prop="repairReason" label="故障原因" label-width="80px">
            <el-select v-model="repairEmerg.repairReason" filterable placeholder="请选择">
              <el-option
                v-for="item in selectOptions.faultOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="6" :sm="6" :lg="4" class="MarB10">
          <el-form-item prop="isTrapped" label="是否关人">
            <el-select v-model="repairEmerg.isTrapped" filterable placeholder="请选择">
              <el-option
                v-for="item in selectOptions.BanOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="6" :sm="6" :lg="4">
          <el-form-item prop="isCritical" label="是否紧急">
            <el-select v-model="repairEmerg.isCritical" filterable placeholder="请选择">
              <el-option
                v-for="item in selectOptions.urgentOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="marT20">
        <el-col :xs="18" :sm="18" :lg="16">
           <el-form-item prop="callerFaultDescription" label-width="10px">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入故障基本信息描述"
            v-model="repairEmerg.callerFaultDescription"
          ></el-input>
           </el-form-item>
        </el-col>
      </el-row>
      <el-row class="EmergencyMainTitle paddingT10">
        <el-col :xs="8" :sm="8" :lg="4">
          <span>急修人员</span>
        </el-col>
      </el-row>
      <el-row class="marT20">
        <el-col :xs="12" :sm="12" :lg="7">
          <el-form-item prop="workerId1" label="指派急修人员">
            <el-select v-model="repairEmerg.workerId1" filterable placeholder="请选择急修人员">
              <el-option
                v-for="item in selectOptions.repairWorkerOption"
                :key="item.userId"
                :label="item.name"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="EmergencyMainTitle paddingT10">
        <el-col :xs="8" :sm="8" :lg="6">
          <span>报修时间</span>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :xs="8" :sm="8" :lg="6">
          <div class="block marT20">
            <span class="demonstration MarB10">报修时间</span>
            <el-form-item prop="callerDate" label-width="0">
              <el-date-picker v-model="repairEmerg.callerDate"  value-format="yyyy-MM-dd HH:mm:ss"	 type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
          </div>
        </el-col>
        <el-col :xs="8" :sm="8" :lg="6">
          <div class="block marT20">
            <span class="demonstration MarB10">报修人</span>
            <el-form-item prop="callerName" label-width="0">
              <el-input placeholder="请输入姓名" v-model="repairEmerg.callerName"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :xs="8" :sm="8" :lg="6">
          <div class="block marT20">
            <span class="demonstration MarB10">报修电话</span>
            <el-form-item prop="callerTel" label-width="0">
              <el-input placeholder="请填写电话" v-model="repairEmerg.callerTel"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <div class="marT20">
        <el-button size="small" type="primary" plain  @click="addEmergency">确定</el-button>
      </div>
    </el-form>
  </div>
</div>
</template>

<script>
export default {
  components: {},
  name: "project",
  data() {
    var changeProject = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("项目不能为空"));
      } else {
        return callback();
      }
    };
    var checkLif = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("电梯不能为空"));
      } else {
        return callback();
      }
    };
    var checksource = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("故障原因不能为空"));
      } else {
        return callback();
      }
    };
    var checkTrapped = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请选择是否关人"));
      } else {
        return callback();
      }
    };
    var checkCritical = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请选择是否紧急"));
      } else {
        return callback();
      }
    };
    var checkworker = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请选择急修人员"));
      } else {
        return callback();
      }
    };
    var checkdate = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请选择报修时间"));
      } else {
        return callback();
      }
    };
    var checkpeople = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请选择报修人"));
      } else {
        return callback();
      }
    };
    var checkphone = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("手机号码不能为空"));
      } else if (!/^1[3,4,5,7,8,9]\d{9}$/.test(value)) {
        return callback(new Error("手机号码格式不对"));
      } else {
        return callback();
      }
    };
    var checkcallerFaultDescription=(rule,value,callback)=>{
       if (value === "") {
        return callback(new Error("请输入故障描述 "));
      } else {
        return callback();
      }
    }
    return {
      selectOptions: {
        projectOption: [],
        projectOtions: [],
        ElevatorOption: [],
        faultOption: [
          { label: "其他", value: 0 },
          { label: "停电", value: 1 },
          { label: "故障", value: 2 }
        ],
        BanOption: [{ label: "否", value: 0 }, { label: "是", value: 1 }],
        urgentOption: [{ label: "否", value: 0 }, { label: "是", value: 1 }],
        repairWorkerOption: []
      },
      repairEmerg: {
        projectId: "",
        liftId: "",
        source:2,
        isTrapped: "",
        isCritical: "",
        callerFaultDescription: "",
        workerId1: "",
        callerName:"",
        callerTel: "",
        callerDate: "",
        repairReason:""
      },
      rules: {
        projectId: [{ validator: changeProject, trigger: "change" }],
        liftId: [{ validator: checkLif, trigger: "change" }],
        repairReason: [{ validator: checksource, trigger: "change" }],
        isTrapped: [{ validator: checkTrapped, trigger: "change" }],
        isCritical: [{ validator: checkCritical, trigger: "change" }],
        workerId1: [{ validator: checkworker, trigger: "change" }],
        callerDate: [{ validator: checkdate, trigger: "blur" }],
        callerId: [{ validator: checkpeople, trigger: "blur" }],
        callerTel: [{ validator: checkphone, trigger: "blur" }],
        callerFaultDescription:[{ validator: checkcallerFaultDescription, trigger: "blur" }],

      }
    };
  },
  mounted() {
    this.getProjectList();
  },
  methods: {
    getProjectList() {
      var url = "business/project/projectIDList";
      var a = JSON.parse(sessionStorage.getItem("companyID")).id;
      // var params = { mtCompanyId: "1001102106531" };
      var params = { mtCompanyId:a };
      this.axios.post(url, params).then(res => {
        if (res.statusCode === "1") {
          this.selectOptions.projectOptions = res.data||[];
          this.selectOptions.projectOption = this.selectOptions.projectOptions;
        } else {
          this.$message(res.message);
        }
      });
      var Rurl="system/companyuser/getUrgentRepairs";
      this.axios.post(Rurl,{companyId:a}).then(res=>{
        if(res.statusCode==="0"){
           this.$message({
            type:"warning",
            message:res.message
          })
          this.selectOptions.repairWorkerOption=[]
        }else{
          this.selectOptions.repairWorkerOption=res.data||[];
        }
      })
    },
    // 项目模糊查询
    myFilter(val) {
      if (val) {
        this.selectOptions.projectOption = this.selectOptions.projectOptions.filter(
          item => {
            if (
              !!~item.projectName.indexOf(val) ||
              !!~item.projectName.toUpperCase().indexOf(val.toUpperCase())
            ) {
              return true;
            }
          }
        );
      } else {
        this.selectOptions.projectOption = this.selectOptions.projectOptions;
      }
    },
    changeProjectid(val) {
      this.selectOptions.projectOption = this.selectOptions.projectOptions;
      var url = "business/lift/project/list";
      var param = {
        liftStatus: "1",
        projectId:val,
        pageNum: 1,
        pageSize: 9999,
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.selectOptions.ElevatorOption = res.data?res.data.rows:[];
        }
      });
    },
      // 提交信息console.log(this.)
  addEmergency() {
    var a=false;
    this.$refs.repairEmerg.validate((valid)=>{
      a=valid;
    })
    if(!a) return;
     const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(f, f, f, 0.7)'
        });
    var date=new Date();
    var dateTime=`${date.getFullYear()}-${date.getMonth()+1<10?"0"+[date.getMonth()+1]:date.getMonth()+1}-${date.getDate()<10?"0"+date.getDate():date.getDate()} ${date.getHours()<10?"0"+date.getHours():date.getHours()}:${date.getMinutes()<10?"0"+date.getMinutes():date.getMinutes()}:${date.getSeconds()<10?"0"+date.getSeconds():date.getSeconds()}`;
    var url = "business/emergency/emergency-repair/add";
    var param = this.repairEmerg;
    param.createDate=dateTime;
    param.creatorId=JSON.parse(sessionStorage.getItem("user"));
    param.mtCompanyId=JSON.parse(sessionStorage.getItem("companyID")).id;
    var _this=this;
    this.axios.post(url,param).then(res=>{
      loading.close();
      if(res.statusCode==="1"){
          _this.$alert('急修发起成功,是否跳转查看', '急修提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.$router.push({name:'UrgentRepair'})
          }
        });
      }else{
           this.$message({
              type: 'warning',
              message:res.message
            });
      }
    });
  }
  },
  //
};
</script>
<style lang="stylus">
.EmergencyDispatch {
  height: 100%;
  background: #fff;
  padding: 30px;
}
</style>
  
<style lang="">
</style>
