<template>
  <div>
    <xy-dialog :width="74" ref="dialog" :is-show.sync="isShow" type="form" :title="type === 'add' ? '新增月子会所' : '编辑月子会所'"
      :form="form" :rules="rules" @submit="submit">
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>会所名称：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.name" placeholder="请输入会所名称" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>

      <template v-slot:subheading>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            副标题：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.subheading" placeholder="请输入副标题" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>

      <template v-slot:area>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>所在区域：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.area" placeholder="所在区域" style="width: 300px">
              <el-option v-for="item in areas" :value="item.value" :key="item.value" :label="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>

      <template v-slot:merchantId>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>所属商户：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.merchantId" placeholder="请选择所属商户" style="width: 300px">
              <el-option v-for="item in merchants" :value="item.id" :key="item.id" :label="item.name"></el-option>
            </el-select>
          </div>
        </div>
      </template>

      <template v-slot:featuredLabel>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            特色标签：
          </div>
          <div class="xy-table-item-content">
            <div class="xy-table-item-content-label">
              <template v-for="(item,index) in form.featuredLabel">
                <el-tag type="primary" closable @close="labelClose(index)"
                  style="margin-right: 6px;margin-bottom: 4px;">{{item}}</el-tag>
              </template>
              <div style="margin-top: 15px;">
                <el-input clearable placeholder="请填写并添加特色标签" style="width: 300px" ref="labelInput" v-model="labelText">
                  <el-button type="primary" slot="append" icon="el-icon-plus" @click="appendLabel"></el-button>
                </el-input>
              </div>
            </div>
          </div>
        </div>
      </template>

      <template v-slot:relLabel>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            关联标签：
          </div>
          <div class="xy-table-item-content">
            <el-select multiple v-model="form.relLabel" placeholder="请选择关联标签" style="width: 300px">
              <el-option v-for="item in labels" :value="item.id" :key="item.id" :label="item.value"></el-option>
            </el-select>
          </div>
        </div>
      </template>

      <template v-slot:reach>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            是否到店：
          </div>
          <div class="xy-table-item-content">
            <el-switch v-model="form.reach" type="primary"></el-switch>
          </div>
        </div>
      </template>

      <template v-slot:state>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            是否启用：
          </div>
          <div class="xy-table-item-content">
            <el-switch v-model="form.state" type="primary"></el-switch>
          </div>
        </div>
      </template>

      <template v-slot:sortNumber>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            排序：
          </div>
          <div class="xy-table-item-content">
            <el-input-number :precision="0" :controls="false" v-model="form.sortNumber" placeholder="请输入排序" clearable
              style="width: 300px;"></el-input-number>
          </div>
        </div>
      </template>

      <template v-slot:content>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>内容：
          </div>
          <div class="xy-table-item-content" style="width:680px">
			<xyTinymce v-if="isShow" v-model="form.content"></xyTinymce>
