<template>
  <div class="againAssign">
    <div class="conentBox headtop headbottom">
      <div v-if="$route.params.incidentId" class="conent">
        <div class="navBar">
          <div class="fl">
            <a :class="{ active: actives == 'info' }" href="javascript:;" @click="toInfo('info')">耗材清单</a>
          </div>
          <div class="fl">
            <a :class="{ active: actives == 'progress' }" href="javascript:;" @click="toInfo('progress')">工时清单</a>
          </div>
          <div class="fl">
            <a :class="{ active: actives == 'handlerInfo' }" href="javascript:;"  @click="toInfo('handlerInfo')">处理信息</a>
          </div>
        </div>

        <div class="info">
          <div class="label" id="info">耗材清单</div>
          <ConsumableMaterial v-for="item in summaryObj.consumableList" :key="item.id" class="bottomBorder" :model="item" :id="item.id" :summaryId="summaryId" :incidentId="$route.params.incidentId" @refresh="refresh"></ConsumableMaterial>
          <p class="textCenter">
            <span>耗材总价：<strong class="fontBold">{{ totalPriceConsumable }}元</strong></span>
          </p>
          <p
            class="addConsumableMaterial textCenter"
            @click="addConsumableMaterial()"
          >
            <span class="dash dash-jia"></span>
          </p>
          <div class="label" id="progress">工时清单</div>
          <WorkHourManagement v-for="item in summaryObj.workHourManagementList" :key="item.id" class="bottomBorder" :model="item" :id="item.id" :summaryId="summaryId" :incidentId="$route.params.incidentId" @refresh="refresh" :summaryObj="summaryObj"></WorkHourManagement>
          <p class="textCenter">
            <span>工时总价：<strong class="fontBold">{{ totalPriceWorkHourManagement }}元</strong></span>
          </p>
          <p class="addConsumableMaterial textCenter" @click="addWorkHourManagementOne()">
            <span class="dash dash-jia"></span>
          </p>
          <p class="textCenter total">
            <span>汇总单总价：<strong class="fontBold">{{ totalMaintenancePrice }}元</strong></span>
          </p>
          <div v-if="modelData.incident.id && (modelData.incident.handlerUser.id == loginUser.id)">
            <div class="label" id="handlerInfo"><strong>处理信息</strong><i @click="gotoProcessing"><img src="../assets/icon/see.png">查看详情</i></div>
            <div class="handlerInfo">
                <cube-form :model="model" @validate="validateHandler">
                  <cube-form-group>
                    <cube-form-item :field="fields[1]" class="btn_plcaeholde" v-if="isShowDes">
                      <cube-button @click="showCategoryPicker()">{{ selectedCategoryTxt ? selectedCategoryTxt : "请选择故障现象" }}</cube-button>
                    </cube-form-item>
                    <cube-form-item :field="fields[3]" class="incidentTitle" v-if="isShowDes">
                      <div class="titleRefer">
                        <textarea class="titleTxtArea fl" placeholder="请输入处理方案" v-model="incidentTitle" @input="inpTitle()"></textarea>
                        <!-- <span class="abtn fl" @click="referKnowledge()">引入知识库</span> -->
                      </div>
                    </cube-form-item>
                    <cube-form-item :field="fields[0]"></cube-form-item>

                    <div class="label formLabel">
                      处理图片
                      <span>(最多可上传3张JPG或PNG,每张不能超过10M)</span>
                    </div>
                    <div class="uplod">
                      <cube-upload
                        ref="upload"
                        :max="3"
                        :action="action"
                        :simultaneous-uploads="3"
                        @files-added="filesAdded"
                        @file-submitted="fileSubmitted"
                      />
                    </div>

                    <!-- <cube-form-item :field="fields[2]" v-if="isShowDes"></cube-form-item> -->


                    <cube-form-item :field="fields[10]">
                      <div class="addSynergeticText"><span v-for="item in synergeticChecked" :key="item.id">{{item.name}} </span></div>
                      <div class="addSynergetic" :class="{fr: synergeticChecked.length > 0}" @click="addNow"><span class="dash dash-jia"></span>立即添加</div>
                    </cube-form-item>

                    <cube-form-item :field="fields[4]" v-if="isShowDes"></cube-form-item>
                    <!-- <cube-form-item :field="fields[5]" class="btn_plcaeholde" v-if="!!model.knowledge"></cube-form-item> -->
                  </cube-form-group>
                </cube-form>
              </div>
            </div>
        </div>
      </div>
      <load-ing v-if="loadShow"></load-ing>
      <promp-ting
        :conents="promptingConent"
        :status="promptingStatus"
      ></promp-ting>
    </div>
    <seiminModel ref="seiminModel"></seiminModel>
    <div class="sub">
      <cube-button type="submit" @click="temporaryStorage()">暂存</cube-button>
      <cube-button type="submit" @click="submitHandler()">提交</cube-button>
    </div>
    <seiminDrawer1 v-if="isShowDrawer" @close="closeDrawer" @confirm="confirmDrawer" :evt="evt" :infoData="{dutyId: this.modelData ? this.modelData.incident.duty.id : undefined}"></seiminDrawer1>
  </div>
