<template>
    <div>
        <div class="ruleBox" v-for="(item, index) in obj.ruleConditionsList" :key="index">
            <div class="ruleBox_left">
                <div v-if="index == 0">满足条件</div>
            </div>
            <div class="ruleBox_line_box">
                <div class="ruleBox_line_left">
                    <span v-if="index > 0" @click="isUnabled?()=>{}:handleRelation(item)" class="relation">{{ item.relation }}</span>
                </div>
                <div class="ruleBox_line"></div>
            </div>
            <div class="ruleBox_right">
                <div class="ruleBtnBox" v-if="index == obj.ruleConditionsList.length - 1">
                    <el-button round v-for="(el, i) in typeList" :key="i" @click="handleAddRule(el, item)"
                        :disabled="obj.ruleConditionsList.length > 3 || isUnabled">{{ el }}</el-button>
                </div>
                <div class="ruleTitle" v-if="obj.ruleConditionsList.length == 1">请选择任意条件开始创建一个分群</div>
                <div class="ruleSelectBox" v-if="index != obj.ruleConditionsList.length - 1">
                    <div class="ruleSelect_top" v-if="item.ruleList.length > 0">
                        <div class="ruleSelect_left">-</div>
                        <div class="ruleSelect_right">{{ item.selectTitle }}</div>
                        <div v-if="!isUnabled" class="ruleSelect_right_icon">
                            <el-button type="text" 
                                        icon="el-icon-remove-outline"
                                        @click="handleDeleteRule(index)"
                                        class="gray-color"></el-button>
                            <!-- <i class="el-icon-close" ></i> -->
                        </div>
                    </div>
                    <div class="ruleSelect_main">
                        <div class="line_box" v-if="item.ruleList.length > 1">
                            <div class="ruleSelect_main_left"></div>
                            <div class="line_text" @click="isUnabled?()=>{}:handleRelationItem(item)">{{ item.relationItem }}</div>
                            <div class="ruleSelect_main_left"></div>
                        </div>

                        <div class="ruleSelect_main_right">
                            <el-row class="ruleSelect_main_right_item" v-for="(v, vi) in item.ruleList" :key="vi">
                                <el-col :span="6">
                                    <el-select filterable v-model="v.leftValue"
                                        @change="handleChange(v.leftValue, vi, index, item.selectTitle)"
                                        @focus="handleFocusLeft(v.leftValue, vi, index, item.selectTitle)"
                                        :disabled="isUnabled"
                                        >
                                        <div slot="prefix">
                                           <i class="el-icon-search"></i>
                                        </div>
                                        <el-option v-for="item in rowLeftList" :key="item.potId" :label="item.potName"
                                            :value="item.potId"></el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="6">
                                    <el-select filterable v-model="v.expression"
                                        @focus="handleFocusExpress(item.selectTitle)"
                                        :disabled="isUnabled"
                                        >
                                        <el-option v-for="item in expressionList" :key="item.value" :label="item.label"
                                            :value="item.value"></el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="6">
                                    <el-select filterable v-model="v.rightValue" v-if="v.isShow == 'select'"
                                        @focus="handleFocuRight(v.leftValue)"
                                        :disabled="isUnabled">
                                        <el-option v-for="item in rowRightList" :key="item.value" :label="item.label"
                                            :value="item.value"></el-option>
                                    </el-select>
                                    <el-input filterable v-model="v.rightValue" v-if="v.isShow == 'input'" :disabled="isUnabled"></el-input>
                                </el-col>
                                <el-col :span="3" class="addIcon" v-if="!isUnabled">
                                    <el-button type="text" 
                                        icon="el-icon-remove-outline"
                                        @click="handleDeleteRules(index, vi)"
                                        class="gray-color" v-if="item.ruleList.length > 1"></el-button>
                                    <el-button type="text" 
                                        icon="el-icon-circle-plus-outline" 
                                        class="gray-color" 
                                        @click="handleAddRuleItem(index)"
                                        v-if="vi == item.ruleList.length - 1 && item.ruleList.length < 3"
                                        ></el-button>
                                    <!-- <i class="el-icon-plus ruleIcon" 
                                        ></i>
                                    <i class="el-icon-close ruleIcon" 
                                        ></i> -->
                                </el-col>
                            </el-row>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <el-form ref="drawerTwoForm" :model="drawerTwoForm" :rules="drawerTwoFormRules" label-width="120px">
        <el-row>
              <el-col :span="12">
                <el-form-item label="加工类型" prop="computType">
                  <el-radio-group v-model="drawerTwoForm.computType" :disabled="isUnabled">
                    <el-radio label="0">手动执行</el-radio>
                    <el-radio label="1">周期执行</el-radio>
                  </el-radio-group>

                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label-width="0">
                  <el-select filterable v-model="drawerTwoForm.zxzq"
                    v-if="drawerTwoForm.computType != '0' && drawerTwoForm.computType != ''" :disabled="isUnabled">
                    <el-option v-for="item in dateList" :key="item.value" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="到期时间" prop="endTime">
                  <el-date-picker v-model="drawerTwoForm.endTime" type="date" value-format="yyyy-MM-dd"
                    :picker-options="pickdqDateOption" :clearable = "false" :disabled="isUnabled">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
