<template>
  <el-form
    ref="ruleForm"
    v-loading="loading"
    :model="ruleForm"
    status-icon
    :rules="rulesThis"
    :size="'small'"
    label-width="100px"
    class="supplierAdd"
  >
    <!--:disabled="type !== 'add' && type !== 'edit'"-->
    <el-row style="margin-top:10px">
      <el-col :span="4">
        <el-form-item label="店铺名称" prop="店铺名称属性">
            <el-select  v-model="ruleForm['店铺名称属性']" placeholder="店铺名称">
              <el-option />
            </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="4">
        <el-form-item label="店铺风格" prop="店铺风格属性">
          <el-checkbox-group v-model="ruleForm['店铺风格属性']">
            <el-checkbox label="1" />
          </el-checkbox-group>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
        <el-col :span="24"><div class="supplierAdd-title" style="margin: 6px 0 0 10px">店铺简介</div></el-col>
           <div style="padding:35px">
              <el-col :span="6">
                  <el-form-item label="最近装修时间" prop="最近装修时间属性">
                      <el-date-picker style="width:100%" placeholder="最近装修时间" v-model="ruleForm['最近装修时间属性']" />
                  </el-form-item>
              </el-col>
              <el-col :span="6">
                  <el-form-item label="停车位数" prop="停车位数属性">
                      <el-input-number style="width:100%" placeholder="停车位数" v-model="ruleForm['停车位数属性']" />
                  </el-form-item>
              </el-col>
               <el-col :span="24">
                  <el-form-item label="店铺简介" prop="店铺简介属性">
                      <el-input type="textarea" placeholder="店铺简介" v-model="ruleForm['店铺简介属性']" />
                  </el-form-item>
              </el-col>
           </div>
      <el-col :span="24"><div class="supplierAdd-title">曾举办活动</div></el-col>
      <el-col :span="24" style="padding:20px;padding-top:0px">
        <table-editor mode="table" :columns="activityColumns" :data="[]" :rules="activityRules" />
      </el-col>

      <el-col :span="24"><div class="supplierAdd-title">酒店服务设施</div></el-col>
      <el-col :span="24">
        <div style="padding:35px;padding-top:0px;box-sizing:border-box">
            <dynamic-tags />
         </div>
      </el-col>

      <el-col :span="24"><div class="supplierAdd-title">餐饮设施</div></el-col>
      <el-col :span="24">
        <div style="padding:35px;padding-top:0px;box-sizing:border-box">
            <dynamic-tags />
         </div>
      </el-col>

      <el-col :span="24"><div class="supplierAdd-title">客房服务设施</div></el-col>
      <el-col :span="24">
         <div style="padding:35px;padding-top:0px;box-sizing:border-box">
            <dynamic-tags />
         </div>
      </el-col>


      <el-col :span="24"><div class="supplierAdd-title">详情图片</div></el-col>
      <el-col :span="24" style="padding:20px;padding-top:0px">
        <table-editor mode="modal" :columns="pictureColumns" :data="[]" :rules="pictureRules" />
      </el-col>

      <el-col :span="24"><div class="supplierAdd-title">会议室</div></el-col>
      <el-col :span="24" style="padding:20px;padding-top:0px">
        <table-editor mode="modal" :columns="conferenceColumns" :data="[]" :rules="conferenceRules" />
      </el-col>

      <el-col :span="24"><div class="supplierAdd-title">客房</div></el-col>
      <el-col :span="24" style="padding:20px;padding-top:0px">
        <table-editor mode="modal" :columns="guestColumns" :data="[]" :rules="guestRules" />
      </el-col>

      <el-col :span="24"><div class="supplierAdd-title">会议服务设施</div></el-col>
      <el-col :span="24" style="padding:20px;padding-top:0px">
        <table-editor mode="table" :columns="serviceColumns" :data="[]" :rules="serviceRules" />
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import asyncRequest from '@/apis/service/serviceParam/supplierStore'
import resToken from '@/mixins/resToken'
import DynamicTags from "@/components/dynamic-tags"
import {
         pictureColumns,
         pictureRules,
         conferenceColumns,
         conferenceRules,
         guestColumns,
         guestRules,
         serviceColumns,
         serviceRules,
         activityColumns,
         activityRules
         } from "./columns"

