<!--
    * @FileDescription: 添加渠道表单
    * @Author: kahu
    * @Date: 2022/8/25
    * @LastEditors: kahu
    * @LastEditTime: 2022/8/25
-->
<template>
  <div class="form_content">
    <el-dialog
      :close-on-click-modal="false"
      :title="dialogOption.title"
      :visible.sync="diaShow"
      width="40%"
      :before-close="handleClose"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="formRules"
        label-width="120px"
      >
        <el-form-item
          label="渠道名称："
          prop="channelName"
        >
          <el-input
            v-model="form.channelName"
            clearable
            size="mini"
            type="text"
            placeholder="请输入渠道名称"
          />
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="handleClose" size="mini" style="background-color: #fff;color: #000;">取 消</el-button>
        <el-button
          :loading="dialogOption.loading"
          @click="handleConfirm"
          size="mini" style="background-color: #3F9B6A;color: #fff;"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { add, edit } from '@/api/channel';
export default {
  name: 'Form',
  model: {
    prop: 'show',
    event: 'change'
  },
  props: {
    show: {
      type: Boolean,
      default: () => false
    },
    item: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: Object | null,
      default: () => ({
        id: null,
        channelName: null
      })
    }
  },
  data () {
    return {
      dialogOption: {
        loading: false,
        title: '新增渠道'
      },
      form: {
        id: null,
        channelName: null
      },
      formRules: {
        channelName: [
          { required: true, message: '请输入渠道名称', trigger: 'blur' },
          { min: 1, max: 20, message: '渠道名称长度在1-20个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    diaShow: {
      get () {
        return this.show
      },
      set (value) {
        this.$emit('change', value)
      }
    }
  },
  watch: {
    'item': {
      deep: true,
      handler () {
        if (this.item?.id) {
          this.dialogOption.title = '修改渠道'
          this.form = this.item
        } else {
          this.dialogOption.title = '添加渠道'
          this.handleResetForm()
        }
      }
    }
  },
  methods: {
    handleConfirm () {
      this.$refs.form.validate(async val => {
        if (!val) return this.$message.error('请完善表单')
        this.dialogOption.loading = true
        if (this.form.id) {
          await edit(this.form)
        } else {
          await add(this.form)
        }
        this.dialogOption.loading = false
        this.$message.success('添加成功')
        this.handleResetForm()
        this.$emit('confirm', this.form)
        this.diaShow = false
      })
    },
    handleClose () {
      this.handleResetForm()
      this.diaShow = false
      this.$emit('close', this.form)
    },
    handleResetForm () {
      this.$refs.form?.resetFields()
    }
  }
}
</script>

<style
  lang="scss"
  scoped
>
.form_content {

}
</style>
