<template>
  <ai-detail class="form-add">
    <ai-title :title="pageTitle" slot="title" isShowBack  @onBackClick="cancel(false)">
      <template #rightBtn>
        <el-button @click="onConfirm(0)" icon="iconfont iconCreate_Files" v-if="form.status !== '1' && params.templateType == 0">保存为草稿</el-button>
        <el-button type="primary" icon="iconfont iconRepulsebeifen" @click="toPublish">{{ params.templateType == 1 ? '保存模板' : '发布' }}</el-button>
      </template>
    </ai-title>
    <template #content>
      <el-scrollbar class="left">
        <div class="left-item" v-for="(component, index) in components" :key="index">
          <div class="left-item__title">
            <h2>{{ component.label }}</h2>
            <span>{{ component.tips }}</span>
          </div>
          <div class="left-item__list">
            <draggable
              class="components-draggable"
              :list="component.children"
              :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
              :clone="cloneComponent"
              :sort="false"
              @end="onEnd">
              <div class="left-item__item" v-for="(item, i) in component.children" :key="i" @click="clone(item)">
                <i class="iconfont" :class="item.icon"></i>
                <span>{{ item.label }}</span>
              </div>
            </draggable>
          </div>
        </div>
      </el-scrollbar>
      <el-scrollbar class="middle">
        <div class="middle-content">
          <div class="middle-content__wrapper">
            <div :class="[activeIndex === -1 ? 'active' : '']" @click="activeIndex = -1">
              <div class="left-item__item left-item__item--banner" key="banner">
                <img v-if="form.headPicture.length" :src="form.headPicture[0].url">
                <div class="config-item__banner" v-else>
                  <i class="iconfont iconAdd"></i>
                  <span>添加图片</span>
                </div>
              </div>
              <div class="left-item__item left-item__item--formname" key="title">
                <h2>{{ form.title }}</h2>
              </div>
              <div class="left-item__item left-item__item--text" key="text">
                <p>{{ form.tableExplain }}</p>
              </div>
            </div>
            <draggable
              class="middle-draggable"
              style="height: 100%;"
              v-model="targetList"
              :animation="340"
              scroll
              element="div"
              draggable=".components-item"
              group="componentsGroup"
              :sort="true">
              <div
                class="left-item__item components-item"
                v-for="(item, i) in targetList"
                :class="[activeIndex === i ? 'active' : '']"
                @click="activeIndex = i"
                :key="i">
                <div class="left-item__item--remove" title="删除" @click.stop="removeItem(i)">
                  <i class="iconfont iconDelete"></i>
                </div>
                <div class="left-item__item--title">
                  <i :style="{opacity: item.required ? 1 : 0}">*</i>
                  <span>{{ i + 1 }}. </span>
                  <h2>{{ item.label }}</h2>
                </div>
                <div class="left-item__item--wrapper">
                  <template v-if="(item.type === 'radio')" >
                    <div class="radio-item" v-for="(field, index) in item.options" :key="index" >
                      <input type="radio" disabled value="" />
                      <img :src="field.img[0].url" v-if="field.img.length">
                      <label>{{ field.label }}</label>
                    </div>
                  </template>
                  <template v-if="item.type === 'upload'">
                    <div class="left-item__item--upload">
                      <i class="iconfont iconAdd"></i>
                      <span>添加图片</span>
                    </div>
                  </template>
                  <template v-if="item.type === 'select'" >
                    <el-select placeholder="请选择" disabled v-model="values" style="width: 100%;">
                      <el-option
                        v-for="(item, index) in item.options"
                        :key="index"
                        :label="item.label"
                        :value="item.label">
                      </el-option>
                    </el-select>
                  </template>
                  <template v-if="(item.type === 'checkbox')" >
                    <div class="radio-item" v-for="(field, index) in item.options" :key="index" >
                      <input type="checkbox" disabled value="" />
                      <img :src="field.img[0].url" v-if="field.img.length">
                      <label>{{ field.label }}</label>
                    </div>
                  </template>
                  <template v-if="(item.type === 'input')" >
                    <div class="text-item">
                      <input :placeholder="item.placeholder" disabled>
                    </div>
                  </template>
                  <template v-if="(item.type === 'textarea')" >
                    <div class="textarea-item" resize="none">
                      <textarea :placeholder="item.placeholder" disabled></textarea>
                    </div>
                  </template>
                </div>
              </div>
            </draggable>
          </div>
        </div>
      </el-scrollbar>
      <el-scrollbar class="right">
        <div class="right-item" style="margin-top: 0;">
          <div class="right-item__maintitle">
            <h2>{{ currComponentTitle }}</h2>
          </div>
        </div>
        <template v-if="activeIndex === -1">
          <div class="right-item">
            <div class="right-item__title no-solid">
              <h2>头图</h2>
            </div>
            <div class="right-item__content right-item__content--banner">
              <ai-uploader v-model="form.headPicture" :maxSize="2" :limit="1" :isShowTip="false" :instance="instance" @change="onheadPictureChange">
                <template #trigger>
                  <div class="config-item__banner" v-if="!form.headPicture.length">
                    <i class="iconfont iconAdd"></i>
                    <span>添加图片</span>
                  </div>
                </template>
              </ai-uploader>
            </div>
            <div class="right-item__tips">建议上传比例为375 x 235px，且小于10M</div>
          </div>
          <div class="right-item">
            <div class="right-item__title no-solid">
              <div class="right-item__title--left">
                <h2>显示头图</h2>
              </div>
              <el-switch
                @change="onHeadImgChange"
                v-model="form.isShowheadPicture">
              </el-switch>
            </div>
          </div>
          <div class="right-item">
            <div class="right-item__title no-solid">
              <h2>表单名称</h2>
            </div>
            <div class="right-item__content">
              <el-input placeholder="问卷调查" :maxlength="30" show-word-limit v-model="form.title"></el-input>
            </div>
          </div>
          <div class="right-item__group">
            <div class="right-item">
              <div class="right-item__title no-solid">
                <h2>表单说明</h2>
              </div>
              <div class="right-item__content">
                <el-input type="textarea" :rows="5" :maxlength="255" show-word-limit placeholder="问卷调查" v-model="form.tableExplain"></el-input>
              </div>
            </div>
            <div class="right-item">
              <div class="right-item__title no-solid">
                <div class="right-item__title--left">
                  <h2>显示说明</h2>
                </div>
                <el-switch
                  @change="form.tableExplain = ''"
                  v-model="form.isShowTableExplain">
                </el-switch>
              </div>
            </div>
          </div>
          <div class="right-item__group">
            <div class="right-item">
              <div class="right-item__title no-solid">
                <h2>按钮名称</h2>
              </div>
              <div class="right-item__content">
                <el-input placeholder="请输入按钮名称" v-model="form.buttonExplain"></el-input>
              </div>
            </div>
          </div>
        </template>
        <div class="right-item" v-if="activeIndex > -1">
          <div class="right-item__title no-solid">
            <h2>标题名称</h2>
          </div>
          <div class="right-item__content">
            <el-input placeholder="标题名称" :maxlength="200" show-word-limit v-model="currTarget.label"></el-input>
          </div>
        </div>
        <div class="right-item right-item__select" v-if="currTarget.type === 'radio' || currTarget.type === 'select' || currTarget.type === 'checkbox'">
          <div class="right-item__title no-solid">
            <h2>选项设置</h2>
          </div>
          <div class="right-item__select--wrapper">
            <draggable
              v-model="currTarget.options"
              :animation="340"
              group="select"
              handle=".mover"
              :sort="true">
              <div class="select-item" v-for="(item, index) in currTarget.options" :key="index">
                <i class="iconfont iconjdq_led_show mover" :style="{marginRight: currTarget.type === 'select' ? '10px' : '0'}"></i>
                <ai-uploader v-model="item.img" :limit="1" :isShowTip="false" :instance="instance" v-if="currTarget.type !== 'select'">
                  <template #trigger>
                    <div class="config-item__select" v-show="!item.img.length">
                      <i class="iconfont iconfangda"></i>
                    </div>
                  </template>
                </ai-uploader>
                <el-input placeholder="请输入选项名" :maxlength="100" show-word-limit v-model="item.label"></el-input>
                <i class="iconfont iconDelete" @click="removeOptions(index)"></i>
              </div>
            </draggable>
          </div>
          <el-button type="text" class="add-select" @click="addOptions">添加选项</el-button>
        </div>
        <div class="right-item__group" v-if="activeIndex > -1">
          <div class="right-item" v-if="currTarget.type === 'input' || currTarget.type === 'textarea'">
            <div class="right-item__title no-solid">
              <div class="right-item__title--left">
                <h2>说明文字</h2>
              </div>
            </div>
            <el-input placeholder="请输入说明文字" v-model="currTarget.placeholder"></el-input>
          </div>
          <div class="right-item">
            <div class="right-item__title no-solid">
              <div class="right-item__title--left">
                <h2>是否必填</h2>
              </div>
              <el-switch v-model="currTarget.required"></el-switch>
            </div>
          </div>
          <div class="right-item" v-if="currTarget.type !== 'upload'">
            <div class="right-item__title no-solid">
              <div class="right-item__title--left">
                <h2>答案与分值</h2>
              </div>
              <el-switch
                v-model="currTarget.isShowPoints">
              </el-switch>
            </div>
          </div>
          <template v-if="currTarget.isShowPoints">
            <div class="right-item" v-if="currTarget.pointType === '0'">
              <div class="right-item__title no-solid">
                <h2>正确答案</h2>
              </div>
              <div class="right-item__content right-item__content--select-answer">
                <el-select
                  style="width: 100%;"
                  v-if="currTarget.type === 'radio' || currTarget.type === 'select'"
                  clearable
                  v-model="currTarget.answer">
                  <el-option
                    v-for="(item, index) in currTarget.options"
                    :key="index"
                    :label="item.label.length > 60 ? item.label.substr(0, 50) + '...' : item.label"
                    :value="item.label">
                  </el-option>
                </el-select>
                <el-checkbox-group v-model="currTarget.answer" v-if="currTarget.type === 'checkbox'">
                  <el-checkbox v-for="(item, index) in currTarget.options" :label="item.label" :key="index">{{ item.label }}</el-checkbox>
                </el-checkbox-group>
                <el-input placeholder="正确答案" v-model="currTarget.answer" v-if="currTarget.type === 'input'"></el-input>
                <el-input placeholder="正确答案" :rows="4" v-model="currTarget.answer" v-if="currTarget.type === 'textarea'"></el-input>
              </div>
            </div>
            <div class="right-item" v-if="currTarget.pointType === '0'">
              <div class="right-item__title">
                <h2>本题分值</h2>
              </div>
              <div class="right-item__content">
                <el-input placeholder="分值" @change="onKeyup" v-model="currTarget.points">
                  <span slot="append">分</span>
                </el-input>
              </div>
            </div>
            <div class="right-item" v-if="currTarget.type === 'checkbox' || currTarget.type === 'radio' || currTarget.type === 'select'">
              <div class="right-item__title no-solid">
                <h2>计分方式</h2>
              </div>
              <div class="right-item__content">
                <el-select
                  style="width: 100%;"
                  v-if="currTarget.type === 'checkbox' || currTarget.type === 'radio' || currTarget.type === 'select'"
                  v-model="currTarget.pointType">
                  <el-option
                    v-for="(item, index) in currTarget.pointDict"
                    :key="index"
                    :label="item.dictName"
                    :value="item.dictValue">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="right-item" v-if="currTarget.type === 'checkbox' && currTarget.pointType === '2'">
              <div class="right-item__title no-solid">
                <h2>答案</h2>
              </div>
              <div class="right-item__content">
                <el-checkbox-group
                  v-model="currTarget.answer">
                  <div class="right-item__select--item" v-for="(item, index) in currTarget.options" :key="index">
                    <el-checkbox :label="item.label" :key="index"></el-checkbox>
                    <el-input placeholder="分值" @change="e => onSelcetKeyup(e, index)" v-model="item.point">
                      <span slot="suffix">分</span>
                    </el-input>
                  </div>
                  <div class="right-item__select--item">
                    <span style="padding-left: 23px;">全部答对</span>
                    <el-input placeholder="分值" @change="onKeyup" v-model="currTarget.points">
                      <span slot="suffix">分</span>
                    </el-input>
                  </div>
                </el-checkbox-group>
              </div>
            </div>
            <div class="right-item" v-if="(currTarget.type === 'checkbox' || currTarget.type === 'radio' || currTarget.type === 'select') && currTarget.pointType === '1'">
              <div class="right-item__title">
                <div class="right-item__title--left">
                  <h2>各选项分值</h2>
                  <i>（如需扣分请设置负分）</i>
                </div>
              </div>
              <div class="right-item__content">
                <div class="right-item__select--item" v-for="(item, index) in currTarget.options" :key="index">
                  <span>{{ item.label }}</span>
                  <el-input placeholder="分值" v-model="item.point" @change="e => onSelcetKeyup(e, index)">
                    <span slot="suffix">分</span>
                  </el-input>
                </div>
              </div>
            </div>
          </template>
        </div>
      </el-scrollbar>
      <ai-dialog
        :visible.sync="isShowAdd"
        width="800px"
        customFooter
        title="发布">
        <el-form label-position="top" class="publish" ref="form" label-width="120px" :model="form">
          <div class="form-item__wrapper">
            <div class="form-title">
              <h2>基本信息</h2>
            </div>
            <div class="form-field">
              <i>*</i>
              <h2>截止时间</h2>
              <span>（表单截止后，用户打开表单会提示此表单已结束）</span>
            </div>
            <div class="form-item__container">
              <el-radio-group v-model="form.periodValidityType">
                <el-radio label="0">永久有效</el-radio>
                <el-radio label="1">自定义时间</el-radio>
              </el-radio-group>
            </div>
            <div class="form-item__container" v-if="form.periodValidityType === '1'">
              <el-date-picker
                v-model="form.periodValidityEndTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                size="small"
                :picker-options="pickerOptions"
                placeholder="截止时间">
              </el-date-picker>
            </div>
            <div class="form-field">
              <i>*</i>
              <h2>匹配客户方式</h2>
              <span>（将参与活动的微信客户和企业微信客户匹配）</span>
            </div>
            <div class="form-item__container">
              <el-radio-group v-model="form.wechatId">
                <el-radio label="0">客户微信ID匹配</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="form-item__wrapper">
            <div class="form-title">
              <h2>提交次数限制</h2>
              <span>此功能发布后不可修改</span>
            </div>
            <div class="form-field">
              <i>*</i>
              <h2>提交次数</h2>
            </div>
            <div class="form-item__container">
              <el-radio-group v-model="form.commitType">
                <el-radio label="0">不限次数</el-radio>
                <el-radio label="1">限提交一次</el-radio>
              </el-radio-group>
            </div>
            <!-- <div class="checkbox-wrapper">
              <div class="checkbox">
                <el-checkbox v-model="form.actionNotice" true-label="1" false-label="0">行为通知</el-checkbox>
                <span>（当客户点击或者发布表单时，发送表单的员工将会受到消息提醒）</span>
              </div>
              <div class="checkbox">
                <el-checkbox v-model="form.dynamicNotice" true-label="1" false-label="0">动态通知</el-checkbox>
                <span>（当客户点击或者发布表单时，会将客户的打开行为记录在客户动态里）</span>
              </div>
            </div> -->
          </div>
        </el-form>
        <template #footer>
          <el-button @click="isShowAdd = false">返回</el-button>
          <el-button type="primary" @click="onConfirm(1)">完成并发布</el-button>
        </template>
      </ai-dialog>
      <ai-dialog
        class="ai-dialog__success"
        :visible.sync="isShowSuccess"
        customFooter
        @close="cancel(false)"
        width="800px"
        title="">
        <div class="success-dialog">
          <div class="success-header">
            <i class="iconfont iconSteps_Finished"></i>
            <h2>发布成功，请分享表单</h2>
          </div>
          <div class="success-wrapper">
            <div class="step">
              <div class="step-left">
                <div class="stop-left__title">
                  <i></i>
                  <h2>分享方法</h2>
                </div>
                <p>可以将生成的二维码或链接分享给居民</p>
                <el-input size="small" :value="successInfo.linkUrl">
                  <el-button slot="append" type="primary" @click="copy(successInfo.linkUrl)">复制链接</el-button>
                </el-input>
              </div>
              <div class="step-right">
                <div class="step-code">
                  <img :src="successInfo.qrCodeUrl">
                </div>
                <el-button type="text" @click="downloadImg(successInfo.qrCodeUrl)">下载二维码</el-button>
              </div>
            </div>
          </div>
        </div>
      </ai-dialog>
    </template>
  </ai-detail>
