<template>
  <div class="app-container">
    <h4 class="form-header h4">工单信息</h4>
    <el-form  label-width="120px">
      <el-row>
        <el-col :span="8" :offset="2">
          <el-form-item label="工单编号" >
            <el-input v-model="this.dmsBillsLubeInstanceList[0].billsLubeCode" disabled />
          </el-form-item>
        </el-col>
<!--        <el-col :span="8" :offset="2">-->
<!--          <el-form-item label="当前流程" >-->
<!--            <el-input v-model="this.dmsBillsLubeInstanceList[0].wfProcessId" disabled />-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :span="8" :offset="2">
          <el-form-item label="工单状态" >
            <el-input v-model="this.billsStatusCheck" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="申请人" >
            <el-input v-model="this.dmsBillsLubeInstanceList[0].createBy" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="申请时间" >
            <el-input v-model="this.dmsBillsLubeInstanceList[0].createTime" disabled />
          </el-form-item>
        </el-col>
<!--        <el-col :span="8" :offset="2">-->
<!--          <el-form-item label="工单类型" >-->
<!--            <el-input v-model="this.instanceTypeCheck" disabled />-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :span="16" :offset="2">
          <el-form-item label="备注" >
            <el-input v-model="this.dmsBillsLubeInstanceList[0].remark" disabled />
          </el-form-item>
        </el-col>

        <!--        <el-col :span="8" :offset="2">-->
        <!--          <el-form-item label="检修计划名称">-->
        <!--            <el-input v-model="this.routeCheck" disabled />-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <!--      <el-col :span="8" :offset="2">-->
        <!--        <el-form-item label="登录账号" prop="deviceId">-->
        <!--          <el-input  v-model="form.deviceId" disabled />-->
        <!--        </el-form-item>-->
        <!--      </el-col>-->
      </el-row>
    </el-form>
    <!--    第一步-->
    <el-row>
      <el-form ref="form" :model="form"  label-width="100px">
        <h4 class="form-header h4">{{this.wfProcessActivityList[0].processActivityName}}</h4>
        <el-col :span="8" >
          <el-form-item label="润滑级别" prop="lubeLevel">

            <el-select v-model="form.lubeLevel" placeholder="巡检线路" :disabled=true>
              <el-option
                v-for="item in dict.type.dms_lube_level"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="润滑组别" prop="lubeGroup">
            <el-input v-model="form.lubeGroup" placeholder="请输入检修组别"  :disabled=true />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="润滑负责人" prop="lubeSupervisor">
            <el-input v-model="form.lubeSupervisor" placeholder="请输入检修负责人" :disabled=true />
          </el-form-item>
        </el-col>


        <!--  中间步骤-->
        <el-form-item  v-for="(repairInstanceActivity,index) in dmsBillsLubeInstanceActivityList"
                       :key="dmsBillsLubeInstanceActivityList.instanceActivityId"
                       label-width="0px"
                       :model="form"
                       v-if="repairInstanceActivity.processStepOrder!=1"
        >
          <h4 class="form-header h4">{{repairInstanceActivity.name}}</h4>
          <el-col :span="8">
            <el-form-item label="润滑级别" prop="lubeLevel">
