<template>
  <ai-detail class="add-products">
    <template #title>
      <ai-title title="特色农产品" isShowBack :isShowBottomBorder="true" @onBackClick="$emit('goto')"></ai-title>
    </template>
    <template #content>
      <ai-card title="基本信息">
        <template #content>
          <el-form :model="ruleForm" label-width="120px" ref="ruleForm" :rules="rules" style="padding-top:16px;">
            <el-form-item label="产品名称" prop="title">
              <el-input size="small" v-model="ruleForm.title" clearable placeholder="请输入..." style="width: 240px;" maxLength="100"></el-input>
            </el-form-item>
              <el-form-item label="经营单位" prop="businessUnit">
              <el-input size="small" v-model="ruleForm.businessUnit" clearable placeholder="请输入..." style="width: 240px;" maxLength="50"></el-input>
            </el-form-item>
              <el-form-item label="联系人" prop="contactPerson">
              <el-input size="small" v-model="ruleForm.contactPerson" clearable placeholder="请输入..." style="width: 240px;"  maxLength="50"></el-input>
            </el-form-item>
              <el-form-item label="联系方式" prop="contactPhone">
              <el-input size="small" v-model="ruleForm.contactPhone" clearable placeholder="请输入..." style="width: 240px;" maxLength="11"></el-input>
            </el-form-item>
              <el-form-item label="地址" prop="address">
              <el-input size="small" v-model="ruleForm.address" clearable placeholder="请输入..." style="width: 240px;" maxLength="20"></el-input>
            </el-form-item>
            <el-form-item label="文字介绍" prop="content">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                maxLength="200"
                v-model="ruleForm.content">
              </el-input>
            </el-form-item>
            <el-form-item prop="areaId" label="发布地区">
              <ai-area-select clearable always-show :instance="instance"
                v-model="ruleForm.areaId"
                :disabled-level="disabledLevel">
              </ai-area-select>
            </el-form-item>
            <el-form-item label="图片介绍">
              <span class="upload-more" style="left:-70px">(最多5张)</span>
              <ai-uploader :instance="instance" v-model="ruleForm.photo" :limit="5"></ai-uploader>
              <!-- <el-upload
                class="upload-demo upload-list-mini"
                ref="upload"
                multiple
                action
                list-type="picture-card"
                :file-list="fileList"
                :limit="5"
                :disabled="fileList.length === 5"
                :http-request="uploadFile"
                :on-remove="handleRemove"
                :on-change="handleChange"
                accept=".jpeg,.jpg,.png">
                <div class="upload-img-small mar-t16">
                  <span class="iconfont iconPhoto iconPhoto2"></span>
                  <div class="upload-text">上传照片</div>
                </div>
              </el-upload> -->
            </el-form-item>
          </el-form>
        </template>
      </ai-card>
    </template>
    <template #footer>
      <template class="bottom-bar" v-if="!isEdit">
        <el-button size="small" style="width: 92px;" @click="$emit('goto')">取消</el-button>
        <el-button type="primary" size="small" style="width: 92px;" @click="confirm('ruleForm', '0')">保存</el-button>
        <el-button type="primary" size="small" style="width: 92px;" @click="confirm('ruleForm', '1')">保存并发布</el-button>
      </template>
      <template class="bottom-bar" v-if="isEdit && ruleForm.status != '1'">
        <el-button size="small" style="width: 92px;" @click="$emit('goto')">取消</el-button>
        <el-button type="primary" size="small" style="width: 92px;" @click="confirm('ruleForm', '0')">修改</el-button>
        <el-button type="primary" size="small" style="width: 92px;" @click="confirm('ruleForm', '1')">修改并发布</el-button>
      </template>
      <template class="bottom-bar" v-if="isEdit && ruleForm.status  == '1'">
        <el-button size="small" style="width: 92px;" @click="$emit('goto')">取消</el-button>
        <el-button type="primary" size="small" style="width: 92px;" @click="confirm('ruleForm', '1')">修改</el-button>
      </template>
    </template>
  </ai-detail>
</template>

<script>
import { mapState } from 'vuex';

export default {
	name: 'add-products',
	props: {
		instance: Function,
		dict: Object,
		permissions: Function,
		detailTitle: String,
		isEdit: Boolean,
		areaId: String,
		detailId: String,
    disabledLevel: Number
	},
	data() {
    var transferInAreaIdPass = (rule, value, callback) => {
      this.instance.post(`admin/area/queryAreaFullNameByList?ids=` + value).then(res => {
        if (value) {
          let list = res.data[value]
          if (list.length < 5) {
            callback(new Error('发布地区需选到村级'));
          } else {
            callback();
          }
        }
      })
    }
		return {
			ruleForm: {
        type: '3',
				title: '',
				content: '',
				areaId: '',
				createUnitName: '',
				createUserName: '',
				status: '',
				businessUnit: '',
				contactPerson: '',
				contactPhone: '',
        photo: [],
        address: '',
			},
			rules: {
				title: [
					{required: true, message: '请输入产品名称', trigger: 'change'}
				],
				businessUnit: [
					{required: true, message: '请输入经营单位', trigger: 'change'}
				],
				contactPerson: [
					{required: true, message: '请输入联系人', trigger: 'change'}
				],
				contactPhone: [
					{required: true, message: '请输入联系方式', trigger: 'change'}
				],
				address: [
					{required: true, message: '请输入地址', trigger: 'change'}
				],
        content: [
					{required: true, message: '请输入文字介绍', trigger: 'change'}
        ],
        areaId: [
          // {required: true, validator: transferInAreaIdPass, trigger: 'blur'}
          {required: true, message: '请选择发布地区', trigger: 'change'}
				],
      },
			fileList: []
		};
	},
	methods: {
		cancel() {
			this.$emit('goto');
    },
    confirm(formName, status) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.status = status
          this.confirmAjax();
        } else {
          return false;
        }
      });
    },
    confirmAjax() {
      this.instance.post('/app/appcountrysidetourism/addOrUpdate', {
        ...this.ruleForm,
        photo: JSON.stringify(this.ruleForm.photo)
      }).then(res => {
        if (res && res.code == 0) {
        this.detailId ? this.$message.success('编辑成功') : this.$message.success('添加成功');
        this.cancel();
        }
      });
    },
    getDetail() {
      this.instance.post(`/app/appcountrysidetourism/queryDetailById?id=${this.detailId}`).then(res => {
        if (res && res.code == 0) {
          this.ruleForm = {...res.data}
          this.ruleForm.photo = JSON.parse(this.ruleForm.photo)
        }
      });
    }
	},
	mounted() {
    if (this.detailId) {  //编辑
			this.getDetail()
		} else {  //新增
      this.ruleForm.areaId = this.areaId
      this.ruleForm.createUnitName = this.user.info.unitName
      this.ruleForm.createUserName = this.user.info.name
    }
	},
	computed: {
		...mapState(['user'])
	},
};
</script>