</template>
<script>
import seiminDrawer1 from "../custom/seiminDrawer1.vue";
import seiminModel from "./../custom/seiminModel";
import LoadIng from "./../views/loading.vue";
import PrompTing from "./../views/prompting.vue";
import ConsumableMaterial from "./../components/ConsumableMaterial/index.vue";
import WorkHourManagement from "./../components/WorkHourManagement/index.vue";
// 知识库类型
const solution = {
  props: {
    value: {
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      selected: [],
      selectData: [],
      initVal: JSON.parse(localStorage.getItem("solution")) || [0, 0, 0]
    };
  },
  render(createElement) {
    return createElement(
      "cube-button",
      {
        on: {
          click: this.showPicker
        }
      },
      this.selected.length
        ? this.selected[this.selected.length - 1]
        : "请选择知识库类型"
    );
  },
  created() {
    this.getTree();
  },
  mounted() {},
  methods: {
    showPicker() {
      this.picker.show();
    },
    selectHandler(selectedVal, selectedIndex, selectedTxt) {
      var selected = [];
      selectedTxt.forEach(function(v, i) {
        if (v != "") {
          selected.push(v);
        }
      });
      this.selected = selected;
      this.$emit("input", selectedVal);
      localStorage.setItem("solution", JSON.stringify(selectedIndex));
    },
    // 获取故障现象数据
    getTree() {
      let that = this;
      that.$http
        .post("service/solution/fetchDataList/solutionType", {
          idx: 0,
          sum: 100
        })
        .then(function(res) {
          var list = res.data.list;
          var tree = [];
          list.forEach((v, i) => {
            if (!v.parent) {
              tree[i] = {
                value: v.id,
                text: v.typeName,
              };
            } else {
              tree.forEach((val, idx) => {
                if (
                  v.parent &&
                  !v.parent.parent &&
                  val.text == v.parent.typeName
                ) {
                  if(tree[idx].children){
                    tree[idx].children.push({
                      value: v.id,
                      text: v.typeName,
                    });
                  }else{
                    tree[idx].children = [];
                  }
                } else if (v.parent.parent) {
                  if(tree[idx].children){
                    tree[idx].children.forEach((value, index) => {
                      if (value.text == v.parent.typeName) {
                        if(tree[idx].children[index].children){
                          tree[idx].children[index].children.push({
                            value: v.id,
                            text: v.typeName
                          });
                        }else{
                          tree[idx].children[index].children = [];
                        }
                      }
                    });
                  }else{
                    tree[idx].children = [];
                  }

                }
              });
            }
          });

          that.selectData = tree;
          that.picker = that.$createCascadePicker({
            title: "知识库类型选择",
            data: that.selectData,
            selectedIndex: that.initVal,
            onSelect: that.selectHandler
          });
        });
    }
  }
};
export default {
  data() {
    return {
      action: {
        target:
          this.$host + "/service/common/common/uploadAttachment/incident/",
        data: {}
      },
      incidentTitle: "", //处理方案
      evt: null,
      isShowDrawer: false,
      synergeticChecked: [], //选中协同人员
      selectedCategoryTxt: "", //故障现象选中展示
      validity: {},
      valid: undefined,
      initSjList: [], //原始事件列表
      isShowDes: false,
      closecodeArr: [], //关闭代码数组
      handleCategoryArr: [], //处理方式数组
      // 耗材总价格
      totalMaintenancePrice: null,
      totalPriceConsumable: null,
      totalPriceWorkHourManagement: null,
      summaryObj: {},
      loginUser: JSON.parse(localStorage.getItem("loginUser")),
      id: "",
      actives: "info",
      model: {}, //提交数据
      loadShow: false,
      pro_hides: false, //展开/收起处理进度
      name: "",
      label: "incidentInfo", //顶部快速定位
      modelData: {
        incident: {}
      }, //上传的model
      model: {
        handleCategory: "", //处理方式
        closecode: "", //关闭代码
        category: [], //确认故障现象
        handleDescription: "", //处理方案
        knowledge: false, //是否提交知识库
        isHelper: false, //是否需要协同
        solutionType: [], //知识库类型
        handlerUser: "", //升级/转派对象
        isupreason: "", //升级原因
        transferReason: "", //转派原因
        synergeticChecked: [], //选中协同人员
        synergeticReason: "", //协同原因
        selectArea: "",
        selectPlace: "",
        transferMode: "", //转派方式
        branch: "", //院区
        duty: "" //责任科室
      },
      promptingConent: "",
      promptingStatus: "",
      fields: [
        {
          type: "select",
          modelKey: "handleCategory",
          label: "处理方式:",
          props: {
            options: this.handleCategoryArr,
            title: "请选择处理方式",
            placeholder: "请选择处理方式"
          },
          rules: {
            required: true
          }
        },
        {
          component: "button",
          modelKey: "category",
          label: "确认故障现象:",
          rules: {
            required: true
          }
        },
        {
          type: "select",
          modelKey: "closecode",
          label: "关闭代码:",
          props: {
            options: this.closecodeArr,
            title: "请选择关闭代码",
            placeholder: "请选择关闭代码"
          },
          rules: {
            required: true
          }
        },
        {
          type: "textarea",
          modelKey: "handleDescription",
          label: "处理方案:",
          props: {
            placeholder: "请填写处理方案"
          },
          rules: {
            required: true
          },
          debounce: 100
        },
        {
          type: "switch",
          modelKey: "knowledge",
          label: "是否转换知识库:",
          rules: {
            required: false
          }
        },
        {
          component: solution,
          modelKey: "solutionType",
          label: "知识库类型:",
          rules: {
            required: true
          },
          messages: {
            required: ""
          }
        },
        {
          type: "select",
          modelKey: "handlerUser",
          label: "升级对象:",
          props: {
            options: [],
            placeholder: "请选择升级对象"
          },
          rules: {
            required: true
          }
        },
        {
          type: "input",
          modelKey: "isupreason",
          label: "升级原因:",
          props: {
            placeholder: "请输入升级原因"
          },
          rules: {
            required: true
          }
        },
        {
          type: "select",
          modelKey: "handlerUser",
          label: "转派对象:",
          props: {
            options: [],
            placeholder: "请选择转派对象"
          },
          rules: {
            required: true
          }
        },
        {
          type: "input",
          modelKey: "transferReason",
          label: "转派原因:",
          props: {
            placeholder: "请输入转派原因"
          },
          rules: {
            required: true
          }
        },
        {
          type: "input",
          modelKey: "synergeticChecked",
          label: "协同人员:",
          props: {
            options: [],
            placeholder: "请选择协同人员"
          },
          rules: {
            required: false
          }
        },
        {
          type: "input",
          modelKey: "synergeticReason",
          label: "协同原因:",
          props: {
            placeholder: "请输入协同原因"
          },
          rules: {
            required: false
          }
        },
        {
          type: "select",
          modelKey: "selectArea",
          label: "区域:",
          props: {
            options: [],
            title: "请选择区域:",
            placeholder: "请选择区域:"
          },
          events: {
            change: (id, index, text) => {
              // console.log(id,index,text,9999)
              this.getPlaceList(id).then(res => {
                this.selectedAreaId = id;
                this.selectedAreaName = text;
                // {{modelData.incident.place?modelData.incident.place.area.area:'--'}}
                console.log(this.modelData, "asad");
                if (this.modelData.incident.place) {
                  this.$set(this.modelData.incident.place, "area", {
                    id,
                    area: text
                  });
                } else {
                  this.$set(this.modelData.incident, "place", {
                    area: {
                      id,
                      area: text
                    }
                  });
                }
              });
            }
          },
          rules: {
            required: true
          }
        },
        {
          type: "select",
          modelKey: "selectPlace",
          label: "地点:",
          props: {
            options: [],
            title: "请选择地点:",
            placeholder: "请选择地点:"
          },
          events: {
            change: (id, index, text) => {
              this.selectedPlaceId = id;
              this.selectedPlaceName = text;
              this.$set(
                this.modelData.incident,
                "houseNumber",
                this.selectedAreaName + this.selectedPlaceName
              );
              if (this.modelData.incident.place) {
                this.$set(this.modelData.incident.place, "place", text);
                this.$set(this.modelData.incident.place, "id", id);
              } else {
                this.$set(this.modelData.incident, "place", {
                  id,
                  place: text
                });
              }
            }
          },
          rules: {
            required: true
          }
        },
        {
          type: "switch",
          modelKey: "isHelper",
          label: "是否需要协同:",
          rules: {
            required: false
          }
        },
        {
          type: "select",
          modelKey: "handlerUser",
          label: "指派对象:",
          props: {
            options: [],
            placeholder: "请选择指派对象"
          },
          rules: {
            required: true
          }
        },
        {
          type: "textarea",
          modelKey: "handlerLog",
          label: "维修记录:",
          props: {
            placeholder: "请填写维修记录"
          },
          rules: {
            required: false
          },
          debounce: 100
        },
        {
          type: "select",
          modelKey: "transferMode",
          label: "转派方式:",
          props: {
            options: [],
            placeholder: "请选择转派方式"
          },
          events: {
            change: (id, index, text) => {
              // console.log(id,index,text,9999);
              if(id == 1){
                this.getRotateUser(id);
              }else if(id == 2){
                this.getRotateBranch();
              }
            }
          },
          rules: {
            required: true
          }
        },
        {
          type: "select",
          modelKey: "branch",
          label: "院区:",
          props: {
            options: [],
            placeholder: "请选择院区"
          },
          events: {
            change: (id, index, text) => {
              // console.log(id,index,text,9999);
              this.getRotateDuty(id);
            }
          },
          rules: {
            required: true
          }
        },
        {
          type: "select",
          modelKey: "duty",
          label: "责任科室:",
          props: {
            options: [],
            placeholder: "请选择责任科室"
          },
          events: {
            change: (id, index, text) => {
              // console.log(id,index,text,9999);
              this.getRotateUser(this.model.transferMode);
            }
          },
          rules: {
            required: true
          }
        },
        {
          type: "textarea",
          modelKey: "description",
          label: "故障描述:",
          props: {
            placeholder: "请详细描述故障，并上传故障图片，例如：网络故障。"
          },
          rules: {
            required: true
          },
          debounce: 100
        },
      ],
    };
  },
  methods: {
    filesAdded(files) {
      let hasIgnore = false;
      const maxSize = 1000 * 1024 * 1024; // 1M
      for (let k in files) {
        const file = files[k];
        if (file.size > maxSize) {
          file.ignore = true;
          hasIgnore = true;
        }
      }
      hasIgnore &&
        this.$createToast({
          type: "warn",
          time: 1000,
          txt: "不能上传超过100M的文件"
        }).show();
      // 暂停上传
      this.$refs.upload.pause();
    },
    fileSubmitted(files) {
      this.action.data = { fileName: files.name };
    },
    // 输入处理方案
    inpTitle() {
      this.model.handleDescription = this.incidentTitle;
    },
    addNow(){
      this.showDrawer();
    },
    // 确认侧边筛选框
    confirmDrawer(evt){
      console.log(evt);
      this.evt = evt;
      this.synergeticChecked = evt.synergeticChecked;
    },
    // 关闭侧边筛选框
    closeDrawer(){
      this.isShowDrawer = false;
    },
    // 打开侧边筛选框
    showDrawer(){
      this.isShowDrawer = true;
    },
    // 事件详情
    gotoProcessing(){
      this.$router.push({
        name: "Processing",
        params: {
          data: this.modelData.incident
        },
        query: {
          hiddenHandle: 1
        }
      });
    },
    // 获取处理方式
    getHandleCategory() {
      var that = this;
      this.$http
        .post("service/common/common/getDictionary", {
          key: "incident_handleCategory",
          type: "list"
        })
        .then(function(res) {
          res.data.forEach(function(v, i) {
            that.handleCategoryArr.push({
              text: v.name,
              value: v.id
            });
          });
          that.fields[0].props.options = that.handleCategoryArr;
          that.model.handleCategory = 1565;
        });
    },
    // 故障现象回显
    setCategory() {
      let that = this;
      if (localStorage.getItem("referenceInfo")) {
        that.referenceInfo = JSON.parse(localStorage.getItem("referenceInfo"));
        var selectedVal = []; //存id,对应value
        var selectedIndex = []; //存索引
        var selectedTxt = []; //存名称
        if (this.referenceInfo.category) {
          console.log(this.selectData, "所有故障现象");
          console.log(this.referenceInfo.category, "返回的数据");
          var category = this.referenceInfo.category;
          selectedVal = [category.id]; //存id,对应value
          // selectedVal
          if (category.parentCategory) {
            //上级
            selectedVal.unshift(category.parentCategory.id);
            if (category.parentCategory.parentCategory) {
              //上上级
              selectedVal.unshift(category.parentCategory.parentCategory.id);
            }
          }
          //一级
          if (selectedVal[0]) {
            this.selectData.forEach(function(v, i) {
              if (v.value == selectedVal[0]) {
                selectedIndex.push(i);
                selectedTxt.push(v.text);
              }
            });
            // 二级
            if (selectedVal[1]) {
              this.selectData[selectedIndex[0].toString()].children.forEach(
                function(v, i) {
                  if (v.value == selectedVal[1]) {
                    selectedIndex.push(i);
                    selectedTxt.push(v.text);
                  }
                }
              );
              // 三级
              if (selectedVal[2]) {
                this.selectData[selectedIndex[0].toString()].children[
                  selectedIndex[1].toString()
                ].children.forEach(function(v, i) {
                  if (v.value == selectedVal[2]) {
                    selectedIndex.push(i);
                    selectedTxt.push(v.text);
                  }
                });
              }
            }
          }
          console.log(selectedVal, selectedIndex, selectedTxt, "获取的数据");
        }
        //回显
        var selected = [];
        selectedTxt.forEach(function(v, i) {
          if (v != "") {
            selected.push(v);
          }
        });
        this.selected = selected;
        this.selectedCategoryTxt = selected.length
          ? selected[selected.length - 1]
          : "";
        this.model.category = selectedVal;
      }
    },
    validateHandler(result) {
      this.validity = result.validity;
      this.valid = result.valid;
    },
    // 切换处理方式
    changeHandleTypes() {
      let reverseArr = this.model.category.filter(Boolean).reverse(); //数组翻转，取第一项不为空的
      let sjId = reverseArr[0]; //事件Id
      let sj = this.initSjList.filter(v => v.id == sjId)[0];
      console.log(sj);
      this.isShowDes = !(sj && sj.hasSimple == 1);
    },
    //   获取事件数据
    getParamsData() {
      this.loadShow = true;
      this.$http
        .get(
          "/service/form/renderForm/handlerform/" +
            this.$route.params.processInstanceId +
            "/" +
            this.loginUser.id +
            "/" +
            this.$route.params.incidentId,
          {}
        )
        .then(res => {
          this.loadShow = false;
          console.log(res.data, 666);
          this.modelData = res.data.model;
          if (this.modelData.incident.category.hasSimple == 1) {
            this.isShowDes = false;
          } else {
            this.isShowDes = true;
          }
          // 获取页面数据
          this.getMessage();
          // 故障现象
          this.getIncidentcategory();
        });
    },
    // 处理方案引入知识库
    referKnowledge() {
      var that = this;
      if (!that.model.handleDescription) {
        alert("请输入处理方案");
        return;
      }
      that.setLocalStroageData();
      this.$router.push({
        name: "ReferenceList",
        params: { data: that.model.handleDescription }
      });
    },
    // 获取页面数据
    getMessage() {
      var that = this;
      if (localStorage.getItem("referenceInfo")) {
        that.referenceInfo = JSON.parse(localStorage.getItem("referenceInfo"));
        that.incidentTitle = that.model.handleDescription =
          that.referenceInfo.content;
      }
      // 协同人员
      that.getSynerUser();
    },
    // 获取协同人员
    getSynerUser() {
      console.log(this.modelData.incident.duty);
      var that = this;
      var postData = {
        idx: 0,
        sum: 1000,
        user: {
          currentDuty: this.modelData ? this.modelData.incident.duty.id : undefined
        }
      };
      this.$http
        .post("service/user/data/fetchDataList/user", postData)
        .then((res) => {
          var handlerUserArr = [];
          res.data.list.forEach((v, i) => {
            if(v.id != this.loginUser.id){
              handlerUserArr.push({
                label: v.name,
                value: v.id
              });
            }
          });
          that.fields[10].props.options = handlerUserArr;
          that.synergeticList = handlerUserArr;
        });
    },
    getIncidentcategory() {
      this.loadShow = true;
      var that = this;
      let postData = {
        idx: 0,
        sum: 9999,
      };
      // 当前所属院区或责任科室
      if(this.loginUser.duty){
        postData.incidentcategory = { duty: this.loginUser.duty.id };
      }else if(this.loginUser.branch){
        postData.incidentcategory = { branch: this.loginUser.branch.id }
      }
      this.$http
        .post("service/bpm/data/fetchDataList/incidentcategory", postData)
        .then(function(res) {
          that.initSjList = JSON.parse(JSON.stringify(res.data.list));
          var list = res.data.list;
          var tree = [];
          list.forEach((v, i) => {
            if (!v.parent) {
              tree[i] = {
                value: v.id,
                text: v.category,
                children: []
              };
            } else {
              tree.forEach((val, idx) => {
                if (
                  v.parent &&
                  !v.parent.parent &&
                  val.text == v.parent.category
                ) {
                  tree[idx].children.push({
                    value: v.id,
                    text: v.category,
                    children: []
                  });
                } else if (v.parent.parent) {
                  tree[idx].children.forEach((value, index) => {
                    if (value.text == v.parent.category) {
                      tree[idx].children[index].children.push({
                        value: v.id,
                        text: v.category
                      });
                    }
                  });
                }
              });
            }
          });

          if (true) {
            let cate = that.modelData.incident.category;
            let cateGrand =
              cate.parentCategory &&
              cate.parentCategory.parentCategory &&
              cate.parentCategory.parentCategory.id;
            let cateFa = cate.parentCategory && cate.parentCategory.id;
            let cateSelf = cate.id;
            console.log(cate, tree);
            var selectedVal = [];
            var selectedIndex = [];
            var selectedTxt = [];
            tree.forEach((v, i) => {
              if (v.value == cateGrand) {
                selectedVal.push(v.value);
                selectedIndex.push(i);
                selectedTxt.push(v.text);
                v.children.forEach((va, ind) => {
                  if (va.value == cateFa) {
                    selectedVal.push(va.value);
                    selectedIndex.push(ind);
                    selectedTxt.push(va.text);
                    va.children.forEach((val, idx) => {
                      if (val.value == cateSelf) {
                        selectedVal.push(val.value);
                        selectedIndex.push(idx);
                        selectedTxt.push(val.text);
                      }
                    });
                  }
                });
              }
            });
            if(cateGrand && cateFa && cateSelf){
              if(selectedVal.length < 3){
                selectedVal = [];
                selectedIndex = [];
                selectedTxt = [];
              }
            } else if(cateGrand && cateFa && !cateSelf){
              if(selectedVal.length < 2){
                selectedVal = [];
                selectedIndex = [];
                selectedTxt = [];
              }
            } else if(cateGrand && !cateFa && !cateSelf){
              if(selectedVal.length < 1){
                selectedVal = [];
                selectedIndex = [];
                selectedTxt = [];
              }
            }
            console.log(selectedVal, selectedIndex, selectedTxt);
            that.selectData = tree;
            // 获取故障现象并设置
            that.setCategory();
            that.categoryPicker = that.$createCascadePicker({
              title: "故障现象选择",
              data: that.selectData,
              selectedIndex: selectedIndex,
              onSelect: that.selectCategoryHandler
            });

            setTimeout(() => {
              that.selectCategoryHandler(
                selectedVal,
                selectedIndex,
                selectedTxt
              );
            }, 500);
          }
          that.loadShow = false;
        });
    },
    // 故障现象
    showCategoryPicker() {
      this.categoryPicker.show();
    },
    selectCategoryHandler(selectedVal, selectedIndex, selectedTxt) {
      console.log(selectedVal, selectedIndex, selectedTxt);
      let reverseArr = selectedVal.filter(Boolean).reverse(); //数组翻转，取第一项不为空的
      let sjId = reverseArr[0]; //事件Id baba
      let sj = this.initSjList.filter(v => v.id == sjId)[0];
      var selected = [];
      selectedTxt.forEach(function(v, i) {
        if (v != "") {
          selected.push(v);
        }
      });
      this.selected = selected;
      this.selectedCategoryTxt = selected.length
        ? selected[selected.length - 1]
        : "";
      this.model.category = selectedVal;
      if (sj.hasSimple == 1) {
        this.isShowDes = false;
      } else {
        this.isShowDes = true;
      }
    },
    // 获取关闭代码
    getClosecode() {
      var that = this;
      this.$http
        .post("service/common/common/getDictionary", {
          key: "incident_closecode",
          type: "list"
        })
        .then(function(res) {
          res.data.forEach(function(v, i) {
            that.closecodeArr.push({
              text: v.desc,
              value: v.id
            });
          });
          that.fields[2].props.options = that.closecodeArr;
          that.model.closecode = 1572;//设计如此，默认“完全解决”
        });
    },
    // 暂存
    temporaryStorage(){
      console.log(this.summaryObj);
      const toast = this.$createToast({
        txt: "Loading...",
        mask: true
      });
      toast.show();
      this.$http
        .post("service/bpm/data/addSummaryDoc", {
            "summaryId": this.summaryId,
            "staging": '暂存',
        })
        .then(res => {
          toast.hide();
          if (res.data.status == 200) {
            this.$createDialog({
              type: "alert",
              title: "操作成功",
              icon: "cubeic-right",
              onConfirm: (e, promptValue) => {
                this.$router.push({
                  path: `/main/incidentNewList/todo/1544`
                })
              }
            }).show();
          } else {
            this.$createDialog({
              type: "alert",
              title: "系统错误,请稍后再试!",
              icon: "cubeic-wrong",
              onConfirm: (e, promptValue) => {
                this.$router.push({
                  path: `/main/incidentNewList/todo/1544`
                })
              }
            }).show();
          }
        });
    },
    // 刷新
    refresh(){
      this.getInfo();
    },
    // 新增耗材
    addConsumableMaterial() {
      console.log(this.$route.params);
      this.$router.push({
        path: `/main/ConsumableList/${this.$route.params.incidentId}/${this.summaryId}/${this.$route.params.processInstanceId}/${this.$route.params.dutyId}`
      });
    },
    // 新增工时
    addWorkHourManagementOne() {
      this.$router.push({
        path: `/main/WorkHourManagementOne/${this.$route.params.incidentId}/${this.summaryId}/${this.$route.params.processInstanceId}`
      });
    },
    // 获取汇总单信息
    getInfo() {
      const toast = this.$createToast({
        txt: "Loading...",
        mask: true
      });
      toast.show();
      this.$http.post("/service/bpm/data/querySummaryDoc", {incidentId: this.$route.params.incidentId}).then(res => {
        toast.hide();
        if(res.data.status == 200){
          this.summaryObj = res.data;
          this.totalMaintenancePrice = this.summaryObj.totalMaintenancePrice;
          this.totalMaintenancePrice = this.summaryObj.totalMaintenancePrice;
          this.totalPriceConsumable = this.summaryObj.consumablePrice;
          this.totalPriceWorkHourManagement = this.summaryObj.workHourPrice;
          this.summaryId = res.data.summaryId;
        }else if(res.data.status == 201){
          // 事件第一次绑定汇总单
          this.summaryId = res.data.summaryId;
        }
      });
    },
    // 快速定位
    toInfo(id) {
      this.actives = id;
      $("body,html").animate(
        {
          scrollTop:
            $("#" + id).offset().top -
            $(".navBar")[0].offsetHeight
        },
        260
      );
    },
    // 提交
    submitHandler() {
      if(this.isShowDes){
        if(!this.model.handleDescription){
          $("#fade").fadeIn();
          this.promptingConent = "请填写处理方案!";
          this.promptingStatus = false;
          setTimeout(function() {
            $("#fade").fadeOut();
          }, 2000);
          return;
        }
        if(!this.model.handleCategory){
          $("#fade").fadeIn();
          this.promptingConent = "请填写处理方式!";
          this.promptingStatus = false;
          setTimeout(function() {
            $("#fade").fadeOut();
          }, 2000);
          return;
        }
        if(!this.model.handleCategory){
          $("#fade").fadeIn();
          this.promptingConent = "请确认故障现象!";
          this.promptingStatus = false;
          setTimeout(function() {
            $("#fade").fadeOut();
          }, 2000);
          return;
        }
        if(!this.model.handleCategory){
          this.promptingConent = "请填写关闭代码!";
          this.promptingStatus = false;
          setTimeout(function() {
            $("#fade").fadeOut();
          }, 2000);
          return;
        }
      }else{
        if(!this.model.closecode){
          this.promptingConent = "请填写处理方式!";
          this.promptingStatus = false;
          setTimeout(function() {
            $("#fade").fadeOut();
          }, 2000);
          return;
        }
      }
      this.modelData.incident.synergetic = this.synergeticChecked;
      this.loadShow = true;
      // 获取事件数据
      // this.$http
      //   .get(
      //     "/service/form/renderForm/handlerform/" +
      //       this.$route.params.processInstanceId +
      //       "/" +
      //       this.loginUser.id +
      //       "/" +
      //       this.$route.params.incidentId,
      //     {}
      //   )
      //   .then(res => {
          // this.modelData = res.data.model;
          this.modelData.incident.handleCategory = {id: this.model.handleCategory}
          this.modelData.incident.closecode = {id: this.model.closecode}
          this.modelData.incident.category = {id: this.model.category.slice(-1)[0]}
          this.modelData.isSolution = this.model.knowledge;
          this.modelData.incident.handleDescription = this.model.handleDescription;
          // if(this.modelData.isSolution){
          //   this.modelData.bpm_activiti = {
          //     solutionType: {
          //       id: this.model.solutionType[this.model.solutionType.length - 1]
          //     }
          //   };
          // }
          this.modelData.loginUser= this.loginUser;
          console.log(this.modelData, this.model);
          this.$http
          .post(
            "service/bpm/bpm/completeTask/" +
              this.modelData.incident.taskId +
              "/" +
              this.loginUser.id,
            this.modelData
          )
          .then((res) => {
            if (res.data) {
              setTimeout(() => {
                this.$refs.upload.start();
              }, 100);
              this.dialog = this
                .$createDialog({
                  type: "alert",
                  title: "提交成功",
                  content: "点击返回事件列表",
                  icon: "cubeic-right",
                  onConfirm: (e, promptValue) => {
                    this.$router.push({ path: `/main/incidentNewList/todo/1544` });
                  }
                })
                .show();
            } else {
              this.loadShow = false;
              this.dialog = this
                .$createDialog({
                  type: "alert",
                  title: "系统错误,请稍后再试!",
                  content: "请求失败",
                  icon: "cubeic-wrong",
                })
                .show();
            }
          });
        // });
    }
  },
  mounted() {
    console.log(this.$route);
    console.log(this.modelData, this.model, 999);
    this.action.target += this.$route.params.processInstanceId;

    this.changeHandleTypes();
    this.getInfo();
    this.getParamsData();
    // 关闭代码
    this.getClosecode();
    // 处理方式
    this.getHandleCategory();
  },
  components: {
    seiminModel,
    LoadIng,
    PrompTing,
    ConsumableMaterial,
    WorkHourManagement,
    seiminDrawer1,
  }
};
</script>

