<template>
  <ai-detail>
    <template slot="title">
      <ai-title :title="(params.id?'编辑':'添加')+menuName" isShowBack isShowBottomBorder @onBackClick="cancel(false)"/>
    </template>
    <template slot="content">
      <ai-card title="基本信息">
        <template #content>
          <el-form ref="form" class="ai-form" :model="form" label-width="110px" label-position="right">
            <el-form-item label="服务区域" style="width: 100%;" prop="codeName">
              <span style="color: #666;">{{ form.areaName }}</span>
            </el-form-item>
            <el-form-item style="width: 100%" label="姓名" prop="name"
                          :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
              <el-input size="small" placeholder="请输入姓名" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item style="width: 100%" label="电话" prop="phone"
                          :rules="[{ required: true, message: '请输入电话', trigger: 'blur' }]">
              <el-input size="small" placeholder="请输入电话" maxlength="20" v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item style="width: 100%;" label="是否公开" prop="isPublic"
                          :rules="[{ required: true, message: '请选择是否公开', trigger: 'change' }]">
              <el-radio-group v-model="form.isPublic">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="图片" style="width: 100%;" prop="picture">
              <ai-uploader
                  :instance="instance"
                  isShowTip
                  v-model="form.picture"
                  :limit="1">
              </ai-uploader>
            </el-form-item>
          </el-form>
        </template>
      </ai-card>
    </template>
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">提交</el-button>
    </template>
  </ai-detail>
</template>

<script>
export default {
  name: 'Add',

  props: {
    instance: Function,
    dict: Object,
    params: Object,
    menuName: String
  },

  data() {
    return {
      info: {},
      form: {
        areaId: '',
        name: '',
        areaName: '',
        phone: '',
        picture: [],
        isPublic: '1'
      },
      id: ''
    }
  },

  created() {
    if (this.params && this.params.areaId && !this.params.id) {
      this.form.areaId = this.params.areaId
      this.form.areaName = this.params.areaName
    }

    if (this.params && this.params.id) {
      this.id = this.params.id
      this.getInfo(this.params.id)
    }
  },

  methods: {
    getInfo(id) {
      this.instance.post(`/app/appvillageauxiliarypolice/queryDetailById?id=${id}`).then(res => {
        if (res.code === 0) {
          this.form = res.data
          this.form.picture = res.data.picture ? [{url: res.data.picture}] : []
        }
      })
    },

    onClose() {
      this.form.explain = ''
    },

    confirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.instance.post(`/app/appvillageauxiliarypolice/addOrUpdate`, {
            ...this.form,
            id: this.params.id || '',
            picture: this.form.picture.length ? this.form.picture[0].url : ''
          }).then(res => {
            if (res.code == 0) {
              this.$message.success('提交成功')
              setTimeout(() => {
                this.cancel(true)
              }, 600)
            }
          })
        }
      })
    },

    cancel(isRefresh) {
      this.$emit('change', {
        type: 'list',
        isRefresh: !!isRefresh
      })
    }
  }
}
</script>

<style scoped lang="scss">
</style>
