<template>
<div>
     <el-table
      :data="materialDetailList"
      style="width: 100%">
      <!-- 箭头下拉 -->
        <el-table-column type="expand">
          <template scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="材料分组">
                <span v-if="!props.row.isEdit">{{ props.row.materialGroupName }}</span>
                <el-select v-model="props.row.materialGroupCode" placeholder="请选择分组" @change='getMaterialGroupItem(props.row)' 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.isEdit">{{ props.row.materialName }}</span>
                
               <el-select v-model="props.row.materialName" placeholder="请选择名称" v-else>
                  <el-option 
                    v-for="item in restaurants" 
                    :label="item.materialName" 
                    :value="item.materialName"
                    :key="item.materialName">
                  </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.isEdit">{{ props.row.isNecessary }}</span>
                <div v-else style="width:200px">
                   <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.isEdit">{{ 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.isEdit">修改</el-button>
                <el-button @click="saveRow(props.row)" type="primary" style="border-radius: 4px;" v-if="props.row.isEdit">保存</el-button>
                <el-button @click="cancelRow(props.row)" type="primary" style="margin-left: 10px;border-radius: 4px;" v-if="props.row.isEdit">取消</el-button>
            </div>
          </template>
        </el-table-column>
        <!-- 列表 -->
        <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)" v-show="materialDetailList.length>0"></i>
            </el-tooltip>
          </template>
        </el-table-column>
    </el-table>

    <!-- 新增按钮 -->
     <div class="addTable" v-show="!isAdd" @click="add_table()">
      <img :src="addTableImage" frameborder="0" style="width: 16px;height: 16px;cursor: pointer;">
    </div>

      <!-- 新增一行数据 -->
   <div style="background: #F5F5FA;padding: 20px;" v-show="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-select v-model="addRowData.name" placeholder="请选择名称">
                  <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()">取消</el-button>
          <el-button type="primary" @click="addRow()">确认</el-button>
        </div>
   </div>