<!--              <el-radio-group v-model="form.lubeLevel" >-->
<!--                <el-radio-->
<!--                  v-for="dict in dict.type.dms_lube_level"-->
<!--                  :key="dict.value"-->
<!--                  :label="dict.value"-->
<!--                  v-bind:disabled="repairInstanceActivity.processStepOrder!=dmsBillsLubeInstanceActivityList.length+1"-->
<!--                >{{dict.label}}</el-radio>-->
<!--              </el-radio-group>-->
              <el-select v-model="form.lubeLevel" placeholder="巡检线路" :disabled=true>
                <el-option
                  v-for="item in dict.type.dms_lube_level"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  v-bind:disabled="repairInstanceActivity.processStepOrder!=dmsBillsLubeInstanceActivityList.length+1"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="润滑组别">
              <el-input
                v-model="repairInstanceActivity.lubeGroup"
                v-bind:disabled="repairInstanceActivity.processStepOrder!=dmsBillsLubeInstanceActivityList.length+1"
                placeholder="润滑组别">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="润滑负责人"
            >
              <el-input
                v-model="repairInstanceActivity.lubeSupervisor"
                v-bind:disabled="repairInstanceActivity.processStepOrder!=dmsBillsLubeInstanceActivityList.length+1"
                placeholder="润滑负责人">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">

            <el-form-item label="处理意见"
            >
              <el-input
                v-model="repairInstanceActivity.processHandleResolution"
                v-bind:disabled="repairInstanceActivity.processStepOrder!=dmsBillsLubeInstanceActivityList.length+1"
                placeholder="处理意见">
              </el-input>
            </el-form-item>
          </el-col>
        </el-form-item>

      </el-form>
      <!--新增审批流程表单显示-->
      <el-form ref="form1" :model="form1" label-width="100px"

               v-if="form1.processStepOrder!=wfProcessActivityList.length&&this.isUpdate==true">
        <h4 class="form-header h4">{{this.wfProcessActivityList[this.dmsBillsLubeInstanceActivityList.length].processActivityName}}</h4>
        <el-col :span="8">
          <!--        <el-form-item label="检修类型" prop="repairType"-->
          <!--        >-->
          <!--          <el-input-->
          <!--            v-model="form1.repairType"-->
          <!--            placeholder="检修类型"-->
          <!--          >-->
          <!--          </el-input>-->
          <!--        </el-form-item>-->
          <el-form-item label="检修类型" prop="lubeLevel">
            <el-select v-model="form1.lubeLevel" placeholder="巡检线路" >
              <el-option
                v-for="item in dict.type.dms_lube_level"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="检修组别"
          >
            <el-input
              v-model="form1.lubeGroup"
              placeholder="检修组别">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="检修负责人"
          >
            <el-input
              v-model="form1.lubeSupervisor"
              placeholder="检修负责人">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">

          <el-form-item label="处理意见"
          >
            <el-input
              v-model="form1.processHandleResolution"
              placeholder="处理意见">
            </el-input>
          </el-form-item>
        </el-col>
        <div  >
          <el-button type="primary" @click="submitForm">提 交</el-button>
        </div>
      </el-form>

    </el-row>
    <!--润滑计划明细列表-->
    <h4 class="form-header h4" align="center">润滑计划详细信息</h4>

    <el-table v-loading="loading" :data="this.planLubeDetail" >
<!--      <el-table-column type="selection" width="55" align="center" />-->
      <el-table-column label="计划ID" align="center" prop="planLubeId" />
      <el-table-column label="设备名称" align="center" prop="deviceName" />
      <el-table-column label="润滑部位" align="center" prop="lubeStationName" />
      <el-table-column label="润滑标准" align="center" prop="lubeStandardCode" />
      <el-table-column label="操作描述" align="center" prop="operationDescription" />

    </el-table>



    <!-- 添加或修改润滑工单实例节点对话框 -->

  </div>
</template>

<script>
import { listDmsBillsLubeInstanceActivity, getDmsBillsLubeInstanceActivity, delDmsBillsLubeInstanceActivity, addDmsBillsLubeInstanceActivity, updateDmsBillsLubeInstanceActivity } from "@/api/dms/dmsBillsLubeInstanceActivity";
import { listWfprocessactivity } from '@/api/system/common/wfprocessactivity'
import { listDmsBillsLubeInstance } from '@/api/dms/dmsBillsLubeInstance'
import { selectUserIdByDmsBillsLubeInstanceActivityId } from '@/api/dms/dmsBillsLubeInstanceActivity'
import { selectPlanLubeDetailByPlanLubeId} from '@/api/dms/dmsPlanLubeDetail'

