<template>
  <div class="page-container purchaseRegister-addPage">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">{{newData.applyId?'编辑':'申购'}}</p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
      <p class="page-top-title-save-p" v-if="!newData.applyId || (newData.applyId && newData.applyStatus ==2 || newData.applyStatus ==4) " @click="submitForm(2)">保存</p>
      <p class="page-top-title-submit-p" @click="submitForm(1)">提交</p>
    </div>
    <div class="content-box scrollbar-box">
      <el-form :model="newData" ref="form" :rules="rules">
        <div class="title-max-big-box">
          <p class="title-p">申购信息</p>
        </div>
        <div class="form-item-box">
          <el-form-item label="实验室：" prop="subId" label-width="150px">
            <el-select
              style="width:350px;"
              v-model="newData.subId"
              filterable
              remote
              reserve-keyword
              @change="subChange"
              placeholder="请搜索选择实验室"
              :remote-method="subSelectList">
              <el-option
                v-for="item in subOptions"
                :key="item.subId"
                :label="item.subName"
                :value="item.subId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="申购人：" prop="applyUserId" label-width="150px">
            <el-input v-model="newData.applyUserAll" placeholder="请输入归属人" maxLength="20" style="width:350px;"></el-input>
          </el-form-item>
          <div class="form-check-max-box">
            <div class="form-check-box" @click="checkButton">
              <div class="form-check" :class="newData.data3?'form-check-a':''">
                <p></p>
              </div>
              <p class="form-check-title">课题组</p>
            </div>
            <el-form-item label="" prop="topicGroupId" v-if="newData.data3">
              <el-select
                style="width:350px;"
                v-model="newData.topicGroupId"
                filterable
                remote
                reserve-keyword
                @change="researchGroupChange"
                placeholder="请搜索选择课题组"
                :remote-method="researchGroupSelectList">
                <el-option
                  v-for="item in researchGroupOptions"
                  :key="item.id"
                  :label="item.topicName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="form-flex-max-box">
          <div class="form-left-max-box">
            <el-form-item label="用途：" prop="applyReason" label-width="150px">
              <el-input
                v-model="newData.applyReason"
                placeholder="请输入用途"
                class="item-examples-demo"
                style="width:350px;height:140px;"
                maxLength='50' type="textarea" resize="none"
                show-word-limit :autosize="{ minRows: 6, maxRows: 6}">
              </el-input>
            </el-form-item>
          </div>
          <div class="form-right-max-box">
            <el-form-item label="导师：" prop="mentorId" label-width="150px" v-if="userType==2">
              <el-input v-model="newData.mentorAll" placeholder="请输入导师" maxLength="20" style="width:825px;"></el-input>
            </el-form-item>
            <div class="form-text-box">
              <div>
                <p>管控液体已存储量：</p>
                <p>{{newData.controlLiquids}}</p>
              </div>
              <div>
                <p>管控固体已存储量：</p>
                <p>{{newData.controlSolid}}</p>
              </div>
            </div>
            <div class="form-text-box">
              <div>
                <p>非管控液体已存储量：</p>
                <p>{{newData.unReguLiquids}}</p>
              </div>
              <div>
                <p>非管控固体已存储量：</p>
                <p>{{newData.unReguSolid}}</p>
              </div>
            </div>
          </div>
        </div>
        <p class="border-p"></p>
        <div class="title-max-big-box">
          <p class="title-p">化学品信息</p>
          <div class="num-max-big-box">
            <p>管控本次申购量</p>
            <p>液体:{{newData.applyLiquidControl}}{{newData.liquidUnit}}</p>
            <p>固体:{{newData.applySolidControl}}{{newData.solidUnit}}</p>
          </div>
          <div class="num-max-big-box">
            <p>非管控本次申购量</p>
            <p>液体:{{newData.applyLiquidNoControl}}{{newData.liquidUnit}}</p>
            <p>固体:{{newData.applySolidNoControl}}{{newData.solidUnit}}</p>
          </div>
          <p class="add-item-button page-submit-common-style-button" @click="addButton">+ 添加化学品</p>
        </div>
        <div class="for-table-box">
          <el-table class="table-box" border :data="newData.hxpApplyDetailModelList">
            <el-table-column label="名称" prop="chemicalName" show-overflow-tooltip/>
            <el-table-column label="CAS" prop="casNum" width="150" show-overflow-tooltip/>
            <el-table-column label="类别" prop="chemicalCategoryName" width="150" show-overflow-tooltip/>
            <el-table-column label="纯度" prop="chemicalPurity" width="150" show-overflow-tooltip/>
            <el-table-column label="规格" prop="content" width="240" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-input-number
                  class="table-date-input-right-border"
                  v-model="scope.row.normsNum"
                  @blur="computeFun(scope.row,scope.$index)"
                  style="width:120px;"
                  :controls="false"
                  :min="1" :max="9999">
                </el-input-number>
                <el-select
                  class="table-date-input-left-border"
                  v-model="scope.row.normsUnit"
                  style="width:94px;">
                  <el-option label="ml" value="ml"></el-option>
                  <el-option label="g" value="g"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="单位" prop="content" width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-select v-model="scope.row.applyUnit" class="table-date" style="width: 94px">
                  <el-option
                    v-for="item in applyUnitOptions"
                    :key="item.label"
                    :label="item.label"
                    :value="item.label"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="数量" prop="content" width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-input-number
                  @blur="computeFun(scope.row,scope.$index)"
                  class="table-date"
                  v-model="scope.row.applyNum"
                  style="width:94px;"
                  :controls="false"
                  :min="1" :max="200">
                </el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="操作" prop="content" width="80" show-overflow-tooltip>
              <template slot-scope="scope">
                <div class="table-button-box">
                  <p class="table-button-null"></p>
                  <p class="table-button-p"
                     @click="delItem(scope.row,scope.$index)"

                  >删除</p>
                  <p class="table-button-null"></p>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <p class="border-p" v-if="newData.applyStatus==3|| newData.applyStatus==6"></p>
        <div class="title-max-big-box" v-if="newData.applyStatus==3|| newData.applyStatus==6">
          <p class="title-p">审核记录</p>
          <p :class="newData.approvalStatus == 1?'title-type-a':(newData.applyStatus == 3?'title-type-c':'title-type-b')">
            {{newData.approvalStatus == 1?'已完成':(newData.applyStatus == 3?'已撤销':newData.auditNode)}}
          </p>
        </div>
        <div class="for-table-box" v-if="newData.applyStatus==3|| newData.applyStatus==6">
          <el-table class="table-box" border :data="newData.applyTaskNodeModelList">
            <el-table-column label="审核人" prop="applyUserNames" width="200" show-overflow-tooltip/>
            <el-table-column label="审核节点" prop="auditNode" width="150" show-overflow-tooltip/>
            <el-table-column label="状态" prop="applyStatusStr" width="150" show-overflow-tooltip>
              <template slot-scope="scope">
                <span class="auditStatusColor-A" v-if="scope.row.nodeStatus==0 || scope.row.nodeStatus==3">{{scope.row.applyStatusStr}}</span>
                <span class="auditStatusColor-B" v-if="scope.row.nodeStatus==1">{{scope.row.applyStatusStr}}</span>
                <span class="auditStatusColor-C" v-if="scope.row.nodeStatus==2">{{scope.row.applyStatusStr}}</span>
              </template>
            </el-table-column>
            <el-table-column label="时间" prop="updateTime" width="250" show-overflow-tooltip/>
            <el-table-column label="备注" prop="content" show-overflow-tooltip>
              <template slot-scope="scope">
                <div>{{scope.row.nodeContent}}</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
    </div>
    <el-dialog class="savePending-dialog"
               :modal-append-to-body="false"
               :close-on-click-modal="false" :close-on-press-escape="false"
               title="添加化学品"
               :visible.sync="savePendingDialogType"
               v-if="savePendingDialogType"
               width="800px" height="482px"
               append-to-body>
      <div style="height:300px;overflow: hidden">
        <div>
          <el-form :model="dialogForm" ref="dialogForm" :rules="dialogRules">
            <div style="display: flex;margin:120px 0;">
              <el-form-item label="化学品：" prop="hxpApplyDetailModelList" label-width="80px">
                <el-select
                  style="width:500px;"
                  v-model="dialogForm.hxpApplyDetailModelList"
                  multiple
                  filterable
                  remote
                  clearable
                  reserve-keyword
                  @change="chemicalsChange"
                  @clear="chemicalsClearClick"
                  placeholder="请选择化学品"
                  :remote-method="chemicalsSelectList">
                  <el-option
                    v-for="item in chemicalsOptions"
                    :key="item.chemicalId"
                    :label="item.chemicalName"
                    :value="item.chemicalId">
                  </el-option>
                </el-select>
              </el-form-item>
              <p class="page-save-common-style-button" style="margin-left:20px;width:100px;" @click="addItemButton">新增化学品</p>
            </div>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="dialogOut">取消</p>
        <p class="dialog-footer-button-primary" @click="dialogSubmit">提交</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
    <add-chemicals ref="addChemicals"></add-chemicals>
  </div>