import { listPot } from '@/api/tag/tagList.js'
export default {
    props: {
        content: {
            type: Object,
            default: {}
        },
        editForm: {
            type: Object,
            default: {}
        },
        isUnabled: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            obj: this.content,
            typeList: ['属性指标', '统计指标'],
            rowLeftList: [],
            expressionList: [

            ],
            rowRightList: [],
            // isUnabled:false,
            dateList: [
                { label: '每日', value: '1' },
                { label: '每周', value: '2' },
                { label: '每月', value: '3' },
                { label: '每年', value: '4' },
            ],
            drawerTwoForm:{
                computType:'',
                zxzq:'',
                endTime:'',
            },
            drawerTwoFormRules: {
                computType: [{ required: true, message: "请选择加工类型", trigger: 'change' }],
                zxzq: [{ required: true, message: "请选择加工类型", trigger: 'change' }],
                endTime: [{ required: true, message: "请选择到期时间", trigger: 'change' }],
            },
            pickdqDateOption: {
                disabledDate(time) {
                return time.getTime() <= Date.now()
            }
      },
        }
    },
    watch: {
        'obj.ruleConditionsList': {
            deep: true,
            handler(newVal, oldval) {

            }
        }
    },
    created() {
        this.initListpot()
        this.expressionList = [
            { label: '>', value: '1' },
            { label: '>=', value: '2' },
            { label: '=', value: '3' },
            { label: '<=', value: '4' },
            { label: '<', value: '5' },
            { label: '!=', value: '6' },
        ]
        console.log(this.editForm);
        this.drawerTwoForm.computType = this.editForm.computType == '0'?'0':'1';
        this.drawerTwoForm.zxzq = this.editForm.computType !='0'?this.editForm.computType:''
        this.drawerTwoForm.endTime = this.editForm.endDate;
    },
    methods: {
        handleAddRule(el, item) {
            if (el == '属性指标') {
                this.obj.ruleConditionsList.push({ selectTitle: el, relation: '且', num: 0, relationItem: '或', itemNum: 0, ruleList: [{ leftValue: '', expression: '', rightValue: '', isShow: 'select' }] })
            } else if (el == '统计指标') {
                this.obj.ruleConditionsList.push({ selectTitle: el, relation: '且', num: 0, relationItem: '或', itemNum: 0, ruleList: [{ leftValue: '', expression: '', rightValue: '', isShow: 'input' }] })
            }
            item.selectTitle = el
        },
        handleDeleteRule(index) {
            this.obj.ruleConditionsList.splice(index, 1)
        },
        handleRelation(item) {
            item.num++
            if (item.num % 2 === 0) {
                this.$set(item, 'relation', '且')
            } else {
                this.$set(item, 'relation', '或')
            }
        },
        handleRelationItem(item) {
            item.itemNum++
            if (item.itemNum % 2 === 0) {
                this.$set(item, 'relationItem', '且')
            } else {
                this.$set(item, 'relationItem', '或')
            }
        },
        handleAddRuleItem(index) {
            this.obj.ruleConditionsList[index].ruleList.push({ leftValue: '', expression: '', rightValue: '', isShow: 'input' })
        },
        handleDeleteRules(index, vi) {
            this.obj.ruleConditionsList[index].ruleList.splice(vi, 1)
        },
        initListpot() {
            listPot('').then(res => {
                this.rowLeftList = res.data
            })
        },
        handleFocusLeft(val, vi, index, title) {

            if (title == '属性指标') {
                listPot(3).then(res => {
                    console.log(res, '111')
                    this.rowLeftList = res.data
                })
            } else if (title == '统计指标') {
                listPot(1).then(res => {
                    console.log(res, '333')
                    this.rowLeftList = res.data
                })
            }
        },
        handleFocusExpress(title) {
            if (title == '属性指标') {
                this.expressionList = [
                    { label: '=', value: '3' },
                    { label: '!=', value: '6' },
                ]
            } else if (title == '统计指标') {
                this.expressionList = [
                    { label: '>', value: '1' },
                    { label: '>=', value: '2' },
                    { label: '=', value: '3' },
                    { label: '<=', value: '4' },
                    { label: '<', value: '5' },
                    { label: '!=', value: '6' },
                ]
            }
        },
        handleFocuRight(val) {
            let arr = this.rowLeftList.filter(item => item.potId == val)
            let enumArr = arr[0].enums.split('|')
            console.log(enumArr, 'enumArr')
            this.rowRightList = enumArr.map(item => {
                return {
                    label: item,
                    value: item
                }
            })
        },
        handleChange(val, vi, index, title) {
            if (title == '属性指标') {
                this.obj.ruleConditionsList[index].ruleList[vi].isShow = 'select'
                this.obj.ruleConditionsList[index].ruleList[vi].tabThresholdType = arr[0].potType
            } else if (title == '统计指标') {
                this.obj.ruleConditionsList[index].ruleList[vi].isShow = 'input'
                this.obj.ruleConditionsList[index].ruleList[vi].towOrThree = '1'
                this.obj.ruleConditionsList[index].ruleList[vi].tabThresholdType = arr[0].potType
            }
        }
    },
}
</script>
<style lang="scss" scoped>
.main {
    background-color: #ffffff;
    overflow: hidden;
    box-shadow: 0 3px 8px 0 #00000017;
    border-radius: 16px 16px 0 0;
    padding: 10px 15px;
}

