<template>
  <el-dialog :visible="_visible" center @close="handleClose" title="设置行业" append-to-body>
    <table-editor mode="modal" title="行业" :columns="columns" :rules="rules" ref="editor" :data.sync="data" @rowUpdate="handleRowUpdate">
      <el-button type="primary" size="mini"  @click="onSave">保存</el-button>
    </table-editor>
  </el-dialog>
</template>

<script>
export default {
  props:['visible'],
  computed:{
    _visible:{
      get(){
        return this.visible
      },
      set(newVal){
        if(!newVal) this.$refs.editor.update([])
        this.$emit("update:visible", newVal)
      }
    }
  },
  data(){
    return {
      data:[],
      columns:[
        {
          prop:'industry',
          label:'请选择行业',
          type:'select',
          options:[]
        },
        {
          prop: 'qualification',
          label:'行业资质',
          type:'select',
          options:[
            {label:'需要',value:'1'},
            {label:'不需要',value:'0'},
          ]
        },
        {
          prop:'image',
          label:"行业资质图片",
          type:'image'
        }
      ],
      rules:{
        industry:[
          {
            required:true,
            trigger:'change',
            message:'请选择行业'
          },
        ],
        qualification:[
          {
            required:true,
            trigger:'change',
            message:'请选择行业资质'
          }
        ],
        image:[
          {
            required:true,
            trigger:'blur',
            message:'请上传行业资质图片'
          }
        ]
      }    
    }
  },
  mounted(){
    this.$set(this.columns,0,{
      ...this.columns[0],
       options:[
          {label:'需要',value:'1'},
          {label:'不需要',value:'0'},
        ]
    })
  },
  methods:{
    handleClose(){
      this._visible = false
    },
    handleRowUpdate({row}){
      this.rules.image = [{
        ...this.rules.image[0],
        required:row.qualification === "1"
      }]
    },
    onSave(){
      console.log(this.data)
    }
  }
}
</script>
