<template>
  <ai-detail>
    <template slot="title">
      <ai-title :title="params.id ? '编辑本村相册' : '添加本村相册'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
      </ai-title>
    </template>
    <template slot="content">
      <ai-card title="基本信息">
        <template #content>
          <el-form class="ai-form" :model="form" label-width="120px" ref="form">
            <el-form-item label="相册主题" style="width: 100%;" prop="type"
                          :rules="[{required: true, message: '请选择相册主题', trigger: 'blur'}]">
              <ai-select
                  v-model="form.type"
                  placeholder="请选择相册主题"
                  :selectList="dict.getDict('villagePictureAlbumType')">
              </ai-select>
            </el-form-item>
            <el-form-item prop="areaId" style="width: 100%;" label="发布地区"
                          :rules="[{required: true, pattern: /([^0]\d{2}|0[^0]\d|0\d[^0])$/, message: '请选择到村', trigger: 'change'}]">
              <ai-area-select @fullname="v => form.areaName = v" clearable always-show :instance="instance"
                              v-model="form.areaId" :disabled-level="disabledLevel"></ai-area-select>
            </el-form-item>
            <el-form-item label="图片" style="width: 100%;" prop="urlList" :rules="[{required: true,  message: '请上传图片'}]">
              <ai-uploader
                  :instance="instance"
                  v-model="form.urlList"
                  :limit="9">
              </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>
import {mapState} from 'vuex'

export default {
  name: 'Add',

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

  data() {
    return {
      info: {},
      form: {
        areaName: '',
        areaId: '',
        urlList: []
      },
      cropOps: {
        width: "336px",
        height: "210px"
      },
      id: ''
    }
  },

  computed: {
    ...mapState(['user'])
  },

  created() {
    this.form.areaId = this.user.info.areaId
    this.disabledLevel = this.user.info.areaList.length
    this.dict.load(['villagePictureAlbumType'])
    if (this.params && this.params.id) {
      this.id = this.params.id
      this.getInfo(this.params.id)
    }
  },

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

    confirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.instance.post(`/app/appvillagepicturealbum/addPictures`, {
            ...this.form,
            id: this.params.id,
            urlList: this.form.urlList.map(v => v.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>