<style lang="less" scoped>
.bottomBorder {
  border-bottom: 0.2rem solid #eee;
  font-size: 0.3rem;
}
.textCenter {
  text-align: center;
  &.total{
    border-top: 0.2rem solid #eee;
  }
}
.addConsumableMaterial {
  border-top: 0.01rem solid #e6e6e6;
  border-bottom: 0.01rem solid #e6e6e6;
}
.hcList {
  display: flex;
  align-items: center;
  margin-top: 0.1rem;
}
.hcItem {
  flex: 4;
  margin: 0 0.05rem;
}
.hcItemClose {
  flex: 1;
  font-size: 0.4rem;
}
.addHc {
  width: 90%;
  height: 1rem;
  margin: 0 auto;
  border: 0.02rem solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}
.addHc .cubeic-add {
  font-size: 0.8rem;
}
.newIncident .cube-form-group {
  border-bottom: 0.02rem solid rgb(245, 245, 245);
}
.newIncident .sub .cube-btn {
  margin-top: 1.1rem;
}
.btn_plcaeholde /deep/ .cube-btn {
  padding-left: 0;
  padding-right: 0;
  text-align: left;
  color: inherit;
  background: none;
  border: none;
}
.btn_plcaeholde  /deep/ .cube-btn:active {
  background-color: #fff;
}
.btn_plcaeholde .cube-btn::after {
  content: ">";
  float: right;
  margin-right: 0.15rem;
}
.cube-form_standard .cube-upload-def .cube-upload-btn,
.cube-form_standard .cube-upload-def .cube-upload-file {
  margin-left: 3% !important;
}
.sub {
  background: #ececec;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  padding-bottom: 0.12rem;
  padding-top: 0.12rem;
  display: flex;
}
.sub .cube-btn {
  flex: 1;
  height: 0.88rem;
  background-color: #005395 !important;
  margin: 0 0.15rem;
  border-radius: 8px;
  padding: 0;
}
.cube-picker-wheel-item {
  text-overflow: ellipsis;
}
</style>
<style lang="less" scoped>
.header {
  width: 100%;
  height: 0.88rem;
  line-height: 0.88rem;
  text-align: center;
  color: #fff;
  font-size: 0.37rem;
  background: linear-gradient(#2e2f32, #414246);
  position: fixed;
  top: 0;
  z-index: 6;
}
.incidentTitle {
  .titleRefer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .titleTxtArea {
      font-size: 0.3rem;
      color: #333;
      height: 2rem;
      width: 100%;
      margin: 0.2rem 0;
      &:focus {
        outline: none;
      }
    }
    .abtn {
      display: inline-block;
      width: 37%;
      text-align: center;
      height: 0.48rem;
      color: #005395;
      font-size: 0.28rem;
    }
  }
}
.form-custom {
  .cube-form-item {
    .cube-btn {
      padding-left: 0;
      padding-right: 0;
      text-align: left;
      color: inherit;
      background: none;
      border: none;
    }
  }
}