export default {
  name: "DmsBillsLubeInstanceActivity",
  dicts:['dms_lube_status','dms_instance_type','dms_repair_type','dms_lube_level'],
  data() {
    return {
      planLubeDetail:[],
      planLubeId:"",
      lubeInstanceIdCheck:"",
      nowPorcessStepOrder:"",
      isUpdate:"",
      instanceTypeCheck:"",
      ListLength:"",
      //工单状态
      billsStatusCheck:"",
      stepsNum:"",
      wfProcessActivityList:[],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 润滑工单实例节点表格数据
      dmsBillsLubeInstanceActivityList: [],
      dmsBillsLubeInstanceList:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        lubeInstanceId: null,
        processActivityId: null,
        lubeGroup: null,
        lubeSupervisor: null,
        lubeLevel: null,
        processHandleResolution: null,
        processHandleStatus: null,
        processStepOrder: null,
        startTime: null,
        endTime: null,
        handleUserId: null,
        handleBy: null,
        handleTime: null,
        transferUserId: null,
        attr1: null
      },
      queryParamWfProcessActivity:{
        wfProcessId:null,
      },
      // queryParamDetail:{
      //   lubeInstanceId: null,
      // },
      // 表单参数
      form: {},
      form1: {},
      // 表单校验
      rules: {
        lubeInstanceId: [
          { required: true, message: "润滑工单实例ID，关联dm_bills_lube_instance的lube_instance_id不能为空", trigger: "blur" }
        ],
        processHandleResolution: [
          { required: true, message: "处理意见;第1步不显示，从第2步只显示此字段不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    const lubeInstanceIdCheck = this.$route.params && this.$route.params.lubeInstanceId;
    this.lubeInstanceIdCheck = lubeInstanceIdCheck;
    this.form.lubeInstanceId = lubeInstanceIdCheck;
    this.queryParams.lubeInstanceId = lubeInstanceIdCheck;
    // alert(this.queryParams.lubeInstanceId)
    // this.queryParamDetail.lubeInstanceId = lubeInstanceIdCheck;
    this.queryParamWfProcessActivity.wfProcessId = 106;
    this.getWfprocessActivity();
    this.getDmsBillsLubeInstance();
    this.getList();
    // this.selectDmsBillsLubeDetail();
    if(this.$route.name == "childDmsBillsLubeInstanceActivity"){
      this.isUpdate = true;
    }
    else if(this.$route.name == "selectChildDmsBillsLubeInstanceActivity"){
      this.isUpdate = false;
    }

    console.log(this.form)
  },
  methods: {

    getselectUserIdByRepairInstanceId(){
      // alert(this.wfProcessActivityList.length)
      // alert(this.nowPorcessStepOrder)
      if (this.nowPorcessStepOrder==this.wfProcessActivityList.length){
        // alert("??????????")
        selectUserIdByDmsBillsLubeInstanceActivityId(this.lubeInstanceIdCheck,this.$store.state.user.id).then(response=>{
          console.log(response)
          alert(response)

          if (response == false) {
            alert("无权限")
            this.$store.dispatch("tagsView/delView",this.$route)
            this.$router.replace({path:"/dms/deviceLube/dmsBillsLubeInstance"})
          }
        })
      }

    },
    /** 查询润滑工单明细*/
    selectDmsBillsLubeDetail(){
      selectPlanLubeDetailByPlanLubeId(this.planLubeId).then(response=>{
        console.log("===================================================================================")
        console.log(response)
        this.planLubeDetail = response.rows;
        console.log("===================================================================================")
        this.loading = false
      })
    },
    /** 查询润滑工单*/
    getDmsBillsLubeInstance() {
      listDmsBillsLubeInstance(this.queryParams).then(response => {
        this.dmsBillsLubeInstanceList = response.rows;
        this.planLubeId = response.rows[0].planLubeId;
        console.log(this.planLubeId)
        // alert(this.response.rows[0].planLubeId)
        this.selectDmsBillsLubeDetail();
        for (let i = 0; i < this.dict.type.dms_lube_status.length;i++){
          if (this.dmsBillsLubeInstanceList[0].lubeStatus==i){

            this.billsStatusCheck = this.dict.type.dms_lube_status[i].label;
          }
        }
        // for (let j = 0; j < this.dict.type.dms_instance_type.length;j++){
        //   //因为字典dms_instance_type没有键值0，所以从==j+1
        //   if (this.dmsBillsLubeInstanceList[0].instanceType==j+1){
        //     console.log(this.dmsBillsLubeInstanceList)
        //     this.instanceTypeCheck = this.dict.type.dms_instance_type[j].label;
        //     console.log(this.instanceTypeCheck)
        //   }
        // }

        this.getWfprocessActivity();
      });
    },
    /**查询流程信息*/
    getWfprocessActivity(){
      listWfprocessactivity(this.queryParamWfProcessActivity).then(response=>{
        this.wfProcessActivityList = response.rows;
        console.log(this.wfProcessActivityList)
        this.stepsNum = this.wfProcessActivityList.length;
        for (let i=0;i<this.stepsNum;i++){
          for (let j=0;j<this.stepsNum;j++){
            if (this.dmsBillsLubeInstanceActivityList[i].processStepOrder==this.wfProcessActivityList[j].processActivityOrder){
              this.dmsBillsLubeInstanceActivityList[i].name = this.wfProcessActivityList[j].processActivityName;
              console.log(this.dmsBillsLubeInstanceActivityList[i].name)
            }
          }
        }

      })
    },
    /** 查询润滑工单实例节点列表 */
    getList() {
      this.loading = true;
      listDmsBillsLubeInstanceActivity(this.queryParams).then(response => {
        this.dmsBillsLubeInstanceActivityList = response.rows;
        this.total = response.total;
        console.log(this.dmsBillsLubeInstanceActivityList)
        this.form.lubeGroup = this.dmsBillsLubeInstanceActivityList[0].lubeGroup;
        this.form.lubeSupervisor = this.dmsBillsLubeInstanceActivityList[0].lubeSupervisor;
        this.form.lubeLevel = this.dmsBillsLubeInstanceActivityList[0].lubeLevel;
        this.form.remark = this.dmsBillsLubeInstanceActivityList[0].remark;
        this.ListLength = this.dmsBillsLubeInstanceActivityList.length;
        this.form1 = JSON.parse(JSON.stringify(this.dmsBillsLubeInstanceActivityList[this.ListLength-1]))
        this.form1.processHandleResolution = null;
        this.nowPorcessStepOrder = this.ListLength+1;
        listWfprocessactivity(this.queryParamWfProcessActivity).then(response=>{
          this.wfProcessActivityList = response.rows;
          this.getselectUserIdByRepairInstanceId();
        }
        ),

        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        instanceActivityId: null,
        lubeInstanceId: null,
        processActivityId: null,
        lubeGroup: null,
        lubeSupervisor: null,
        lubeLevel: null,
        processHandleResolution: null,
        remark: null,
        processHandleStatus: null,
        processStepOrder: null,
        startTime: null,
        endTime: null,
        handleUserId: null,
        handleBy: null,
        handleTime: null,
        createBy: null,
        createTime: null,
        transferUserId: null,
        attr1: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.instanceActivityId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加润滑工单实例节点";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const instanceActivityId = row.instanceActivityId || this.ids
      getDmsBillsLubeInstanceActivity(instanceActivityId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改润滑工单实例节点";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.instanceActivityId != null) {
            updateDmsBillsLubeInstanceActivity(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            for (let i = 0; i < this.wfProcessActivityList.length;i++){
              if (this.form1.processStepOrder+1 == this.wfProcessActivityList[i].processActivityOrder){
                this.form1.processActivityId = this.wfProcessActivityList[i].processActivityId;
                // alert(this.wfProcessActivityList[i].processActivityId)
              }
            }
            this.form1.instanceActivityId =null;
            //顺序自增
            this.form1.processStepOrder = this.form1.processStepOrder+1;
            this.form1.wfLength = this.wfProcessActivityList.length;
            addDmsBillsLubeInstanceActivity(this.form1).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const instanceActivityIds = row.instanceActivityId || this.ids;
      this.$modal.confirm('是否确认删除润滑工单实例节点编号为"' + instanceActivityIds + '"的数据项？').then(function() {
        return delDmsBillsLubeInstanceActivity(instanceActivityIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('dms/dmsBillsLubeInstanceActivity/export', {
        ...this.queryParams
      }, `dmsBillsLubeInstanceActivity_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
