<template>
  <el-dialog :close-on-click-modal="false" :title="tipState ? '新增' : '编辑'" width="600px" :visible.sync="visible">
    <div class="addtips">
      <template>
        <div class="add_page">
          <div class="add_content">
            <el-form label-width="80px">
              <el-form-item label="标签名称">
                <el-input v-model="form.name" maxlength="32" placeholder="最多输入32个字符" />
              </el-form-item>
              <el-form-item label="标签类型">
                <el-radio-group v-model="form.type">
                  <el-radio :label="1">手动标签</el-radio>
                  <el-radio :label="2">自动标签</el-radio>
                </el-radio-group>
              </el-form-item>
              <div v-if="form.type === 2" class="auto_label">
                <el-form-item label="满足条件">
                  <el-radio-group v-model="form.meetCondition">
                    <el-radio :label="1">满足任意选中的条件即可</el-radio>
                    <el-radio :label="2">必须满足所有选被中的条件</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="交易条件">
                  <el-checkbox-group v-model="checkBox">
                    <el-row>
                      <el-checkbox :label="1" name="config">最后消费时间</el-checkbox>
                      <el-row>
                        <el-radio-group v-model="form.config.lastConsumTime.type">
                          <el-row class="indent">
                            <el-radio :label="1">最近</el-radio>
                            <el-select
                              v-model="form.config.lastConsumTime.value" style="width: 70px" :disabled="form.config.lastConsumTime.type === 2 ||
                                !checkBox.includes(1)
                              "
                            >
                              <el-option
                                v-for="(item, index) in dayList" :key="index" :label="item.label"
                                :value="item.label"
                              />
                            </el-select>
                            <span style="font-size: 16px; margin-left: 10px">天</span>
                          </el-row>
                          <el-row class="indent">
                            <el-radio :label="2">自定义</el-radio>
                            <el-date-picker
                              v-model="date" :disabled="form.config.lastConsumTime.type === 1 ||
                                !checkBox.includes(1)
                              " type="daterange" range-separator="至"
                              start-placeholder="开始时间" end-placeholder="结束时间"
                              value-format="yyyy-MM-dd" @change="handleChange"
                            />
                          </el-row>
                        </el-radio-group>
                      </el-row>
                    </el-row>
                    <el-row>
                      <el-checkbox :label="2" name="config">累计消费次数</el-checkbox>
                      <el-row class="indent">
                        <el-col :span="5" class="unit">
                          <el-input
                            v-model="totalConsumTimes.start" maxlength="9" :disabled="!checkBox.includes(2)"
                            oninput="value=value.replace(/[^\d]/g,'')"
                          />
                          <span>次</span>
                        </el-col>
                        <el-col :span="2" style="font-size: 16px; text-align: center">ㅡ</el-col>
                        <el-col :span="5" class="unit">
                          <el-input
                            v-model="totalConsumTimes.end" maxlength="9" :disabled="!checkBox.includes(2)"
                            oninput="value=value.replace(/[^\d]/g,'')"
                          />
                          <span>次</span>
                        </el-col>
                      </el-row>
                    </el-row>
                    <el-row>
                      <el-checkbox :label="3" name="config">累计消费金额</el-checkbox>
                      <el-row class="indent">
                        <el-col :span="5" class="unit">
                          <el-input
                            v-model="totalConsumAmount.start" maxlength="9" :disabled="!checkBox.includes(3)"
                            oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                          />
                          <span>元</span>
                        </el-col>
                        <el-col :span="2" style="font-size: 16px; text-align: center">ㅡ</el-col>
                        <el-col :span="5" class="unit">
                          <el-input
                            v-model="totalConsumAmount.end" maxlength="9" :disabled="!checkBox.includes(3)"
                            oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                          />
                          <span>元</span>
                        </el-col>
                      </el-row>
                    </el-row>
                  </el-checkbox-group>
                </el-form-item>
              </div>
            </el-form>
          </div>
          <div class="footer">
            <div class="btn_list">
              <el-button @click="back">取消</el-button>
              <el-button type="primary" @click="save">保存</el-button>
            </div>
          </div>
        </div>
      </template>
    </div>
  </el-dialog>
</template>

<script>
import { tipsAdd, tipsGetById, tipsUpdate } from '@/api/customerMage'

