<template>
  <ifbp-page id="materialList">
    <ifbp-breadcrumb name="资料清单"></ifbp-breadcrumb>
      <div>
        <!-- 左侧的树 -->
         <div class="leftSider fl">
            <el-tree
              class="filter-tree"
              :data="treeData"
              :props="defaultProps"
              default-expand-all
              :highlight-current="true"
              :filter-node-method="filterNode"
              ref="tree2"
              @current-change="handleAppChange">
            </el-tree>
        </div>
        <div class="rightSider fl" style="position: relative;">
            <div style="background: #fff; padding:16px;">
            <el-checkbox v-model="checked_01" @change="enableAttachment" style="font-size: 14px;color: #1F2D3D;">启用附件</el-checkbox>
            <p style="font-size: 12px;color: #5E6D82;margin:8px 0px 16px 22px">勾选"启用附件",用户在新建或编辑"客户",可以管理附,比如上、下载、删除、查看等。</p>
            <div style="font-size: 12px;color: #C8C8CD;">
              <el-checkbox v-model="checked_02" style="margin-left: 22px;" @change="enableMaterials" :disabled="!checked_01">启用材料清单</el-checkbox>
              <div style="margin:8px 0px 16px 45px;">
                <p v-show="!checked_01">请先勾选"启用附件"再勾选"启用材料清单"。</p>
                <p v-show="!checked_01">可以使用预先定义的材料清单,明确附件内容,加强附件的管理和控制,比如,要求上传身份证明、合同、房产证等资料作为附件。</p>
                <p v-show="checked_01" style="color: #5E6D82;">可以使用预先定义的材料清单,明确附件内容,加强附件的管理和控制,比如,要求上传身份证明、合同、房产证等资料作为附件。</p>
              </div>
              <div style="font-size: 12px;color: #5E6D82;margin-left: 45px;" v-show="checked_01">
                <p>
                  <el-button type="primary" class="btn" @click="addTable" :disabled="!checked_02">新建材料清单</el-button>
                  <!-- <el-button class="btn" :disabled=!checked_02>管理材料和分类</el-button> -->
                </p>
                <p v-show="hasMaterials" style="margin-top: 8px;">没有可用的材料清单</p>
                <p style="margin-top: 8px;">点击"新建材料清单"创建,如果没有可选或需要的材料或分类,点击"管理材料和分类"。</p>
              </div>
            </div>
          </div>
          <div style="margin-top: 16px;background: #fff; padding:16px;" v-show="checked_02">
            <div v-for="(item,index) in fatherData" :key="item.pkMaterialRecord">
              <div style="display: flex;justify-content: space-between;font-size: 16px;color: #2D2D2D;margin-bottom: 16px;">
                <span v-if='item.str'>{{item.str}}，使用本材料清单</span>
                <span v-else>没有指定条件时，使用本材料清单</span>
                <p>
                  <em class="el-icon-edit" style="color: #268CE7;cursor: pointer;font-size: 14px;margin-right: 10px;" @click="editCondition(item.conditidonList,item.pkMaterialRecord)">
                  </em>
                  <strong class="el-icon-delete" style="color: #268CE7;cursor: pointer;font-size: 14px;" @click="deleteTable(item,index)">
                  </strong>
                </p>
              </div>
              <el-table
                :data="item.materialDetailList"
                style="width: 100%">
                  <el-table-column type="expand">
                    <template scope="props">

                      <!-- expand内容 -->
                      <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="材料分组">

                          <span v-if="!props.row.isAdd">{{ props.row.materialGroupName }}</span>

                          <el-select 
                            v-model="props.row.materialGroupCode" 
                            placeholder="请选择分组" 
                            @change='getMaterialGroupItem(props.row,item)' 
                            v-else>
                              <el-option 
                                v-for="item in materialGroup" 
                                :label="item.materialGroupName" 
                                :value="item.materialGroupCode"
                                :key="item.materialGroupCode">
                              </el-option>
                          </el-select>

                        </el-form-item>
                        <el-form-item label="材料名称">

                          <span v-if="!props.row.isAdd">{{ props.row.materialName }}</span>

                          <el-select 
                            v-model="props.row.materialName" 
                            placeholder="请选择材料名称" 
                            @focus='getMaterialGroupName(props.row,item)'
                            @change="handleChange(props.row,item)"
                            v-else>
                            <el-option 
                              v-for="item in materialName1" 
                              :label="item.materialName" 
                              :value="item.materialNameCode"
                              :key="item.materialNameCode">
                            </el-option>
                          </el-select>
                          <!-- <el-row class="demo-autocomplete" v-else>
                              <el-col :span="12">
                                <el-autocomplete
                                  class="inline-input"
                                  v-model="props.row.materialName"
                                  :fetch-suggestions="querySearch"
                                  placeholder="请输入内容"
                                  @select="handleSelect">
                                </el-autocomplete>
                              </el-col>
                          </el-row> -->
                        </el-form-item>
                        <el-form-item label="是否必传">
                          <span v-if="!props.row.isAdd">{{ props.row.isNecessary }}</span>
                          <div v-else>
                             <el-radio class="radio" v-model="props.row.isNecessary" label="是" >是</el-radio>
                             <el-radio class="radio" v-model="props.row.isNecessary" label="否" >否</el-radio>
                          </div>
                        </el-form-item>
                        <el-form-item label="备注">
                          <span v-if="!props.row.isAdd">{{ props.row.remark }}</span>
                          <el-input v-model="props.row.remark" v-else></el-input>
                        </el-form-item>
                      </el-form>
                      <div style="margin-top: 10px;">
                         <el-button @click="editRow(props.row)" type="primary" style="border-radius: 4px;"
                          v-if="!props.row.isAdd">修改</el-button>
                          <el-button @click="saveRow(props.row)" type="primary" style="border-radius: 4px;" v-if="props.row.isAdd">保存</el-button>
                          <el-button @click="cancelRow(props.row)" type="primary" style="margin-left: 10px;border-radius: 4px;" v-if="props.row.isAdd">取消</el-button>
                      </div>
                    </template>
                  </el-table-column>
                  <!-- table列表 -->
                  <el-table-column
                    label="材料分组"
                    prop="materialGroupName">
                  </el-table-column>
                  <el-table-column
                    label="材料名称"
                    prop="materialName">
                  </el-table-column>
                  <el-table-column
                    label="是否必传"
                    prop="isNecessary">
                  </el-table-column>
                  <el-table-column
                    label="备注"
                    prop="remark">
                  </el-table-column>
                  <el-table-column label="操作">
                    <template scope="scope">
                      <el-tooltip class="item" effect="dark" placement="top-start" content="删除">
                        <i class="el-icon-delete" type="primary" @click="deleteRow(scope,item.materialDetailList)" v-show="item.materialDetailList.length>0"></i>
                      </el-tooltip>
                    </template>
                  </el-table-column>

              </el-table>
              <div class="addTable" v-show="!(item.isAdd)" @click="add_table(item)">
                <img :src="addTableImage" frameborder="0" style="width: 16px;height: 16px;cursor: pointer;">
              </div>
              <!-- 新增一行数据 -->
               <div style="background: #F5F5FA;padding: 20px;" v-show="item.isAdd">
                  <div style="margin-bottom: 16px">
                    <div class="addTop" style="overflow: hidden;">
                        <p>
                          <span>材料分组</span>
                           <el-select v-model="addRowData.classify" placeholder="请选择分组" @change='getAddMaterialGroupItem(addRowData.classify)'>
                              <el-option 
                                v-for="item in materialGroup" 
                                :label="item.materialGroupName" 
                                :value="item.materialGroupCode"
                                :key="item.materialGroupCode">
                              </el-option>
                          </el-select>
                        </p>
                        <p style="display: flex;">
                          <span>材料名称</span>
                         <!--  <el-row class="demo-autocomplete">
                              <el-col :span="12">
                                <el-autocomplete
                                  class="inline-input"
                                  v-model="addRowData.name"
                                  :fetch-suggestions="querySearch"
                                  placeholder="请输入内容"
                                  @select="handleSelect"
                                ></el-autocomplete>
                              </el-col>
                          </el-row> -->
                          <el-select 
                            v-model="addRowData.name" 
                            placeholder="请选择名称"
                            @focus="getmaterialNameItem">
                              <el-option 
                                v-for="item in restaurants" 
                                :label="item.materialName" 
                                :value="item.materialName"
                                :key="item.materialName">
                              </el-option>
                          </el-select>
                        </p>
                        <p>
                          <span>是否必传</span>
                          <el-radio class="radio" v-model="addRowData.must" label="是">是</el-radio>
                          <el-radio class="radio" v-model="addRowData.must" label="否">否</el-radio>
                        </p>
                    </div>
                    <div style="line-height: 33px;margin:0px 10px;">
                      <span style="color:#5e6d82;font-size:14px;display: inline-block;width: 55px;text-align: right;padding-right: 16px;">备注</span>
                      <el-input type="textarea" v-model="addRowData.remark" :rows='1'></el-input>
                    </div>
                  </div>
                    <p class="addLine"></p>
                    <div style="text-align: right;margin-top: 16px;">
                      <el-button @click="resetLine(item)">取消</el-button>
                      <el-button type="primary" @click="addRow(item.materialDetailList,item)">确认</el-button>
                    </div>
               </div>
            </div>
        </div>
        <div style="clear: both;"></div>
      </div>

    <!-- |||||||||||||||||||||||||||||||| -->
      <el-dialog title="设置条件" v-model="dialogFormVisible" class="dialogForm">
        <div style="margin-bottom: 16px;"> 
            <span  style="font-size: 14px;color: #2D2D2D;">当满足以下条件时</span>
            <!-- 条件按钮-->
            <span class="el-icon-plus" @click="addCondition" style="cursor: pointer;color: #268CE7;"></span>
        </div>
        <div style="height: 208px;overflow-x: hidden;">


          <p style="padding: 8px;background: #F5F5FA;display: flex;" v-for="(item,index) in conditionData" :key="item.pkMaterialCondition">

       
          <!-- 第一列,没毛病这个 -->
          <el-select v-model="item.conditionName" placeholder="请选择分组" @change='getConditionSelectItem(item,$event)'>
          {{item.conditionType}}
              <el-option 
              v-for="itemTwo in conditionSelect" 
              :label="itemTwo.conditionName" 
              :value="itemTwo.conditionName"
              :key="itemTwo.conditionName">
            </el-option>
          </el-select>

            
          <!-- 第二列，没毛病 -->
           <el-select v-model="item.conditionCompareType" placeholder="请选择导入方式">
              <el-option label="等于" value="等于"></el-option>
              <el-option label="不等于" value="不等于"></el-option>
              <el-option label="包含" value="包含"></el-option>
              <el-option label="不包含" value="不包含"></el-option>
              <el-option label="未填写" value="未填写"></el-option>
              <el-option label="已填写" value="已填写"></el-option>
           </el-select>




          <template>
                <el-input v-model="item.conditionValue"></el-input>
          </template>



          



           <!-- 第三列，有问题 -->
            <!-- {{conditionType}} 》 {{index}} 》 {{conditionType[index]}} -->
            <!--  <template v-if="conditionType[index]!='自定义档案'&&conditionType[index]!='参照'">
                <el-input v-model="item.conditionValue"></el-input>
             </template> -->


             <!-- <template v-if="conditionType[index]=='自定义档案'"> -->
             <!-- 自定义档案{{refcode}}》》{{field}}》》{{queryParams}} -->
                <!-- <el-ref
                  :ref-code="refcode"
                  :field="field"
                  :template-value="refTemplateValue"
                  :query-params="queryParams"
                > -->
                <!-- </el-ref> -->
            <!-- </template> -->


            <!-- <template v-if="conditionType[index]=='参照'"> -->
            <!-- 参照 -->
                 <!-- <el-ref :ref-code="refcode"
                        :field="field"
                        :template-value="refTemplateValue"
                        >
                </el-ref>
            </template>
 -->

           <span class="el-icon-delete" style="cursor: pointer;color: #268CE7;display: block;height: 36px;line-height: 36px;font-size: 12px;" @click="delCondition(index)"></span>


          </p>
        </div>
        <!-- ||||||||||||||||||||||||||||||||||||||||||| -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetCondition">取 消</el-button>
          <el-button type="primary" @click="sureCondition">确 定</el-button>
        </div>
      </el-dialog>



  </div>
  </ifbp-page>