</div>
</template>
<script>
import addTableImg from '../../../static/img/addTable.svg';
  export default {
    data(){
      return {
        pkMaterialRecord:'',
        pkBpm:'',
        pkBpmNode:'',
        isEdit:false,
        isAdd:false,
        materialDetailList:[
    
        ],
        materialsName:{},
        materialGroup:[],
        dialogFormVisible: false,
         radio: '1',
         addRowData:{
            classify: '',
            name: '',
            must: '是',
            remark: ''
         },
         restaurants: [],
      };
    },
    created(){
      this.addTableImage=addTableImg;
      this.getMaterialGroup();
      this.getParams();
      this.findList();
    },
    mounted() {
      
    },
    methods: {
      getParams(){
        var params = window.parent.location.href ;
        // var params = 'http://dev-ap.iservice.imfbp.com/bpm-designer/default_tenant_id/process/8cfae4ed-1cf8-11e8-9d09-02s42ac110019/flow/approveUserTask1396111';
        console.log("params-----");
        console.log(params);
        if(params){
          var arr = params.split('/');
          if(arr.length > 8){
            this.pkBpm = arr[arr.length-3];
            this.pkBpmNode =arr[arr.length-1];
          }
        }
      },
       findList(){
        var params = {
          // 流程ID
          "pkBpm":this.pkBpm,
          // 流程环节ID
          "pkBpmNode":this.pkBpmNode
        };
        this.$http({
          url: '/ifbp-app-attach/attach/attachbpmmaterialrecord/findOneByBpmIdAndNode',
          method: 'get',
          params: params
        }).then((res) => {
          var vm = this;
          if(res.data.success === true) {
            if(res.data.message ==='query' && Object.prototype.toString.call(res.data.data.detailList) == "[object Null]"){
              vm.pkMaterialRecord = res.data.data.pkMaterialRecord;
            }else if(res.data.message ==='query' && res.data.data.detailList.length > 0){
                var curDate=res.data.data.detailList;
                curDate.forEach(function(item,index){
                  item.isEdit=false
                });
                vm.pkMaterialRecord=res.data.data.pkMaterialRecord;
                vm.materialDetailList=curDate;
            }else if(res.data.message === 'create'){
                vm.pkMaterialRecord=res.data.data;
            }
          } else {
            this.$message.error('列表获取失败');
          }
        }).catch(() => {
          this.$message.error('获取列表接口出错');
        });
      },
      resetLine(){
       this.isAdd = false;
       this.addRowData={
          classify: '',
          name: '',
          must: '是',
          remark: ''
       };
      },
      addRow(){
        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":this.pkMaterialRecord
        }
        this.$http({
          url: '/ifbp-app-attach/attach/attachbpmmaterialdetail/create',
          method: 'post',
          data: params
        }).then((res) => {
          if(res.data.success === true) {
            this.$message({
              type: 'success',
              message: '新增成功!'
            });
            vm.isAdd = false;
            vm.findList();
            vm.resetLine();
          } else {
            this.$message.error(res.data.error.errorMessage);
          }
        }).catch(() => {
          this.$message.error('请求1出错');
        });
      },
      getAddMaterialGroupItem(classify){
        console.log('classify--------1111',classify)
        this.addRowData.name='';
        var params = {
            "busiCode": 'LCGL',
            "groupCode":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;
            this.restaurants = data;
          }
        }).catch((error) => {
          console.log(error);
        });
      },
      getMaterialGroupItem(row){
        console.log('this.materialGroup-----',this.materialGroup)
        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": 'LCGL',
            "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;
            console.log("----dd---");
            console.log(data);
            this.restaurants = data;
          }
        }).catch((error) => {
          console.log(error);
        });
      },
      isDelete(row) {
        var vm = this;
        this.$confirm('确定删除此材料清单？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        var params = {
          "id":row.row.pkMaterialDetail
        }
        console.log(params);
         this.$http({
            url: '/ifbp-app-attach/attach/attachbpmmaterialdetail/delete',                   
            method: 'get',
            params: params
          }).then((res) => {
            if(res.data.success){
              vm.materialDetailList.splice(row.$index, 1);
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }
          }).catch((error) => {
            console.log(error);
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      //  材料分组
      getMaterialGroup(){
         var vm=this;
         var params = {
          "busiCode":'LCGL'
        }
        console.log(params);
         this.$http({
            url: '/ifbp-app-attach/attach/attachmaterialnamedic/findMaterialGroup',
            method: 'get',
            params: params
          }).then((res) => {
            if(res.data.success){
              // alert(JSON.stringify(res));
              // console.log(res.data.data);
              vm.materialGroup=res.data.data;
            }
          }).catch((error) => {
            console.log(error);
          });
      },
      add_table(){
        this.isAdd=true;
      },
      cancelRow(row){
        row.isEdit=false;
      },
      editRow(row){
        // this.addRowData.classify=row.materialGroupName;
        // this.addRowData.name=row.materialName;
        this.addRowData.classify = row.materialGroupCode;
        this.addRowData.name=row.materialName;
        row.isEdit=true;
      },
      deleteRow(row){
        this.isDelete(row);
      },
      saveRow(row){
        row.isEdit=false;
        var vm=this;
        var codeName='';
        var materCode='';
        this.materialGroup.forEach(function(item,index){
          if(item.materialGroupCode==row.materialGroupCode){
            codeName=item.materialGroupName;
          }
        });
         this.restaurants.forEach(function(item,index){
          if(item.materialName==row.materialName){
            materCode=item.materialNameCode;
          }
        });
        var params = {
          "materialGroupCode":row.materialGroupCode,
          "materialGroupName":codeName,
          "materialName":row.materialName,
          "materialNameCode":materCode,
          "pkMaterialDetail":row.pkMaterialDetail,
          "pkMaterialRecord":row.pkMaterialRecord,
          "remark":row.remark,
          "isNecessary": row.isNecessary
        }
         this.$http({
            url: '/ifbp-app-attach/attach/attachbpmmaterialdetail/update',                 
            method: 'post',
            data: params
          }).then((res) => {
            if(res.data.success === true) {
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              vm.isEdit=false;
            } else {
              this.$message.error(res.data.error.errorMessage);
              this.findList();
            }
          }).catch((error) => {
            this.dialogFormVisible = false;
          });

      }
    }
  };
</script>
<style scoped>
  .demo-table-expand .el-input {
    width: 200px ;
  }
  .demo-table-expand .el-select {
    width: 200px ;
  }
  .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 .el-select{
    display: inline-block;
    position: relative;
    width: 200px;
  }
  .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: 492px;
  }
  textarea{
    height: 36px!important;
  }
  .el-textarea__inner{
    height: 36px!important;
  }
  .el-autocomplete.inline-input{
    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{
    width: 116px;
    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%;
  }
  .el-table__empty-block{
    min-height:0px!important;
  }
</style>