function AddForm() {
  this.labelType = '' // 标签类型 1-手动标签 2-自动标签
  this.meetConditions = '' // 满足条件 1-满足任意一个被选中条件即可  2-必须满足所有被选中条件
  this.lastConsumptionTime = '' // 是否选中最后消费时间 1-是 0-否
  this.consumptionFrequency = '' // 是否选中累计消费次数  1-是 0-否
  this.consumptionMoney = '' // 是否选中累计交易金额 1-是 0-否
  this.consumptionDay = '' // 最近几天（天）
  this.consumptionStartTime = '' // 最后消费开始时间
  this.consumptionEndTime = '' // 最后消费结束时间
  this.frequencyStart = '' // 起始次数
  this.frequencyEnd = '' // 截止次数
  this.moneyStart = '' // 起始金额
  this.moneyEnd = '' // 截止金额
}
function FormInfo() {
  this.name = '' // 标签名称
  this.meetCondition = 1 // 满足条件
  this.type = 1
  this.config = {
    totalConsumTimes: '',
    // 最近
    lastConsumTime: {
      type: 1,
      value: 3
    },
    totalConsumAmount: ''
  }
}
export default {
  name: 'TipsForm',
  data() {
    return {
      visible: false,
      form: new FormInfo(),
      addForm: new AddForm(),
      checkBox: [], // 交易条件
      totalConsumTimes: {
        start: '',
        end: ''
      },
      totalConsumAmount: {
        start: '',
        end: ''
      },
      tipState: false,
      date: [], // 自定义时间
      dayList: [
        { label: 3 },
        { label: 7 },
        { label: 15 },
        { label: 30 },
        { label: 45 },
        { label: 60 }
      ],
      buyerLabelId: ''
    }
  },
  methods: {
    show(params) {
      this.tipState = !params
      this.visible = true

      if (this.tipState) {
        this.addForm = new AddForm()
        this.form = new FormInfo()
      } else {
        this.buyerLabelId = params.buyerLabelId
        this.getDetails(params.buyerLabelId)
      }
    },
    handleChange(value) {
      console.log(value)
      // this.form.config.lastConsumTime.value = `${(value && value[0]) || ''}${value && value[0] ? '至' : ''}${(value && value[1]) || ''}`
    },
    // 返回
    back() {
      this.visible = false
    },
    // 编辑查询
    getDetails(buyerLabelId) {
      tipsGetById({ buyerLabelId }).then((res) => {
        this.form = {
          name: res.data.labelName, // 标签名称
          meetCondition: res.data.meetConditions, // 满足条件
          type: res.data.labelType,
          config: {
            totalConsumTimes: '',
            // 最近
            lastConsumTime: {
              type: 1,
              value: 3
            },
            totalConsumAmount: ''
          }
        }
        this.totalConsumTimes = {
          start: res.data.frequencyStart,
          end: res.data.frequencyEnd
        }
        this.totalConsumAmount = {
          start: res.data.moneyStart,
          end: res.data.moneyEnd
        }
        this.checkBox = res.data.consumptions
      })
    },
    // 添加/编辑
    async save() {
      if (this.form.type === 1) {
        this.form.config.lastConsumTime.value = ''
        this.form.meetConditions = ''
      }
      const obj = {
        labelName: this.form.name, // 标签名称
        labelType: this.form.type, // 标签类型 1-手动标签 2-自动标签
        meetConditions: this.form.meetCondition,
        conditions: this.checkBox,
        consumptionDay: this.form.config.lastConsumTime.value, // 最近几天（天）
        consumptionStartTime: this.date[0] || '', // 最后消费开始时间
        consumptionEndTime: this.date[1] || '', // 最后消费结束时间
        frequencyStart: this.totalConsumTimes.start, // 起始次数
        frequencyEnd: this.totalConsumTimes.end, // 截止次数
        moneyStart: this.totalConsumAmount.start, // 起始金额
        moneyEnd: this.totalConsumAmount.end // 截止金额
      }
      if (this.tipState) {
        const res = await tipsAdd(obj)
        if (res.code === '') {
          this.$message.success('新增成功')
          this.form = new FormInfo()
          this.visible = false
          this.$emit('reset')
        }
      } else {
        obj.buyerLabelId = this.buyerLabelId
        const res = await tipsUpdate(obj)
        if (res.code === '') {
          this.$message.success('修改成功')
          this.form = new FormInfo()
          this.visible = false
          this.$emit('reset')
        }
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.add_page {
	background-color: #fff;

	.footer {
		height: 80px;
		line-height: 80px;
		font-size: 24px;
		border-top: 1px solid #e0e5eb;

		.btn_list {
			float: right;
		}
	}

	.add_content {
		margin: 20px auto;

		.indent {
			padding-left: 20px;
			margin-bottom: 15px;
			box-sizing: border-box;
		}

		.auto_label {
			background-color: #f7f7f7;
			border-radius: 4px;
			overflow: hidden;
		}
	}
}

.unit {
	position: relative;

	span {
		position: absolute;
		right: 0;
		font-size: 16px;
		border-left: 1px solid #dcdfe6;
		padding: 0 8px;
	}
}
</style>
