<template>
    <a-modal
    :title="title"
    :width="1100"
    :visible="visible"
    :maskClosable="false"
    @cancel="handleCancel"
    cancelText="关闭">
  </j-modal>
  <a-spin :tip="aSpinLoading" :spinning="spinning" class="spinOuter">
      <el-table 
      	:data="materialFields"
                  stripe
                  style="width: 100%">
                  <el-table-column
                    prop="fieldCode"
                    label="字段名称"
                    width="260">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.fieldCode"  ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="fieldName"
                    label="字段编码"
                    width="260">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.fieldName"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="materialCode"
                    label="选择材料"
                    width="280">
                    <template slot-scope="scope">
                      <el-select v-model="scope.row.materialCode">
				          <el-option v-for="(i, index) in materials" :key="index" :label="i.materialName" v-bind:value="i.materialCode"></el-option>
				        </el-select>
                    </template>
                  </el-table-column>            
                  <el-table-column
                    prop="operate"
                    label="操作">   
                    <template slot-scope="scope">
                      <el-button
                        size="mini" 
                        type="success" 
                        icon="el-icon-save" 
                        @click="handlesaveAnnualAssessment(scope.$index, scope.row)">保存
                      </el-button>
                      <el-button 
                        size="mini" 
                        type="danger" 
                        icon="el-icon-delete" 
                        @click="handleDeleteAnnualAssessment(scope.$index, scope.row)">删除
                      </el-button>                      
                    </template>                
                  </el-table-column>            
                </el-table>
                <div style="text-align: center;margin-top: 5px;">
                  <el-button 
                    type="primary" 
                    icon="el-icon-plus" 
                    size="mini" 
                    @click="handleAddAnnualAssessmentLine">新增字段
                  </el-button>
                 </div>
  </a-spin>
  
  </a-modal>
</template>

<script>

  import pick from 'lodash.pick'
  import { httpAction, getAction} from '@/api/manage'
  import { duplicateCheck } from '@/api/api'
  import JDictSelectTag from '@/components/dict/JDictSelectTag'  

  export default {
    components: {
      JDictSelectTag
    },
    data () {
      return {
      url: {
          listMattersField:'/ai/preExaminationMattersField/list',
          listMaterial:'/ai/preReviewMaterial/queryList',
        },
        title:'',
        width:800,
        visible: false,
        queryParam: {},
        materials: {},
        materialFields: [{id:"",fieldCode:"",fieldName:"",materialCode:""}],
        disableSubmit: false,
        aSpinLoading: '',
        eventCode: '',
        spinning: false,
        loadingTable: false,
      }
    },
    methods: {
    //增加字段
    handleAddAnnualAssessmentLine() {
      if (this.materialFields == undefined) {
        this.materialFields = new Array();
      }
      let obj = {};
      
      this.materialFields.push(obj);
    },
    //保存字段
    handlesaveAnnualAssessment(a, b) {
      console.log(a);
      console.log(b);
      if(!b.fieldName){
      	this.$message.warning("请输入字段名称")
      	return;
      }
      if(!b.fieldCode){
      	this.$message.warning("请输入字段编码")
      	return;
      }
      if(!b.materialCode){
      	this.$message.warning("请选择材料")
      	return;
      }
      if(b.id){
      	httpAction("/ai/preExaminationMattersField/edit", {id:b.id,fieldCode:b.fieldCode,fieldName:b.fieldName,materialCode:b.materialCode}, "post").then((res) => {
              if (res.success) {
                this.$message.success(res.message)
                console.log(123)
              } else {
                this.$message.warning(res.message)
              }
            })
      }else{
      	httpAction("/ai/preExaminationMattersField/add", {eventCode:this.eventCode,fieldCode:b.fieldCode,fieldName:b.fieldName,materialCode:b.materialCode}, "post").then((res) => {
              if (res.success) {
                this.$message.success(res.message)
                console.log(123)
              } else {
                this.$message.warning(res.message)
              }
            })
      }
      
    },
    //删除字段
    handleDeleteAnnualAssessment(index,data) {
      console.log(data);
			if(!data.id){
				this.materialFields.splice(index, 1)
			}else{
				httpAction("/ai/preExaminationMattersField/delete", {id:data.id}, "post").then((res) => {
              if (res.success) {
                this.$message.success(res.message)
               this.materialFields.splice(index, 1)
              } else {
                this.$message.warning(res.message)
              }
            })
			}
			
    },
      add () {
        this.visible=true
        this.$nextTick(()=>{
          this.$refs.realForm.add();
        })
      },
      get_material_data(){
      
      },
      edit (record) {
        this.visible=true
        this.eventCode = record.eventCode;
        this.queryParams={
        	eventCode:record.eventCode,
        	status:1
        }
        getAction(this.url.listMattersField, this.queryParams).then((res) => {
          if (res.success) {
          	this.materialFields = res.result;
            	console.log("--------------->",res.result);
          }
        })
        getAction(this.url.listMaterial, this.queryParams).then((res) => {
          if (res.success) {
            	console.log("--------------->",res.result);
            	this.materials = res.result;
          }
        })
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        this.$refs.realForm.submitForm();
      },
      submitCallback(){
        this.$emit('ok');
        this.visible = false;
      },
      handleCancel () {
        this.close()
      }
    }
  }
</script>
<style>
.ant-modal-footer{
	display:none;
}
</style>