export default {
    name: 'SupplierAdd',
    mixins: [resToken],
    components:{
      DynamicTags
    },
    props: ['showModel', 'id', 'type', 'sitem'],
    data() {
        return {
            loading: false,
            hand_name: '',
            pictureColumns,
            pictureRules,
            conferenceColumns,
            conferenceRules,
            guestColumns,
            guestRules,
            serviceColumns,
            serviceRules,
            activityColumns,
            activityRules,
            showModelThis: this.showModel,
            ruleForm: {},
            rulesThis: this.rules,
            rules: {}
        }
    },
    mounted() {
        this.initForm()
    },
    methods: {
        async initForm() {
            this.hand_name = ''
            this.loading = true
            this.resetFormData()
            this.rulesThis = this.rules
            await this.resetForm()
            this.loading = false
        },
        async resetForm() {
            // 重置
            await this.$nextTick(() => {
                if (this.$refs.ruleForm) {
                    this.$refs.ruleForm.resetFields()
                    this.$refs.ruleForm.clearValidate()
                    this.resetFormData()
                }
            })
        },
        resetFormData() {
            const {
                id, code,
                coop_state, source,
                type,
                category,
                delivery_way,
                supplier_type,
                level,
                pay_type,
                supplier_img,
                prove_img,
                contactor,
                mobile,
                position,
                registercode,
                name,
                nature,
                addr,
                legaler,
                registertime,
                scope,
                personid,
                person,
                telephone,
                email
            } = this.sitem || {}

            this.hand_name = person || ''
            this.ruleForm = {
                id: id || '',
                code: code || '',
                coop_state: coop_state || '',
                source: source || '',
                type: type || '',
                category: category || '',
                delivery_way: delivery_way || '',
                supplier_type: supplier_type || '',
                level: level || '',
                pay_type: pay_type || '',
                supplier_img: supplier_img || '',
                prove_img: prove_img ? (prove_img || '').split(',') : [],
                contactor: contactor || '',
                mobile: mobile || '',
                telephone: telephone || '',
                position: position || '',
                registercode: registercode || '',
                name: name || '',
                email: email || '',
                nature: nature || '',
                addr: addr || '',
                legaler: legaler || '',
                registertime: registertime || '',
                scope: scope || '',
                personid: personid ? [personid] : []
            }
        },
        closeImg(index) {
            this.ruleForm.prove_img.splice(index, 1)
            this.$refs.ruleForm.validateField('prove_img')
        },
        async submitForm() {
            await this.$refs.ruleForm.validate(async(valid) => {
                if (valid) {
                    if (this.loading) {
                        return
                    }
                    this.loading = true
                    const model = JSON.parse(JSON.stringify(this.ruleForm))
                    model.prove_img = model.prove_img.toString()
                    model.personid = model.personid.toString()
                    let res = {}
                    if (this.id === 'add') {
                        delete model['id']
                        res = await asyncRequest.add(model)
                    } else {
                        res = await asyncRequest.update(model)
                    }
                    this.loading = false
                    if (res && res.code === 0) {
                        const title = this.id === 'add' ? '添加成功!' : '修改成功!'
                        this.$notify.success({
                            title,
                            message: ''
                        })
                        this.showModelThis = false
                        // 刷新
                        this.$emit('refresh', res.data)
                    } else if (res && res.code >= 100 && res.code <= 104) {
                        await this.logout()
                    } else {
                        this.$message.warning(res.message)
                    }
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        deleteimg() {
            this.ruleForm.supplier_img = ''
            this.$refs.ruleForm.validateField('supplier_img')
        },
        handleHandoverName(e) {
            if (e && e.id) {
                this.ruleForm.personid = [e.id]
            } else {
                this.ruleForm.personid = []
            }
            this.$refs.ruleForm.validateField('personid')
        },
        type_search_change(e) {
            const { id } = e
            this.ruleForm.nature = id || ''
            this.$refs.ruleForm.validateField('nature')
        },

        // 图片上传成功
        async UploadSuccessEventsupplier_img(data) {
            await this.UploadSuccessEvent(1, data)
        },
        // //图片上传成功
        // async UploadSuccessEventgood_img(data) {
        //   await this.UploadSuccessEvent(2, data);
        // },
        // 图片上传成功
        async UploadSuccessEventgood_info_img(data) {
            await this.UploadSuccessEvent(3, data)
        },
        // 图片上传成功
        async UploadSuccessEvent(type, data) {
            const { url } = data
            if (url === 'noToken') {
                await this.logout()
            } else {
                if (type === 1) {
                    this.ruleForm.supplier_img = url
                    this.$refs.ruleForm.validateField('supplier_img')
                } else if (type === 2) {
                    this.ruleForm.good_img = url
                    this.$refs.ruleForm.validateField('good_img')
                } else {
                    this.ruleForm.prove_img.push(url)
                    this.$refs.ruleForm.validateField('prove_img')
                }
                this.$message.success('图片上传成功!')
            }
        },
        // 图片上传失败
        UploadErrorEventsupplier_img(res) {
            this.imgUploadError(1, res)
        },
        // //图片上传失败
        // UploadErrorEventgood_img(res) {
        //   this.imgUploadError(2, res);
        // },
        // 图片上传失败
        UploadErrorEventgood_info_img(res) {
            this.imgUploadError(3, res)
        },
        imgUploadError(type, res) {
            if (res !== 'break') {
                this.$message.error('图片上传失败!')
                this.$refs.ruleForm.validateField(
                    type === 1 ? 'supplier_img' : type === 2 ? 'good_img' : 'good_info_img'
                )
            }
        },
        // 判断图片规格
        beforeAvatarUpload(file) {
            let isJPG = false
            if (
        file.type === 'image/jpg' ||
        file.type === 'image/png' ||
        file.type === 'image/jpeg'
      ) {
                isJPG = true
            }
            const isLt2M = file.size / 1024 / 1024 < 1
            if (!isJPG) {
                this.$message.error('图片格式不正确！')
            }
            if (!isLt2M) {
                this.$message.error('图片大小不能超过 1MB!')
            }
            return isJPG && isLt2M
        }
    }
}
</script>

<style lang="scss" scoped>
.supplierAdd {
  .good_info_img_div {
    ul {
      width: 100%;
      li {
        float: left;
        width: 55px;
        height: 55px;
        padding: 0 5px 0 0;
        .img-show-li-div {
          width: 50px;
          height: 50px;
          border: 1px solid #dfe4ed;
          background: #dfe4ed;
          position: relative;
          img.img-show {
            width: 100%;
            height: 100%;
            position: relative;
            display: inline-block;
          }
          i.el-icon-close {
            position: absolute;
            z-index: 2;
            top: 0;
            right: 0;
            color: #dfe4ed;
          }
          &:hover {
            i.el-icon-close {
              cursor: pointer;
              color: #6954f0;
            }
          }
        }
      }
    }
  }
  .supplierAdd-title {
    border-left: 5px solid #006eff;
    margin: 6px 0 25px 10px;
    height:120%;
    box-sizing: border-box;
    padding: 0 0 0 10px;
  }
}
</style>
