<template>
  <el-dialog :visible.sync="visible" v-bind="modalOptions" append-to-body>
    <el-form ref="formData" :model="formData" :rules="formRules" size="mini" label-suffix=":" label-width="100px">
      <el-form-item label="满足条件" prop="condition">
        <el-radio-group v-model="formData.condition" size="mini" @input="!formData.condition ? formData.conditions = [] : ''">
          <el-radio-button :label="null">不设置</el-radio-button>
          <el-radio-button :label="1">全部满足</el-radio-button>
          <el-radio-button :label="2">任意满足</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="筛选条件" prop="condition">
        <div v-if="formData.condition">
          <div v-for="(item, index) in formData.conditions" :key="item.type" style="margin-bottom: 10px;">
            <div style="display: flex;align-items: center;">
              <el-select v-model="item.type" placeholder="请选择条件类型">
                <el-option
                  v-for="part in conditionType" :key="part.type" :label="part.name" :value="part.type"
                  :disabled="formData.conditions.map((i) => i.type).includes(part.type)"
                />
              </el-select>
              <el-select v-model="item.calculation" placeholder="请选择">
                <el-option
                  v-for="part in [{ label: '大于', value: 1 }, { label: '等于', value: 2 }, { label: '小于', value: 3 }]" :key="part.value"
                  :label="part.label" :value="part.value"
                />
              </el-select>
              <el-input v-model="item.number" style="width: 200px;" type="number" maxlength="9" />
              <el-button v-if="formData.conditions.length > 1" type="danger" size="mini" @click="formData.conditions.splice(index, 1)">
                删除
              </el-button>
            </div>
          </div>
          <div v-if="formData.conditions.length < 4">
            <el-button type="warning" size="mini" @click="handleAddCondition">
              添加筛选条件
            </el-button>
          </div>
        </div>
        <div v-else>不设置</div>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">添 加</el-button>
        <el-button size="mini" @click="handleClose">关 闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>

export default {
  name: 'IntelProductScreening',
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '920px',
        title: '智能筛选产品'
      },
      visible: false,
      conditionType: [
        {
          type: 1,
          name: '库存'
        },
        {
          type: 2,
          name: '价格'
        },
        {
          type: 3,
          name: '重量'
        },
        {
          type: 4,
          name: '销量'
        }
      ],
      formData: {
        condition: null,
        conditions: []
      },
      formRules: {
        // condition: [
        //   { required: true, message: '请选择满足条件' }
        // ]
        // conditions: [
        //   { type: 'array', required: true, message: '请设置筛选条件' }
        // ]
      }
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    handleOpen(params = { condition: '', conditions: [] }) {
      this.formData.condition = params.condition || null
      this.formData.conditions = JSON.parse(JSON.stringify(params.conditions || []))
      this.visible = true
      this.$forceUpdate()
      // this.$refs.formData && this.$refs.formData.resetFields()
    },
    handleAddCondition() {
      if (this.formData.conditions.some((item) => !item.type)) return this.$message({ message: '请先完善其它未设置的条件', type: 'warning' })
      if (this.conditionType.every((item) => this.formData.conditions.map((i) => i.type).includes(item.type))) return this.$message({ message: '所有条件类型已增加', type: 'warning' })
      this.formData.conditions.push({
        calculation: 1,
        ids: [],
        number: null,
        type: ''
      })
    },
    handleSubmit() {
      this.$refs.formData.validate(async (valid) => {
        if (valid) {
          if (this.formData.condition) {
            if (!this.formData.conditions.length) return this.$message({ message: '请先设置筛选条件', type: 'warning' })
            if (this.formData.conditions.some((item) => !item.type || !item.calculation || !item.number)) return this.$message({ message: '请先完善筛选条件', type: 'warning' })
          }
          this.$emit('success', this.formData)
          this.visible = false
        } else {
          this.$message({ message: '请输入相关信息', type: 'warning' })
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.small-padding {
	.cell {
		padding-left: 5px;
		padding-right: 5px;
	}
}

.fixed-width {
	.el-button--mini {
		padding: 7px 10px;
	}
}
</style>