</template>

<script>
  import addChemicals from "@/views/chemicalManage/components/addChemicals.vue";
  import { getDicts, systemSubjectGetList } from '@/api/commonality/noPermission'
  import {
    chemicalApplyAdd,
    chemicalApplyGetUserInfo, chemicalApplyUpdate,
    chemicalChemicalGetList, chemicalStockGetStockBysubId,
    systemTopicTopicList
  } from '@/api/chemicalManage'
  export default {
    name: 'addPage',
    components: {
      addChemicals
    },
    props:{
      propsData:{},
    },
    data(){
      return{
        userType:localStorage.getItem('userType'),
        //添加化学品弹窗
        savePendingDialogType:false,
        dialogForm:{
          hxpApplyDetailModelList:[]
        },
        dialogRules:{
          hxpApplyDetailModelList: [
            { required: true, message: "请搜索选择化学品", trigger: "blur" },
            { required: true, message: "请搜索选择化学品", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        // 化学品列表
        chemicalsOptions:[],
        // 化学品列表临时存储
        chemicalsOptionsArr:[],
        // 实验室列表
        subOptions:[],
        // 人员列表
        userOptions:[],
        //单位
        applyUnitOptions:[],
        // 课题组列表
        researchGroupOptions:[],
        newData:{},
        rules:{
          subId: [
            { required: true, message: "请搜索选择实验室", trigger: "blur" },
            { required: true, message: "请搜索选择实验室", validator: this.spaceJudgment, trigger: "blur" }
          ],
          applyUserId: [
            { required: true, message: "请搜索选择归属人", trigger: "blur" },
            { required: true, message: "请搜索选择归属人", validator: this.spaceJudgment, trigger: "blur" }
          ],
          topicGroupId: [
            { required: true, message: "请搜索选择课题组", trigger: "blur" },
            { required: true, message: "请搜索选择课题组", validator: this.spaceJudgment, trigger: "blur" }
          ],
          mentorId: [
            { required: true, message: "请输入导师", trigger: "blur" },
            { required: true, message: "请输入导师", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        subData:{
          subData1:'6666ml（上限100000ml）',
          subData2:'1000g（上限100000g）',
        },
      }
    },
    created(){
      this.initialize()
    },
    mounted(){
      this.getDicts();
    },
    methods:{
      //初始化
      initialize(){
        let self=this;
        if(this.propsData.applyId){
          this.$set(this,'newData',this.propsData);
          this.$set(this.newData,'applyUserAll',this.newData.applyUserName+'-'+this.newData.applyUserPhone);
          this.$set(this.newData,'mentorAll',this.newData.mentorName+'-'+this.newData.mentorPhone);
          this.$set(this,'subOptions',[{subId:this.newData.subId,subName:this.newData.subName}]);
          //课题组
          if (this.newData.topicGroupId){
            this.$set(this.newData,'data3',true);
            this.$set(this,'researchGroupOptions',[{id:this.newData.topicGroupId,topicName:this.newData.topicGroupName}]);
          }
          //化学品信息
          if (self.newData.hxpApplyDetailModelList[0]){
            let list=[];
            self.chemicalsOptions=self.newData.hxpApplyDetailModelList
            for (let i=0;i<self.newData.hxpApplyDetailModelList.length;i++){
              list.push(self.newData.hxpApplyDetailModelList[i].chemicalId)
            }
            self.dialogForm.hxpApplyDetailModelList=list;
          }
          //存储量
          this.chemicalStockGetStockBysubId(this.newData.subId);

        }else{
          this.$set(this,'newData',{
            subId:'',
            subName:'',
            roomNum:'',
            applyUserAll:'',
            applyUserId:'',
            applyUserName:'',
            applyUserPhone:'',
            data3:false,
            topicGroupId:'',
            topicGroupName:'',
            topicUserName:'',
            topicUserPhone:'',
            data5:'',
            applyReason:'',
            mentorAll:'',
            mentorId:'',
            mentorName:'',
            mentorPhone:'',
            applyLiquidControl:'',//管控液体申购量
            applyLiquidNoControl:'',//非管控液体申购量
            liquidUnit:'ml',//液体单位
            applySolidControl:'',//管控固体申购量
            applySolidNoControl:'',//非管控固体申购量
            solidUnit:'g',//固体单位
            applyStatus:'',//1表示提交，2表示保存草稿
            hxpApplyDetailModelList:[],
            controlLiquids:0,//管控液体
            controlSolid:0,//管控固体
            unReguLiquids:0,//非管控液体
            unReguSolid:0,//非管控固体

            controlLiquidsMax:0,//管控液体最大值
            controlSolidMax:0,//管控固体最大值
            unReguLiquidsMax:0,//非管控液体最大值
            unReguSolidMax:0,//非管控固体最大值
          });
          if (this.userType==1 ||this.userType==2){
            this.chemicalApplyGetUserInfo();
          }

        }
      },
      // 返回按钮
      backPage(){
        this.$parent.tableButton('out');
      },
      //添加化学品
      addButton(){
        if (this.newData.hxpApplyDetailModelList){
          this.$set(this,'chemicalsOptions',this.newData.hxpApplyDetailModelList);
        }
        this.$set(this,'savePendingDialogType',true);
      },
      //关闭弹窗
      dialogOut(){
        this.$set(this,'savePendingDialogType',false);
      },
      //弹窗提交
      dialogSubmit(){
        let self = this;
        let list=self.newData.hxpApplyDetailModelList;
        let result=[];
        //每次新增时候判断一下,把新的id进行数据匹配老的数据不动
        if (self.newData.hxpApplyDetailModelList[0]){
          const oldIds = self.newData.hxpApplyDetailModelList.map(item => item.chemicalId)
                result = self.dialogForm.hxpApplyDetailModelList.filter(item => !oldIds.includes(item))
        }else{
          result= self.dialogForm.hxpApplyDetailModelList
        }
        //通过化学品id获取到完成的化学品数据
        for(let i=0;i<result.length;i++) {
          for(let b=0;b<self.chemicalsOptionsArr.length;b++) {
            if (result[i]==self.chemicalsOptionsArr[b].chemicalId){
              list.push(self.chemicalsOptionsArr[b])
            }
          }
        }
        this.$set(this.newData, 'hxpApplyDetailModelList', list);
        this.$set(this,'savePendingDialogType',false);
      },
      //计算本次申购量
      computeFun(row,index){
        let self=this;
        let list=0;//管控液体
        let list2=0;//管控固体
        let list3=0;//非管控液体
        let list4=0;//管控固体
        if (!row.normsUnit){
          self.newData.hxpApplyDetailModelList[index].normsNum=undefined;
          self.newData.hxpApplyDetailModelList[index].applyNum=undefined;
          this.msgError('请先选择规格单位!')
          return
        }
        if(self.newData.hxpApplyDetailModelList[0]){
          for (let i=0;i<self.newData.hxpApplyDetailModelList.length;i++){
            if (self.newData.hxpApplyDetailModelList[i].chemicalLevel==1){
              //管控
              if (self.newData.hxpApplyDetailModelList[i].normsUnit=='ml'){
                list+=(self.newData.hxpApplyDetailModelList[i].normsNum*self.newData.hxpApplyDetailModelList[i].applyNum)
              }else if (self.newData.hxpApplyDetailModelList[i].normsUnit=='g'){
                list2+=(self.newData.hxpApplyDetailModelList[i].normsNum*self.newData.hxpApplyDetailModelList[i].applyNum)
              }
            }else if (self.newData.hxpApplyDetailModelList[i].chemicalLevel==2){
              //非管控
              if (self.newData.hxpApplyDetailModelList[i].normsUnit=='ml'){
                list3+=(self.newData.hxpApplyDetailModelList[i].normsNum*self.newData.hxpApplyDetailModelList[i].applyNum)
              }else if (self.newData.hxpApplyDetailModelList[i].normsUnit=='g'){
                list4+=(self.newData.hxpApplyDetailModelList[i].normsNum*self.newData.hxpApplyDetailModelList[i].applyNum)
              }
            }
          }
          if(list>this.newData.controlLiquidsMax){
            self.newData.hxpApplyDetailModelList[index].normsNum=undefined;
            self.newData.hxpApplyDetailModelList[index].applyNum=undefined;
            this.msgError('超出管控液体存储上限!')
            return
          }
          if(list2>this.newData.controlSolidMax){
            self.newData.hxpApplyDetailModelList[index].normsNum=undefined;
            self.newData.hxpApplyDetailModelList[index].applyNum=undefined;
            this.msgError('超出管控固体存储上限!')
            return
          }
          if(list3>this.newData.unReguLiquidsMax){
            self.newData.hxpApplyDetailModelList[index].normsNum=undefined;
            self.newData.hxpApplyDetailModelList[index].applyNum=undefined;
            this.msgError('超出非管控液体存储上限!')
            return
          }
          if(list4>this.newData.unReguSolidMax){
            self.newData.hxpApplyDetailModelList[index].normsNum=undefined;
            self.newData.hxpApplyDetailModelList[index].applyNum=undefined;
            this.msgError('超出非管控固体存储上限!')
            return
          }
          this.$set(this.newData,'applyLiquidControl',list?list:0);
          this.$set(this.newData,'applySolidControl',list2?list2:0);
          this.$set(this.newData,'applyLiquidNoControl',list3?list3:0);
          this.$set(this.newData,'applySolidNoControl',list4?list4:0);
          this.$forceUpdate()
        }
      },
      //新增化学品
      addItemButton(){
        this.$refs.addChemicals.addChemicalsOpen('1');
      },
      //化学品添加成功
      submitSuccessful(){
      },
      /** 提交按钮 */
      submitForm(type) {
        let self=this;
        this.$refs["form"].validate(valid => {
          if (valid) {
            self.newData.applyStatus=type;
            //判断用户是否选用课题组
            if (!self.newData.data3){
              this.$set(this.newData,'topicGroupId','');
              this.$set(this.newData,'topicGroupName','');
              this.$set(this.newData,'topicUserName','');
              this.$set(this.newData,'topicUserPhone','');
              this.$set(this.newData,'topicGroup',false);
            }else{
              this.$set(this.newData,'topicGroup',true);
            }
            for (let i=0;i<self.newData.hxpApplyDetailModelList.length;i++){
              if (!self.newData.hxpApplyDetailModelList[i].normsNum || !self.newData.hxpApplyDetailModelList[i].normsUnit || !self.newData.hxpApplyDetailModelList[i].applyUnit || !self.newData.hxpApplyDetailModelList[i].applyNum){
                self.msgError('请输入['+self.newData.hxpApplyDetailModelList[i].chemicalName+']规格/单位/数量!')
                return
              }
            }
            if (this.newData.applyId){//保存/编辑
              chemicalApplyUpdate(self.newData).then( response => {
                self.msgSuccess("成功")
                self.$parent.tableButton('out');
              });
            }else{//保存/提交
              chemicalApplyAdd(self.newData).then( response => {
                self.msgSuccess("成功")
                self.$parent.tableButton('out');
              });
            }
          }
        })
      },
      //获取化学品单位
      getDicts(){
        getDicts('chemical_pack_utils').then(response => {
          this.$set(this,'applyUnitOptions',response.data);
        });
      },
      //申购登记-查询当前账号申购人,导师,课题组
      chemicalApplyGetUserInfo(){
        chemicalApplyGetUserInfo().then(response => {
          this.$set(this.newData,'applyUserId',response.data.userId);
          this.$set(this.newData,'applyUserName',response.data.userName);
          this.$set(this.newData,'applyUserPhone',response.data.mobile);
          this.$set(this.newData,'applyUserAll',response.data.userName+'-'+response.data.mobile);
          this.$set(this.newData,'mentorId',response.data.tutorUserId);
          this.$set(this.newData,'mentorName',response.data.tutorUserName);
          this.$set(this.newData,'mentorPhone',response.data.tutorUserMobile);
          this.$set(this.newData,'mentorAll',response.data.tutorUserName+'-'+response.data.tutorUserMobile);
          //根据用户id所属课题组
          this.systemTopicTopicList(response.data.userId)
        });
      },
      //删除化学品
      delItem(row,index){
        let self = this;
        this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
        }).then(() => {
          self.newData.hxpApplyDetailModelList.splice(index,1);
          self.dialogForm.hxpApplyDetailModelList.splice(index,1);
        }).catch(() => {});
      },
      //选中实验室
      subChange(val){
        let self = this;
        for(let i=0;i<self.subOptions.length;i++){
          if(self.subOptions[i].subId == val){
            this.$set(this.newData,'subId',self.subOptions[i].subId);
            this.$set(this.newData,'subName',self.subOptions[i].subName);
            this.$set(this.newData,'roomNum',self.subOptions[i].roomNum);
          }
        }
        this.chemicalStockGetStockBysubId(val)
      },
      //搜索实验室
      subSelectList(query){
        if (query !== '' && query.length>1) {
          systemSubjectGetList({"subName":query,}).then(response => {
            this.$set(this,'subOptions',response.data);
          });
        } else {
          this.$set(this,'subOptions',[]);
        }
      },
      //实验室-固体液体液体已存储量
      chemicalStockGetStockBysubId(subId){
        chemicalStockGetStockBysubId({"subId":subId}).then(response => {
          this.$set(this.newData,'controlLiquids',response.data.controlLiquids);
          this.$set(this.newData,'controlSolid',response.data.controlSolid);
          this.$set(this.newData,'unReguLiquids',response.data.unReguLiquids);
          this.$set(this.newData,'unReguSolid',response.data.unReguSolid);

          this.$set(this.newData,'controlLiquidsMax',response.data.manageLiquidsMax);
          this.$set(this.newData,'controlSolidMax',response.data.manageSolidMax);
          this.$set(this.newData,'unReguLiquidsMax',response.data.notManageLiquidsMax);
          this.$set(this.newData,'unReguSolidMax',response.data.notManageSolidMax);
        });
      },
      //选中化学品
      chemicalsChange(val){

      },
      //搜索化学品
      chemicalsSelectList(query){
        if (query !== '' && query.length>1) {
          chemicalChemicalGetList({"searchValue":query}).then(response => {
            this.$set(this,'chemicalsOptions',response.data);
            this.chemicalsOptionsArr=[...this.chemicalsOptionsArr,...response.data]
          });

        } else {
          this.$set(this,'chemicalsOptions',[]);
        }
      },
      chemicalsClearClick(){

      },
      //课题组开关
      checkButton(){
        this.$set(this.newData,'data3',!this.newData.data3);
      },
      //选中课题组
      researchGroupChange(val){
        let self = this;
        for(let i=0;i<self.researchGroupOptions.length;i++){
          if(self.researchGroupOptions[i].id == val){
            this.$set(this.newData,'topicGroupId',self.researchGroupOptions[i].id);
            this.$set(this.newData,'topicGroupName',self.researchGroupOptions[i].topicName);
            this.$set(this.newData,'topicUserName',self.researchGroupOptions[i].userName);
            this.$set(this.newData,'topicUserPhone',self.researchGroupOptions[i].userPhone);
          }
        }
      },
      //通过当前用户id查询所属课题组
      systemTopicTopicList(userId){
        systemTopicTopicList({"userByAffiliation":userId,pageSize:-1}).then(response => {
          if (response.data.records[0]){
            this.$set(this.newData,'topicGroupId',response.data.records[0].id);
            this.$set(this.newData,'topicGroupName',response.data.records[0].topicName);
            this.$set(this.newData,'topicUserName',response.data.records[0].userName);
            this.$set(this.newData,'topicUserPhone',response.data.records[0].userPhone);
            this.$set(this,'researchGroupOptions',response.data.records);
          }
        });
      },
      //搜索课题组
      researchGroupSelectList(query){
        if (query !== '' && query.length>1) {
          systemTopicTopicList({"topicName":query}).then(response => {
            this.$set(this,'researchGroupOptions',response.data.records);
          });
        } else {
          this.$set(this,'researchGroupOptions',[]);
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  .purchaseRegister-addPage{
    .content-box{
      flex:1;
      display: flex;
      flex-direction: column;
      .title-max-big-box{
        display: flex;
        height:80px;
        padding:0 80px;
        .title-p{
          flex:1;
          line-height:80px;
          font-size:16px;
        }
        .num-max-big-box{
          display: flex;
          margin:20px 30px;
          line-height:40px;
          border:1px solid #A9A9A9;
          border-radius:4px;
          overflow: hidden;
          p{
            font-size:16px;
            text-align: center;
            width:120px;
          }
          p:nth-child(1){
            background-color: #F5F5F5;
          }
          p:nth-child(2){

          }
          p:nth-child(3){

          }
        }
        .add-item-button{
          width:120px;
          margin:20px 0;
        }
        .title-type-a{
          line-height:80px;
          font-size:16px;
          color:#1BBC46;
        }
        .title-type-b{
          line-height:80px;
          font-size:16px;
          color:#FF8C11;
        }
        .title-type-c{
          line-height:80px;
          font-size:16px;
          color:#666666;
        }
      }
      .form-item-box{
        display: flex;
        .form-check-max-box{
          display: flex;
          .form-check-box{
            width:125px;
            display: flex;
            cursor: pointer;
            .form-check{
              width:18px;
              height: 18px;
              border-radius:50%;
              border:1px solid #999;
              margin:11px 11px 11px 36px;
              p{
                width:12px;
                height:12px;
                margin:2px;
                border-radius:50%;
              }
            }
            .form-check-a{
              border:1px solid #0183FA;
              p{
                background-color: #0183FA;
              }
            }
            .form-check-title{
              line-height:40px;
              font-size:14px;
              color:#333;
            }
          }
        }
      }
      .form-flex-max-box{
        display: flex;
        .form-left-max-box{

        }
        .form-right-max-box{
          .form-text-box{
            display: flex;
            div{
              display: flex;
              p{
                font-size:14px;
                line-height:40px;
              }
              p:nth-child(1){
                width:168px;
                text-align: right;
                margin-right:12px;
              }
              p:nth-child(2){
                width:350px;
              }
            }
          }
        }
      }
      .border-p{
        border-top:20px solid #F5F5F5;
      }
      .for-table-box{
        padding:0 80px 40px;
        ::v-deep .el-table__empty-text {
          position: relative; /* 确保伪元素在正常流中 */
          background: #fff; /* 设置背景颜色 */
        }
        ::v-deep .el-table__empty-text::before {
          content: "请添加化学品"; /* 设置要显示的文本内容 */
          color: #999; /* 设置文本颜色 */
          font-size: 14px; /* 设置文本大小 */
          text-align: center; /* 水平居中 */
          z-index: -1; /* 将伪元素置于最后，不影响布局 */
        }
        .table-date{
          height:26px;
          ::v-deep input{
            display: block;
            height:26px!important;
          }
          ::v-deep .el-input__icon{
            line-height:26px;
          }
        }
        .table-date-padding{
          width:146px;
          height:26px;
          ::v-deep input{
            display: block;
            height:26px!important;
            padding:0 35px;
          }
          ::v-deep .el-input__icon{
            line-height:26px;
          }
        }
        .table-date-input-right-border{
          height:26px;
          ::v-deep input{
            display: block;
            height:26px!important;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
          }
          ::v-deep .el-input__icon{
            line-height:26px;
          }
        }
        .table-date-input-left-border{
          height:26px;
          ::v-deep input{
            display: block;
            height:26px!important;
            border-left:none;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
          }
          ::v-deep .el-input__icon{
            line-height:26px;
          }
        }
      }
    }
    .auditStatusColor-A{
      display: inline-block;
      font-weight: 400;
      font-size: 14px;
      color: #FF8C11;
      line-height: 14px;
      width: 80px;
      border-radius: 2px;
      border: 1px solid #FF8C11;
      text-align: center;
      padding: 4px 14px;
    }
    .auditStatusColor-B{
      display: inline-block;
      font-weight: 400;
      font-size: 14px;
      color: #1BBC46;
      line-height: 14px;
      width: 80px;
      border-radius: 2px;
      border: 1px solid #1BBC46;
      text-align: center;
      padding: 4px 14px;
    }
    .auditStatusColor-C{
      display: inline-block;
      font-weight: 400;
      font-size: 14px;
      color: #E10000;
      line-height: 14px;
      width: 80px;
      border-radius: 2px;
      border: 1px solid #E10000;
      text-align: center;
      padding: 4px 14px;
    }
  }
</style>