<!--            <tinymce ref="tinymce" :height="200" v-model="form.content" id='tinymce'></tinymce>
 -->          </div>
        </div>
      </template>

      <template v-slot:recommend>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            是否推荐主页：
          </div>
          <div class="xy-table-item-content">
            <el-switch v-model="form.recommend" type="primary"></el-switch>
          </div>
        </div>
      </template>

      <template v-slot:videoFile>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            探店视频：
          </div>
          <div class="xy-table-item-content">
            <div v-if="form.videoFile" style="position: relative;">
              <video :src="form.videoFile" class="avatar" />
              <Button shape="circle" icon="md-close" type="error" size="small" class="img__delete"
                @click="form.videoFile = ''"></Button>
            </div>
            <el-upload v-else :limit="1" accept="video/*" class="avatar-uploader" list-type="picture-card"
              :action="action" :show-file-list="true" :on-error="uploadFailVideo" :on-success="uploadSuccessVideo"
              :before-upload="uploadBeforeVideo">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
      </template>

      <template v-slot:coverPicture>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            封面图：
          </div>
          <div class="xy-table-item-content">
            <div v-if="form.coverPicture" style="position: relative;">
              <img :src="form.coverPicture" class="avatar">
              <Button shape="circle" icon="md-close" type="error" size="small" class="img__delete"
                @click="form.coverPicture = ''"></Button>
            </div>
            <el-upload v-else accept="picture" :limit="1" class="avatar-uploader" list-type="picture-card"
              :action="action" :show-file-list="true" :on-error="uploadFailPic" :on-success="uploadSuccessPic"
              :before-upload="uploadBeforePic">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
      </template>

      <template v-slot:address>
        <div style="display: flex;flex-wrap: wrap">
          <div class="xy-table-item" style="margin-bottom: 20px;">
            <div class="xy-table-item-label">
              地址选择
            </div>
            <div class="xy-table-item-content">
              <avue-input-map style="width: 300px;" :params="option" placeholder="请选择地图" v-model="map"></avue-input-map>
            </div>
          </div>

          <div class="xy-table-item">
            <div class="xy-table-item-label">
              地址：
            </div>
            <div class="xy-table-item-content">
              <el-input clearable placeholder="请填写地址" v-model="form.address" style="width: 300px;" />
            </div>
          </div>
        </div>
      </template>

      <template v-slot:lng>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            经度：
          </div>
          <div class="xy-table-item-content">
            <el-input readonly v-model="form.lng" placeholder="请输入经度" clearable style="width: 120px;"></el-input>
          </div>
        </div>
      </template>

      <template v-slot:lat>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            纬度：
          </div>
          <div class="xy-table-item-content">
            <el-input readonly v-model="form.lat" placeholder="请输入纬度" clearable style="width: 120px;"></el-input>
          </div>
        </div>
      </template>

      <template v-slot:functionary>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            负责人：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.functionary" placeholder="请输入负责人" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>

      <template v-slot:functionaryPhone>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            负责人电话：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.functionaryPhone" placeholder="请输入负责人电话" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>

      <template v-slot:linkman>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            联系人：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.linkman" placeholder="请输入联系人" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>

      <template v-slot:linkmanPhone>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            联系人电话：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.linkmanPhone" placeholder="请输入联系人电话" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>

      <template v-slot:workTime>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            工作时间：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.workTime" placeholder="请输入工作时间" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>

      <template v-slot:online_customer_services_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            客服：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.online_customer_services_id" placeholder="请选择">
              <el-option v-for="item in listService" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
  import {
    store,
    show,
    save
  } from '@/api/confinementClub'
  import {
    index as merchantIndex
  } from '@/api/merchant'
  import {
    getparameter
  } from "@/api/system/dictionary"

  import {
    index as serviceIndex
  } from "@/api/marketing/service"
  import {
    Message
  } from 'element-ui'

  // import tinymce from '@/components/Tinymce'
  import xyTinymce from "@/components/XyTinymce/index.vue";
      import {replaceAll} from "@/utils/index"
  export default {
    components: {
      // tinymce
	  xyTinymce
    },
    data() {
      return {

        listService: [],
        id: '',
        isShow: false,
        type: '',
        merchants: [],
        areas: [],
        labels: [],
        action: `${process.env.VUE_APP_BASE_API}api/admin/upload-file`,

        labelText: '',
        map: {

        },
        option: {
          column: [{
            label: '坐标',
            prop: 'map',
            type: 'map',
            //高德初始化参数
            params: {
              zoom: 10,
              // zoomEnable: false,
              // dragEnable: false,
            }
          }]
        },
        form: {
          name: '',
          subheading: '',
          area: "",
          merchantId: '',
          featuredLabel: [], //特色标签
          relLabel: '', //关联标签
          reach: false, //是否到店,
          state: true, //状态
          sortNumber: 0,
          content: '',
          recommend: true,
          videoFile: '',
          coverPicture: '',
          address: '',
          lat: '', //纬度
          lng: '', //经度
          functionary: '', //负责人
          functionaryPhone: '',
          linkman: '',
          linkmanPhone: '',
          workTime: '',
          online_customer_services_id: ""
        },
        rules: {
          name: [{
            required: true,
            message: '请填写会所名称'
          }],
          content: [{
            required: true,
            message: '请填写内容'
          }],
          functionaryPhone: [{
            pattern: /^[1][3-9][\d]{9}/,
            message: '手机号格式错误'
          }],
          linkmanPhone: [{
            pattern: /^[1][3-9][\d]{9}/,
            message: '手机号格式错误'
          }],
          merchantId: [{
            required: true,
            message: '请选择所属商户'
          }]
        }
      }
    },
    methods: {
      loadService() {
        serviceIndex({
          page: 1,
          page_size: 999
        }).then(res => {
          this.listService = res.data;
        })
      },
      //上传
      uploadFailVideo(err) {
        console.log(err)
      },
      uploadSuccessVideo(response) {
        console.log(response)
        this.form.videoFile = response.url
      },
      uploadBeforeVideo(file) {
        if ((file.size / 1000) > 10240) {
          Message({
            type: 'warning',
            message: '上传视频大小超过10M！'
          })
          return false
        }
      },
      uploadFailPic(err) {
        console.log(err)
      },
      uploadSuccessPic(response) {
        console.log(response)
        this.form.coverPicture = response.url
      },
      uploadBeforePic(file) {
        if ((file.size / 1000) > 2048) {
          Message({
            type: 'warning',
            message: '上传图片大小超过2M！'
          })
          return false
        }
      },

      //特色标签添加
      appendLabel() {
        if (!this.$refs['labelInput'].getInput().value) return
        this.form.featuredLabel.push(this.$refs['labelInput'].getInput().value)
        this.labelText = ''
      },
      //特色标签删除
      labelClose(index) {
        this.form.featuredLabel.splice(index, 1)
      },

      async getLabels(number) {
        const res = await getparameter({
          number: number
        })
        if (number == "label") {
          this.labels = res?.detail
        } else if (number == "area") {
          this.areas = res?.detail
        }
      },
      async getMerchants() {
        const res = await merchantIndex({
          page: 1,
          page_size: 999
        })
        //console.log(res)
        this.merchants = res?.data
      },

      //show
      async getDetail() {
        const res = await show({
          id: this.id
        })
        console.log(res)
        this.form = {
          name: res?.name,
          subheading: res?.subheading,
          area: res?.area,
          merchantId: res?.merchant_id,
          featuredLabel: res?.featured_label?.split(',') || [], //特色标签
          relLabel: res?.rel_label?.split(',').map(item => Number(item)), //关联标签
          reach: !!res?.reach, //是否到店,
          state: !!res?.state, //状态
          sortNumber: res?.sort_number,
          content: res?.content,
          recommend: !!res?.recommend,
          videoFile: res?.video_file,
          coverPicture: res?.cover_picture,
          address: res?.address,
          lat: res?.latitude, //纬度
          lng: res?.longitude, //经度
          functionary: res?.functionary, //负责人
          functionaryPhone: res?.functionary_phone,
          linkman: res?.linkman,
          linkmanPhone: res?.linkman_phone,
          workTime: res?.work_time,
          online_customer_services_id: res?.online_customer_services_id
        }
        console.log(this.form)
        // this.$refs['tinymce'].setContent(this.form.content)
      },

      submit() {
        if (this.type === 'add') {
          console.log(this.form)
          store({
            name: this.form.name,
            merchant_id: this.form.merchantId,
            state: this.form.state ? 1 : 0,
            reach: this.form.reach ? 1 : 0,
            sort_number: this.form.sortNumber,
            featured_label: this.form.featuredLabel?.toString(),
            rel_label: this.form.relLabel?.toString(),
            // content: this.form.content,
            subheading: this.form.subheading,
            recommend: this.form.recommend,
            video_file: this.form.videoFile,
            cover_picture: this.form.coverPicture,
            latitude: this.form.lat,
            longitude: this.form.lng,
            address: this.form.address,
            functionary: this.form.functionary,
            functionary_phone: this.form.functionaryPhone,
            linkman: this.form.linkman,
            linkman_phone: this.form.linkmanPhone,
            work_time: this.form.workTime,
            area: this.form.area,
            online_customer_services_id: this.form.online_customer_services_id,
			content: replaceAll(this.form.content,'../storage/files',`${process.env.VUE_APP_BASE_API}storage/files`)
			
          
		  }).then(res => {
            Message({
              type: 'success',
              message: '新增月子会所商户成功'
            })
            this.isShow = false
            this.$emit('refresh')
          })
        }

        if (this.type === 'editor') {
          save({
            id: this.id,
            name: this.form.name,
            merchant_id: this.form.merchantId,
            state: this.form.state ? 1 : 0,
            reach: this.form.reach ? 1 : 0,
            sort_number: this.form.sortNumber,
            featured_label: this.form.featuredLabel?.toString(),
            rel_label: this.form.relLabel?.toString(),
            // content: this.form.content,
            subheading: this.form.subheading,
            recommend: this.form.recommend,
            video_file: this.form.videoFile,
            cover_picture: this.form.coverPicture,
            latitude: this.form.lat,
            longitude: this.form.lng,
            address: this.form.address,
            functionary: this.form.functionary,
            functionary_phone: this.form.functionaryPhone,
            linkman: this.form.linkman,
            linkman_phone: this.form.linkmanPhone,
            work_time: this.form.workTime,
            area: this.form.area,
            online_customer_services_id: this.form.online_customer_services_id,
			content: replaceAll(this.form.content,'../storage/files',`${process.env.VUE_APP_BASE_API}storage/files`)
			
          }).then(res => {
            Message({
              type: 'success',
              message: '编辑月子会所商户成功'
            })
            this.isShow = false
            this.$emit('refresh')
          })
        }
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          this.pictures = []
          this.getMerchants()
          this.getLabels("label")
          this.getLabels("area")
          this.loadService()
          if (this.type === 'editor') {
            this.getDetail()
          }
        } else {
          this.id = ''
          this.type = ''
          this.labelText = ''
          this.$refs['dialog'].reset()
          // this.$refs['tinymce'].setContent(' ')
        }
        this.map = {}
      },
      map(newVal) {
        this.form.lng = newVal[0]
        this.form.lat = newVal[1]
        //this.form.address = newVal[2]
      }
    }
  }
</script>

<style scoped lang="scss">
  .xy-table-item {
    &-label {
      width: 160px;
    }

    &-content {
      &-label {
        width: 300px;
        display: flex;
        flex-wrap: wrap;
        flex: 0;
      }
    }
  }

  ::v-deep .el-input__inner {
    text-align: left;
  }
</style>
<style>
  .avatar-uploader .el-upload {
    width: 110px;
    height: 110px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #BF617C;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 110px;
    height: 110px;
    line-height: 110px;
    text-align: center;
  }

  .avatar {
    width: 110px;
    display: block;
    border-radius: 6px;
  }

  .img__delete {
    transform: scale(0.7, 0.7);

    position: absolute;
    top: 1px;
    left: 4%;
  }
</style>
