<template>
  <el-dialog
    :title="title"
    width="800px"
    top="20px"
    :visible.sync="dialogVisible"
    @close="diaClose"
    :close-on-click-modal="true"
  >
    <div style="max-height: 70vh; overflow-y: scroll">
      <el-form ref="table" :rules="rules" :model="form" label-width="100px">
        <el-form-item label="标题" required>
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="是否展示">
          <el-switch
            v-model="form.shows"
            :inactive-value="0"
            :active-value="1"
          ></el-switch>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
            :min="0"
            :step-strictly="true"
            :step="1"
            v-model="form.sort"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="任务类型" required>
          <el-radio-group v-model="form.type">
            <el-radio :label="value*1" v-for="(item, value) in renType" :key="value" >{{item}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="奖励图标">
          <el-upload
            class="avatar-uploader"
            v-model="form.rewardImg"
            :action="$http.adornUrl('alioss/upload')"
            :show-file-list="false"
            :on-success="uploadSuccess"
          >
            <div class="upload-file-box">
              <img v-if="form.rewardImg" :src="form.rewardImg" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon iconss"></i>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="是否跳转">
          <el-switch v-model="isJump"></el-switch>
        </el-form-item>
        <template v-if="isJump">
          <el-form-item label="跳转类型" required>
            <el-radio-group v-model="form.jumpType">
            <el-radio :label="value*1" v-for="(item, value) in jumpType" :key="value" >{{item}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="按钮跳转地址" required>
            <el-input v-model="form.buttonUrl"></el-input>
          </el-form-item>
        </template>

        <el-form-item label="达标次数" required v-if="form.type == 2">
          <el-input-number
            :min="0"
            :step-strictly="true"
            :step="1"
            v-model="form.number"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="详情描述" required>
          <el-input v-model="form.detail"></el-input>
        </el-form-item>
        <el-form-item label="奖励描述" required>
          <el-input v-model="form.rewardDetail"></el-input>
        </el-form-item>
        <el-form-item label="按钮背景色">
          <el-input v-model="form.buttonBgColor"></el-input>
        </el-form-item>
        <el-form-item label="按钮字体色 ">
          <el-input v-model="form.buttonFontColor"></el-input>
        </el-form-item>
        <el-form-item label="按钮内容">
          <el-input v-model="form.buttonTitle"></el-input>
        </el-form-item>
        <el-form-item label="按钮下方内容">
          <el-input v-model="form.buttonUnderContent"></el-input>
        </el-form-item>
        <el-form-item label="按钮下方内容 跳转路径">
          <el-input v-model="form.buttonUnderUrl "></el-input>
        </el-form-item>
      </el-form>
    </div>

    <div class="dialog-footer">
      <el-button @click="diaClose">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import $api from "@/api/renwu.js";
import {$renwuType,$jumpType} from '../data.js'
export default {
  data() {
    return {
      dialogVisible: false,
      renType: $renwuType,
      jumpType: $jumpType,
      title: "",
      rules: {
        title: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
      },
      isJump: false,
      form: {
        url: "",
        type: 1,
        buttonBgColor: "",
        buttonFontColor: "",
        buttonTitle: "",
        buttonUrl: "",
        detail: "",
        jumpType: 1,
        number: 0,
        rewardDetail: "",
        rewardImg: "",
        title: "",
        shows: 1,
        sort: "",
        buttonUnderContent:'',
        buttonUnderUrl:''
      },
    };
  },
  methods: {
    uploadSuccess(file) {
      this.form.rewardImg = file.data;
      console.log(this.form.rewardImg);
    },
    open(item) {
      console.log(item);
      this.dialogVisible = true;
      if (item) {
        this.form = {
          ...item,
        };
        this.isJump = item.jumpType ? true : false;
      }
      this.title = item ? "修改任务" : "新增任务";
    },
    diaClose() {
      this.dialogVisible = false;
      this.isJump=false;
      this.form = {
        url: "",
        type: 1,
        buttonBgColor: "",
        buttonFontColor: "",
        buttonTitle: "",
        buttonUrl: "",
        detail: "",
        jumpType: 1,
        number: 0,
        rewardDetail: "",
        rewardImg: "",
        title: "",
        shows: 1,
        sort: "",
      };
    },
    async confirm() {
      if (!this.form.title) {
        return this.$message.error("请输入任务名称");
      }
      if (!this.form.type) {
        return this.$message.error("请输入任务类型");
      }
      if (this.isJump && !this.form.buttonUrl) {
        return this.$message.error("请输入按钮跳转地址");
      }
      if (!this.form.detail) {
        return this.$message.error("请输入详情描述");
      }
      if (!this.form.rewardDetail) {
        return this.$message.error("请输入奖励描述");
      }
      if (this.form.type == 2 && this.form.number <= 0) {
        return this.$message.error("请输入达标次数");
      }
      if(!this.isJump){
        this.form.jumpType = 0
        this.form.buttonUrl = ''
      }
      this.submit();
    },
    async submit() {
      let res = { data: { code: 1 } };
      if (this.form.id) {
        res = await $api.update(this.form);
      } else {
        res = await $api.add(this.form);
      }
      console.log(res);
      const { data } = res;
      if (data.code == 0) {
        this.$message.success(this.form.id ? "修改成功" : "添加成功");
        this.$emit("refresh");
        this.diaClose();
      } else {
        this.$message.error(data.msg);
      }
    },
  },
};
</script>
<style scoped lang="scss">
.el-form-item__label {
  text-align: left;
}
::v-deep .el-form-item__label {
  text-align: left;
}
.dialog-footer {
  padding-top: 20px;
}
.upload-file-box {
  border-radius: 6px;
  width: 148px;
  height: 148px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 1px solid #c0c4cc;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>