<template>
  <div class="add_page">
    <div class="header">
      {{ title }}
      <div class="btn_list">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </div>
    <div class="add_content">
      <el-form label-width="80px">
        <el-form-item label="标签名称">
          <el-input v-model="form.name" 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="3" class="unit">
                    <el-input v-model="totalConsumTimes.start" :disabled="!checkBox.includes(2)" />
                    <span>次</span>
                  </el-col>
                  <el-col :span="1" style="font-size: 16px;text-align: center;">
                    ㅡ
                  </el-col>
                  <el-col :span="3" class="unit">
                    <el-input v-model="totalConsumTimes.end" :disabled="!checkBox.includes(2)" />
                    <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="3" class="unit">
                    <el-input v-model="totalConsumAmount.start" :disabled="!checkBox.includes(3)" />
                    <span>元</span>
                  </el-col>
                  <el-col :span="1" style="font-size: 16px;text-align: center;">
                    ㅡ
                  </el-col>
                  <el-col :span="3" class="unit">
                    <el-input v-model="totalConsumAmount.end" :disabled="!checkBox.includes(3)" />
                    <span>元</span>
                  </el-col>
                </el-row>

              </el-row>
            </el-checkbox-group>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import Label from '@/api/Label'
export default {
  data() {
    return {
      form: {
        name: '',
        meetCondition: 1,
        type: 1,
        config: {
          totalConsumTimes: '',
          lastConsumTime: {
            type: 1,
            value: 3
          },
          totalConsumAmount: ''

        }
      },
      checkBox: [],
      totalConsumTimes: {
        start: '',
        end: ''
      },
      totalConsumAmount: {
        start: '',
        end: ''
      },
      num: '',
      date: [],
      dayList: [
        { label: 3 },
        { label: 7 },
        { label: 15 },
        { label: 30 },
        { label: 45 },
        { label: 60 }
      ]
    }
  },
  computed: {
    title() {
      const ob = {
        edit: '修改标签',
        add: '创建标签'
      }
      return ob[this.$route.query.type]
    }
  },
  created() {
    this.$route.meta.title = this.title
    this.getTagInfo()
  },
  methods: {
    async getTagInfo() {
      const info = this.$route.query
      if (info.type === 'add') return
      const res = await Label.getTagInfo(info.id)
      const resData = res.data
      if (resData.code === 0) {
        const ob = resData.data
        Object.keys(this.form).forEach(item => {
          this.form[item] = ob[item]
          if (item === 'config') {
            this.totalConsumAmount = this.changeFields(ob.config.totalConsumAmount, true)
            this.totalConsumTimes = this.changeFields(ob.config.totalConsumTimes, false)
            this.form.config.lastConsumTime.value = this.changeTime(ob.config.lastConsumTime)
          }
        })
      }
    },
    handleChange(value) {
      // this.form.config.lastConsumTime.value = `${(value && value[0]) || ''}${value && value[0] ? '至' : ''}${(value && value[1]) || ''}`
    },
    getDate(obj) {
      const value = this.date
      if (obj.type === 2) {
        obj.value = `${(value && value[0]) || ''}${value && value[0] ? '至' : ''}${(value && value[1]) || ''}`
      }
    },
    save() {
      const _ = this
      const query = _.$route.query
      const ob = {
        edit: 'editTag',
        add: 'addLabel'
      }
      if (query.type === 'edit') {
        _.form.id = query.id
      }
      _.form.config.totalConsumTimes = this.assemblyFields(_.totalConsumTimes.start, _.totalConsumTimes.end, false)
      _.form.config.totalConsumAmount = this.assemblyFields(_.totalConsumAmount.start, _.totalConsumAmount.end, true)
      _.getDate(_.form.config.lastConsumTime)
      Label[ob[query.type]](this.form).then(res => {
        if (res.data.code === 0) {
          _.$message.success('新增成功')
          _.cancel()
        }
      })
    },
    cancel() {
      this.$router.push({ path: '/customer-manage/label' })
    },
    assemblyFields(val1, val2, boo) {
      let t = ''
      if (val1 || val2) {
        t = boo ? `${val1 * 100}-${val2 * 100}` : `${val1}-${val2}`
      }
      return t
    },
    changeFields(obj, flag) {
      const ob = {
        start: '',
        end: ''
      }
      if (obj) {
        const t = obj.split('-')
        ob.start = flag ? t[0] / 100 : t[0]
        ob.end = flag ? t[1] / 100 : t[1]
        flag ? this.checkBox.push(3) : this.checkBox.push(2)
      }
      return ob
    },
    changeTime(obj) {
      let value = 3
      if (obj) {
        this.checkBox.push(1)
        if (obj.type === 2) {
          this.date = obj.value.split('至')
        } else {
          value = obj.value
        }
      }
      return value
    }
  }
}
</script>

<style lang='less' scoped>
.add_page {
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
    .header {
        height: 80px;
        line-height: 80px;
        font-size: 24px;
        border-bottom: 1px solid #E0E5EB;
        .btn_list {
            float: right;
        }
    }

    .add_content {
        width: 60%;
        margin: 20px auto;
        .indent {
          padding-left: 20px;
          margin-bottom: 15px;
          box-sizing: border-box;
        }
        .auto_label {
          background-color: #F7F7F7;
          border-radius: 4px;
          overflow: hidden;
        }
    }
}

/deep/ .unit {
  position: relative;
  span {
    position: absolute;
    right: 0;
    font-size: 16px;
    border-left: 1px solid #DCDFE6;
    padding: 0 8px;
  }
  .el-input__inner {
      padding: 0 40px 0 5px ;
    }
}
</style>
