<template>
  <el-dialog :close-on-click-modal="false" :title="isAdd ? '新建规则' : '编辑规则'" width="600px" :visible.sync="visible">
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
      <el-form-item label="规则名称" prop="ruleName">
        <el-input v-model="form.ruleName" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="规则关系">
        <el-radio-group v-model="form.ruleType">
          <el-radio :label="1">满足以下任一规则</el-radio>
          <el-radio :label="2">满足以下全部规则</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="group-head">
        <b>基础规则1： 创建订单数限制</b>
        <el-switch v-model="form.ruleSwitchPlaceOrder" :active-value="1" :inactive-value="0">
        </el-switch>
      </div>
      <div class="group-body">
        最近
        <el-input
          v-model="rulePlaceOrderLimit.timeNum" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="9"
          placeholder="输入小时数"
        ></el-input>
        小时，创建订单数
        <el-select v-model="rulePlaceOrderLimit.compare" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-input
          v-model="rulePlaceOrderLimit.num" class="mar-l" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="9"
          placeholder="输入订单数"
        ></el-input>
      </div>
      <div class="group-head">
        <b>基础规则2： 待付款订单数限制</b>
        <el-switch v-model="form.ruleSwitchWaitPay" :active-value="1" :inactive-value="0">
        </el-switch>
      </div>
      <div class="group-body">
        最近
        <el-input
          v-model="ruleWaitPayLimit.timeNum" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="9"
          placeholder="输入小时数"
        ></el-input>
        小时，待付款订单数
        <el-select v-model="ruleWaitPayLimit.compare" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-input
          v-model="ruleWaitPayLimit.num" class="mar-l" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="9"
          placeholder="输入订单数"
        ></el-input>
      </div>
      <div class="group-head">
        <b>基础规则3： 单sku商品采购数限制</b>
        <el-switch v-model="form.ruleSwitchSku" :active-value="1" :inactive-value="0">
        </el-switch>
      </div>
      <div class="group-body">
        单sku商品采购数量
        <el-select v-model="ruleSkuLimit.compare" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-input
          v-model="ruleSkuLimit.num" class="mar-l" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="9"
          placeholder="输入采购数"
        ></el-input>
      </div>
      <div class="group-head">
        <b>基础规则4： 售后订单数限制</b>
        <el-switch v-model="form.ruleSwitchPostSale" :active-value="1" :inactive-value="0">
        </el-switch>
      </div>
      <div class="group-body">
        最近
        <el-input
          v-model="rulePostSaleLimit.timeNum" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="9"
          placeholder="输入月数"
        ></el-input>
        个月，售后订单数
        <el-select v-model="rulePostSaleLimit.compare" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-input
          v-model="rulePostSaleLimit.num" class="mar-l" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="9"
          placeholder="输入采购数"
        ></el-input>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="doCancel">取消</el-button>
      <el-button type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  addRule,
  updateRule
} from '@/api/risk'
export default {
  name: 'AdForm',
  data() {
    return {
      visible: false,
      form: {
        ruleName: '',
        ruleType: 1,
        ruleSwitchPlaceOrder: 0,
        ruleSwitchPostSale: 0,
        ruleSwitchSku: 0,
        ruleSwitchWaitPay: 0,
        rulePlaceOrderLimit: {},
        rulePostSaleLimit: {},
        ruleSkuLimit: {},
        ruleWaitPayLimit: {}
      },
      rules: {
        ruleName: [
          { required: true, message: '规则名称不能为空', trigger: 'blur' }
        ]
      },
      rulePlaceOrderLimit: {
        timeNum: 0,
        compare: 'lt',
        num: 0
      },
      rulePostSaleLimit: {
        timeNum: 0,
        compare: 'lt',
        num: 0
      },
      ruleSkuLimit: {
        compare: 'lt',
        num: 0
      },
      ruleWaitPayLimit: {
        timeNum: 0,
        compare: 'lt',
        num: 0
      },
      cateId: null,
      options: [{
        value: 'lt',
        label: '小于'
      }, {
        value: 'eq',
        label: '等于'
      }, {
        value: 'gt',
        label: '大于'
      }],
      isAdd: false
    }
  },
  methods: {
    // 打开弹出窗
    show(row) {
      this.isAdd = !row
      if (this.isAdd) {
        this.form = {
          ruleName: '',
          ruleType: 1,
          ruleSwitchPlaceOrder: 0,
          ruleSwitchPostSale: 0,
          ruleSwitchSku: 0,
          ruleSwitchWaitPay: 0,
          status: 1
        }
        this.rulePlaceOrderLimit = {}
        this.rulePostSaleLimit = {}
        this.ruleSkuLimit = {}
        this.ruleWaitPayLimit = {}
      } else {
        this.form = JSON.parse(JSON.stringify(row))
        this.rulePlaceOrderLimit = JSON.parse(row.rulePlaceOrderLimit)
        this.rulePostSaleLimit = JSON.parse(row.rulePostSaleLimit)
        this.ruleSkuLimit = JSON.parse(row.ruleSkuLimit)
        this.ruleWaitPayLimit = JSON.parse(row.ruleWaitPayLimit)
      }
      this.visible = true
    },
    // 取消
    doCancel() {
      this.visible = false
    },
    // 提交
    doSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.rulePlaceOrderLimit = JSON.stringify(this.rulePlaceOrderLimit)
          this.form.rulePostSaleLimit = JSON.stringify(this.rulePostSaleLimit)
          this.form.ruleSkuLimit = JSON.stringify(this.ruleSkuLimit)
          this.form.ruleWaitPayLimit = JSON.stringify(this.ruleWaitPayLimit)
          if (this.isAdd) {
            addRule(this.form).then((res) => {
              this.$message({
                message: '新增成功',
                type: 'success'
              })
              this.$emit('reset')
              this.visible = false
            })
              .catch((err) => {
                this.visible = false
              })
          } else {
            updateRule(this.form).then((res) => {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.$emit('reset')
              this.visible = false
            })
              .catch((err) => {
                this.visible = false
              })
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.group-head {
	margin-bottom: 10px;
	display: flex;
	justify-content: space-between;

	b {}
}

.group-body {
	margin-bottom: 30px;

	.el-input {
		width: 100px;

		>>>.el-input__inner {
			padding-right: 0;
		}
	}

	.el-select {
		width: 100px;
	}

	.mar-l {
		margin-left: 10px;
	}
}

.el-table .el-button {
	margin-left: 0;
}
</style>
