<template>
  <!-- 营地：创建、编辑 -->
  <div>
    <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="name">
            <el-input v-model="form.name" placeholder="请输入营地名称" @blur="checkName()"></el-input>
            <span v-if="isExist" style="color:red;">标签名已存在</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="营地地址" prop="addressStr">
            <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="客服电话" prop="servicePhone">
            <el-input v-model="form.servicePhone" placeholder="请输入客服电话"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="联系人" prop="concat">
            <el-input v-model="form.concat" placeholder="请输入联系人"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="营地类型" prop="approvers">
        <span v-for="item in form.campsiteTagListVos"
              :key="item.id" style="border: 1px solid #ccc; padding: 5px 10px;border-radius: 5px;margin-right: 10px;">{{item.name}}</span>
        <el-button size="small" class="el-button el-button--primary" type="button" icon="edit"
                   @click="editLable(form.campsiteTagListVos)">编辑
        </el-button>
      </el-form-item>
      <el-row>
        <el-col :span="4">
          <el-form-item label="热度值">
            <el-input v-model="form.hot" placeholder="请输入热度值" type="number" min="0"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--BASE_API + -->
      <el-form-item label="封面图" :style="{display:'block'}" prop="logo">
        <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.logo) && !$utils.isEmpty(form.logo)" :src="form.logo"
               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-form-item label="海报背景" :style="{display:'block'}">
        <el-upload
          class="upload-demo"
          :headers="getHeaderWithToken"
          :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
          :show-file-list="false"
          :on-success="handlePosterSuccess"
          :on-progress="uploadPosterProcess"
          list-type="picture">
          <div slot="tip" class="el-upload__tip"><span style="color: red;">建议尺寸：485*485px</span></div>
          <el-progress v-show="imgPosterFlag == true" type="circle" :percentage="percent_poster"
                       style="margin-top: 20px"></el-progress>
          <img v-if="$utils.isString(form.posterBackground) && !$utils.isEmpty(form.posterBackground)&& !imgPosterFlag"
               :src="form.posterBackground" style="width:300px;max-height:300px;">
          <i v-else-if="!imgPosterFlag" 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-form-item label="轮播图" :style="{display:'block'}" prop="carouse">
        <el-upload
          class="upload-demo"
          :headers="getHeaderWithToken"
          :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
          :on-remove="handleRemove"
          :file-list="fileList2"
          :on-success="handleBannerSuccess"
          list-type="picture">
          <div slot="tip" class="el-upload__tip">最多上传5张 <span style="color: red;">建议尺寸：1080*644px</span></div>
          <el-button v-if="fileList2.length<5" size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <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-tab-pane label="配套&收费" name="second">
          <!--<Editor v-if="activeName2=='second'" @input="handelIntroduceIncrease" :value="form.configure" :myQuillEditor="'myQuillEditorIntroduce'" :activeName2="activeName2"></Editor>-->
          <div class="editor-container" v-if="activeName2=='second'">
            <UE :editorId="activeName2" :defaultMsg="form.configure" :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 {
        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: '',
                    imgTitle: undefined,
                    imgKeyword: undefined,
                    imgDesc: undefined,
                    id: undefined,
                    name: undefined,//营地名称
                    hot: 0,//营地热度
                    servicePhone: "",//客服电话
                    phone: "",//联系电话
                    province: undefined,//省份
                    provinceName: undefined,//省份名称
                    city: undefined,//市编号
                    cityName: undefined,//市名称
                    address: undefined,//详细地址
                    latitude: undefined,
                    longitude: 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,
                        type:'string',
                        trigger: 'blur',
                        message: '请输入联系电话',
                        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() {
            this.getAllLabelList();
        },
        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: {
            /**
             * 判断标签名是否已存在
             * */
            checkName() {
                this.form.name = (this.form.name).trim();
                if (!this.form.name) {
                    return;
                }
                let params = {
                    name: this.form.name
                };
                if (this.title == "编辑") {
                    params.id = this.form.id;
                }
                existCampsiteShop(params).then(response => {
                    if (response.status === 200) {
                        this.isExist = response.data;
                    } else {
                        this.$notify({
                            title: '失败',
                            message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
                            type: 'error',
                            duration: 2000
                        });
                    }
                });
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            /**
             * 编辑营地标签
             * */
            editLable(list) {
                console.log(list);
                this.editLableVisible = true;
            },
            /**
             * 创建
             * */
            create(formName) {
                const set = this.$refs;
                set[formName].validate(valid => {
                    if (valid) {
                        let carouse = [];//营地轮播图
                        this.form.carouse.map(function (item) {
                            let c = {
                                id: item.id,
                                imgUrl: item.imgUrl
                            };
                            carouse.push(c);
                        });
                        /**
                         * 营地类别
                         * */
                        let campsiteTagDTOS = [];
                        this.form.campsiteTagListVos.map(function (item) {
                            campsiteTagDTOS.push(item.id);
                        });
                        let params = {
                            name: this.form.name,//营地名称
                            logo: this.form.logo,//封面图
                            content: this.form.content,//营地详情
                            configure: this.form.configure,//配套&收费
                            hot: this.form.hot,//营地热度
                            campsiteTagDTOS: campsiteTagDTOS,//营地类别
                            carouselDTOS: carouse,//轮播图
                            concat: this.form.concat,//联系人
                            servicePhone: this.form.servicePhone,//客服电话
                            phone: this.form.phone,//联系电话
                            province: this.campsiteObj.province,//省份
                            provinceName: this.campsiteObj.provinceName,//省份名称
                            city: this.campsiteObj.city,//市编号
                            cityName: this.campsiteObj.cityName,//市名称
                            address: this.campsiteObj.address,//详细地址
                            latitude: this.campsiteObj.latitude,
                            longitude: this.campsiteObj.longitude,
                            posterBackground: this.form.posterBackground,//海报背景
                            alt: this.form.alt,
                            imgTitle: this.form.imgTitle,
                            imgKeyword: this.form.imgKeyword,
                            imgDesc: this.form.imgDesc
                        };
                        console.log(params);
                        this.isExistCampsiteShop("create", params);
                    } else {
                        return;
                    }
                });
            },
            /**
             * 判断营地名称是否已存在
             * */
            isExistCampsiteShop(type, datas) {
                if (!this.form.name) {
                    return;
                }
                let params = {
                    name: this.form.name
                };
                if (type == 'update') {//编辑
                    params.id = this.form.id;
                }
                existCampsiteShop(params).then(response => {
                    if (response.status === 200) {
                        this.isExist = response.data;
                        if (response.data) {
                            this.isCreate = false;
                        }
                        if (!response.data && type == "update") {//编辑
                            this.toUpdate(datas);
                        }
                        if (!response.data && type == "create") {
                            //创建
                            this.toCreate(datas);
                        }
                    } else {
                        this.$notify({
                            title: '失败',
                            message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
                            type: 'error',
                            duration: 2000
                        });
                    }
                });
            },
            /**
             * 编辑
             * */
            update(formName) {
                const set = this.$refs;
                set[formName].validate(valid => {
                    if (valid) {
                        this.isCreate = true;
                        let carouse = [];//营地轮播图
                        this.form.carouse.map(function (item) {
                            let c = {
                                id: item.id,
                                imgUrl: item.imgUrl
                            };
                            carouse.push(c);
                        });
                        /**
                         * 营地类别
                         * */
                        let campsiteTagDTOS = [];
                        this.form.campsiteTagListVos.map(function (item) {
                            campsiteTagDTOS.push(item.id);
                        });
                        let params = {
                            id: this.form.id,
                            name: this.form.name,//营地名称
                            logo: this.form.logo,//封面图
                            content: this.form.content,//营地详情
                            configure: this.form.configure,//配套&收费
                            hot: this.form.hot,//营地热度
                            campsiteTagDTOS: campsiteTagDTOS,//营地类别
                            carouselDTOS: carouse,//轮播图
                            concat: this.form.concat,//联系人
                            servicePhone: this.form.servicePhone,//客服电话
                            phone: this.form.phone,//联系电话
                            province: this.campsiteObj.province,//省份
                            provinceName: this.campsiteObj.provinceName,//省份名称
                            city: this.campsiteObj.city,//市编号
                            cityName: this.campsiteObj.cityName,//市名称
                            address: this.campsiteObj.address,//详细地址
                            latitude: this.campsiteObj.latitude,
                            longitude: this.campsiteObj.longitude,
                            posterBackground: this.form.posterBackground,//海报背景
                            alt: this.form.alt,
                            imgTitle: this.form.imgTitle,
                            imgKeyword: this.form.imgKeyword,
                            imgDesc: this.form.imgDesc
                        };
                        console.log(params);
                        this.isExistCampsiteShop("update", params);
                    } else {
                        return;
                    }
                });
            },
            /**
             * 更新
             * */
            toUpdate(params) {
                editCampsiteShop(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) {
                editCampsiteShop(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
                        });
                    }
                });
            },
            /**
             * 获取全部营地类型
             * */
            getAllLabelList() {
                campsiteAllTagList().then(response => {
                    this.allLabelList = response;
                });
            },

            /**
             * 关闭营地地址弹框
             * */
            campsiteEvent(obj) {
                this.showCampsiteVisible = false;
                if (obj) {
                    this.campsiteObj = obj;
                    let provinceObj = getRegionByCodes([obj.province]);
                    let cityObj = getRegionByCodes([obj.city]);
                    this.campsiteObj.provinceName = provinceObj[0].name;
                    this.campsiteObj.cityName = cityObj[0].name;
                    this.form.addressStr = this.campsiteObj.provinceName + this.campsiteObj.cityName + this.campsiteObj.address;
                    console.log(this.campsiteObj);
                }
            },
            /**
             * 编辑营地地址
             * */
            selectDestination() {
                let that = this;
                this.campsiteObj.showTitle = "营地地址编辑";
                this.campsiteObj.eventName = 'campsiteEvent';
                this.campsiteObj.keyword = this.campsiteObj.address;
                this.showCampsiteVisible = true;
            },
            /**
             * 关闭营地标签弹框
             * */
            tourLabelEvent(obj) {
                let that = this;
                this.editLableVisible = false;
                let arr = [];
                let ckeckList = [];
                if (obj) {
                    this.allLabelList.map(function (item) {
                        obj.map(function (b) {
                            if (item.name == b) {
                                arr.push(item);
                                ckeckList.push(b);
                            }
                        });
                    });
                    this.form.campsiteTagListVos = arr;
                    this.checkList = ckeckList;
                    console.log(obj);
                }
            },
            /**
             * 获取一条营地
             * */
            getOne(id) {
                let that = this;
                getOneCampsiteShop(id).then(response => {
                    this.form = response.data;
                    this.campsiteObj = {
                        address: response.data.address,
                        province: response.data.province,
                        provinceName: response.data.provinceName,
                        city: response.data.city,
                        cityName: response.data.cityName,
                        latitude: response.data.latitude,
                        longitude: response.data.longitude,
                    };
                    response.data.addressStr = this.campsiteObj.provinceName + this.campsiteObj.cityName + this.campsiteObj.address;
                    let arr = [];
                    that.allLabelList.map(function (b) {
                        response.data.campsiteTagListVos.map(function (item) {
                            if (item.id == b.id) {
                                arr.push(item.name);
                            }
                        });
                    });
                    this.checkList = arr;

                    //轮播
                    let fileList2 = [];
                    response.data.carouse.map(function (p) {
                        let pp = {
                            id: p.id,
                            url: p.imgUrl
                        };
                        fileList2.push(pp);
                    });
                    this.fileList2 = fileList2;
                    this.activeName2 = "first";
                })
            },
            /**
             * 旅游-弹框-取消
             * */
            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.configure = instance.getContent();
                    }
                });
            },
            /**
             * 删除banner
             * */
            handleRemove(file, fileList) {
                let list = [];
                fileList.map(function (item) {
                    if (item.url != file.url) {
                        list.push(item);
                    }
                });
                this.fileList2 = list;
                let arr = [];
                this.form.carouse.map(function (item) {
                    if (item.imgUrl != file.url) {
                        arr.push(item);
                    }
                });
                this.form.carouse = arr;
            },
            /**
             * 封面图上传
             * **/
            handleAvatarSuccess(res, file) {
                this.form.logo = res.data;
            },
            /**
             * banner上传
             * */
            handleBannerSuccess(res, file) {
                this.fileList2.push({url: res.data});
                this.form.carouse.push({imgUrl: res.data});
            },
            /**
             * 海报背景上传
             * **/
            handlePosterSuccess(res, file) {
                this.percent_poster = 0;
                this.imgPosterFlag = false;
                this.form.posterBackground = res.data;
            },
            /**
             * 海报背景图上传进度
             * */
            uploadPosterProcess(event, file, fileList) {
                this.imgPosterFlag = true;
                console.log(event.percent);
                this.percent_poster = Math.floor(event.percent);
            },
            /**
             * 清空旅游弹框数据
             */
            cleanForm() {
                this.campsiteObj = {name: ""};//营地地址
                this.fileList2 = [];
                this.activeName2 = '';//营地详情
                this.form = {
                    id: undefined,
                    name: undefined,//营地名称
                    hot: 0,//营地热度
                    servicePhone: "",//客服电话
                    phone: "",//联系电话
                    province: undefined,//省份
                    provinceName: undefined,//省份名称
                    city: undefined,//市编号
                    cityName: undefined,//市名称
                    address: undefined,//详细地址
                    latitude: undefined,
                    longitude: undefined,
                    content: '',//营地详情
                    concat: "",//联系人
                    logo: undefined,//封面图
                    configure: '',//配套&收费
                    campsiteTagListVos: [],//营地类型
                    carouse: [],//banner轮播
                    posterBackground: '',
                    alt: '',
                    imgTitle:undefined,
                    imgKeyword:undefined,
                    imgDesc:undefined
                };
                this.showCampsiteVisible = false;//编辑营地地址
            }
        }
    }
</script>