</template>

<script>
  import draggable from 'vuedraggable'
  import { components } from './config'

  export default {
    name: 'add',

    props: {
      instance: Function,
      dict: Object,
      params: Object,
      type: String,
      areaId: String
    },

    components: {
      draggable
    },

    data () {
      return {
        isShowAdd: false,
        isShowSuccess: false,
        components: components,
        targetList: [],
        form: {
          tableExplain: '详细描述',
          title: '问卷调查',
          isShowheadPicture: true,
          isShowTableExplain: true,
          isShowBtn: true,
          headPicture: [],
          commitType: '1',
          periodValidityType: '0',
          actionNotice: '1',
          dynamicNotice: '1',
          periodValidityEndTime: '',
          shareStatus: '0',
          count: 0,
          wechatId: '0',
          type: 0,
          buttonExplain: '提交',
          tips: true
        },
        successInfo: {},
        date: [],
        values: '',
        activeIndex: -1,
        pickerOptions: {
          disabledDate (time) {
            return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
          }
        }
      }
    },

    computed: {
      currTarget () {
        if (this.activeIndex >= 0) {
          return this.targetList[this.activeIndex]
        }

        return {}
      },

      pageTitle () {
        let typeName = '新增'
        let itemName = '问卷调查'

        if (this.params.id) {
          typeName = '编辑'
        }

        if (this.params.type == 0) {
          itemName = '问卷调查'
        }

        if (this.params.type == 1) {
          itemName = '考试测评'
        }

        if (this.params.type == 2) {
          itemName = '报名登记'
        }

        if (this.params.type == 3) {
          itemName = '满意调查'
        }

        if (this.params.type == 4) {
          itemName = '投票评选'
        }

        return `${typeName}${itemName}`
      },

      currComponentTitle () {
        if (this.activeIndex >= 0) {
          return this.targetList[this.activeIndex].fixedLabel + '设置'
        }

        return '表单设置'
      }
    },

    mounted () {
      if (this.params && this.params.id) {
        this.getInfo(this.params.id)
      } else {
        this.init()
      }

      window.addEventListener('keydown', this.bindEvent)
    },

    destroyed () {
      window.removeEventListener('keydown', this.bindEvent)
    },

    methods: {
      onHeadImgChange (e) {
        if (!e) {
          this.form.headPicture = []
        }
      },

      onheadPictureChange (e) {
        if (e.length) {
          this.form.isShowheadPicture = true
        } else {
          this.form.isShowheadPicture = false
        }
      },

      init () {
        if (this.params.type == 0) {
          this.form.headPicture = [{
            url: 'https://cdn.cunwuyun.cn/dvcp/h5/form/interview.png'
          }]
        }
        if (this.params.type == 1) {
          this.form.title = '考试测评'
          this.form.headPicture = [{
            url: 'https://cdn.cunwuyun.cn/dvcp/h5/form/exam.png'
          }]
        }
        if (this.params.type == 2) {
          this.form.title = '报名登记'
          this.form.headPicture = [{
            url: 'https://cdn.cunwuyun.cn/dvcp/h5/form/apply.png'
          }]
        }
        if (this.params.type == 3) {
          this.form.title = '满意调查'
          this.form.headPicture = [{
            url: 'https://cdn.cunwuyun.cn/dvcp/h5/form/satisfaction.png'
          }]
        }
        if (this.params.type == 4) {
          this.form.title = '投票评选'
          this.form.headPicture = [{
            url: 'https://cdn.cunwuyun.cn/dvcp/h5/form/vote.png'
          }]
        }
      },

      downloadImg (url) {
        let image = new Image()
        image.setAttribute('crossOrigin', 'anonymous')
        image.onload = function() {
          let canvas = document.createElement('canvas')
          canvas.width = image.width
          canvas.height = image.height
          let context = canvas.getContext('2d')
          context.drawImage(image, 0, 0, image.width, image.height)
          let url = canvas.toDataURL("image/png")
          let a = document.createElement("a")
          let event = new MouseEvent("click")
          a.download = name || 'photo'
          a.href = url
          a.dispatchEvent(event)
        }
        image.src = url
      },

      onKeyup (e) {
        this.$set(this.currTarget, 'points', e.replace(/[^\d]/g, ''))
      },

      onSelcetKeyup (e, index) {
        console.log(e, index)
        this.$set(this.currTarget.options[index], 'point', e.replace(/[^\d]/g, ''))
      },

      toPublish () {
        for (let item of this.targetList) {
          if (item.isShowPoints) {
            if (item.pointType === '0') {
              if (!item.answer || JSON.stringify(item.answer) === '[]') {
                return this.$message.error(`请输入${item.label}正确答案`)
              }

              if (!item.points) {
                return this.$message.error(`请输入${item.label}的分值`)
              }
            }

            if (item.pointType === '1') {
              for (let option of item.options) {
                if (!option.point) {
                  return this.$message.error(`请输入${item.label}${option.label}的分值`)
                }
              }
            }

            if (item.pointType === '2') {
              for (let option of item.options) {
                if (!option.point) {
                  return this.$message.error(`请输入${item.label}${option.label}的分值`)
                }
              }

              if (!item.points) {
                return this.$message.error(`请输入${item.label}全部答对分值`)
              }
            }
          }
        }
        if (this.params.templateType != 1) {
          this.isShowAdd = true
        } else {
          const fields = this.targetList.map(item => {
            return {
              fieldType: item.type,
              fieldName: item.label,
              fieldInfo: JSON.stringify(item)
            }
          })

          this.instance.post(`/app/appquestionnairetemplate/addOrUpdate`, {
            ...this.form,
            fields,
            status: 0,
            areaId: this.params.templateType == 0 ? this.areaId : '',
            id: this.params.id,
            headPicture: this.form.headPicture.length ? this.form.headPicture[0].url : '',
            type: this.params.type,
            templateType: this.params.templateType
          }).then(res => {
            if (res.code == 0) {
              this.$message.success('提交成功')

              setTimeout(() => {
                this.cancel()
              }, 600)
            }
          })
        }
      },

      bindEvent (e) {
        if (this.activeIndex === -1) return

        if ((e.code === 'Backspace' || e.code === 'Delete') && e.target.nodeName === 'BODY' && this.activeIndex >= 0) {
          this.targetList.splice(this.activeIndex, 1)

          this.activeIndex = -1
        }
      },

      removeItem (index) {
        this.activeIndex = -1
        this.targetList.splice(index, 1)
      },

      getInfo (id) {
        this.instance.post(`/app/appquestionnairetemplate/queryDetailById?id=${id}`).then(res => {
          if (res.code == 0) {
            this.form = {
              ...res.data,
              headPicture: res.data.headPicture ? [{
                url: res.data.headPicture
              }] : []
            }

            this.form.isShowheadPicture = !!res.data.headPicture
            this.form.isShowTableExplain = !!res.data.tableExplain

            this.targetList = res.data.fields.map(item => {
              return JSON.parse(item.fieldInfo)
            })
          }
        })
      },

      onConfirm (status) {
        if (this.params.templateType == 1) {
          this.submitTemp()
        }

        if (this.form.periodValidityType === '1') {
          if (!this.form.periodValidityEndTime) {
            return this.$message.error('请选择截止时间')
          }

          if (new Date(this.form.periodValidityEndTime).getTime() < Date.now()) {
            return this.$message.error('截止时间不能晚于当前时间')
          }
        }

        const fields = this.targetList.map(item => {
          return {
            fieldType: item.type,
            fieldName: item.label,
            fieldInfo: JSON.stringify(item)
          }
        })

        this.instance.post(`/app/appquestionnairetemplate/addOrUpdate`, {
          ...this.form,
          fields,
          areaId: this.areaId,
          status: status,
          id: this.params.isQuote ? '' : this.params.id,
          headPicture: this.form.headPicture.length ? this.form.headPicture[0].url : '',
          type: this.params.type,
          templateType: this.params.templateType,
          periodValidityEndTime: this.form.periodValidityType === '1' ? this.form.periodValidityEndTime : ''
        }).then(res => {
          if (res.code == 0) {
            if (this.params.isQuote) {
              this.instance.post(`/app/appquestionnairetemplate/quoteCount?id=${this.params.id}`)
            }
            this.$message.success('提交成功')

            if (status === 0) {
              return this.cancel()
            }

            this.successInfo = res.data

            this.$nextTick(() => {
              this.isShowSuccess = true
            })
          }
        })
      },

      copy (link) {
        let oInput = document.createElement('input')
        oInput.value = link
        document.body.appendChild(oInput)
        oInput.select()
        document.execCommand('Copy')
        this.$message({
          message: '已复制',
          type: 'success'
        })
        oInput.remove()
      },

      cancel (isRefresh) {
        this.$emit('change', {
          type: 'list',
          isRefresh: !!isRefresh,
          isQuote: !!this.params.isQuote
        })
      },

      addOptions () {
        const len = this.targetList[this.activeIndex].options.length
        let label = `选项${len + 1}`

        const index= this.targetList[this.activeIndex].options.findIndex(v => label === v.label)
        if (index > -1) {
          label = `新选项${len + 1}`
        }

        this.targetList[this.activeIndex].options.push({
          label: label,
          value: '',
          point: '',
          img: []
        })
      },

      removeOptions (index) {
        const len = this.targetList[this.activeIndex].options.length
        const label = this.targetList[this.activeIndex].options[index].label

        if (len === 2) {
          return this.$message.error('选项不能少于2个')
        }

        if (this.targetList[this.activeIndex].type === 'checkbox') {
          const answerIndex = this.targetList[this.activeIndex].answer.indexOf(label)
          if (answerIndex > -1) {
            this.targetList[this.activeIndex].answer.splice(answerIndex, 1)
          }
        } else {
          if (label === this.targetList[this.activeIndex].answer) {
            this.targetList[this.activeIndex].answer = ''
          }
        }

        this.targetList[this.activeIndex].options.splice(index, 1)
      },

      onEnd () {
        this.$nextTick(() => {
          this.activeIndex = this.targetList.length - 1
        })
      },

      clone (e) {
        this.targetList.push(JSON.parse(JSON.stringify(e)))

        this.$nextTick(() => {
          this.activeIndex = this.targetList.length - 1
        })
      },

      cloneComponent (e) {
        return JSON.parse(JSON.stringify(e))
      }
    }
  }
