<template>
  <div>
    <el-dialog title="添加无效理由" :visible.sync="dialog.showDialog" width="600px" :close-on-click-modal="false"  :before-close="handleClose" append-to-body>
        <el-form :model="form" ref="form" label-width="80px" label-position="left">
            <template >
                <div>
                    <el-form-item  label="法条" prop="name">
                        <el-select v-model="form.statuteId" placeholder="请选择" style="width:100%">
                            <el-option
                                v-for="item in provisionsList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="['5','4','8'].indexOf(form.statutesId) !=-1" label="涉及内容" prop="name">
                        <div></div>
                        <!-- <div v-if="form.statutesId == 5">说明书</div>
                        <div v-else>附图</div> -->
                    </el-form-item>
                    <el-form-item v-else label="权要" prop="name">
                        <el-select v-model="form.claimId" placeholder="请选择" style="width:100%">
                            <el-option
                                v-for="item in claims"
                                :key="item.sysOrder"
                                :label="`权要${Number(item.sysOrder)+1}`"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </template>
        </el-form>
        
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" :loading="dialog.btnLoading" @click="submit" >确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    projectId:{},
    statueType:{},
    claims:{
        type:Array,
        default:()=>{
            return []
        }
    }
  },
  data() {
    return {
        dialog:{
            showDialog:false,
            btnLoading:false
        },
        form:{},
        provisionsList : []
    };
  },
  watch: {},
  computed: {
    provisions(){
        return this.$store.state.dictMessage.dictMessage.STATUTE || []
    }
  },
  created() {},
  mounted() {},
  methods: {
    open(){
        this.form = {}
        const provisions = ['2','3','4']
        if(this.statueType == 1){//三性
            this.provisionsList = this.provisions.filter(item=>{
                return provisions.indexOf(item.value)!=-1
            })
        }else{
            this.provisionsList = this.provisions.filter(item=>{
                return provisions.indexOf(item.value)==-1
            })
        }
        this.dialog.showDialog = true
    },
    handleClose(){
        this.dialog.showDialog = false
    },
    submit(){
        var params = {
            projectId:this.projectId,
            statuteId:this.form.statuteId,
        }
        var obj = this.claims.find(item=>{
            return item.id == this.form.claimId
        })
        if(obj){
            params.claimSort = obj.sysOrder
            params.claimText = obj.content
        }
        this.dialog.btnLoading = true
        this.$api.addInvalidReason(params).then(response=>{
            if(response.code == 200){
                this.$emit('save',response.data)
                this.dialog.btnLoading = false
                this.handleClose()
            }
        }).catch(error=>{
            this.dialog.btnLoading = false
        })
        
    },
  },
};
</script>
<style lang="scss" scoped>
</style>