.label {
  background-color: rgb(238, 238, 238);
  height: 0.6rem;
  line-height: 0.6rem;
  padding-left: 0.2rem;
  font-size: 0.24rem;
  color: #666666;
  span {
    font-size: 0.2rem;
    display: inline-block;
    margin-left: 0.08rem;
    color: #949494;
  }
  &.formLabel {
    background-color: #fff;
  }
}

.zhidu {
  display: flex;
  height: 0.7rem;
  line-height: 0.7rem;
  border-bottom: 0.02rem solid rgb(245, 245, 245);
  div:nth-child(1) {
    width: 27.5%;
    padding-left: 6%;
  }
}

.bgColor {
  background-color: white;
  &.newIncident {
    padding-top: 1.84rem;
  }
}

.uplod {
  padding: 0 0.24rem;
  border-bottom: 0.02rem solid rgb(245, 245, 245);
}
.handleRadio {
  border-bottom: 0.02rem solid rgb(245, 245, 245);
}
.synerBox {
  height: 3rem;
  overflow: scroll;
}

i.iconfont.blue {
  color: #005395;
}
.againAssign {
  .header {
    width: 100%;
    height: 0.88rem;
    line-height: 0.88rem;
    text-align: center;
    color: #fff;
    font-size: 0.37rem;
    background: linear-gradient(#2e2f32, #414246);
    position: fixed;
    top: 0;
    z-index: 6;
  }
  .navBar {
    width: 100%;
    height: 0.96rem;
    line-height: 0.96rem;
    background-color: #fafafa;
    font-size: 0.32rem;
    position: fixed;
    top: 0;
    z-index: 9;
    div {
      width: 33.33%;
      text-align: center;
      box-shadow: 0 0.03rem 0.06rem 0.01rem rgba(0,0,0,0.16);
      &.p50 {
        width: 49.99%;
      }
      a {
        display: inline-block;
        height: 0.9rem;
        width: 1.7rem;
        padding: 0 0.1rem;
        font-weight: bold;
        color: #555;
        font-size: 0.3rem;
        &.active {
          font-size: 0.32rem;
          color: #000;
          position: relative;
          &::after{
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0.1rem;
            width: 0.65rem;
            height: 0.1rem;
            transform: translateX(-50%);
            background-color: #305D97;
            border-radius: 0.1rem;
          }
        }
      }
    }
  }

  .headtop {
    padding-top: 0.96rem;
  }
  .headbottom {
    padding-bottom: 1.12rem;
  }
  .label {
    background-color: #eeeeee;
    height: 0.87rem;
    line-height: 0.87rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    font-size: 0.28rem;
    font-weight: bold;
    color: #555;
    span {
      font-size: 0.2rem;
      display: inline-block;
      margin-left: 0.08rem;
      color: #949494;
    }
    &.formLabel {
      background-color: #fff;
    }
  }
  .conentBox {
    width: 100%;
    .conent {
      font-size: 0.32rem;
      font-weight: 400;
      line-height: 0.45rem;
      // border-bottom: 0.16rem solid #e5e5e5;

      .shows {
        display: none;
      }
      .boeder_B {
        border-bottom: 0.01rem solid #ccc;
      }
      p {
        &.desc {
          overflow: hidden;
        }
        .grayFont {
          width: 75%;
          text-align: right;
          overflow-x: scroll;
        }
      }
      .bottom {
        overflow: hidden;
        line-height: 0.86rem;
        border-bottom: 0.01rem solid #e6e6e6;
        font-size: 0.24rem;
        color: #949494;
        padding: 0 0.24rem 0 0.48rem;
      }
      .info {
        color: #949494;
        font-size: 0.3rem;
        overflow: hidden;
        #handlerInfo{
          display: flex;
          justify-content: space-between;
          align-items: center;
          i{
            font-style: normal;
            display: flex;
            align-items: center;
            color: #015293;
          }
          img{
            width: 0.3rem;
            height: 0.3rem;
            margin-right: 0.1rem;
          }
        }
        .handlerInfo{
          .addSynergeticText{
            display: inline-block;
            line-height: 0.58rem;
            font-size: 0.3rem;
          }
          .addSynergetic{
            width: 1.4rem;
            height: 0.58rem;
            border-radius: 0.04rem;
            border: 0.01rem solid #015293;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            color: #015293;
            font-size: 0.24rem;
            .dash-jia{
              font-size: 0.16rem;
            }
          }
        }
        .head {
          border-bottom: 0.01rem solid #e6e6e6;
          p {
            padding: 0.24rem 0.3rem;
            i {
              color: #00559d;
            }
          }
        }
        p {
          line-height: 0.4rem;
          padding: 0.1rem 0.24rem;
          overflow: hidden;
          .overflowEllipsis2 {
            margin-left: 1.96rem;
          }
        }
        .info_hide {
          padding: 0.2rem 0.24rem;
          border-bottom: 0.01rem solid #e6e6e6;
          .hide {
            color: #00559d;
          }
        }
        .imgs-container {
          a {
            color: #03c !important;
            &:visited {
              color: #551a8b !important;
            }
          }
          img {
            width: 1.5rem;
            height: 1.5rem;
            margin-right: 0.7rem;
            &:nth-child(1) {
              margin-left: 0.75rem;
            }
          }
        }
        .progress {
          padding: 0.2rem 0.2rem;
          overflow: hidden;
          transition-duration: 0.2s;
          transition-timing-function: linear;
          &.progressHide {
            height: 1.7rem;
          }
          .progress_info {
            overflow: hidden;
            margin-bottom: 0.1rem;
            &:nth-last-child(1) {
              .cont {
                border: none !important;
              }
            }
            .progress_info_L {
              float: left;
              color: #333;
              max-width: 18%;
            }
            .progress_info_R {
              float: right;
              margin-left: 0.09rem;
              width: 80%;
              font-size: 0.25rem;
              .time {
                i {
                  margin-left: -0.15rem;
                  &.icon-icon_weizuo {
                    color: #005495;
                  }
                  &.icon-icon_zhengzaijinx {
                    color: #48a843;
                    font-size: 0.37rem;
                  }
                }
                span {
                  margin-left: 0.15rem;
                }
              }
              .cont {
                border-left: 1px solid #949494;
                padding-left: 0.4rem;
                min-height: 0.4rem;
                &.blue {
                  border-left: 1px solid #005395;
                }
              }

              .text1 {
                font-size: 0.15rem;
              }
              .text2 {
                color: #666;
                word-break: break-all;
              }
              p {
                padding: 0;
              }
            }
          }
        }
      }
      .txtLabel {
        width: 100%;
        overflow: hidden;
        padding: 0.32rem 0.24rem 0.32rem 0.32rem;
        .txt {
          width: 30%;
          color: #666;
        }
        .cube-textarea-wrapper {
          width: 62%;
        }
      }
      .sub {
        background: #ececec;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding-bottom: 0.12rem;
        padding-top: 0.12rem;
        display: flex;
        .cube-btn {
          flex: 1;
          height: 0.88rem;
          background-color: #005395 !important;
          margin: 0 0.15rem;
          border-radius: 8px;
        }
      }
    }
  }
  .showwrap {
    width: 75%;
    text-align: right;
  }
}
</style>