</script>

<style lang="scss" scoped>
  .form-add {
    background: #fff!important;

    .right-item__maintitle {
      height: 62px;
      line-height: 62px;
      margin-bottom: 20px;
      border-bottom: 1px solid #EEEEEE;
      color: #222222;

      h2 {
        font-size: 14px;
      }
    }

    .right-item__content--select-answer {
      ::v-deep .el-checkbox {
        display: flex!important;
        align-items: center;
        margin-right: 0;
      }

      ::v-deep .el-checkbox__label {
        flex: 1;
        color: #222;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .left-item__item--banner {
      img {
        width: 100%;
        height: 235px;
      }

      .config-item__banner {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        height: 235px;
        line-height: 1;
        border: 1px dashed #bbb;

        span {
          margin-top: 4px;
          color: #555555;
          font-size: 14px;
        }

        i {
          font-size: 30px;
          color: #8899bb;
        }
      }
    }

    .left-item__item--formname {
      margin: 16px 0 32px;
      padding: 0 12px;
      color: #333333;
      font-size: 15px;
      font-weight: normal;
      text-align: center;
      word-break: break-all;
    }

    .left-item__item--text {
      line-height: 20px;
      // margin-bottom: 48px;
      padding: 0 12px 20px;
      text-align: justify;
      color: #666;
      font-size: 14px;
      word-break: break-all;
    }

    ::v-deep .ai-detail__content {
      height: calc(100% - 52px)!important;
      padding: 0!important;
      overflow: hidden!important;
    }

    .ai-dialog__success {
      ::v-deep .ai-dialog__content {
        max-height: initial!important;
      }
    }

    .middle-draggable {
      & > span {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 600px;
        padding-bottom: 20px;
      }

      .components-item {
        position: relative;
        // margin-bottom: 32px;
        padding: 16px 16px;
        cursor: move;

        &::after {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1111;
          width: 100%;
          height: 100%;
          content: ' ';
        }

        .left-item__item--remove {
          display: flex;
          position: absolute;
          align-items: center;
          justify-content: center;
          right: -30px;
          top: 50%;
          width: 30px;
          height: 30px;
          background: #fff;
          cursor: pointer;
          transform: translateY(-50%);
        }

        &:hover {
          background: #f6f7ff;
        }

        &.active {
          background: #f6f7ff;
        }

        .left-item__item--upload {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          width: 120px;
          height: 120px;
          border-radius: 6px;
          border: 1px dashed #bbb;

          i {
            font-size: 24px;
            color: #8899bb;
          }

          span {
            margin-top: 4px;
            font-size: 12px;
            color: #555;
          }
        }

        .text-item {
          input {
            display: block;
            width: 100%;
            height: 40px;
            border: none;
            border-bottom: 1px solid #ddd;

            &:focus {
              outline: none;
            }

            &:disabled {
              background: #fff;
            }
          }
        }

        .textarea-item {
          textarea {
            width: 100%;
            height: 120px;
            resize: none;
            border: 1px solid #ddd;
            padding: 10px;

            &:focus {
              outline: none;
            }

            &:disabled {
              background: #fff;
            }
          }
        }

        .radio-item {
          display: flex;
          align-items: center;
          margin-bottom: 10px;

          &:last-child {
            margin-bottom: 0;
          }

          label {
            margin-left: 10px;
          }

          img {
            margin-left: 10px;
          }
        }
      }

      .left-item__item--title {
        display: flex;
        margin-bottom: 10px;

        i {
          position: relative;
          top: 2px;
          margin-right: 5px;
          color: #E22120;
        }

        span {
          position: relative;
          top: 2px;
        }

        h2 {
          color: #333333;
          font-size: 15px;
        }
      }
    }

    .success-dialog {
      .success-wrapper {
        margin-top: 40px;

        .step {
          display: flex;
          align-items: center;
          justify-content: space-between;

          &:last-child {
            img {
              width: 120px;
              height: 120px;
            }

            .step-right {
              text-align: center;
              color: #2266FF;

              a {
                display: block;
                margin-top: 10px;
                color: #2266FF;
                text-align: center;
                font-size: 14px;
                text-decoration: none;

                &:hover {
                  opacity: 0.8;
                }
              }
            }

            .step-code {
              width: 130px;
              height: 130px;
              padding: 5px;
              background: #FFFFFF;
              box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
              border-radius: 4px;
              border: 1px solid #E4E8EF;
            }

            ::v-deep .el-input {
              width: 418px;
              margin-top: 20px;
              margin-left: 12px;

              span {
                color: #fff;
              }

              button:hover {
                background: linear-gradient(90deg, #299FFF 0%, #0C61FF 100%);
              }
            }
          }

          .step-left {
            p {
              max-width: 348px;
              line-height: 22px;
              margin-left: 12px;
              color: #888888;
              font-size: 14px;
            }
          }

          .stop-left__title {
            display: flex;
            align-items: center;
            margin-bottom: 10px;

            h2 {
              font-size: 16px;
              color: #222222;
            }

            i {
              width: 4px;
              height: 4px;
              flex-shrink: 1;
              margin-right: 8px;
              background: #8899BB;
            }
          }
        }
      }

      .success-header {
        padding: 16px 0 40px;
        text-align: center;
        border-bottom: 1px solid #EEEEEE;

        i {
          font-size: 64px;
          color: #2DD77D;
        }

        h2 {
          margin-top: 16px;
          color: #222222;
          font-weight: 600;
        }
      }
    }

    .middle-content {
      width: 375px;
      margin: 0 auto;
      padding: 80px 0;

      .middle-content__wrapper {
        min-height: 800px;
        background: #fff;

        & > div {
          &.active {
            background: #f6f7ff;
          }
        }

        .radio-item {
          img {
            width: 40px;
            height: 40px;
          }
        }
      }
    }

    div {
      box-sizing: border-box;
    }

    .right-item__select--wrapper {
      .select-item {
        display: flex;
        align-items: center;
      }
    }

    ::v-deep .ai-detail__title {
      margin: 0!important;
      margin-bottom: 4px!important;
      padding: 0 20px;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
    }

    ::v-deep .ai-detail__content--wrapper {
      display: flex;
      max-width: 100%!important;
      height: 100%!important;
      padding: 0!important;
      background: #F5F6F9;
    }

    .middle {
      flex: 1;
      height: 100%;

      ::v-deep .el-scrollbar__view {
        height: 100%;
      }
    }

    .add-select {
      height: auto;
      line-height: 1;
      margin: 10px 0 0 26px;
      padding: 0;
    }

    .right-item__select--wrapper {

      ::v-deep .el-upload--picture-card {
        // display: none;
        width: 100%;
        height: 100%;
        line-height: 1;
      }

      ::v-deep .uploader {
        background: #FFFFFF;
        border-radius: 4px;
        margin: 0 10px;
        width: 40px;
        height: 40px;

        .el-upload-list__item-preview {
          display: none;
        }

        .el-upload-list--picture-card .el-upload-list__item-actions span + span {
          margin-left: 0;
        }

        .uploader-item__icon {
          display: none;
        }

        .el-upload-list__item {
          margin: 0;
        }

        .uploader-item {
          width: 40px!important;
          height: 40px!important;
          overflow: hidden;
        }

        // .el-upload-list__item-actions {
        //   display: none;
        // }
      }

      .select-item {
        margin-bottom: 10px;

        &:last-child {
          margin-bottom: 0;
        }

        i {
          color: #8c9dbd;
        }

        .mover {
          cursor: move;
        }

        .iconDelete {
          cursor: pointer;
          margin-left: 10px;
        }
      }

      ::v-deep .el-upload-list__item {
        width: 40px!important;
        height: 40px!important;
        object-fit: cover;
      }

      .config-item__select {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid #D0D4DC;

        &:hover {
          opacity: 0.7;
        }

        i {
          font-size: 18px;
        }
      }
    }

    .right-item__content--banner {
      height: 183px;
      padding: 10px;
      background: #F3F6F9;
      border-radius: 4px;

      ::v-deep .el-upload--picture-card {
        width: 100%;
        height: 100%;
        line-height: 1;
      }

      ::v-deep .uploader {
        width: 260px;
        height: 163px;
        overflow: hidden;

        .el-row--flex {
          width: 100%;
          height: 100%;
        }
      .config-item__select {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid #D0D4DC;

        &:hover {
          opacity: 0.7;
        }

        i {
          font-size: 18px;
        }
      }

        .el-upload-list__item {
          width: 260px!important;
          height: 163px!important;
        }

        .config-item__banner {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          width: 260px;
          height: 163px;
          line-height: 1;
          background: #fff;

          span {
            margin-top: 4px;
            color: #555555;
            font-size: 12px;
          }

          i {
            color: #8899bb;
          }
        }
      }

      .config-item__banner {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 260px;
        height: 163px;
        line-height: 1;
        background: #fff;

        span {
          margin-top: 4px;
          color: #555555;
          font-size: 12px;
        }

        i {
          color: #8899bb;
        }
      }
    }

    .right-item__select--item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;
      border-bottom: 1px solid #EEEEEE;

      span {
        width: 170px;
        font-size: 14px;
        color: #222;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      ::v-deep .el-checkbox {
        display: flex!important;
        align-items: center;
        margin-bottom: 0!important;
      }

      ::v-deep .el-checkbox__label {
        max-width: 140px;
        color: #222;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      ::v-deep .el-input {
        width: 100px;

        .el-input__suffix {
          display: flex;
          align-items: center;
          right: 10px;
          color: #222222;
        }
      }
    }

    .right {
      width: 320px;
      height: 100%;
      overflow: hidden;
      background: #FFFFFF;

      .el-checkbox {
        display: block;
        margin-bottom: 10px;

        &:last-child {
          margin-bottom: 0;
        }
      }

      .right-item {
        margin-top: 20px;
        padding: 0 20px;

        .right-item__tips {
          margin-top: 10px;
          color: #888888;
          font-size: 12px;
        }
      }

      .right-item__title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;

        .right-item__title--left {
          display: flex;
          align-items: center;

          i {
            color: #888888;
            font-size: 12px;
            font-style: normal;
          }
        }

        h2 {
          color: #222222;
          font-size: 14px;
        }
      }
    }

    .left {
      width: 280px;
      height: 100%;
      overflow: hidden;
      background: #FFFFFF;

      .left-item {
        padding: 0 20px;

        &:last-child {
          padding-bottom: 20px;
        }

        .left-item__title {
          display: flex;
          align-items: baseline;
          margin-bottom: 20px;

          h2 {
            color: #222222;
            font-size: 14px;
            font-weight: 700;
          }

          span {
            color: #888888;
            font-size: 12px;
          }
        }

        .left-item__item {
          display: flex;
          align-items: center;
          height: 40px;
          margin-bottom: 10px;
          padding: 0 13px;
          background: #FFFFFF;
          border-radius: 2px;
          color: #222222;
          font-size: 12px;
          border: 1px solid #E4E8EF;
          cursor: move;

          &:hover {
            border: 1px dashed #2367ff;
            color: #2367ff;

            i {
              color: #2367ff;
            }
          }

          i {
            margin-right: 13px;
            font-size: 14px;
            color: #8899BB;
          }

          &:last-child {
            margin-bottom: 0;
          }
        }
      }

      .left-item {
        margin-top: 20px;
      }
    }

    .publish {
      .tips {
        display: flex;
        align-items: center;
        height: 36px;
        margin-bottom: 20px;
        padding: 0 12px;
        background: #E8EFFF;
        border-radius: 2px;

        i {
          margin-right: 2px;
          color: #2367ff;
          font-size: 16px;
        }

        h2 {
          font-size: 12px;
          color: #222222;
        }
      }

      .form-item__wrapper {
        padding-left: 24px;

        .checkbox {
          display: flex;
          align-items: center;
          margin-left: 9px;

          &:first-child {
            margin-bottom: 32px;
          }

          span {
            color: #888888;
            font-size: 14px;
          }
        }

        .form-title {
          display: flex;
          align-items: center;
          margin-bottom: 16px;

          span {
            margin-left: 16px;
            color: #888888;
            font-size: 14px;
          }

          h2 {
            position: relative;
            padding-left: 8px;
            font-size: 16px;
            font-weight: 700;
            color: #222222;

            &::after {
              position: absolute;
              left: 0;
              top: 50%;
              z-index: 1;
              width: 3px;
              height: 16px;
              background: #2266FF;
              content: ' ';
              transform: translateY(-50%);
            }
          }
        }

        .form-item__container {
          margin-left: 9px;
          margin-bottom: 24px;
        }

        .form-field {
          display: flex;
          align-items: center;
          margin-bottom: 16px;

          i {
            margin-right: 4px;
            color: #FF4466;
            font-size: 14px;
          }
          h2 {
            color: #222222;
            font-size: 14px;
          }

          span {
            color: #888888;
            font-size: 14px;
          }
        }
      }
    }
  }
</style>
