<template>
  <div class="form-setting">
    <h2>表单设置</h2>
    <div class="form-setting__list">
      <div class="setting-item">
        <div class="setting-item__left">
          <span>截止时间</span>
          <image :src="`${$cdn}askform/bz.png`" @click="tips = '表单截止后，用户打开表单会提示此表单已结束' , isShowModal = true"/>
        </div>
        <div class="setting-item__right">
          <u-radio-group v-model="periodValidityType" active-color="#1088F9">
            <u-radio name="0" label="永久有效">永久有效</u-radio>
            <u-radio name="1" label="自定义时间">自定义时间</u-radio>
          </u-radio-group>
          <u-icon name="arrow-right" color="#E1E2E3"/>
        </div>
      </div>
      <div class="setting-item" v-if="periodValidityType === '1'" @click="isShowTime = true">
        <div class="setting-item__left">
          <span>截至时间</span>
        </div>
        <div class="setting-item__right">
          <span>{{ periodValidityEndTime }}</span>
          <u-icon name="arrow-right" color="#E1E2E3"/>
        </div>
      </div>
      <div class="setting-item">
        <div class="setting-item__left">
          <span>匹配客户方式</span>
          <image :src="`${$cdn}askform/bz.png`" @click="tips = '将参与活动的微信客户和企业微信客户匹配' , isShowModal = true"/>
        </div>
        <div class="setting-item__right">
          <span>客户微信ID匹配</span>
        </div>
      </div>
      <div class="setting-item">
        <div class="setting-item__left">
          <span>提交次数</span>
          <image :src="`${$cdn}askform/bz.png`" @click="tips = '此功能发布后不可修改' , isShowModal = true"/>
        </div>
        <div class="setting-item__right">
          <u-radio-group v-model="commitType" active-color="#1088F9">
            <u-radio name="0" label="不限次数">不限次数</u-radio>
            <u-radio name="1" label="限提交一次">限提交一次</u-radio>
          </u-radio-group>
        </div>
      </div>
      <!-- <div class="setting-item">
        <div class="setting-item__left">
          <span>行为通知</span>
          <image :src="`${$cdn}askform/bz.png`" @click="tips = '当客户点击或者发布表单时，发送表单的员工将会受到消息提醒' , isShowModal = true" />
        </div>
        <div class="setting-item__right">
          <u-switch v-model="actionNotice" active-value="1" :size="40" active-color="#1088F9"></u-switch>
        </div>
      </div>
      <div class="setting-item">
        <div class="setting-item__left">
          <span>动态通知</span>
          <image :src="`${$cdn}askform/bz.png`" @click="tips = '当客户点击或者发布表单时，会将客户的打开行为记录在客户动态里' , isShowModal = true" />
        </div>
        <div class="setting-item__right">
          <u-switch v-model="dynamicNotice" active-value="1" :size="40" active-color="#1088F9"></u-switch>
        </div>
      </div> -->
    </div>
    <div class="add-form__footer">
      <div @click="back">
        <span>取消</span>
      </div>
      <div @click="confirm">{{ type === 'edit' ? '发布' : '确定' }}</div>
    </div>
    <u-modal v-model="isShowModal" :content="tips"></u-modal>
    <u-picker mode="time" v-model="isShowTime" :show-time-tag="true" @close="isShowTime = false" @confirm="onTimeChange"
              :params="params"></u-picker>
  </div>
</template>

<script>
export default {
  props: ['id', 'formConfig', 'type'],

  data() {
    return {
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true
      },
      tips: '',
      isShowModal: false,
      actionNotice: true,
      dynamicNotice: true,
      commitType: '1',
      wechatId: '0',
      periodValidityEndTime: '',
      isShowTime: false,
      periodValidityType: '0'
    }
  },

  mounted() {
    if (this.id) {
      this.getInfo(this.id)
    } else if (this.formConfig) {
      const res = this.formConfig
      this.periodValidityType = res.periodValidityType || '0'
      this.commitType = res.commitType || '1'
      this.actionNotice = res.actionNotice === '1'
      this.dynamicNotice = res.dynamicNotice === '1'

      if (res.periodValidityType === '1') {
        this.periodValidityEndTime = res.periodValidityEndTime
      }
    }
  },

  methods: {
    onTimeChange(e) {
      this.periodValidityEndTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`
    },

    back() {
      this.$emit('back')
    },

    getInfo(id) {
      this.$http.post(`/app/appquestionnairetemplate/queryDetailById?id=${id}`).then(res => {
        if (res.code == 0) {
          this.periodValidityType = res.data.periodValidityType
          this.commitType = res.data.commitType
          this.actionNotice = res.data.actionNotice === '1'
          this.dynamicNotice = res.data.dynamicNotice === '1'

          if (res.data.periodValidityType === '1') {
            this.periodValidityEndTime = res.data.periodValidityEndTime
          }
        }
      }).catch(msg => {
        this.$u.toast(msg)
      })
    },

    publish() {
      this.$http.post(`/app/appquestionnairetemplate/release`, null, {
        params: {
          commitType: this.commitType,
          periodValidityType: this.periodValidityType,
          actionNotice: this.actionNotice ? '1' : '0',
          dynamicNotice: this.dynamicNotice ? '1' : '0',
          shareStatus: '0',
          wechatId: '0',
          id: this.id,
          periodValidityEndTime: this.periodValidityType === '1' ? this.periodValidityEndTime : ''
        }
      }).then(res => {
        if (res.code == 0) {
          uni.$emit('reload')
          this.$u.toast('发布成功')

          this.back()
        }
      }).catch(e => {
        this.$u.toast(e)
      })
    },

    confirm() {
      if (this.type === 'edit') {
        this.publish()

        return false
      }

      uni.$emit('setting', {
        periodValidityType: this.periodValidityType,
        commitType: this.commitType,
        actionNotice: this.actionNotice ? '1' : '0',
        dynamicNotice: this.dynamicNotice ? '1' : '0',
        periodValidityEndTime: this.periodValidityEndTime ? this.periodValidityEndTime : ''
      })

      this.back()
    }
  }
}
</script>

<style lang="scss" scoped>
.form-setting {
  padding: 0 20px;

  .add-form__footer {
    display: flex;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 112px;
    text-align: center;

    div {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      height: 100%;
      text-align: center;
      background: #fff;

      &:first-child:active {
        background: #eee;
      }

      &:last-child {
        color: #fff;
        font-size: 36px;
        background: #3192F4;

        &:active {
          opacity: 0.8;
        }
      }

      span {
        flex: 1;
        height: 100%;
        line-height: 112px;
        color: #333333;
        font-size: 32px;

        &:active {
          background: #eee;
        }
      }
    }
  }

  * {
    box-sizing: border-box;
  }

  & > h2 {
    height: 80px;
    padding-top: 24px;
    font-size: 28px;
    color: #999999;
  }

  .form-setting__list {
    padding: 0 20px;
    background: #fff;
    border-radius: 8px;

    .setting-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 104px;
      border-bottom: 1px solid #D8DDE6;

      .setting-item__right {
        color: #999;
        font-size: 28px;

        span {
          margin-right: 6px;
        }

        ::v-deep .u-radio__label {
          color: #999;
          font-size: 28px;
        }

        ::v-deep .u-radio {
          &:last-child {
            .u-radio__label {
              margin-right: 6px;
            }
          }
        }
      }

      &:last-child {
        border: none;
      }

      & > div {
        display: flex;
        align-items: center;
      }

      .setting-item__left {
        color: #666666;
        font-size: 30px;

        image {
          width: 30px;
          height: 30px;
          margin-left: 16px;
        }
      }
    }
  }
}
</style>
