<template>
  <div class="app-container">
    <el-form :model="queryParams" size="small" ref="queryForm" :rules="rules" :disabled="showViewTime" label-width="100px" class="demo-ruleForm">
      <el-form-item :label="$t('编号')" v-if="titleShow" prop="ruleNumber">
        <el-input v-model="queryParams.ruleNumber" :disabled="true" style="width: 30%;" onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')"></el-input>
      </el-form-item>
      <el-form-item :label="$t('状态')" v-if="titleShow" prop="status">
        <dict-selector clearable :disabled="true" :type="DICT_TYPE.ENABLE_STATUS" v-model="queryParams.status" formatter="number"> </dict-selector>
      </el-form-item>
      <el-form-item :label="$t('名称')" prop="name">
        <el-input v-model="queryParams.name" style="width: 50%;" clearable @blur="trimParams('name')"></el-input>
      </el-form-item>
      <el-form-item :label="$t('等级')" prop="level">
        <dict-selector clearable :disabled="showViewTime" :type="DICT_TYPE.MEMBERSHIP_LEVELS" v-model="queryParams.level"> </dict-selector>
      </el-form-item>
      <el-form-item :label="$t('积分范围')">
        <el-col :span="6">
          <el-form-item prop="lowerCount">
            <el-input v-model="queryParams.lowerCount"  onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')"></el-input>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="1">{{ $t("至") }}</el-col>
        <el-col :span="6">
          <el-form-item prop="upperCount">
            <el-input v-model="queryParams.upperCount" onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item :label="$t('等级有效期')" style="width: 30%;" prop="validityPeriod">
        <el-input v-model="queryParams.validityPeriod" onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')">
          <span slot="append">{{ $t('天') }}</span>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('积分累计周期')" style="width: 30%;" prop="accumulationPeriod">
        <el-input v-model.number="queryParams.accumulationPeriod" onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')">
          <span slot="append">{{ $t('天') }}</span>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('积分累计开始日期')" style="width: 30%;" prop="startDate">
        <el-date-picker type="date" :placeholder="$t('请选择日期')" v-model="queryParams.startDate" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      </el-form-item>
      <el-form-item :label="$t('启用日期')" style="width: 30%;" v-if="titleShow" prop="enableDate">
        <el-date-picker type="datetime" :disabled="true" :placeholder="$t('请选择日期')" v-model="queryParams.enableDate" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      </el-form-item>
      <el-form-item :label="$t('等级有效期')+'-'+$t('开始日期')" style="width: 30%;" prop="startTime">
        <el-date-picker type="date" :placeholder="$t('请选择日期')" v-model="queryParams.startTime" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      </el-form-item>
      <el-form-item :label="$t('等级有效期')+'-'+$t('结束日期')" style="width: 30%;" prop="endTime">
        <el-date-picker type="date" :placeholder="$t('请选择日期')" v-model="queryParams.endTime" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      </el-form-item>
      <el-form-item :label="$t('选择图标')" prop="icon">
        <image-upload v-model="queryParams.icon" :fileType="['png', 'jpg', 'jpeg']" :limit="1" />
      </el-form-item>
      <el-form-item :label="$t('等级说明')" style="width: 30%;" prop="description">
        <el-input type="textarea" autosize :autosize="{ minRows: 2, maxRows: 4}" v-model="queryParams.description" @blur="trimParams('description')"></el-input>
        <span style="color: red;">{{$t('注：用于客户积分日志显示，请规范填写')}}</span>
      </el-form-item>
      <el-form-item :label="$t('匹配顺序')" style="width: 30%;" prop="sort">
        <el-input v-model.number="queryParams.sort" onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')"></el-input>
        <span style="color: red;">{{$t('注：设置相同等级，匹配的优先级')}}</span>
      </el-form-item>
      <!-- 编辑相关内容 -->
      <div v-if="showViewTime">
        <el-form-item :label="$t('创建人')">
          <el-input v-model.number="queryParams.creator" style="width: 26%;" :placeholder="$t('请输入创建人')" clearable onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')" />
        </el-form-item>
        <el-form-item :label="$t('创建时间')">
          <el-date-picker type="datetime" :placeholder="$t('选择创建时间')" v-model="queryParams.createTime" value-format="yyyy-MM-dd HH:mm:ss" placement="bottom-start"></el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('最后更新人')" style="width: 30%;">
          <el-input v-model.number="queryParams.updater" :placeholder="$t('请输入最后更新人')" clearable onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')" />
        </el-form-item>
        <el-form-item :label="$t('最后更新时间')">
          <el-date-picker type="datetime" :placeholder="$t('选择最后更新时间')" v-model="queryParams.updateTime" value-format="yyyy-MM-dd HH:mm:ss" placement="bottom-start"></el-date-picker>
        </el-form-item>
      </div>
    </el-form>
    <el-row justify="end" :gutter="20" type="flex">
      <el-col :span="3" v-if="$route.query.pageStatus == 'new'">
        <el-button type="primary" @click="handleSaveIntegralRule" style="width: 100%">{{ $t("保存") }}</el-button>
      </el-col>
      <el-col :span="3" v-if="$route.query.pageStatus == 'new'">
        <el-button type="primary" style="width: 100%" @click="handleEnableIntegralRule">{{ $t("保存并启用") }}</el-button>
      </el-col>
      <el-col :span="3" v-if="$route.query.pageStatus == 'edit'">
        <el-button type="primary" style="width: 100%" @click="handleUpdatedMemberLevel">{{ $t("更新") }}</el-button>
      </el-col>
      <el-col :span="3">
        <el-button v-if="$route.query.pageStatus != 'view'" type="primary" style="width: 100%" @click="handleResetMemberLevel">{{ $t("重置") }}</el-button>
      </el-col>
      <el-col :span="3">
        <el-button style="width: 100%" type="primary" @click="handleGoBack">{{ $t("返回") }}</el-button>
      </el-col>
    </el-row>
    <!-- table Tab -->
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" v-if='$route.query.pageStatus == "view"'>
      <el-menu-item index="reward">{{ $t("操作日志") }}</el-menu-item>
    </el-menu>
    <div class="table-container" v-if='$route.query.pageStatus == "view"'>
      <div class="reward" v-show="activeIndex == 'reward'">
        <el-table :data="logs" v-loading="logsLoading">

          <el-table-column :label="$t('环节')">
            <template slot-scope="{ row }">{{ row.operateType == 1 ? $t("新增") : $t("修改") }}</template>
          </el-table-column>
          <el-table-column :label="$t('操作人')" prop="operator"> </el-table-column>

          <el-table-column :label="$t('操作时间')">
            <template slot-scope="{ row }">{{ row.createTime | parseTime }}</template>
          </el-table-column>
          <el-table-column :label="$t('备注')" prop="remarks"></el-table-column>
          <el-table-column :label="$t('审批流程')" prop="bpmProcessId" width="150"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getDictDatas, DICT_TYPE } from "@/utils/dict"