</template>
<script>
import addTableImg from '../../../static/img/addTable.svg';
import deleteImg from '../../../static/img/delete.svg';
// import elRef from 'C:/Users/Administrator/Desktop/project/ifbp-element/packages/ifbp-ref/src/ref.vue';
  export default {
    data(){
      return {
        pkRecord:'',
        isText:false,
        refcode: '',
        field: '',
        refTemplateValue: {
            
        },
        queryParams: {
          id: ''
        },
        pkAttachmentState:'',
        conditionType:{},
        conditionSelect:{

        },
        materialsName:{},
        materialGroup:[],
        materialName1:[],
        treeCode:'',
        editData:{},
        conditionData:[
       
        ],
        gridData: [],
        dialogTableVisible: false,
        dialogFormVisible: false,
        formLabelWidth: '120px',
         radio: '1',
         addRowData:{
            classify: '',
            name: '',
            must: '是',
            remark: ''
         },
         form: {
          method: '',
          match: '',
          scene: '',
          name:'',
          desc:'',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: ''
         },
         restaurants: [],
         state1: '',
         currentTpl: {
          code: '',
          scene: '',
          processCode: '',
          processName: '',
          enabled: false,
          enabledTwo:'',
          description: '',
          pubscence_ref:''
        },
        addTableImage:'',
        deleteImage:'',
        checked_01: false,
        checked_02: false,
        hasMaterials:false,
        isEdit:false,
        isAddTable:false,
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        fatherData:[
        
        ]
      };
    },
    created(){
      this.getTree();
      this.addTableImage=addTableImg;
      this.deleteImage=deleteImg;
    },
    mounted() {
      
    },
    methods: {
      getConditionSelectItem(item,event) {
        // alert(event);


          //  refcode: 'defdoc',
        // field: 'bd_psndoc.idtype',
        // refTemplateValue: {
        //     idtype: '',
        //     pk_org: ''
        // },
        // queryParams: {
        //   id: 'HR_CLOUD030000000008'
        // },
        

        // this.refcode='';
        // this.field='';
        // this.refTemplateValue={};
        // this.queryParams={};



        // var vm=this;
        this.conditionSelect.forEach(function(item_1,index){
          if(event==item_1.conditionName){
            // alert(JSON.stringify(item));
            item.conditionCode=item_1.conditionCode;

            // item.conditionName=item_1.conditionName;
            // if(item_1.defcode){
            //   vm.refcode=item_1.defcode;
            // }
            // if(item_1.refcode){
            //   vm.refcode=item_1.refcode;
            // }
            // vm.field=item_1.conditionCode;
            // var code =item_1.conditionCode.split('.')[1];
            // vm.refTemplateValue[code]='';
            // if(item_1.defid){
            //   vm.queryParams.id=item_1.defid;
            // }
          }
        })
        // debugger;
        // vm.conditionType[pIndex] = conditionType;
          // console.log('vm.refcode--');
          // console.log(vm.refcode);
          // console.log('vm.field--');
          // console.log(vm.field);
          // console.log('vm.refTemplateValue--');
          // console.log(vm.refTemplateValue);
          // console.log('vm.queryParams--');
          // console.log(vm.queryParams);
          // console.log('conditionType--');
          // console.log(conditionType);
          // console.log('pIndex--');
          // console.log(pIndex);
      },
      // 左侧数上绑定的事件
      handleAppChange(value){
        this.busiName=value.name;
        this.treeCode=value.code;
        var that=this;
        this.$http({
          url: '/ifbp-app-attach/attach/attachattachmentstate/findByBusiCode.ilf?busiCode='+this.treeCode+'&busiName='+this.busiName
        }).then((res) => {
          if(res.data.success === true) {
            this.pkAttachmentState=res.data.data.pkAttachmentState;
            var state=res.data.data;
            var flag_01 = state.isEnableAttachment ==="false" ? false : true; 
            that.checked_01=flag_01;
            var flag_02 = state.isEnableMaterialList ==="false" ? false : true; 
            that.checked_02=flag_02;
            if(that.checked_02){
              this.findList();
            }
          } else {
            this.$message.error('没有查找到数据');
          }
        }).catch(() => {
          this.$message.error('请求出错');
        });
      },
      // 获取树数据的方法
      getTree(){
        this.$http({
          url: '/ifbp-app-sm/buz/display'
        }).then((res) => {
          if(res.data.success === true) {
            this.treeData=res.data.data;
          } else {
            this.$message.error('请求失败');
          }
        }).catch(() => {
          this.$message.error('请求出错');
        });
      },
      // 删除材料清单的方法
      deleteTable(item,index){
        this.$confirm('确定删除此材料清单？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var params = {
            "pkMaterialRecord":item.pkMaterialRecord
          }
           this.$http({
              url: '/ifbp-app-attach/attach/attachmaterialrecord/deleteAll',
              method: 'get',
              params: params
            }).then((res) => {
              if(res.data.success){
                this.fatherData.splice(index, 1);
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              }
            }).catch((error) => {
              
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      // 取消
      resetCondition(){
        this.conditionData=[
          {
            first:'材料',
            second:'=',
            third:'材料吗'
          }
         ];
        this.dialogFormVisible = false;
      },
      // 确定
      sureCondition(){
        var vm=this;
        var arr=[];
        var isRepeatArr=[];
        this.conditionData.forEach(function(item,index){
          isRepeatArr.push(item.conditionCode);
        })
        if(this.isRepeat(isRepeatArr)){
          this.$message.error('条件类型不能重复添加');
          return;
        }else{
          this.conditionData.forEach(function(item,index){
              arr.push({
                 "conditionCode": item.conditionCode,
                 "conditionName": item.conditionName,
                 "conditionCompareType": item.conditionCompareType,
                 "conditionValue": item.conditionValue,
                 "pkMaterialRecord": vm.pkRecord
              })
          })
        }
       this.$http({
          url: '/ifbp-app-attach/attach/attachmaterialcondition/saveAllConditionNew',
          method: 'post',
          data: 'jsonstr=' + JSON.stringify(arr) + '&busiCode=' + this.treeCode + '&pkMaterialRecord='+ this.pkRecord
        }).then((res) => {
            if(!res.data.success){
              vm.$message.error(res.data.error.errorMessage);
              return;
            }else if(res.data.success && arr.length == 0){
              vm.$message({
                type: 'success',
                message: '操作成功!'
              });
              vm.findList();
            } else{
              vm.$message({
                type: 'success',
                message: '新增成功!'
              });
              vm.findList();
            }
        }).catch((error) => {
          
        });
        this.resetCondition();
      },
     isRepeat(arr){
        var hash = {};
        for(var i in arr){
          if(hash[arr[i]]){
            return true;
          }
          hash[arr[i]] = true;
        }
        return false;
     },
      delCondition(index){
        this.conditionData.splice(index, 1);
      },
      addCondition(){
        var that=this;
        this.conditionData.push({
            conditionType:'文本',
            conditionCode:'',
            conditionValue:'',
            pkMaterialRecord:that.pkRecord,
            conditionCompareType:'',
            conditionName:'业务分类'
          })
      },

     editCondition(val,pkMaterialRecord){
        // alert(pkMaterialRecord);
        this.pkRecord=pkMaterialRecord;
        this.getConditionSelect();
        this.conditionData=[];
        this.conditionData=val;
        this.dialogFormVisible = true;
      },
      addTable(){
        var vm=this; 
        var params = {
            "busiCode": this.treeCode,
            "pkAttachmentState":this.pkAttachmentState
        }
       this.$http({
          url: '/ifbp-app-attach/attach/attachmaterialrecord/createNewRecord',
          method: 'get',
          params: params
        }).then((res) => {
          // alert(JSON.stringify(res));
          console.log(res);
          if(res.data.success){
            vm.$message({
              type: 'success',
              message: '新增成功!'
            });
            vm.findList();
             // vm.fatherData.push({
             //    conditidonList:[
             //    ],
             //    materialDetailList:[],
             //    pkMaterialRecord: res.data.data,
             //    isAdd:false
             //  })
          }
        }).catch((error) => {
          console.log(error);
        });   
      },
      resetLine(item){
       item.isAdd = false;
       this.addRowData={
          classify: '',
          name: '',
          must: true,
          remark: ''
       };
      },
      goback(){
      // alert(2);
     },

    //  新增功能
      addRow(itemData,item){
        var vm=this;
        var codeName='';
        var materCode='';
        this.materialGroup.forEach(function(item,index){
          if(item.materialGroupCode==vm.addRowData.classify){
            codeName=item.materialGroupName;
          }
        });
        this.restaurants.forEach(function(item,index){
          if(item.materialName==vm.addRowData.name){
            materCode=item.materialNameCode;
          }
        });
        var params = {
          "materialGroupCode":this.addRowData.classify,
          "materialGroupName":codeName,
          "materialNameCode":materCode,
          "materialName":this.addRowData.name,
          "isNecessary":this.addRowData.must,
          "remark":this.addRowData.remark,
          "pkMaterialRecord":item.pkMaterialRecord
        }
        this.$http({
          url: '/ifbp-app-attach/attach/attachmaterialdetail/create',
          method: 'post',
          data: params
        }).then((res) => {
          console.log('res-----',res)
          console.log('itemData',itemData)
          if(res.data.success === true) {
            this.$message({
              type: 'success',
              message: '新增成功!'
            });
            params.isAdd=false;
            params.pkMaterialDetail = res.data.data.pkMaterialDetail;
            itemData.push(params);
            vm.resetLine(item);
          } else {
            this.$message.error(res.data.error.errorMessage);
          }
        }).catch(() => {
          this.$message.error('请求出错');
        });
      },

      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);
        };
      },
      getmaterialNameItem(){
        console.log('this.addRowData-----',this.addRowData)
        console.log('this.editData',this.editData)
        var vm = this;
        var params = {
          "busiCode": this.treeCode,
          "groupCode":this.addRowData.classify
        };
        this.$http({
          url: '/ifbp-app-attach/attach/attachmaterialnamedic/findGroupNameByGroupCode',
          method: 'get',
          params: params
        }).then((res) => {
          var self =this;
          if(res.data.success){
            var data=res.data.data;
            vm.restaurants = data;
          }
        }).catch((error) => {

        });
      },      
      getAddMaterialGroupItem(classify){
        var vm = this;
        this.addRowData.name='';
        var params = {
            "busiCode": this.treeCode,
            "groupCode":classify
        }
       this.$http({
          url: '/ifbp-app-attach/attach/attachmaterialnamedic/findGroupNameByGroupCode',
          method: 'get',
          params: params
        }).then((res) => {
          var self =this;
          if(res.data.success){
            // console.log(res.data.data);
            var data=res.data.data;
            // var arr=[];
            // data.forEach((item) => {
            //     var obj={ "value": item.materialName, "address": item.materialNameCode };
            //     arr.push(obj);
            // });
            vm.restaurants = data;
            console.log("----555-----");
            console.log(vm.restaurants);
          }
        }).catch((error) => {
          console.log(error);
        });
      },
      //材料名称下拉focus事件
      getMaterialGroupName(row,val){
        var vm = this;
        var params = {
          "busiCode": this.treeCode,
          "groupCode":row.materialGroupCode
        }
        this.$http({
          url: '/ifbp-app-attach/attach/attachmaterialnamedic/findGroupNameByGroupCode',
          method: 'get',
          params: params
        }).then(
          (res) => {
            if(res.data.success){
              this.materialName1 = res.data.data;
            }
          }
        ).catch(
          ()=>{

          }
        );
      },
      //材料名称下拉change事件
      handleChange(row,val){
        console.log('row',row);
        console.log('val',val);
        console.log('materialName1',this.materialName1)
        console.log('materialGroup',this.materialGroup)
        
        this.materialsName = row;
        // materialsName
        this.materialName1.forEach((item,index)=>{
          if(row.materialName == item.materialNameCode){
            row.materialName = item.materialName;
            row.materialNameCode = item.materialNameCode;
          }
        });
        let num = [];
        val.materialDetailList.forEach(item=>{
          if(item.materialName == row.materialName){
            num.push(item);
          }
        });
        if(num.length > 1){
          this.$message({
            type: 'warning',
            message: '已经有相同的材料名称，请选择不同的材料名称！'
          });
          row.materialName = '';
          row.materialNameCode = '';
        }
        console.log('materialsName',this.materialsName)
      },
      getMaterialGroupItem(row,val){
        var vm=this;
        var codeName='';
        this.materialGroup.forEach(function(item,index){
          if(item.materialGroupCode==row.materialGroupCode){
            codeName=item.materialGroupName;
          }
        });
        row.materialGroupName=codeName;
        row.materialName='';
        this.addRowData.name='';
        var params = {
            "busiCode": this.treeCode,
            "groupCode":row.materialGroupCode
        }
       this.$http({
          url: '/ifbp-app-attach/attach/attachmaterialnamedic/findGroupNameByGroupCode',
          method: 'get',
          params: params
        }).then((res) => {
          var self =this;
          if(res.data.success){
            var data=res.data.data;
            var arr=[];
            data.forEach((item) => {
                var obj={ "value": item.materialName, "address": item.materialNameCode };
                arr.push(obj);
            });
            this.restaurants = arr;
          }
        }).catch((error) => {

        });
      },

      //删除
      isDelete(row,itemData) {
        this.$confirm('确定删除此材料清单？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        var params = {
          "pkMaterialDetail":row.row.pkMaterialDetail || itemData[0].pkMaterialDetail
        }
        console.log(params);
         this.$http({
            url: '/ifbp-app-attach/attach/attachmaterialdetail/delete',
            method: 'get',
            params: params
          }).then((res) => {
            if(res.data.success){
              itemData.splice(row.$index, 1);
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }
          }).catch((error) => {
            
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      handleSelect(item) {
        // alert(JSON.stringify(item));
        this.materialsName=item;
        console.log(item);
      },
      // 条件分组
      getConditionSelect(){
        var params = {
          "busiCode":this.treeCode
        }
        console.log(params);
         this.$http({
            url: '/ifbp-app-attach/attach/attachmaterialconditiondic/findCondition',
            method: 'get',
            params: params
          }).then((res) => {
            if(res.data.success){
              // alert(JSON.stringify(res));
              // console.log(res.data.data);
              this.conditionSelect=res.data.data;
            }
          }).catch((error) => {
            console.log(error);
          });
      },
      //  材料分组
      getMaterialGroup(){
         var vm=this;
         var params = {
          "busiCode":this.treeCode
        }
        
         this.$http({
            url: '/ifbp-app-attach/attach/attachmaterialnamedic/findMaterialGroup',
            method: 'get',
            params: params
          }).then((res) => {
            if(res.data.success){
              
              vm.materialGroup=res.data.data;
            }
          }).catch((error) => {
            
          });
      },
      // 新增按钮功能
      add_table(item){
        this.addRowData.must = "是";
        this.addRowData.classify = '';
        item.isAdd=true;
        this.getMaterialGroup();
      },

      // 修改的时候取消
      cancelRow(row){
        console.log('quxiao',row)
        row.isAdd=false;
        row = this.editData;
      },
      // 修改
      editRow(row){
        console.log("修改的时候",row);
        this.getMaterialGroup();
        // this.addRowData.classify=row.materialGroupName;
        // this.addRowData.name=row.materialName;
        row.isAdd=true;
        this.editData = row;
        this.materialsName = row;
      },

      // 删除
      deleteRow(row,itemData){
        this.isDelete(row,itemData);
      },

      // 修改的时候保存
      saveRow(val){
        console.log('val-------',val)
        var vm=this;
        var codeName='';
        this.materialGroup.forEach(function(item,index){
          if(item.materialGroupCode==val.materialGroupCode){
            codeName=item.materialGroupName;
          }
        });
        var params = {
          "materialGroupCode":val.materialGroupCode,
          "materialGroupName":codeName,
          "materialName":this.materialsName.materialName,
          "materialNameCode":this.materialsName.materialNameCode,
          "pkMaterialDetail":val.pkMaterialDetail,
          "pkMaterialRecord":val.pkMaterialRecord,
          "remark":val.remark,
          "isNecessary": val.isNecessary
        }
        // 必填项校验
        let info,a,b,c;
        if(this.materialsName.materialGroupName == "" || this.materialsName.materialName == "" || this.materialsName.isNecessary == ""){
          a = this.materialsName.materialGroupName == "" ? "材料分组" : '';
          b = this.materialsName.materialName == "" ? "材料名称" : '';
          c = this.materialsName.isNecessary == "" ? "是否必传" : '';
          info = a + b + c;
          this.$message({
            type: 'warning',
            message: '请填写'+ info +'！',
          });
        }else{
          val.isAdd=false;
          this.$http({
            url: '/ifbp-app-attach/attach/attachmaterialdetail/update',
            method: 'post',
            data: params
          }).then((res) => {
            if(res.data.success === true) {
              this.$message({
                type: 'success',
                message: '修改成功！'
              });
              vm.isEdit=false;
            } else {
              this.$message.error('修改失败！');
            }
          }).catch((error) => {
            this.dialogFormVisible = false;
          });
        }
        //  this.$http({
        //     url: '/ifbp-app-attach/attach/attachmaterialdetail/update',
        //     method: 'post',
        //     data: params
        //   }).then((res) => {
        //     if(res.data.success === true) {
        //       this.$message({
        //         type: 'success',
        //         message: '修改成功！'
        //       });
        //       vm.isEdit=false;
        //     } else {
        //       this.$message.error('修改失败！');
        //     }
        //   }).catch((error) => {
        //     this.dialogFormVisible = false;
        //     console.log(error);
        //   });

      },

      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },

      changeState_01(){
        var params = {
        "isEnableAttachment":this.checked_01
        }
        this.$http({
          url: '/ifbp-app-attach/attach/attachattachmentstate/updateEnableAttachment/'+this.treeCode,
          method: 'get',
          params: params
        }).then((res) => {
          if(res.data.success === true) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
          } else {
            this.$message.error('请求失败');
          }
        }).catch(() => {
          this.$message.error('请求出错');
        });
      },

      enableAttachment(){
        if(this.checked_01){
          this.checked_01=true;
          this.changeState_01();
        }else{
          this.checked_01=false;
          this.checked_02=false;
          this.changeState_01();
          this.changeState_02();;
        }
      },

      changeState_02(){
        var params = {
        "isEnableMaterialList":this.checked_02
        }
        this.$http({
          url: '/ifbp-app-attach/attach/attachattachmentstate/updateEnableMaterialList/'+this.treeCode,
          method: 'get',
          params: params
        }).then((res) => {
          if(res.data.success === true) {
             this.$message({
              type: 'success',
              message: '操作成功!'
            });
            // console.log(JSON.stringify(res));
          } else {
            this.$message.error('请求失败');
          }
        }).catch(() => {
          this.$message.error('请求出错');
        });
      },

      findList(){
        var params = {
        "busiCode":this.treeCode
        }
        this.$http({
          url: '/ifbp-app-attach/attach/attachmaterialrecord/findMaterialList',
          method: 'get',
          params: params
        }).then((res) => {
          var vm = this;
          if(res.data.success === true) {
            var curData = res.data.data;
            vm.fatherData=[];
            curData.forEach(function(item,index){
              item.materialDetailList.forEach(function(itemTwo,index){
                itemTwo.isAdd=false;
              })
              var str='当';
              item.conditidonList.forEach(function(itemThree,index){
                str+=itemThree.conditionName+itemThree.conditionCompareType+itemThree.conditionValue+' ';
              })
              if(str==='当'){
                str+='没有指定条件'
              }
              str+='时';
              item.str=str;
              item.isAdd=false;
              vm.fatherData.push(item);
            })
          } else {
            this.$message.error('请求3失败');
          }
        }).catch(() => {
          this.$message.error('请求3出错');
        });
      },

      enableMaterials(){
        var params = {
        "isEnableMaterialList":this.checked_02
        }
        this.$http({
          url: '/ifbp-app-attach/attach/attachattachmentstate/updateEnableMaterialList/'+this.treeCode,
          method: 'get',
          params: params
        }).then((res) => {
          if(res.data.success === true) {
             this.$message({
              type: 'success',
              message: '操作成功!'
            });
             if(this.checked_02){
                this.findList();
             }
          } else {
            this.$message.error('请求失败');
          }
        }).catch(() => {
          this.$message.error('请求出错');
        });
      }
    }
    // components: {
    //   elRef
    // }
  };
</script>
<style scoped>
  .el-row>div{
    overflow: visible!important;
  }
  .el-input{
    width: 230px;
  }
  .el-form-item{
    margin-bottom: 10px!important;
  }
  .el-dialog__body{
    border-bottom: 1px solid red;
    border-top: 1px solid red;
  }
  .addLine{
    height: 2px;
    background: #E6E6EF;
  }
  .addTop p{
    float: left;
    margin: 10px;
  }
  .addTop span{
    display: inline-block;
    line-height: 36px;
    font-size: 14px;
    color: #5E6D82;
    text-align: right;
    padding-right: 16px;
  }
  .el-textarea{
    width: 556px;
  }
  textarea{
    height: 36px!important;
  }
  .el-textarea__inner{
    height: 36px!important;
  }
  .el-autocomplete.inline-input{
    width: 230px!important;
  }
  .el-select{
    width: 230px!important;
  }
  .dialogForm .el-select{
    width: 30%;
    margin-right: 8px;
  }
  .addTable{
    text-align: center;
    height: 48px;
    line-height: 48px;
    cursor: pointer;
  }
  .addTable:hover{
    background: #EAF9FF;
  }
  .btn{
    height: 36px;
    text-align: center;
  }
  .contentList{
    width: 100%;
    position: relative;
  }
  .btnList{
    height: 46px;
    line-height: 46px;
    background: #fff;
  }
  .btnList .el-button{
    height: 36px;
  }
  .leftSider{
    width: 304px;
    padding:16px;
    background: #fff;
    min-height: 414px;
  }
  .rightSider{
    width: 945px;
    margin-left:16px;
    min-height: 414px;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
<style>
  #materialList .el-form--inline .el-form-item__content{
    width: 200px!important;
    vertical-align: middle !important;
  }
</style>

