<template>
  <!-- 营地：创建、编辑 -->
  <div class="activity">
    <h4>{{title}}</h4>
    <el-form :model="form" :rules="rules" ref="form" label-width="90px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" placeholder="请输入活动标题"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="副标题" prop="subtitle">
            <el-input v-model="form.subtitle" placeholder="请输入活动副标题"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="活动主图" :style="{display:'block'}" prop="banner">
        <el-upload
          class="upload-demo"
          :headers="getHeaderWithToken"
          :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          list-type="picture">
          <div slot="tip" class="el-upload__tip"><span style="color: red;">建议尺寸：485*485px</span></div>
          <img v-if="$utils.isString(form.banner) && !$utils.isEmpty(form.banner)" :src="form.banner"
               style="width:300px;max-height:300px;">
          <i v-else class="el-icon-plus avatar-uploader-icon"
             style="lineHeight:100px;width:300px;height: 100px;border: 1px dashed #ccc;"></i>
        </el-upload>
      </el-form-item>
      <el-row>
        <el-col :span="8">
          <el-form-item label="alt">
            <el-input v-model="form.alt" type="text" placeholder="请输入替代文本"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="img-title">
            <el-input v-model="form.imgTitle" type="text" placeholder="请输入图片title"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="img-keyword">
            <el-input v-model="form.imgKeyword" type="text" placeholder="请输入图片关键字"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="img-desc">
            <el-input v-model="form.imgDesc" type="text" placeholder="请输入图片描述"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="总人数" prop="limitNum">
            <el-input v-model="form.limitNum" placeholder="请输入总人数" type="number" :maxlength=8></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker v-model="form.startTime" type="datetime" :editable="true" format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker v-model="form.endTime" type="datetime" :editable="true" format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="报名时间" prop="regCloseTime">
            <el-date-picker v-model="form.regCloseTime" type="datetime" :editable="true" format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="活动说明" prop="actDesc">
            <el-input v-model="form.actDesc" placeholder="请输入活动说明"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="排序" prop="rank">
            <el-input v-model="form.rank" placeholder="请输入活动说明" type="number" :maxlength=11></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="活动地址" prop="address">
            <el-input v-model="form.addressStr" readonly placeholder="请输入活动地址" :on-icon-click="selectDestination"
                      icon="edit"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="活动位置">
            <el-select class="filter-item" v-model="form.location" placeholder="请选择状态">
              <el-option :key="0" label="无限制" :value="0"></el-option>
              <el-option :key="1" label="欣欣官网" :value="1"></el-option>
              <el-option :key="2" label="滴房车官网" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!--BASE_API + -->
      <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
        <el-tab-pane label="活动图文内容" name="first">
          <!--<Editor  v-if="activeName2=='first'" @input="handelContentIncrease" :value="form.content" :myQuillEditor="'myQuillEditorContent'" :activeName2="activeName2"></Editor>-->
          <div class="editor-container" v-if="activeName2=='first'">
            <UE :editorId="activeName2" :defaultMsg="form.content" :config=config ref="ue"
                @ready="editorReadyEvent"></UE>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-form-item></el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" v-if="title=='创建' && !isCreate && campsiteshop_btn_update" @click="create('form')">确 定
      </el-button>
      <el-button type="primary" v-if="title=='编辑' && !isCreate && campsiteshop_btn_update" @click="update('form')">确 定
      </el-button>
    </div>
    <!--编辑营地地址-->
    <campsiteModal v-if="showCampsiteVisible && campsiteshop_btn_update" :obj="campsiteObj"
                   v-on:campsiteEvent="campsiteEvent"></campsiteModal>
    <!--编辑营地标签-->
    <campsiteLabelModal v-if="editLableVisible && campsiteshop_btn_update" :allLabelList="allLabelList"
                        :checkList="checkList" v-on:tourLabelEvent="tourLabelEvent"></campsiteLabelModal>
  </div>
