<template>
  <div>
    <el-dialog :title="title" :visible.sync="addVisible" width="650px" append-to-body :before-close="cancel">
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="栏位名称">
            <el-select v-model="form.fieldName" placeholder="请选择栏位名称" style="width:100%" @change="changeFieldName">
                <el-option
                    v-for="item in tableField"
                    :disabled="tableField2.findIndex(item1=>{return item1.fieldName == item.label})!=-1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label">
                </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitField" :loading="btnLoading2">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['reportId','tableFields'],
  data() {
    return {
        title:'',
        addVisible:false,
        btnLoading2:false,
        form:{},
        tableField:[
            {
                value:'2',
                label:'法院二审',
            },
            {
                value:'3',
                label:'法院三审',
            },
            {
                value:'4',
                label:'法院四审',
            },
            {
                value:'5',
                label:'法院五审',
            },
            {
                value:'6',
                label:'法院六审',
            },
            {
                value:'7',
                label:'法院七审',
            },
            {
                value:'8',
                label:'法院八审',
            },
            {
                value:'9',
                label:'法院九审',
            },
        ],
        tableField2:this.tableFields||[]
    };
  },
  watch: {
    tableFields(val){
        this.tableField2 = val
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    open(form){
        this.form = JSON.parse(JSON.stringify(form))
        if(form.id){
            this.title = '编辑显示栏位'
        }else{
            this.title = '添加显示栏位'
            var a = this.tableField.filter(item=>{
                return this.tableField2.findIndex(item1=>{item1.fieldName == item.label})==-1
            })
            this.$set(this.form,'fieldName',a[0].label)
            this.$set(this.form,'fieldKey','courtOptions'+a[0].value)
        }
        this.addVisible = true
    },
    changeFieldName(val){
        var i = this.tableField.find(item=>{
            return item.label == val
        }).value
        this.form.fieldKey = 'courtOptions'+i
    },
    //关闭添加显示栏位弹窗
    cancel(){
      this.form = {}
      this.addVisible = false
    },
    //确认添加显示栏位
    submitField(){
      this.btnLoading2 = true
      this.form.reportId = this.reportId
      this.form.fieldState = 1
      this.$api.addOrUpdateInvalidFields(this.form).then(response=>{
        if(response.code == 200){
          this.btnLoading2 = false
          if(this.form.id){
            this.$message.success('更新成功')
          }else{
            this.$message.success('添加成功')
          }
          this.cancel()
          this.$emit('submit')
        }
      }).catch(error=>{
        this.btnLoading2 = false
      })
    },
  },
};
</script>
<style lang="scss" scoped>
</style>