<style scoped>
  .virtual-catalog-condition {
    width: 800px;
  }

  .virtual-catalog-condition .el-select {
    width: 98%;
  }

  .condition-label{
    text-align:right;
    line-height:30px;
    font-weight:bold;
    color: #606266;
  }
</style>
<style>
  .virtual-catalog-condition .el-checkbox+.el-checkbox {
    margin-left: 0px;
  }
  .virtual-catalog-condition .el-checkbox-group label:nth-child(6n){
    padding-left: 0px;
  }
</style>
<template>
  <div class="padding-top-bottom virtual-catalog-condition">
    <el-row type="flex" :gutter="5" style="margin-bottom: 10px">
      <el-col :span="4" class="condition-label">
        <span>筛选条件1：</span>
      </el-col>
      <el-col :span="4">
        <el-select v-model="tmpCondition.column1" @change="val=>columnChange(val,'1')">
          <el-option label="" value=""></el-option>
          <el-option v-for="item in conditionColumns" :key="item.key" :label="item.value" :value="item.key">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <div v-if="tmpCondition.column1">
          <el-select v-model="tmpCondition.column1OperatorSelected" @change="val=>operatorChange(val,'1')">
            <el-option v-for="item in tmpCondition.column1Operator" :key="item.key" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="12">
        <div v-if="tmpCondition.column1&&tmpCondition.column1OperatorSelected">
          <el-checkbox-group style="margin-top:5px;" v-model="tmpCondition.column1ValueSelected" v-if="tmpCondition.column1 === 'Attribute'">
            <el-checkbox v-for="item in tmpCondition.column1Value" :key="item.key" :label="item.key">{{item.value}}&nbsp;&nbsp;</el-checkbox>
          </el-checkbox-group>
          <el-input v-model="tmpCondition.column1ValueSelected" :style="{'max-width':'200px'}" v-if="['Author','Keyword','Source','tag','Title'].includes(tmpCondition.column1)"></el-input>
          <el-date-picker v-model="tmpCondition.column1ValueSelected" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" :style="{'max-width':'200px'}" @change="val=>datetimeChange(val,'1')"
            id="datetime-column1" v-if="tmpCondition.column1 === 'PublishDate'">
          </el-date-picker>
          <el-select v-model="tmpCondition.column1ValueSelected" :style="{'max-width':'200px'}" v-if="tmpCondition.column1 === 'TopFlag'">
            <el-option v-for="item in tmpCondition.column1Value" :key="item.key" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
          <el-select v-model="tmpCondition.column1ValueSelected" :style="{'max-width':'200px'}" v-if="tmpCondition.column1 === 'BranchInnerCode'">
            <el-option v-for="item in tmpCondition.column1Value" :key="item.key" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
          <div v-if="tmpCondition.column1.includes('DimensionCatalog')">
            <el-input disabled v-model="dimensionCatalogDlg.names" :style="{'max-width':'200px'}" :title="dimensionCatalogDlg.names"
              placeholder=""></el-input>
            <el-button @click="choiceDimensionCatalog(`${tmpCondition.column1ValueSelected}`,1)">选择</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" :gutter="5" style="margin-bottom: 10px">
      <el-col :span="4" style="text-align:right;">
        <el-select placeholder="" style="max-width:70px" v-model="tmpCondition.columnGroup2">
          <el-option v-for="item in groupOperator" :key="item.key" :label="item.value" :value="item.key"></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="tmpCondition.column2" @change="val=>columnChange(val,'2')">
          <el-option label="" value=""></el-option>
          <el-option v-for="item in conditionColumns" :key="item.key" :label="item.value" :value="item.key">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <div v-if="tmpCondition.column2">
          <el-select v-model="tmpCondition.column2OperatorSelected" @change="val=>operatorChange(val,'2')">
            <el-option v-for="item in tmpCondition.column2Operator" :key="item.key" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="12">
        <div v-if="tmpCondition.column2&&tmpCondition.column2OperatorSelected">
          <el-checkbox-group style="margin-top:5px;" v-model="tmpCondition.column2ValueSelected" v-if="tmpCondition.column2 === 'Attribute'">
            <el-checkbox v-for="item in tmpCondition.column2Value" :key="item.key" :label="item.key">{{item.value}}&nbsp;&nbsp;</el-checkbox>
          </el-checkbox-group>
          <el-input v-model="tmpCondition.column2ValueSelected" :style="{'max-width':'200px'}" v-if="['Author','Keyword','Source','tag','Title'].includes(tmpCondition.column2)"></el-input>
          <el-date-picker v-model="tmpCondition.column2ValueSelected" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" :style="{'max-width':'200px'}" @change="val=>datetimeChange(val,'2')"
            id="datetime-column2" v-if="tmpCondition.column2 === 'PublishDate'">
          </el-date-picker>
          <el-select v-model="tmpCondition.column2ValueSelected" :style="{'max-width':'200px'}" v-if="tmpCondition.column2 === 'TopFlag'">
            <el-option v-for="item in tmpCondition.column2Value" :key="item.key" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
          <el-select v-model="tmpCondition.column2ValueSelected" :style="{'max-width':'200px'}" v-if="tmpCondition.column2 === 'BranchInnerCode'">
            <el-option v-for="item in tmpCondition.column2Value" :key="item.key" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
          <div v-if="tmpCondition.column2.includes('DimensionCatalog')">
            <el-input disabled v-model="dimensionCatalogDlg.names" :style="{'max-width':'200px'}" :title="dimensionCatalogDlg.names"
              placeholder=""></el-input>
            <el-button @click="choiceDimensionCatalog(`${tmpCondition.column2ValueSelected}`,2)">选择</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" :gutter="5" style="margin-bottom: 10px">
      <el-col :span="4" style="text-align:right;">
        <el-select placeholder="" style="max-width:70px" v-model="tmpCondition.columnGroup3">
          <el-option v-for="item in groupOperator" :key="item.key" :label="item.value" :value="item.key"></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="tmpCondition.column3" @change="val=>columnChange(val,'3')">
          <el-option label="" value=""></el-option>
          <el-option v-for="item in conditionColumns" :key="item.key" :label="item.value" :value="item.key">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <div v-if="tmpCondition.column3">
          <el-select v-model="tmpCondition.column3OperatorSelected" @change="val=>operatorChange(val,'3')">
            <el-option v-for="item in tmpCondition.column3Operator" :key="item.key" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="12">
        <div v-if="tmpCondition.column3&&tmpCondition.column3OperatorSelected">
          <el-checkbox-group style="margin-top:5px;" v-model="tmpCondition.column3ValueSelected" v-if="tmpCondition.column3 === 'Attribute'">
            <el-checkbox v-for="item in tmpCondition.column3Value" :key="item.key" :label="item.key">{{item.value}}&nbsp;&nbsp;</el-checkbox>
          </el-checkbox-group>
          <el-input v-model="tmpCondition.column3ValueSelected" :style="{'max-width':'200px'}" v-if="['Author','Keyword','Source','tag','Title'].includes(tmpCondition.column3)"></el-input>
          <el-date-picker v-model="tmpCondition.column3ValueSelected" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" :style="{'max-width':'200px'}" @change="val=>datetimeChange(val,'3')"
            id="datetime-column3" v-if="tmpCondition.column3 === 'PublishDate'">
          </el-date-picker>
          <el-select v-model="tmpCondition.column3ValueSelected" :style="{'max-width':'200px'}" v-if="tmpCondition.column3 === 'TopFlag'">
            <el-option v-for="item in tmpCondition.column3Value" :key="item.key" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
          <el-select v-model="tmpCondition.column3ValueSelected" :style="{'max-width':'200px'}" v-if="tmpCondition.column3 === 'BranchInnerCode'">
            <el-option v-for="item in tmpCondition.column3Value" :key="item.key" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
          <div v-if="tmpCondition.column3.includes('DimensionCatalog')">
            <el-input disabled v-model="dimensionCatalogDlg.names" :style="{'max-width':'200px'}" :title="dimensionCatalogDlg.names"
              placeholder=""></el-input>
            <el-button @click="choiceDimensionCatalog(`${tmpCondition.column3ValueSelected}`,3)">选择</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" :gutter="5">
      <el-col :span="12" :offset="4">
        <el-radio-group v-model="tmpCondition.group">
          <el-radio v-for="item in groupOperator" :key="item.key" :label="item.key">{{item.value}}</el-radio>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row type="flex" :gutter="5" style="margin-bottom: 10px">
      <el-col :span="4" class="condition-label">
        <span>筛选条件2：</span>
      </el-col>
      <el-col :span="4">
        <el-select v-model="tmpCondition.column4" @change="val=>columnChange(val,'4')">
          <el-option label="" value=""></el-option>
          <el-option v-for="item in conditionColumns" :key="item.key" :label="item.value" :value="item.key">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <div v-if="tmpCondition.column4">
          <el-select v-model="tmpCondition.column4OperatorSelected" @change="val=>operatorChange(val,'4')">
            <el-option v-for="item in tmpCondition.column4Operator" :key="item.key" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="12">
        <div v-if="tmpCondition.column4&&tmpCondition.column4OperatorSelected">
          <el-checkbox-group style="margin-top:5px;" v-model="tmpCondition.column4ValueSelected" v-if="tmpCondition.column4 === 'Attribute'">
            <el-checkbox v-for="item in tmpCondition.column4Value" :key="item.key" :label="item.key">{{item.value}}&nbsp;&nbsp;</el-checkbox>
          </el-checkbox-group>
          <el-input v-model="tmpCondition.column4ValueSelected" :style="{'max-width':'200px'}" v-if="['Author','Keyword','Source','tag','Title'].includes(tmpCondition.column4)"></el-input>
          <el-date-picker v-model="tmpCondition.column4ValueSelected" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" :style="{'max-width':'200px'}" @change="val=>datetimeChange(val,'4')"
            id="datetime-column4" v-if="tmpCondition.column4 === 'PublishDate'">
          </el-date-picker>
          <el-select v-model="tmpCondition.column4ValueSelected" :style="{'max-width':'200px'}" v-if="tmpCondition.column4 === 'TopFlag'">
            <el-option v-for="item in tmpCondition.column4Value" :key="item.key" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
          <el-select v-model="tmpCondition.column4ValueSelected" :style="{'max-width':'200px'}" v-if="tmpCondition.column4 === 'BranchInnerCode'">
            <el-option v-for="item in tmpCondition.column4Value" :key="item.key" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
          <div v-if="tmpCondition.column4.includes('DimensionCatalog')">
            <el-input disabled v-model="dimensionCatalogDlg.names" :style="{'max-width':'200px'}" :title="dimensionCatalogDlg.names"
              placeholder=""></el-input>
            <el-button @click="choiceDimensionCatalog(`${tmpCondition.column4ValueSelected}`,4)">选择</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" :gutter="5" style="margin-bottom: 10px">
      <el-col :span="4" style="text-align:right;">
        <el-select placeholder="" style="max-width:70px" v-model="tmpCondition.columnGroup5">
          <el-option v-for="item in groupOperator" :key="item.key" :label="item.value" :value="item.key"></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="tmpCondition.column5" @change="val=>columnChange(val,'5')">
          <el-option label="" value=""></el-option>
          <el-option v-for="item in conditionColumns" :key="item.key" :label="item.value" :value="item.key">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <div v-if="tmpCondition.column5">
          <el-select v-model="tmpCondition.column5OperatorSelected" @change="val=>operatorChange(val,'5')">
            <el-option v-for="item in tmpCondition.column5Operator" :key="item.key" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="12">
        <div v-if="tmpCondition.column5&&tmpCondition.column5OperatorSelected">
          <el-checkbox-group style="margin-top:5px;" v-model="tmpCondition.column5ValueSelected" v-if="tmpCondition.column5 === 'Attribute'">
            <el-checkbox v-for="item in tmpCondition.column5Value" :key="item.key" :label="item.key">{{item.value}}&nbsp;&nbsp;</el-checkbox>
          </el-checkbox-group>
          <el-input v-model="tmpCondition.column5ValueSelected" :style="{'max-width':'200px'}" v-if="['Author','Keyword','Source','tag','Title'].includes(tmpCondition.column5)"></el-input>
          <el-date-picker v-model="tmpCondition.column5ValueSelected" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" :style="{'max-width':'200px'}" @change="val=>datetimeChange(val,'5')"
            id="datetime-column5" v-if="tmpCondition.column5 === 'PublishDate'">
          </el-date-picker>
          <el-select v-model="tmpCondition.column5ValueSelected" :style="{'max-width':'200px'}" v-if="tmpCondition.column5 === 'TopFlag'">
            <el-option v-for="item in tmpCondition.column5Value" :key="item.key" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
          <el-select v-model="tmpCondition.column5ValueSelected" :style="{'max-width':'200px'}" v-if="tmpCondition.column5 === 'BranchInnerCode'">
            <el-option v-for="item in tmpCondition.column5Value" :key="item.key" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
          <div v-if="tmpCondition.column5.includes('DimensionCatalog')">
            <el-input disabled v-model="dimensionCatalogDlg.names" :style="{'max-width':'200px'}" :title="dimensionCatalogDlg.names"
              placeholder=""></el-input>
            <el-button @click="choiceDimensionCatalog(`${tmpCondition.column5ValueSelected}`,5)">选择</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" :gutter="5" style="margin-bottom: 10px">
      <el-col :span="4" style="text-align:right;">
        <el-select placeholder="" style="max-width:70px" v-model="tmpCondition.columnGroup6">
          <el-option v-for="item in groupOperator" :key="item.key" :label="item.value" :value="item.key"></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="tmpCondition.column6" @change="val=>columnChange(val,'6')">
          <el-option label="" value=""></el-option>
          <el-option v-for="item in conditionColumns" :key="item.key" :label="item.value" :value="item.key">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <div v-if="tmpCondition.column6">
          <el-select v-model="tmpCondition.column6OperatorSelected">
            <el-option v-for="item in tmpCondition.column6Operator" :key="item.key" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="12">
        <div v-if="tmpCondition.column6&&tmpCondition.column6OperatorSelected">
          <el-checkbox-group style="margin-top:5px;" v-model="tmpCondition.column6ValueSelected" v-if="tmpCondition.column6 === 'Attribute'">
            <el-checkbox v-for="item in tmpCondition.column6Value" :key="item.key" :label="item.key">{{item.value}}&nbsp;&nbsp;</el-checkbox>
          </el-checkbox-group>
          <el-input v-model="tmpCondition.column6ValueSelected" :style="{'max-width':'200px'}" v-if="['Author','Keyword','Source','tag','Title'].includes(tmpCondition.column6)"></el-input>
          <el-date-picker v-model="tmpCondition.column6ValueSelected" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" :style="{'max-width':'200px'}" @change="val=>datetimeChange(val,'6')"
            v-if="tmpCondition.column6 === 'PublishDate'">
          </el-date-picker>
          <el-select v-model="tmpCondition.column6ValueSelected" :style="{'max-width':'200px'}" v-if="tmpCondition.column6 === 'TopFlag'">
            <el-option v-for="item in tmpCondition.column6Value" :key="item.key" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
          <el-select v-model="tmpCondition.column6ValueSelected" :style="{'max-width':'200px'}" v-if="tmpCondition.column6 === 'BranchInnerCode'">
            <el-option v-for="item in tmpCondition.column6Value" id="datetime-column6" :key="item.key" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
          <div v-if="tmpCondition.column6.includes('DimensionCatalog')">
            <el-input disabled v-model="dimensionCatalogDlg.names" :style="{'max-width':'260px'}" :title="dimensionCatalogDlg.names"
              placeholder="">
              <el-button slot="append" @click="choiceDimensionCatalog(`${tmpCondition.column6ValueSelected}`,6)">选择</el-button>
            </el-input>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" :gutter="5" v-if="orderParams.needOrder" style="margin-bottom: 10px">
      <el-col :span="4" class="condition-label">
        <span>排序条件：</span>
      </el-col>
      <el-col :span="4">
        <el-select v-model="tmpCondition.orderColumn1">
          <el-option label="" value=""></el-option>
          <el-option v-for="item in orderColumnOptions" :key="item.key" :label="item.value" :value="item.key">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <div v-if="tmpCondition.orderColumn1">
          <el-select v-model="tmpCondition.orderColumn1OrderType">
            <el-option v-for="item in orderTypeOptions" :key="item.key" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" :gutter="5" v-if="orderParams.needOrder" style="margin-bottom: 10px">
      <el-col :span="4" class="condition-label">
        <span></span>
      </el-col>
      <el-col :span="4">
        <el-select v-model="tmpCondition.orderColumn2">
          <el-option label="" value=""></el-option>
          <el-option v-for="item in orderColumnOptions" :key="item.key" :label="item.value" :value="item.key">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <div v-if="tmpCondition.orderColumn2">
          <el-select v-model="tmpCondition.orderColumn2OrderType">
            <el-option v-for="item in orderTypeOptions" :key="item.key" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" :gutter="5" v-if="orderParams.needOrder" style="margin-bottom: 10px">
      <el-col :span="4" class="condition-label">
        <span></span>
      </el-col>
      <el-col :span="4">
        <el-select v-model="tmpCondition.orderColumn3">
          <el-option label="" value=""></el-option>
          <el-option v-for="item in orderColumnOptions" :key="item.key" :label="item.value" :value="item.key">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <div v-if="tmpCondition.orderColumn3">
          <el-select v-model="tmpCondition.orderColumn3OrderType">
            <el-option v-for="item in orderTypeOptions" :key="item.key" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>
    <dimension-catalog-seletor :show.sync="dimensionCatalogDlg.isShowModal" :ID="dimensionCatalogDlg.dimensionID" :checked-ids="dimensionCatalogDlg.ids"
      @callback="getCheckeDimenstionCatalogs">
    </dimension-catalog-seletor>
  </div>