import imageUpload from "@/components/ImageUpload/index.vue"
import {editMemberLevel, memberLevelConfigDetails, addNewMemberLevel, operateLogPage} from "@/api/ecw/memberManagement"
import { parseTime } from "@/utils/ruoyi"
import { deepClone, titleCase } from "@/utils"
export default {
  name: "operatingLevel",
  components: {
    imageUpload
  },
  computed: {
    isChinese() {
      return this.$i18n.locale === "zh_CN"
    },
  },
  watch: {
    rewardsDetails(newVal, oldVal) {
      if (JSON.stringify(newVal) != "{}") {
        this.queryParams = deepClone(newVal)
        this.queryParams.pickMethod = newVal.pickMethod.split(",")
        this.$nextTick(() => {
          this.$refs["queryForm"].clearValidate()
        })
      } else {
        this.resetFormQuery()
        this.$nextTick(() => {
          this.$refs["queryForm"].resetFields()
          this.$refs["queryForm"].clearValidate()
        })

        console.log("Prop is empty")
      }
    }
  },
  filters: {
    parseTime
  },
  data() {
    return {
      loading: false,
      showViewTime:false,
      titleShow:true,
      activeIndex: "reward",
      logs: [], // 操作日志
      logsLoading: false, // 日志加载中
      queryParams: {
        ruleNumber: null,
        status: null,
        level: null,
        icon: null,
        lowerCount: null,
        name: null,
        upperCount: null,
        validityPeriod: null,
        accumulationPeriod: null,
        startDate: null,
        startTime: null,
        endTime: null,
        enableDate: null,
        description: null,
        sort: null,
        dateRangeCreateTime: []
      },
      rules: {
        name: [
          {
            required: true,
            message: this.$t("必填，限制50字符"),
            trigger: "blur",
            max: 50
          }
        ],
        level: [
          {
            required: true,
            message: this.$t("请输入等级"),
            trigger: "blur"
          }
        ],
        lowerCount: [
          {
            required: true,
            validator: this.validatePositiveInteger2,
            trigger: "blur"
          }
        ],
        upperCount: [
          {
            required: true,
            validator: this.validatePositiveInteger2,
            trigger: "blur"
          }
        ],
        validityPeriod: [
          {
            required: true,
            validator: this.validatePositiveInteger,
            trigger: "blur"
          }
        ],
        accumulationPeriod : [
          {
            required: true,
            validator: this.validatePositiveInteger,
            trigger: "blur"
          },
          {
            type: "number",
            message: this.$t("请输入整数"),
            trigger: "blur"
          }
        ],
        sort : [
          {
            required: true,
            message: this.$t("请输入匹配顺序"),
            trigger: "blur"
          },
          {
            type: "number",
            message: this.$t("请输入整数"),
            trigger: "blur"
          }
        ],
        startTime : [
          {
            required: true,
            message: this.$t("请输入积分开始累计时间"),
            trigger: "blur"
          }
        ],
        description : [
          {
            required: true,
            message: this.$t("必填，限制200字符"),
            trigger: "blur",
            max: 200
          }
        ]
      }
    }
  },
  created() {
    if (this.$route.query.pageStatus == "edit") {
      this.handleMemberLevelDetails()
    } else if (this.$route.query.pageStatus == "view") {
      this.showViewTime = true
      this.handleMemberLevelDetails()
    } else {
      this.titleShow=false;
      if (this.$route.query.params!=null){
        this.queryParams=this.$route.query.params
        this.queryParams.id = null;
        this.queryParams.startDate=parseTime(this.queryParams.startDate)
        this.queryParams.startTime=parseTime(this.queryParams.startTime)
        this.queryParams.endTime=parseTime(this.queryParams.endTime)
        this.queryParams.enableDate=parseTime(this.queryParams.enableDate)
      }
    }
  },
  methods: {
    trimParams(val) {
      this.queryParams[val] = this.queryParams[val].trim();
    },
    validatePositiveInteger(rule, value, callback) {
      if (!value) {
        return callback(new Error(this.$t("请输入整数")));
      } else {
        const regex = /^[1-9]\d*$/;
        if (regex.test(value)) {
          callback();
        } else {
          callback(new Error(this.$t("请输入整数")));
        }
      }
    },
    validatePositiveInteger2(rule, value, callback) {
        const regex = /^(?:0|[1-9]\d*)$/;
        if (regex.test(value)) {
          callback();
        } else {
          callback(new Error(this.$t("请输入整数")));
        }

    },
    validatePositiveIntegerorNull(rule, value, callback) {
      if (value === ''||value === null) {
        callback();
      } else {
        const regex = /^[1-9]\d*$/;
        if (regex.test(value)) {
          callback();
        } else {
          callback(new Error(this.$t("请输入整数")));
        }
      }
    },
    handleMemberLevelDetails(){
      memberLevelConfigDetails({ id: this.$route.query.id }).then(response => {
        this.queryParams = response.data
        this.queryParams.startDate=parseTime(response.data.startDate)
        this.queryParams.startTime=parseTime(response.data.startTime)
        this.queryParams.endTime=parseTime(response.data.endTime)
        this.queryParams.enableDate=parseTime(response.data.enableDate)
        this.queryParams.createTime = parseTime(response.data.createTime, "{y}-{m}-{d} {h}:{i}:{s}")
        this.queryParams.updateTime = parseTime(response.data.updateTime, "{y}-{m}-{d} {h}:{i}:{s}")
        this.loadLogs()
      })
    },
    //保存
    handleSaveIntegralRule(){
      var now = new Date();
      var nowMidnight = new Date(now.getFullYear(), now.getMonth(), now.getDate());
      var specificDate = new Date(this.queryParams.startTime);
      var endDate = new Date(this.queryParams.endTime);
      if(specificDate<nowMidnight) {
        this.$modal.msgWarning(this.$t('开始日期不能早于今天'))
        return false
      }
      if(this.queryParams.endTime!=null&&specificDate>endDate) {
        this.$modal.msgWarning(this.$t('开始日期不能大于结束时间'))
        return false
      }
      this.$refs["queryForm"].validate((valid) => {
        if (valid) {
          let params = deepClone(this.queryParams)
          params.status = null
          params.enableDate = null
          params.ruleNumber = null
          addNewMemberLevel(params).then((res) => {
            this.$message.success(this.$t("保存成功"))
            this.$router.go(-1)
          })
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    //保存并启用
    handleEnableIntegralRule(){
      var now = new Date();
      var nowMidnight = new Date(now.getFullYear(), now.getMonth(), now.getDate());
      var specificDate = new Date(this.queryParams.startTime);
      var endDate = new Date(this.queryParams.endTime);
      if(specificDate<nowMidnight) {
        this.$modal.msgWarning(this.$t('开始日期不能早于今天'))
        return false
      }
      if(this.queryParams.endTime!=null&&specificDate>endDate) {
        this.$modal.msgWarning(this.$t('开始日期不能大于结束时间'))
        return false
      }
      this.$refs["queryForm"].validate((valid) => {
        if (valid) {
          let params = deepClone(this.queryParams)
          params.status = "1"
          params.ruleNumber = null
          addNewMemberLevel(params).then((res) => {
            this.$message.success(this.$t("保存成功"))
            this.$router.go(-1)
          })
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    //编辑更新等级规则
    handleUpdatedMemberLevel(){
      var now = new Date();
      var nowMidnight = new Date(now.getFullYear(), now.getMonth(), now.getDate());
      var specificDate = new Date(this.queryParams.startTime);
      if(specificDate<nowMidnight) {
        this.$modal.msgWarning(this.$t('开始日期不能早于今天'))
        return false
      }
      if(this.queryParams.startTime>this.queryParams.endTime) {
        this.$modal.msgWarning(this.$t('开始日期不能大于结束时间'))
        return false
      }
      this.$refs["queryForm"].validate((valid) => {
        if (valid) {
          let params = deepClone(this.queryParams)
          editMemberLevel(params).then((res) => {
            this.$message.success(this.$t("更新成功"))
            this.$router.go(-1)
          })
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    //返回按钮操作
    handleGoBack() {
      this.$modal
        .confirm(this.$t("确认返回吗?"), this.$t("提示"))
        .then(() => {
          // this.$router.go(-1);
          this.$store.dispatch("tagsView/delCurrentView")
          this.$modal.msgSuccess(this.$t("成功"))
        })
        .catch(() => {})
    },
    //重置按钮操作
    handleResetMemberLevel() {
      console.log("handleResetMemberLevel")
      this.$modal
        .confirm(this.$t("是否确认重置此会员等级规则表单"), this.$t("提示"))
        .then(() => {
          this.$refs["queryForm"].resetFields()
          this.queryParams= {
            ruleNumber: null,
              status: null,
              level: null,
              icon: null,
              lowerCount: null,
              name: null,
              upperCount: null,
              validityPeriod: null,
              accumulationPeriod: null,
              startDate: null,
              startTime: null,
              endTime: null,
              enableDate: null,
              description: null,
              sort: null,
              dateRangeCreateTime: []
          }
          this.$modal.msgSuccess(this.$t("操作成功"))
        })
        .catch(() => {})
    },
    // 加载操作日志
    loadLogs() {
      this.logsLoading = true
      let params = {};
      params.page=1;
      params.rows=10000;
      params.configId=this.queryParams.id;
      operateLogPage(params)
        .then((res) => {
          this.logs = res.data.list
        })
        .finally(() => {
          this.logsLoading = false
        })
    },
  }
}
</script>
<style>
.input-item-width {
  width: 194px;
}
.giftNum .input-item-width {
  width: auto;
}
.line{
  text-align: center;
}
</style>