<template>
  <el-form
    :rules="rules"
    :model="form"
    ref="form"
    class="sub-form"
    :validate-on-rule-change="false"
  >
    <!-- 文本类型 -->
    <el-form-item label="条件明细" label-width="80px" v-if="ruleType==1">
      <el-select
        style="width:100%;minWidth: 240px"
        v-model="form.name"
        filterable
        remote
        clearable
        :loading="showDrop"
        loading-text="加载中..."
        @change="changeWord"
        @focus="handleFocus"
        @visible-change="handleVisible"
        placeholder="搜索开单项目"
        :remote-method="searchCondition"
        reserve-keyword
        ref="conditionListName"
      >
        <el-option
          v-for="item in conditionList"
          :key="item.id + item.name"
          :label="item.name"
          :value="item.name"
          :title="item.name"
        ></el-option>
      </el-select>
    </el-form-item>
    <!-- <el-form-item prop="condition" label-width="0px">
    </el-form-item>-->

    <el-row v-else-if="ruleType==2">
      <el-col :span="10">
        <el-form-item label="条件明细" label-width="80px">
          <el-select
            style="width:100%"
            v-model="form.name"
            filterable
            remote
            clearable
            :loading="showDrop"
            loading-text="加载中..."
            @change="changeWord"
            @focus="handleFocus"
            @visible-change="handleVisible"
            placeholder="搜索条件明细"
            :remote-method="searchCondition"
            reserve-keyword
            ref="conditionListName"
          >
            <el-option
              v-for="item in conditionList"
              :key="item.id + item.name"
              :label="item.name"
              :value="item.name"
              :title="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="14" class="conditionName">
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="0px">
              <el-select
                v-model="compareTop"
                placeholder="请选择Top"
                style="width: 100%"
                @change="handleRangeTop"
                clearable
                ref="rangeTop"
                @clear="handleClear"
                v-if="top"
              >
                <el-option label="大于" value="大于等于" :disabled="compareBottom=='大于等于' || compareBottom=='大于'"></el-option>
                <el-option label="大于等于" value="大于" :disabled="compareBottom=='大于等于' || compareBottom=='大于'"></el-option>
                <el-option label="小于" value="小于等于" :disabled="compareBottom=='小于' || compareBottom=='小于等于'"></el-option>
                <el-option label="小于等于" value="小于" :disabled="compareBottom=='小于' || compareBottom=='小于等于'"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="0px">
              <el-select
                v-model="compareBottom"
                placeholder="请选择Bottom"
                style="width: 100%"
                @change="handleRangeBottom"
                clearable
                ref="rangeBottom"
                @clear="handleClear"
                v-if="bottom"
              >
                <el-option label="大于" value="大于等于" :disabled="compareTop=='小于' || compareTop=='小于等于'"></el-option>
                <el-option label="大于等于" value="大于" :disabled="compareTop=='小于' || compareTop=='小于等于'"></el-option>
                <el-option label="小于" value="小于等于" :disabled="compareTop=='大于等于' || compareTop=='大于'"></el-option>
                <el-option label="小于等于" value="小于" :disabled="compareTop=='大于等于' || compareTop=='大于'"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <div v-if="top">
              <el-form-item label-width="0px">
                <el-input
                  v-model="form.minValue"
                  ref="minValue"
                  placeholder="minValue Top"
                  v-if="compareTop=='大于等于' || compareTop=='大于' || compareTop==''"
                  @blur="handleChange('minValue')"
                ></el-input>
                <el-input
                  v-model="form.maxValue"
                  ref="maxValue"
                  placeholder="maxValue Top"
                  v-if="compareTop=='小于' || compareTop=='小于等于' "
                  @blur="handleChange('maxValue')"
                ></el-input>
              </el-form-item>
            </div>
            <div v-if="bottom">
              <el-form-item label-width="0px">
                <el-input
                  v-model="form.minValue"
                  ref="minValue"
                  placeholder="minValue Bottom"
                  v-if="compareBottom=='大于等于' || compareBottom=='大于'"
                  @blur="handleChange('minValue')"
                ></el-input>
                <el-input
                  v-model="form.maxValue"
                  ref="maxValue"
                  placeholder="maxValue Bottom"
                  v-if="compareBottom=='小于' || compareBottom=='小于等于' || compareBottom==''"
                  @blur="handleChange('maxValue')"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="7">
            <el-form-item label-width="0px">
              <el-input
                v-model="form.unit"
                ref="unit"
                placeholder="填写单位Top"
                v-if="top"
                @blur="handleChange('unit')"
              ></el-input>
            </el-form-item>
            <el-form-item label-width="0px">
              <el-input
                v-model="form.unit"
                ref="unit"
                placeholder="填写单位Bottom"
                v-if="bottom"
                @blur="handleChange('unit')"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="1" class="operation">
            <div class="icon">
              <img
                src="../../../images/plus.png"
                alt
                @click="handleValue('plus')"
                v-if="(top && !bottom) || (!top && bottom)"
              />
              <img
                src="../../../images/cut.png"
                alt
                @click="handleValue('firstCut')"
                v-if="top && bottom"
              />
              <img
                src="../../../images/cut.png"
                alt
                @click="handleValue('secCut')"
                v-if="top && bottom"
              />
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 数值类型 -->
    <!-- <el-row :gutter="24" class="condition">
      <el-form-item label="条件明细" prop="condition" label-width="80px">
        <el-col :span="8" class="conditionName">
          <el-select
            style="width:100%"
            v-model="form.name"
            filterable
            remote
            clearable
            :loading="showDrop"
            loading-text="加载中..."
            @change="changeWord"
            @focus="handleFocus"
            @visible-change="handleVisible"
            placeholder="搜索条件明细"
            :remote-method="searchCondition"
            reserve-keyword
            ref="conditionListName"
          >
            <el-option
              v-for="item in conditionList"
              :key="item.id + item.name"
              :label="item.name"
              :value="item.id"
              :title="item.name"
            ></el-option>
          </el-select>
        </el-col>

        <div>
          <el-col :span="5">
            <el-select
              v-model="compareTop"
              placeholder="请选择Top"
              style="width: 100%"
              @change="handleRangeTop"
              clearable
              ref="range"
              @clear="handleClear"
              v-if="top"
            >
              <el-option label="大于" :value="4" :disabled="compareBottom==3 || compareBottom==4"></el-option>
              <el-option label="大于等于" :value="3" :disabled="compareBottom==3 || compareBottom==4"></el-option>
              <el-option label="小于" :value="2" :disabled="compareBottom==1 || compareBottom==2"></el-option>
              <el-option label="小于等于" :value="1" :disabled="compareBottom==1 || compareBottom==2"></el-option>
            </el-select>
            <el-select
              v-model="compareBottom"
              placeholder="请选择Bottom"
              style="width: 100%"
              @change="handleRangeBottom"
              clearable
              ref="range"
              @clear="handleClear"
              v-if="bottom"
            >
              <el-option label="大于" :value="4" :disabled="compareTop==3 ||compareTop==4 "></el-option>
              <el-option label="大于等于" :value="3" :disabled="compareTop==3 ||compareTop==4 "></el-option>
              <el-option label="小于" :value="2" :disabled="compareTop==1 ||compareTop==2 "></el-option>
              <el-option label="小于等于" :value="1" :disabled="compareTop==1 ||compareTop==2 "></el-option>
            </el-select>
          </el-col>
          <el-col :span="5">
            <div v-if="top">
              <el-input
                v-model="form.minValue"
                ref="minValue"
                placeholder="填写最小数值 Top"
                v-if="compareTop<=2"
              ></el-input>
              <el-input
                v-model="form.maxValue"
                ref="maxValue"
                placeholder="填写最大数值 Top"
                v-if="compareTop>2"
              ></el-input>
            </div>
            <div v-if="bottom">
              <el-input
                v-model="form.minValue"
                ref="minValue"
                placeholder="填写最小数值 Bottom"
                v-if="compareBottom<=2"
              ></el-input>
              <el-input
                v-model="form.maxValue"
                ref="maxValue"
                placeholder="填写最大数值 Bottom"
                v-if="compareBottom>2"
              ></el-input>
            </div>
          </el-col>
          <el-col :span="5">
            <el-input v-model="form.unit" ref="unit" placeholder="填写单位Top" v-if="top"></el-input>
            <el-input v-model="form.unit" ref="unit" placeholder="填写单位Bottom" v-if="bottom"></el-input>
          </el-col>
          <el-col :span="1" class="operation">
            <div class="icon">
              <img
                src="../../../images/plus.png"
                alt
                @click="handleValue('plus')"
                v-if="(top && !bottom) || (!top && bottom)"
              />
              <img
                src="../../../images/cut.png"
                alt
                @click="handleValue('firstCut')"
                v-if="top && bottom"
              />
              <img
                src="../../../images/cut.png"
                alt
                @click="handleValue('secCut')"
                v-if="top && bottom"
              />
            </div>
          </el-col>
        </div>
      </el-form-item>
    </el-row>-->
  </el-form>