</template>
<style>
  textarea {
    display: none;
  }

  .info {
    border-radius: 10px;
    line-height: 20px;
    padding: 10px;
    margin: 10px;
    background-color: #ffffff;
  }

  .el-upload-list {
    display: flex;
    width: 100px;
  }

  .el-upload-list li {
    margin-left: 10px;
  }
</style>
<script>
    //  import Editor from "../../modal/editorTool";//富文本
    import UE from '../../modal/Ueditor';//百度ue富文本
    import campsiteLabelModal from "../../tourManage/modal/tourLabelModal";//标签
    import campsiteModal from "./campsiteModal";//营地地址
    import {
        getOneCampsiteShop,
        campsiteAllTagList,
        editCampsiteShop,
        addCampsiteShop,
        existCampsiteShop
    } from 'api/campsiteManage';
    import {
        getOneActivityShop,
        editActivity
    } from 'api/officialWebsit/activity';
    import {
        getSonRegionByCodes,
        getRegionByCodes,
    } from 'api/base_info/region/';

    import rsCode from '../../../utils/rsCode';
    import {
        getToken
    } from '../../../utils/auth';
    import {mapGetters} from 'vuex';

    export default {
        props: ["oneRow", "title", "campsiteshop_btn_update"],
        name: 'upkeepDialog',
        components: {
            UE,
            campsiteModal,
            campsiteLabelModal
        },
        data() {
            var checkPhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('手机号不能为空'));
                } else {
                    const reg = /^[1](([3][0-9])|([4][5,7,9])|([5][0-9])|([6][6])|([7][1,2,3,5,6,7,8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/
                    console.log(reg.test(value));
                    if (reg.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('请输入正确的手机号'));
                    }
                }
            };
            return {
                imgPosterFlag: false,
                percent_poster: 0,
                BASE_API: process.env.BASE_API,
                defaultMsg: '这里是UE测试',
                config: {
                    initialFrameWidth: null,
                    initialFrameHeight: 350
                },
                isExist: false,//名称是否已存在
                campsiteObj: {},//营地地址
                departureList: [],//出发地列表
                departureObj: {name: ""},//出发地
                pathway: [],//途径地
                isCreate: false,//是否点击了创建-确定
                fileList2: [],
                activeName2: '',//行程亮点
                form: {
                    alt: undefined,
                    imgTitle: undefined,
                    imgKeyword: undefined,
                    imgDesc: undefined,
                    id: undefined,
                    title: undefined,//营地名称
                    subtitle: undefined,//营地热度
                    startTime: undefined,//客服电话
                    endTime: undefined,//联系电话
                    regCloseTime: undefined,//省份
                    provinceCode: undefined,//省份名称
                    province: undefined,//市编号
                    cityName: undefined,//市名称
                    cityCode: undefined,//详细地址
                    city: undefined,
                    townCode: undefined,
                    town: undefined,
                    address: undefined,
                    latitude: undefined,
                    longitude: undefined,
                    limitNum: 0,
                    isShow: 0,
                    isOpenReg: 0,
                    isDel: 0,
                    isPublish: 0,
                    isHomePage: 0,
                    crtUser: undefined,
                    crtName: undefined,
                    crtTime: undefined,
                    actDesc: undefined,
                    willNum: undefined,
                    location: 0,
                    rank: 0,
                    type: undefined,
                    banner: undefined,
                    content: '',//营地详情
                    concat: "",//联系人
                    logo: undefined,//封面图
                    configure: '',//配套&收费
                    campsiteTagListVos: [],//营地类型
                    carouse: [],//banner轮播
                    posterBackground: '',//海报背景
                },
                showCampsiteVisible: false,//编辑营地地址
                rules: {
                    name: {
                        type: 'string',
                        required: true,
                        message: '请输入营地名称',
                        trigger: 'blur'
                    },
                    servicePhone: {
                        type: 'string',
                        required: true,
                        message: '请输入客服电话',
                        trigger: 'blur'
                    },
                    phone: {validator: checkPhone, trigger: 'blur', required: true},
                    concat: {
                        type: 'string',
                        required: true,
                        message: '请输入联系人',
                        trigger: 'blur'
                    },
                    addressStr: {
                        type: 'string',
                        required: true,
                        message: '请输入活动地址',
                    }
                },
                checkList: [],//已选中的标签
                allCompanies: {},
                allCompaniesArr: [],
                oneTourDialogVisible: false,
                editLableVisible: false,//营地标签
                allLabelList: [],//全部营地标签
            }
        },
        created() {
        },
        watch: {
            oneTourDialogVisible(newValue, oldValue) {
                if (!newValue) {
                    this.cleanForm();
                }
            },
        },
        mounted() {
            this.cleanForm();
            if (this.title == "编辑") {
                let row = this.oneRow;
                this.getOne(row.id);
            } else {
                this.activeName2 = "first";
            }
            this.oneTourDialogVisible = true;
        },
        computed: {
            getHeaderWithToken() {
                return {Authorization: getToken()};
            },
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },

            handleChange(id) {
                console.log(id)
            },
            /**
             * 编辑营地标签
             * */
            editLable(list) {
                console.log(list);
                this.editLableVisible = true;
            },

            isExistCampsiteShop(type, datas) {
                console.log(datas)
                if (type == "update") {//编辑
                    this.toUpdate(datas);
                }
                if (type == "create") {
                    //创建
                    this.toCreate(datas);
                }
            },
            /**
             * 创建
             * */
            create(formName) {
                const set = this.$refs;
                if (this.form.startTime && (typeof this.form.startTime == "object")) {
                    this.form.startTime = this.form.startTime.getTime();
                }
                if (this.form.endTime && (typeof this.form.endTime == "object")) {
                    this.form.endTime = this.form.endTime.getTime();
                }
                if (this.form.regCloseTime && (typeof this.form.regCloseTime == "object")) {
                    this.form.regCloseTime = this.form.regCloseTime.getTime();
                }
                set[formName].validate(valid => {
                    if (valid) {
                        let params = {
                            alt: this.form.alt,
                            imgTitle:this.form.imgTitle,
                            imgKeyword:this.form.imgKeyword,
                            imgDesc:this.form.imgDesc,
                            id: this.form.id,
                            title: this.form.title,//营地名称
                            subtitle: this.form.subtitle,//营地热度
                            startTime: this.form.startTime,//客服电话
                            endTime: this.form.endTime,//联系电话
                            regCloseTime: this.form.regCloseTime,//省份
                            provinceCode: this.campsiteObj.province,//省份名称
                            province: this.campsiteObj.provinceName,//市编号
                            cityName: this.campsiteObj.cityName,//市名称
                            cityCode: this.campsiteObj.city,//详细地址
                            city: this.campsiteObj.cityName,
                            townCode: this.campsiteObj.townCode,
                            town: this.campsiteObj.town,
                            address: this.campsiteObj.address,
                            latitude: this.campsiteObj.latitude,
                            longitude: this.campsiteObj.longitude,
                            limitNum: this.form.limitNum,
                            isShow: this.form.isShow,
                            isOpenReg: this.form.isOpenReg,
                            isDel: this.form.isDel,
                            isHomePage: this.form.isHomePage,
                            isHomePage: this.form.isHomePage,
                            crtUser: this.form.crtUser,
                            crtName: this.form.crtName,
                            crtTime: this.form.crtTime,
                            actDesc: this.form.actDesc,
                            banner: this.form.banner,
                            willNum: this.form.willNum,
                            location: this.form.location,
                            rank: this.form.rank,
                            type: this.form.type,
                            content: this.form.content,//营地详情
                        };
                        console.log(params);
                        this.isExistCampsiteShop("create", params);
                    } else {
                        return;
                    }
                });
            },
            /**
             * 编辑
             * */
            update(formName) {
                const set = this.$refs;

                if (this.form.startTime && (typeof this.form.startTime == "object")) {
                    this.form.startTime = this.form.startTime.getTime();
                }
                if (this.form.endTime && (typeof this.form.endTime == "object")) {
                    this.form.endTime = this.form.endTime.getTime();
                }
                if (this.form.regCloseTime && (typeof this.form.regCloseTime == "object")) {
                    this.form.regCloseTime = this.form.regCloseTime.getTime();
                }
                set[formName].validate(valid => {
                    if (valid) {
                        this.isCreate = true;
                        let params = {
                            alt: this.form.alt,
                            imgTitle:this.form.imgTitle,
                            imgKeyword:this.form.imgKeyword,
                            imgDesc:this.form.imgDesc,
                            id: this.form.id,
                            title: this.form.title,//营地名称
                            subtitle: this.form.subtitle,//营地热度
                            startTime: this.form.startTime,//客服电话
                            endTime: this.form.endTime,//联系电话
                            regCloseTime: this.form.regCloseTime,//省份
                            provinceCode: this.campsiteObj.province,//省份名称
                            province: this.campsiteObj.provinceName,//市编号
                            cityName: this.campsiteObj.cityName,//市名称
                            cityCode: this.campsiteObj.city,//详细地址
                            city: this.campsiteObj.cityName,
                            townCode: this.campsiteObj.townCode,
                            town: this.campsiteObj.town,
                            address: this.campsiteObj.address,
                            latitude: this.campsiteObj.latitude,
                            longitude: this.campsiteObj.longitude,
                            limitNum: this.form.limitNum,
                            isShow: this.form.isShow,
                            banner: this.form.banner,
                            isOpenReg: this.form.isOpenReg,
                            isDel: this.form.isDel,
                            isHomePage: this.form.isHomePage,
                            isHomePage: this.form.isHomePage,
                            crtUser: this.form.crtUser,
                            crtName: this.form.crtName,
                            crtTime: this.form.crtTime,
                            actDesc: this.form.actDesc,
                            willNum: this.form.willNum,
                            location: this.form.location,
                            rank: this.form.rank,
                            type: this.form.type,
                            content: this.form.content,//营地详情
                        };
                        this.isExistCampsiteShop("update", params);
                    } else {
                        return;
                    }
                });
            },
            /**
             * 更新
             * */
            toUpdate(params) {
                editActivity(params).then(response => {
                    if (response.status === 200) {
                        this.$notify({
                            title: '成功',
                            message: '编辑成功',
                            type: 'success',
                            duration: 2000
                        });
                        this.$emit("oneCampsiteDialogEvent", true);
                    } else {
                        this.$notify({
                            title: '编辑失败',
                            message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
                            type: 'error',
                            duration: 2000
                        });
                    }
                });
            },
            /**
             * 创建
             * */
            toCreate(params) {
                editActivity(params).then(response => {
                    if (response.status === 200) {
                        this.$notify({
                            title: '成功',
                            message: '创建成功',
                            type: 'success',
                            duration: 2000
                        });
                        this.$emit("oneCampsiteDialogEvent", true);
                    } else {
                        this.$notify({
                            title: '创建失败',
                            message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
                            type: 'error',
                            duration: 2000
                        });
                    }
                });
            },
            /**
             * 关闭营地地址弹框
             * */
            campsiteEvent(obj) {
                this.showCampsiteVisible = false;
                if (obj) {
                    this.campsiteObj = obj;
                    console.log(obj)
                    let provinceObj = getRegionByCodes([obj.province]);
                    let cityObj = getRegionByCodes([obj.city]);
                    let townObj = getRegionByCodes([obj.townCode])
                    this.campsiteObj.provinceName = provinceObj[0].name;
                    this.campsiteObj.cityName = cityObj[0].name;
                    this.campsiteObj.town = townObj[0].name
                    this.campsiteObj.townCode = obj.townCode
                    this.form.addressStr = this.campsiteObj.provinceName + this.campsiteObj.cityName + this.campsiteObj.town + this.campsiteObj.address;
                    console.log(this.campsiteObj);
                }
            },
            /**
             * 编辑营地地址
             * */
            selectDestination() {
                let that = this;
                console.log(this.campsiteObj)
                this.campsiteObj.showTitle = "活动地址编辑";
                this.campsiteObj.eventName = 'campsiteEvent';
                this.campsiteObj.keyword = this.campsiteObj.address;
                this.showCampsiteVisible = true;
            },
            /**
             * 获取一条营地
             * */
            getOne(id) {
                let that = this;
                getOneActivityShop(id).then(response => {
                    this.form = response.data;
                    this.campsiteObj = {
                        address: response.data.address,
                        province: response.data.provinceCode,
                        provinceName: response.data.province,
                        city: response.data.cityCode,
                        cityName: response.data.city,
                        latitude: response.data.latitude,
                        longitude: response.data.longitude,
                        townCode: response.data.townCode,
                        town: response.data.town
                    };
                    response.data.addressStr = this.campsiteObj.provinceName + this.campsiteObj.cityName + this.campsiteObj.town + this.campsiteObj.address;
                })
            },
            /**
             * 旅游-弹框-取消
             * */
            cancel() {
                this.cleanForm();
                this.$emit("oneCampsiteDialogEvent", false);
            },
            /**
             * 配套&收费  富文本
             * */
            handelIntroduceIncrease(step) {
                this.form.configure = step;
            },
            /**
             * 富文本  营地详情
             * */
            editorReadyEvent(instance) {
                let t = this;
                instance.addListener('contentChange', () => {
                    if (t.activeName2 == "first") {
                        t.form.content = instance.getContent();
                    } else if (t.activeName2 == "second") {
                        t.form.actDesc = instance.getContent();
                    }
                });
            },
            /**
             * 封面图上传
             * **/
            handleAvatarSuccess(res, file) {
                console.log(res.data)
                this.form.banner = res.data;
            },

            /**
             * 清空旅游弹框数据
             */
            cleanForm() {
                this.campsiteObj = {name: ""};//营地地址
                this.fileList2 = [];
                this.activeName2 = '';//营地详情
                this.form = {
                    alt: undefined,
                    imgTitle:undefined,
                    imgKeyword:undefined,
                    imgDesc:undefined,
                    id: undefined,
                    title: undefined,//营地名称
                    subtitle: undefined,//营地热度
                    startTime: "",//客服电话
                    endTime: "",//联系电话
                    regCloseTime: undefined,//省份
                    provinceCode: undefined,//省份名称
                    province: undefined,//市编号
                    cityName: undefined,//市名称
                    cityCode: undefined,//详细地址
                    city: undefined,
                    townCode: undefined,
                    town: undefined,
                    address: undefined,
                    latitude: undefined,
                    longitude: undefined,
                    limitNum: 0,
                    isShow: 0,
                    isOpenReg: 0,
                    isDel: 0,
                    banner: undefined,
                    isPublish: 0,
                    isHomePage: 0,
                    crtUser: undefined,
                    crtName: undefined,
                    crtTime: undefined,
                    actDesc: undefined,
                    willNum: undefined,
                    location: 0,
                    rank: undefined,
                    type: undefined,
                    content: '',//营地详情
                    concat: "",//联系人
                    logo: undefined,//封面图
                    configure: '',//配套&收费
                    campsiteTagListVos: [],//营地类型
                    carouse: [],//banner轮播
                    posterBackground: '',//海报背景
                };
                this.showCampsiteVisible = false;//编辑营地地址
            }
        }
    }
</script>
<style>
  .activity .edui-editor {
    z-index: 2000 !important;
  }
</style>