</template>
<script>
import dimensionCatalogSeletor from '@src/pages/contentadvance/dimensionCatalogSeletor.vue'
export default {
  data() {
    return {
      allCondition: [], //  所有的条件筛选
      conditionColumns: [], // 筛选条件
      groupOperator: [], // 符号条件
      conditionColumnCount: 0, // 所有条件数量
      dimensionCatalogDlg: {// 选择维度弹框
        isShowModal: false,
        names: '',
        ids: [],
        dimensionID: '',
        index: 0
      },
      orderColumnOptions: [],
      orderTypeOptions: []
    }
  },
  methods: {
    operatorChange(val, index) {
      if (!val) {
        this.tmpCondition['column' + index + 'ValueSelected'] = ''
      }
    },
    // 打开选择维度弹框
    choiceDimensionCatalog(val, index) {
      this.dimensionCatalogDlg.index = index
      this.dimensionCatalogDlg.dimensionID = this.tmpCondition['column' + index + 'Value'].ID
      if (val) {
        val.split('&&')[0].split(',').forEach(id => {
          this.dimensionCatalogDlg.ids.push(parseInt(id, 10))
        })
      } else {
        this.dimensionCatalogDlg.ids = []
      }
      this.dimensionCatalogDlg.isShowModal = true
    },
    getCheckeDimenstionCatalogs(catalog) {
      this.tmpCondition[`column${this.dimensionCatalogDlg.index}ValueSelected`] = catalog
      if (catalog.split('&&')[1]) {
        this.dimensionCatalogDlg.names = catalog.split('&&')[1]
      } else {
        this.dimensionCatalogDlg.names = ''
      }
    },
    datetimeChange(val, index) {
      this.tmpCondition['column' + index + 'Value'] = val
    },
    columnChange(val, index) {
      if (!val) {
        this.tmpCondition['column' + index + 'OperatorSelected'] = ''
        this.tmpCondition['column' + index + 'ValueSelected'] = ''
        return
      }
      for (let i = 1; i <= this.conditionColumnCount; i++) {
        if (this.allCondition['column' + i] === val) {
          this.tmpCondition['column' + index + 'Operator'] = JSON.parse(this.allCondition['column' + i + 'Operator'])
          this.tmpCondition['column' + index + 'OperatorSelected'] = ''
          this.tmpCondition['column' + index + 'Value'] = JSON.parse(this.allCondition['column' + i + 'Value'])
          if (val === 'Attribute') {
            this.tmpCondition['column' + index + 'ValueSelected'] = []
          } else {
            this.tmpCondition['column' + index + 'ValueSelected'] = ''
          }
        }
      }
    },
    // 加载虚拟栏目条件筛选
    async initConditiont() {
      if (this.dataInitURL.length < 2) {
        return
      }
      let res = await axios.get(this.dataInitURL[0], this.dataInitURL[1])
      this.allCondition = res.data.data.allCondition
      this.conditionColumnCount = res.data.data.allCondition.conditionColumnCount

      for (let i = 1; i <= 6; i++) {
        this.tmpCondition[`column${i}OperatorSelected`] = '='
        this.tmpCondition[`column${i}`] = this.allCondition[`column${i}`]
        if (i !== 1 && i !== 4) {
          this.tmpCondition[`columnGroup${i}`] = this.allCondition[`columnGroup${i}`]
        }
        this.tmpCondition[`column${i}Operator`] = JSON.parse(this.allCondition[`column${i}Operator`])
        this.tmpCondition[`column${i}Value`] = JSON.parse(this.allCondition[`column${i}Value`])
      }

      for (let key in res.data.data.condition) {
        if (res.data.data.condition.hasOwnProperty(key) === true) {
          this.tmpCondition[key] = res.data.data.condition[key]
        }
        if (key.endsWith('Operator') || key.endsWith('Value')) {
          this.tmpCondition[key] = JSON.parse(res.data.data.condition[key])
        }
      }
      for (let i = 1; i <= 6; i++) {
        if (this.tmpCondition['column' + i] === 'Attribute') {
          this.tmpCondition['column' + i + 'ValueSelected'] = this.tmpCondition['column' + i + 'ValueSelected'].length
            ? this.tmpCondition['column' + i + 'ValueSelected'].split(',')
            : Vue.set(this.tmpCondition, 'column' + i + 'ValueSelected', [])
        }
        if (this.tmpCondition['column' + i].includes('DimensionCatalog')) {
          this.dimensionCatalogDlg.names = this.tmpCondition['column' + i + 'ValueSelected']
            ? this.tmpCondition['column' + i + 'ValueSelected'].split('&&')[1]
            : ''
        }
      }
    },
    async initConditioncolumns() {
      let res = await axios.get('/ui/blocklist/conditioncolumns')
      this.conditionColumns = res.data.data
    },
    async initGroupOperator() {
      let res = await axios.get('/ui/blocklist/groupoperator')
      this.groupOperator = res.data.data
    },
    async initOrderConditionColumn() {
      let res = await axios.get(`/ui/blocklist/orderconditioncolumns`, {
        params: {
          ID: this.orderParams.ID,
          contentType: this.orderParams.contentType
        }
      })
      this.orderColumnOptions = res.data.data
    },
    async initOrderTypeOption() {
      let res = await axios.get('/ui/blocklist/ordertype')
      this.orderTypeOptions = res.data.data
    }
  },
  watch: {
    tmpCondition(val) {
      this.initConditiont()
      this.initConditioncolumns()
      this.initGroupOperator()
      if (this.orderParams.needOrder) {
        this.initOrderConditionColumn()
        this.initOrderTypeOption()
      }
    }
  },
  components: {
    'dimension-catalog-seletor': dimensionCatalogSeletor
  },
  props: {
    dataInitURL: {
      type: Array
    },
    tmpCondition: {
      type: Object
    },
    orderParams: {
      type: Object,
      default: function() {
        return {needOrder: false}
      }
    }// 包含needOrder,ID,contentType三个属性，ID为区块blockID
  }
}
</script>