</template>

<script>
import api from '@api/icss.js';
export default {
  name: 'ConditionForm',
  props: ['data', 'type', 'conceptName', 'ruleType'],
  data() {
    var checkFrequency = (rule, value, callback) => {
      let conditionListName = this.$refs.conditionListName.value;
      if (!conditionListName) {
        callback('请输入开单项目');
      } else {
        callback();
      }
    };
    var checkFrequency1 = (rule, value, callback) => {
      // let conditionListName = this.$refs.conditionListName.value;
      let rangeTop = this.$refs.rangeTop && this.$refs.rangeTop.value;
      // let rangeBottom = this.$refs.rangeBottom && this.$refs.rangeBottom.value;
      if (!rangeTop) {
        callback('');
      } else {
        callback();
      }
    };
    return {
      showDrop: false,
      rules: {
        // condition: [
        //   { required: true, validator: checkFrequency, trigger: 'change' }
        // ],
        // compareTop: [
        //   { required: true, validator: checkFrequency1, trigger: 'change' }
        // ],
        // compareBottom: [
        //   { required: true, validator: checkFrequency, trigger: 'change' }
        // ],
        // valueTop: [
        //   { required: true, message: '请输入条件明细', trigger: 'change' }
        // ],
        // valueBottom: [
        //   { required: true, message: '请输入条件明细', trigger: 'change' }
        // ],
        // unitTop: [
        //   { required: true, message: '请输入条件明细', trigger: 'change' }
        // ],
        // unitBottom: [
        //   { required: true, message: '请输入条件明细', trigger: 'change' }
        // ]
      },
      conditionList: [],
      form: {
        conditionLabel: '',
        id: '',
        maxValue: '',
        minValue: '',
        name: '',
        range: '',
        status: '',
        unit: ''
      },
      ruleMount: 1,
      top: true,
      bottom: false,
      compareTop: '',
      compareBottom: ''
    };
  },
  created() {
    this.form = { ...this.data };
    const { maxValue, minValue } = this.form;
    if (minValue === '' && maxValue === '') {
      this.top = true;
      this.bottom = false;
    } else if (minValue === '' && maxValue !== '') {
      this.top = true;
      this.bottom = false;

    } else if (!minValue === '' && maxValue === '') {
      this.top = true;
      this.bottom = false;
    } else {
      this.top = true;
      this.bottom = true;
      // this.compareTop = 3;
      // this.compareBottom = 1;
    }
  },
  methods: {
    //
    handleChange(val) {
      if (val === 'minValue') {
        this.$emit('handleInput', {
          type: 'minValue',
          value: this.form.minValue
        });
      } else if (val === 'maxValue') {
        this.$emit('handleInput', {
          type: 'maxValue',
          value: this.form.maxValue
        });
      } else if (val === 'unit') {
        this.$emit('handleInput', {
          type: 'unit',
          value: this.form.unit
        });
      }
    },

    // 编辑规则
    handleValue(form) {
      if (form === 'plus') {
        this.top = true;
        this.bottom = true;
      } else if (form === 'firstCut') {
        this.top = false;
        this.bottom = true;
        // this.compareTop = '';
      } else if (form === 'secCut') {
        this.top = true;
        this.bottom = false;
      }
    },
    changeWord(val) {
      let condition = this.conditionList.find(item => item.name == val);
      this.$emit('split', condition);
    },
    // 获取焦点
    handleFocus() {},
    handleVisible(flag) {
      if (!flag) {
        this.conceptList = [];
      }
    },
    handleRangeTop(val) {},
    handleRangeBottom(val) {},
    handleClear() {},

    // 搜索列表
    searchCondition(query) {
      const { data, type, conceptName, ruleType } = this;
      if (!query) {
        this.conditionList = [];
        return;
      }
      this.showDrop = true;
      let params = {
        type,
        conceptName,
        ruleType,
        conditionName: query
      };
      api.conditionBillmanIndex(params).then(res => {
        this.showDrop = false;
        if (res.data.code == '0') {
          this.conditionList = res.data.data;
        }
      });
    }
  }
};
</script>

<style lang="less">
.condition {
  /deep/ .el-form-item__label {
    margin-left: 12px !important;
  }
  /deep/ .el-col {
    padding-left: 0px !important;
    padding-right: 4px !important;
  }
  /deep/ .el-form-item__error {
    float: left;
    top: 40px;
    left: 12px;
  }
}

.conditionName {
  /deep/ .el-col {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}
.operation {
  width: 0;
  height: 30px;
  position: relative;
  .icon:before {
    box-sizing: border-box;
    position: absolute;
    top: 20px;
    left: 20px;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    width: 30px;
    content: '';
    height: 30px;
  }
  img {
    position: relative;
    width: 30px;
    height: 30px;
    top: 5px;
    left: 10px;
  }
}
.gap {
  color: #fff;
}
</style>