<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="总人数" 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,
          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,
							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,
              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){
				console.log("............修改")
        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,
          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>