.common-title {
    position: relative;
    color: #222222;
    line-height: 16px;
    font-weight: 600;
    font-size: 16px;
    padding-left: 10px;
    margin-top: 10px;

    &::before {
        position: absolute;
        top: 50%;
        transform: translatey(-50%);
        left: 0;
        content: '';
        width: 3px;
        background-color: #4886f8;
        height: 16px;
        border-radius: 2px;
    }
}

.ruleBox {
    ::v-deep .el-select {
        width: 150px;
    }

    ::v-deep .el-input {
        width: 150px;
    }
}

.ruleBox {
    display: flex;
    margin-top: 15px;
}

.ruleBox_left {
    padding-top: 10px;
    width: 80px;
    text-align: right;
}

.ruleBox_line_box {
    display: flex;
}

.ruleBox_line {
    width: 3px;
    margin-left: 20px;
    background-color: #ccc;
}

.ruleBox_line_left {
    width: 16px;
    color: rgb(64, 149, 229);
}

.relation {
    cursor: pointer;

}

.ruleBox_right {
    padding-left: 30px;
    width: 100%;
    padding-bottom: 30px;
}

.ruleTitle {
    margin-top: 20px;
    font-size: 14px;
    color: #ccc;
}

.ruleSelect_top {
    display: flex;
    padding-left: 10px;
    align-items: center;
}

.ruleSelect_left {
    width: 15px;
    height: 15px;
    text-align: center;
    line-height: 13px;
    background-color: rgb(64, 149, 229);
    color: #fff;
}

.ruleSelect_right {
    margin-left: 15px;
}



.ruleSelect_right_icon {
    margin-left: 15px;
    cursor: pointer;
    ::v-deep .el-icon-remove-outline {
      font-size: 20px;
    }

    ::v-deep .gray-color {
      color: #999999;
    }
}

.ruleSelect_main {
    margin-top: 15px;
    display: flex;
}

.line_box {
    display: flex;
    width: 15px;
    flex-direction: column;
}

.line_text {

    margin: 5px 0 5px 6px;
    color: rgb(64, 149, 229);
    cursor: pointer;
    width: 22px;
    height: 22px;
    text-align: center;
    line-height: 21px;
    border: 1px solid #ccc;
    border-radius: 50%;
}

.ruleSelect_main_left {
    width: 3px;
    margin-left: 15px;
    height: 100%;
    background-color: #ccc;
}

.ruleSelect_main_right {
    width: 100%;
    margin-left: 23px;
}

.addIcon {
    line-height: 40px;
    margin-left: 15px;
     ::v-deep .el-icon-circle-plus-outline {
      color: #4886f8;
      font-size: 20px;
    }

    ::v-deep .el-icon-remove-outline {
      font-size: 20px;
    }

    ::v-deep .gray-color {
      color: #999999;
    }
}

.ruleSelect_main_right_item {
    margin-top: 10px;
    height: 40px;
    ::v-deep .el-input__prefix{
        top:8px;
    }
    ::v-deep .el-input__inner{
        padding-left: 23px;
    }
}

.ruleIcon {
    font-size: 16px;
    cursor: pointer;
}

.updateType_box {
    display: flex;
    margin-top: 30px;
    align-items: center;

    ::v-deep .el-select {
        width: 100px;
        margin: 0 10px;
    }
}

.footer {
    margin-bottom: 30px;
    text-align: right;
}
</style>