<template>
  <div class='app-container'>
    <el-form :model="form" ref="form" :rules="rules" label-width="100px" :disabled="disabled">
      <el-form-item label="弹窗名称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入弹窗名称" />
      </el-form-item>
      <el-form-item label="弹窗图片：" prop="pic">
        <Upload listType="picture-card" :url="form.pic" @upload="upload($event, 'pic')" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="跳转类型：" prop="forwardType">
        <el-select v-model="form.forwardType" placeholder="请选择跳转类型">
          <el-option v-for="item in forwardTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.forwardType" label="跳转地址：" prop="forwardUrl">
        <el-input v-model="form.forwardUrl" placeholder="请输入跳转地址" />
      </el-form-item>
      <el-form-item label="弹窗类型：" prop="type">
        <el-select v-model="form.type" placeholder="请选择弹窗类型" @change="handleChangeType">
          <el-option v-for="item in dialogTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.type !== 2" label="推送类型：" prop="pushType">
        <el-select v-model="form.pushType" placeholder="请选择推送类型" @change="handleChangePushType">
          <el-option v-for="item in pushTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.pushType === 1" label="用户列表：" prop="user">
        <el-input v-model="form.user" type="textarea" :autosize="{ minRows: 5, maxRows: 10 }"
          placeholder="请输入用户Id, 一行一个" />
      </el-form-item>
      <el-form-item v-if="form.pushType === 2" label="用户列表：" prop="fileUrl">
        <el-input v-model="form.fileUrl" readonly style="width: calc(100% - 120px); margin-right: 20px" />
        <Upload class="upload" @upload="upload($event, 'fileUrl')" :disabled="disabled" />
      </el-form-item>
      <el-form-item prop="level">
        <template slot="label">
          <el-popover placement="top-start" width="200" trigger="hover" content="注：主要是针对同一时间设置多个弹窗的场景(1级-10级)">
            <el-link :underline="false" icon="el-icon-question" slot="reference" placement="left" />
          </el-popover>
          <span>
            优先级：
          </span>
        </template>
        <el-input-number v-model="form.level" :min="1" :max="10" />
      </el-form-item>
      <el-form-item label="生效时间：" prop="listDate">
        <el-date-picker v-model="form.listDate" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss" />
      </el-form-item>
    </el-form>
    <div class="form-btn">
      <el-button @click="cancel">取消</el-button>
      <el-button v-if="!disabled" type="primary" @click="getSubmit">确定</el-button>
    </div>
  </div>
</template>

<script>
import { submit, detail } from '@/api/push/dialog'
export default {
  data() {
    return {
      // 表单
      form: {
        fileUrl: ''
      },
      // 跳转类型
      forwardTypeOptions: [{
        value: 5,
        label: 'H5内链'
      }, {
        value: 6,
        label: 'H5外链'
      }],
      // 弹窗类型
      dialogTypeOptions: [{
        value: 0,
        label: '当天弹窗'
      }, {
        value: 1,
        label: '启动弹窗'
      }, {
        value: 2,
        label: '新用户弹窗'
      }],
      // 推送类型
      pushTypeOptions: [{
        value: 0,
        label: '全部用户'
      }, {
        value: 1,
        label: '指定用户-输入'
      }, {
        value: 2,
        label: '指定用户-上传'
      }],
      // 只读
      disabled: false,
      // 校验
      rules: {
        name: [{
          required: true, message: '请输入弹窗名称', trigger: 'blur'
        }],
        pic: [{
          required: true, message: '请上传弹窗图片', trigger: 'change'
        }],
        forwardType: [{
          required: true, message: '请选择跳转类型', trigger: 'change'
        }],
        forwardUrl: [{
          required: true, message: '请输入跳转地址', trigger: 'blur'
        }],
        pushType: [{
          required: true, message: '请选择推送类型', trigger: 'change'
        }],
        user: [{
          required: true, message: '请输入用户Id', trigger: 'blur'
        }],
        fileUrl: [{
          required: true, message: '请上传用户Id文件', trigger: 'blur'
        }],
        type: [{
          required: true, message: '请选择弹窗类型', trigger: 'change'
        }],
        level: [{
          required: true, message: '请选择优先级', trigger: 'change'
        }],
        listDate: [{
          required: true, message: '请选择生效时间', trigger: 'change'
        }]
      }
    }
  },
  mounted() {
    if (this.$route.query.id) {
      this.getDetail()
    }
  },
  methods: {
    // 详情
    getDetail() {
      this.disabled = Boolean(this.$route.query.boolean)
      detail(this.$route.query.id).then(res => {
        if (res.code === 0) {
          this.form = res.data
        }
      })
    },

    // 弹窗类型
    handleChangeType(e) {
      if (e === 2) {
        delete this.form.pushType
      }
    },

    // 推送类型
    handleChangePushType() {
      this.$refs.form.clearValidate(['user', 'fileUrl'])
    },

    // 上传
    upload(e, key) {
      this.form[key] = e.file
    },

    // 取消
    cancel() {
      this.$tab.closeOpenPage("/push/pushDialog");
    },

    // 提交
    getSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 删掉不需要的传参
          !this.form.pushType || this.form.pushType === 0 ? [delete this.form.user, delete this.form.fileUrl]
            : this.form.pushType === 1 ? delete this.form.fileUrl : delete this.form.user
          submit(this.form).then(res => {
            if (res.code === 0) {
              this.$message.success('提交成功！')
              this.cancel()
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item {
  width: 500px;
}

::v-deep .el-input-number {
  .el-input {
    position: relative;

    &::after {
      content: '级';
      position: absolute;
      right: 46px;
      line-height: 36px;
      color: #999;
    }
  }
}

::v-deep .upload {
  button {
    margin: 0;
  }
}
</style>