<template>
  <div>
    <div>
      <el-checkbox v-model="personChecked"></el-checkbox>
      <span @click="clickTab('person')"
            :class="['tab-title',{'tab-title-sel':personSel}]">人员信息</span>
      <el-checkbox v-model="houseChecked"></el-checkbox>
      <span @click="clickTab('house')"
            :class="['tab-title',{'tab-title-sel':houseSel}]">房屋信息</span>
      <el-checkbox v-model="staticChecked"></el-checkbox>
      <span @click="clickTab('static')"
            :class="['tab-title',{'tab-title-sel':staticSel}]">统计信息</span>

      <el-button v-if="formType!=='detail'"
                 class="diy-button--search"
                 @click="handlePreview"
                 plain
                 size="mini">预览</el-button>

      <!-- <el-button v-if="formType!=='detail'"
                 class="diy-button--add"
                 @click="addRule"
                 plain
                 size="mini">增加</el-button> -->
    </div>

    <div v-if="personSel"
         style="margin-top:10px">
      <div v-for="(personItem,personIndex) in resiRuleList"
           :key="personIndex"
           class="row-item">
        <el-select class="item_width_1"
                   v-model="personItem.itemGroupId"
                   size="mini"
                   placeholder="请选择">
          <el-option v-for="item in groupList"
                     @click.native="handleSelGroup(personIndex,item)"
                     :key="item.id"
                     :label="item.label"
                     :value="item.id">
          </el-option>
        </el-select>
        <el-select class="item_width_1"
                   v-model="personItem.itemId"
                   size="mini"
                   placeholder="请选择">
          <el-option v-for="item in personItem.itemList"
                     @click.native="handleSelGroupItem(personIndex,item)"
                     :key="item.itemId"
                     :label="item.label"
                     :value="item.itemId">
          </el-option>
        </el-select>
        <el-select class="item_width_1"
                   v-model="personItem.queryType"
                   size="mini"
                   placeholder="请选择">
          <el-option v-for="item in queryList"
                     @click.native="handleSelPersonQuery(personIndex,item)"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
        <div v-if="personItem.queryType!=='is_null'&&personItem.queryType!=='is_not_null'">

          <el-select v-if="personItem.colType==='select'||personItem.colType==='radio'||personItem.colType==='checkbox'"
                     class="item_width_2"
                     v-model="personItem.colVal"
                     size="mini"
                     placeholder="请选择">
            <el-option v-for="item in personItem.colOption"
                       @click.native="handleSelPersonValue(personIndex,item)"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
          <el-input-number v-else-if="personItem.colType==='inputNum'"
                           class="item_width_2"
                           v-model="personItem.colVal"
                           :min="0"
                           size="mini"
                           label="请输入"></el-input-number>

          <el-date-picker v-else-if="personItem.colType==='datepicker'||personItem.colType==='date'"
                          v-model="personItem.colVal"
                          class="item_width_2"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          value="yyyy-MM-dd HH:mm:ss"
                          placeholder="开始时间">
          </el-date-picker>
          <el-input v-else
                    class="item_width_2"
                    size="mini"
                    placeholder="请输入"
                    v-model="personItem.colVal">
          </el-input>

        </div>

        <el-select v-if="personIndex<(resiRuleList.length-1)"
                   class="item_width_1"
                   v-model="personItem.nextLogicalRel"
                   size="mini"
                   placeholder="请选择">
          <el-option v-for="item in logicalList"
                     @click.native="handleSelPersonLogical(personIndex,item)"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>

        <img v-if="formType!=='detail' && personIndex<resiRuleList.length-1"
             class="img_del"
             src="@/assets/img/icon-del.png"
             @click="delPerson(personIndex)">
        <img v-if="formType!=='detail' && personIndex==resiRuleList.length-1"
             class="img_del"
             src="@/assets/img/icon-add.png"
             @click="addPerson(personIndex)">

      </div>

    </div>

    <div v-if="houseSel"
         style="margin-top:10px">
      <div v-for="(houseItem,houseIndex) in houseRuleList"
           :key="houseIndex"
           class="row-item">
        <el-input class="item_width_1"
                  size="mini"
                  placeholder="请输入"
                  :disabled="true"
                  v-model="houseTitleName">
        </el-input>
        <el-select class="item_width_1"
                   v-model="houseItem.colKey"
                   size="mini"
                   placeholder="请选择">
          <el-option v-for="item in houseItemList"
                     @click.native="handleSelHouseItem(houseIndex,item)"
                     :key="item.colKey"
                     :label="item.label"
                     :value="item.colKey">
          </el-option>
        </el-select>
        <el-select class="item_width_1"
                   v-model="houseItem.queryType"
                   size="mini"
                   placeholder="请选择">
          <el-option v-for="item in queryList"
                     @click.native="handleSelHouseQuery(houseIndex,item)"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
        <div v-if="houseItem.queryType!=='is_null'&&houseItem.queryType!=='is_not_null'">

          <el-select v-if="houseItem.colType==='select'||houseItem.colType==='radio'||houseItem.colType==='checkbox'"
                     class="item_width_2"
                     v-model="houseItem.colVal"
                     size="mini"
                     placeholder="请选择">
            <el-option v-for="item in houseItem.colOption"
                       @click.native="handleSelHouseValue(houseIndex,item)"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
          <el-input-number v-else-if="houseItem.colType==='inputNum'"
                           class="item_width_2"
                           v-model="houseItem.colVal"
                           :min="0"
                           size="mini"
                           label="请输入"></el-input-number>
          <el-date-picker v-else-if="houseItem.colType==='datepicker'||houseItem.colType==='date'"
                          v-model="houseItem.colVal"
                          class="item_width_2"
                          type="datetime"
                          size="mini"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          value="yyyy-MM-dd HH:mm:ss"
                          placeholder="开始时间">
          </el-date-picker>
          <el-input v-else
                    class="item_width_2"
                    size="mini"
                    placeholder="请输入"
                    v-model="houseItem.colVal">
          </el-input>
        </div>

        <el-select v-if="houseIndex<(houseRuleList.length-1)"
                   class="item_width_1"
                   v-model="houseItem.nextLogicalRel"
                   size="mini"
                   placeholder="请选择">
          <el-option v-for="item in logicalList"
                     @click.native="handleSelHouseLogical(houseIndex,item)"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>

        <img v-if="formType!=='detail' && houseIndex<houseRuleList.length-1"
             class="img_del"
             src="@/assets/img/icon-del.png"
             @click="delHouse(houseIndex)">
        <img v-if="formType!=='detail' && houseIndex==houseRuleList.length-1"
             class="img_del"
             src="@/assets/img/icon-add.png"
             @click="addHouse(houseIndex)">

      </div>

    </div>

    <div v-if="staticSel"
         style="margin-top:10px">
      <div v-for="(staticItem,staticIndex) in statRuleList"
           :key="staticIndex"
           class="row-item">
        <el-input class="item_width_1"
                  size="mini"
                  placeholder="请输入"
                  :disabled="true"
                  v-model="statTitleName">
        </el-input>
        <el-select class="item_width_1"
                   v-model="staticItem.colKey"
                   size="mini"
                   placeholder="请选择">
          <el-option v-for="item in staticItemList"
                     @click.native="handleSelStaticItem(staticIndex,item)"
                     :key="item.colKey"
                     :label="item.label"
                     :value="item.colKey">
          </el-option>
        </el-select>
        <el-select class="item_width_1"
                   v-model="staticItem.queryType"
                   size="mini"
                   placeholder="请选择">
          <el-option v-for="item in queryList"
                     @click.native="handleSelStaticQuery(staticIndex,item)"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>

        <div v-if="staticItem.queryType!=='is_null'&&staticItem.queryType!=='is_not_null'">
          <el-select v-if="staticItem.colType==='select'||staticItem.colType==='radio'||staticItem.colType==='checkbox'"
                     class="item_width_2"
                     v-model="staticItem.colVal"
                     size="mini"
                     placeholder="请选择">
            <el-option v-for="item in staticItem.colOption"
                       @click.native="handleSelStaticValue(staticIndex,item)"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
          <el-input-number v-else-if="staticItem.colType==='inputNum'"
                           class="item_width_2"
                           v-model="staticItem.colVal"
                           :min="0"
                           size="mini"
                           label="请输入"></el-input-number>
          <el-date-picker v-else-if="staticItem.colType==='datepicker'||staticItem.colType==='date'"
                          v-model="staticItem.colVal"
                          class="item_width_2"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          value="yyyy-MM-dd HH:mm:ss"
                          placeholder="开始时间">
          </el-date-picker>
          <el-input v-else
                    class="item_width_2"
                    size="mini"
                    placeholder="请输入"
                    v-model="staticItem.colVal">
          </el-input>
        </div>

        <el-select v-if="staticIndex<(statRuleList.length-1)"
                   class="item_width_1"
                   v-model="staticItem.nextLogicalRel"
                   size="mini"
                   placeholder="请选择">
          <el-option v-for="item in logicalList"
                     @click.native="handleSelStaticLogical(houseIndex,item)"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>

        <img v-if="formType!=='detail' && staticIndex<statRuleList.length-1"
             class="img_del"
             src="@/assets/img/icon-del.png"
             @click="delStatic(staticIndex)">
        <img v-if="formType!=='detail' && staticIndex==statRuleList.length-1"
             class="img_del"
             src="@/assets/img/icon-add.png"
             @click="addStatic(staticIndex)">

      </div>
    </div>

    <el-dialog v-if="showPersonList"
               :visible.sync="showPersonList"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :append-to-body="true"
               :title="'规则预览'"
               width="1150px"
               top="5vh"
               class="dialog-h"
               @closed="showPersonList = false">
      <person-list-item ref="ref_detail_form"
                        :ruleList="ruleList"
                        @handleClose="handleClose">
      </person-list-item>
    </el-dialog>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from '@/js/dai/request'
import personListItem from './personListItem'


let loading // 加载动画
export default {
  data () {
    return {

      personChecked: false,
      houseChecked: false,
      staticChecked: false,

      personSel: true,
      houseSel: false,
      staticSel: false,

      groupList: [],
      queryList: [],
      logicalList: [
        {
          label: '并且',
          value: 'and'
        },
        {
          label: '或者',
          value: 'or'
        }
      ],
      houseItemList: [],//房屋信息第二列
      staticItemList: [],//统计信息第二列
      resiRuleList: [
        {
          ruleDesc: '',//规则描述文字，例如：基础信息性别等于女	
          nextLogicalRel: '',//与上一条的关系；and、or	
          itemGroupId: '',
          itemId: '',
          queryType: '',
          colTable: '',
          colKey: '',
          colVal: '',

          itemList: [],
          colType: '',//详细参数的组件类型
          colOption: [],
          itemGroupName: '',
          itemLabel: '',
          queryTypeName: '',
          colValLabel: '',
          nextLogicalRelName: '',
        }
      ],

      houseRuleList: [
        {
          ruleDesc: '',
          nextLogicalRel: '',//与上一条的关系；and、or	
          queryType: '',
          colTable: '',
          colKey: '',
          colVal: '',

          titleName: '房屋信息',
          colType: '',//详细参数的组件类型
          colOption: [],
          itemGroupName: '房屋信息',
          itemLabel: '',
          queryTypeName: '',
          colValLabel: '',
          nextLogicalRelName: '',
        }
      ],
      houseTitleName: '房屋信息',

      statTitleName: '统计信息',
      statRuleList: [
        {
          ruleDesc: '',
          nextLogicalRel: '',//与上一条的关系；and、or	
          queryType: '',
          colTable: '',
          colKey: '',
          colVal: '',

          titleName: '统计信息',
          colType: '',//详细参数的组件类型
          colOption: [],
          itemGroupName: '统计信息',
          itemLabel: '',
          queryTypeName: '',
          colValLabel: '',
          nextLogicalRelName: '',
        }
      ],

      okflag: false,

      showPersonList: false,
      ruleList: {}

    }
  },

  watch: {

  },
  components: { personListItem },
  async created () {
    // this.startLoading()
    await this.loadPersonGroup()
    await this.loadHouseItem()
    await this.loadStaticItem()
    await this.loadDicOption()


  },


  methods: {
    async setRule (resiRuleList, houseRuleList, statRuleList) {
      // this.startLoading()
      if (this.groupList.length == 0 || this.houseItemList.length === 0 || this.staticItemList.length === 0) {
        setTimeout(() => {
          this.setRule(resiRuleList, houseRuleList, statRuleList);
        }, 500);
        return false
      }


      this.resiRuleList = resiRuleList
      if (this.resiRuleList && this.resiRuleList.length > 0) {
        this.personChecked = true
        for (let i = 0; i < this.resiRuleList.length; i++) {
          let element = this.resiRuleList[i]

          let selGroup = this.groupList.filter((item) =>
            element.itemGroupId === item.id
          );
          console.log(selGroup)

          if (selGroup.length > 0) {
            await this.handleSelGroup(i, selGroup[0], true)


            let selItem = element.itemList.filter((item) =>
              element.itemId === item.itemId);
            if (selItem.length > 0) {
              await this.handleSelGroupItem(i, selItem[0], true)
            }

          }
        }
      }

      this.houseRuleList = houseRuleList
      if (this.houseRuleList && this.houseRuleList.length > 0) {
        this.houseChecked = true
        this.houseRuleList.forEach((element, index) => {

          let selHouseItem = this.houseItemList.filter((item) =>
            element.colKey === item.colKey
          );

          if (selHouseItem.length > 0) {
            this.handleSelHouseItem(index, selHouseItem[0], true)
          }

        });
      }
      this.statRuleList = statRuleList
      if (this.statRuleList && this.statRuleList.length > 0) {
        this.staticChecked = true
        this.statRuleList.forEach((element, index) => {

          let selStaticItem = this.staticItemList.filter((item) =>
            element.colKey === item.colKey
          );

          if (selStaticItem.length > 0) {
            this.handleSelStaticItem(index, selStaticItem[0], true)
          }

        });
      }

      // this.endLoading()

    },

    getRule () {
      this.okflag = false

      let messageObj = this.validateRule(this.personChecked, this.houseChecked, this.staticChecked)

      // console.log('resiRuleList', this.resiRuleList)
      // console.log('houseRuleList', this.houseRuleList)
      // console.log('statRuleList', this.statRuleList)

      if (messageObj) {
        this.$message.error(messageObj)

      } else {

        if (this.resiRuleList.length > 0) {
          this.resiRuleList[this.resiRuleList.length - 1].nextLogicalRel = ''
        }

        if (this.houseRuleList.length > 0) {
          this.houseRuleList[this.houseRuleList.length - 1].nextLogicalRel = ''
        }

        if (this.statRuleList.length > 0) {
          this.statRuleList[this.statRuleList.length - 1].nextLogicalRel = ''
        }

        this.okflag = true
      }

    },

    validateRule (valPerson, valHouse, valStatic) {

      let message = ''
      if (valPerson) {

        this.resiRuleList.forEach((item, index) => {

          if (item.itemGroupId === '' ||
            item.itemId === '' ||
            item.queryType === '' ||
            item.colKey === ''
          ) {
            message = '匹配规则' + (this.index + 1) + '人员信息不完整，请填写完整！'
            return message
          }
          if ((index != this.resiRuleList.length - 1) && item.nextLogicalRel === '') {
            message = '匹配规则' + (this.index + 1) + '人员信息不完整，请填写完整！'
            return message
          }

          if ((item.queryType !== 'is_null' && item.queryType !== 'is_not_null') && item.colVal === '') {
            message = '匹配规则' + (this.index + 1) + '人员信息不完整，请填写完整！'
            return message
          }

        });


      }

      if (valHouse) {


        this.houseRuleList.forEach((item, index) => {




          if (item.itemGroupId === '' ||
            item.itemId === '' ||
            item.queryType === '' ||
            item.colKey === ''
          ) {
            message = '匹配规则' + (this.index + 1) + '房屋信息不完整，请填写完整！'
            return message
          }
          if ((index != this.houseRuleList.length - 1) && item.nextLogicalRel === '') {
            message = '匹配规则' + (this.index + 1) + '房屋信息不完整，请填写完整！'
            return message
          }

          if ((item.queryType !== 'is_null' && item.queryType !== 'is_not_null') && item.colVal === '') {
            message = '匹配规则' + (this.index + 1) + '房屋信息不完整，请填写完整！'
            return message
          }


        });
      }

      if (valStatic) {
        this.statRuleList.forEach((item, index) => {


          if (item.itemGroupId === '' ||
            item.itemId === '' ||
            item.queryType === '' ||
            item.colKey === ''
          ) {
            message = '匹配规则' + (this.index + 1) + '统计信息不完整，请填写完整！'
            return message
          }
          if ((index != this.statRuleList.length - 1) && item.nextLogicalRel === '') {
            message = '匹配规则' + (this.index + 1) + '统计信息不完整，请填写完整！'
            return message
          }

          if ((item.queryType !== 'is_null' && item.queryType !== 'is_not_null') && item.colVal === '') {
            message = '匹配规则' + (this.index + 1) + '统计信息不完整，请填写完整！'
            return message
          }

        });
      }


      return message
    },

    handlePreview () {
      if (!this.personChecked && !this.houseChecked && !this.staticChecked) {
        this.$message.info('请勾选要预览的规则')
        return false
      }

      this.getRule()
      if (!this.okflag) {
        return false
      }
      this.ruleList = {}
      this.ruleList = {
        resiRuleList: [],
        houseRuleList: [],
        statRuleList: [],
      }

      if (this.personChecked) {
        this.ruleList.resiRuleList = this.resiRuleList
      }
      if (this.houseChecked) {
        this.ruleList.houseRuleList = this.houseRuleList
      }
      if (this.staticChecked) {
        this.ruleList.statRuleList = this.statRuleList
      }

      this.showPersonList = true
    },

    handleClose () {
      this.showPersonList = false

    },


    //选择人员信息第一列下拉框
    async handleSelGroup (personIndex, item, isSet) {
      const url = '/oper/customize/icformitem/getItemListV2'
      // const url = 'http://yapi.elinkservice.cn/mock/245/gov/org/isServiceProject/service/serviceScopeTree'
      let params = {
        policyFlag: '1',
        groupId: item.id,

      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {

        let oneData = this.resiRuleList[personIndex]
        oneData.itemGroupName = item.label
        oneData.itemList = data
        oneData.colTable = item.tableName

        if (!isSet) {//如果是详情，赋值，不需要置空
          oneData.nextLogicalRel = ''
          oneData.itemId = ''
          oneData.queryType = ''
          oneData.colKey = ''
          oneData.colVal = ''
        }

        this.$set(this.resiRuleList, personIndex, oneData)

      } else {
        this.$message.error(msg)
      }
    },

    //选择人员信息第二列下拉框
    async handleSelGroupItem (personIndex, item, isSet) {

      let oneData = this.resiRuleList[personIndex]

      oneData.colKey = item.columnName
      oneData.colType = item.itemType
      oneData.itemLabel = item.label

      if (!isSet) {//如果是详情，赋值，不需要置空
        oneData.nextLogicalRel = ''
        oneData.queryType = ''
        oneData.colVal = ''
      }

      if (item.optionSourceType === 'remote') {
        const url = item.optionSourceValue

        let params = {}

        const { data, code, msg } = await requestPost(url, params)

        if (code === 0) {
          oneData.colOption = data
        } else {
          this.$message.error(msg)
        }
      } else {
        oneData.colOption = item.options
      }


      this.$set(this.resiRuleList, personIndex, oneData)

    },

    //选择人员信息第三列
    handleSelPersonQuery (personIndex, item) {
      let oneData = this.resiRuleList[personIndex]
      oneData.queryTypeName = item.label

      oneData.nextLogicalRel = ''
      oneData.colVal = ''
      oneData.colValLabel = ''

      this.$set(this.resiRuleList, personIndex, oneData)
    },
    //选择人员信息第四列
    handleSelPersonValue (personIndex, item) {
      let oneData = this.resiRuleList[personIndex]

      oneData.colValLabel = item.label
      oneData.nextLogicalRel = ''

      this.$set(this.resiRuleList, personIndex, oneData)
    },
    //选择人员信息第五列
    handleSelPersonLogical (personIndex, item) {
      let oneData = this.resiRuleList[personIndex]

      oneData.nextLogicalRelName = item.label

      this.$set(this.resiRuleList, personIndex, oneData)
    },

    //选择房屋信息第二列下拉框
    async handleSelHouseItem (houseIndex, item, isSet) {

      let oneData = this.houseRuleList[houseIndex]

      oneData.colTable = item.tableName
      oneData.colType = item.itemType
      oneData.itemLabel = item.label

      if (!isSet) {//如果是详情，赋值，不需要置空
        oneData.nextLogicalRel = ''
        oneData.queryType = ''
        oneData.colVal = ''
      }

      if (item.optionSourceType === 'remote') {
        const url = item.optionSourceUrl
        let params = {}
        if (item.optionSourceParam) {
          params = JSON.parse(item.optionSourceParam)
        } else {
          params = {}
        }

        const { data, code, msg } = await requestPost(url, params)

        if (code === 0) {
          oneData.colOption = data
        } else {
          this.$message.error(msg)
        }
      } else {
        oneData.colOption = []
      }

      this.$set(this.houseRuleList, houseIndex, oneData)

    },

    //选择房屋第三列
    handleSelHouseQuery (houseIndex, item) {
      let oneData = this.houseRuleList[houseIndex]
      oneData.queryTypeName = item.label

      oneData.nextLogicalRel = ''
      oneData.colVal = ''
      oneData.colValLabel = ''

      this.$set(this.houseRuleList, houseIndex, oneData)
    },
    //选择房屋第四列
    handleSelHouseValue (houseIndex, item) {
      let oneData = this.houseRuleList[houseIndex]
      oneData.colValLabel = item.label
      oneData.nextLogicalRel = ''

      this.$set(this.houseRuleList, houseIndex, oneData)
    },
    //选择房屋第五列
    handleSelHouseLogical (houseIndex, item) {
      let oneData = this.houseRuleList[houseIndex]
      oneData.nextLogicalRelName = item.label

      this.$set(this.houseRuleList, houseIndex, oneData)
    },
    //选择统计信息第二列下拉框
    async handleSelStaticItem (staticIndex, item, isSet) {

      let oneData = this.statRuleList[staticIndex]

      oneData.colTable = item.tableName
      oneData.colType = item.itemType
      oneData.itemLabel = item.label

      if (!isSet) {//如果是详情，赋值，不需要置空
        oneData.nextLogicalRel = ''
        oneData.queryType = ''
        oneData.colVal = ''
      }

      if (item.optionSourceType === 'remote') {
        const url = item.optionSourceUrl
        let params = {}
        if (item.optionSourceParam) {
          params = JSON.parse(item.optionSourceParam)
        } else {
          params = {}
        }

        const { data, code, msg } = await requestPost(url, params)

        if (code === 0) {
          oneData.colOption = data
        } else {
          this.$message.error(msg)
        }
      } else {
        oneData.colOption = []
      }


      this.$set(this.statRuleList, staticIndex, oneData)

    },

    //选择统计信息第三列
    handleSelStaticQuery (staticIndex, item) {
      let oneData = this.statRuleList[staticIndex]
      oneData.queryTypeName = item.label

      oneData.nextLogicalRel = ''
      oneData.colVal = ''
      oneData.colValLabel = ''

      this.$set(this.statRuleList, staticIndex, oneData)
    },
    //选择统计信息第四列
    handleSelStaticValue (staticIndex, item) {
      let oneData = this.statRuleList[staticIndex]
      oneData.colValLabel = item.label
      oneData.nextLogicalRel = ''

      this.$set(this.statRuleList, staticIndex, oneData)
    },
    //选择统计信息第五列
    handleSelStaticLogical (staticIndex, item) {
      let oneData = this.statRuleList[staticIndex]
      oneData.nextLogicalRelName = item.label

      this.$set(this.statRuleList, staticIndex, oneData)
    },

    clickTab (type) {
      if (type === 'person') {
        this.personSel = true
        this.houseSel = false
        this.staticSel = false
      }
      if (type === 'house') {
        this.personSel = false
        this.houseSel = true
        this.staticSel = false
      }
      if (type === 'static') {
        this.personSel = false
        this.houseSel = false
        this.staticSel = true
      }
    },

    addRule () {
      if (this.personSel) {
        this.addPerson()
      }

      if (this.houseSel) {
        this.addHouse()
      }

      if (this.staticSel) {
        this.addStatic()
      }
    },

    addPerson () {

      // let array = this.resiRuleList[this.resiRuleList.length - 1]

      // if (array.itemGroupId === '' ||
      //   array.itemId === '' ||
      //   array.queryType === '' ||
      //   array.colKey === '' ||
      //   array.colVal === '') {
      //   this.$message.info('请将上一条填写完整')
      //   return false
      // }

      let obj = {
        ruleDesc: '',//规则描述文字，例如：基础信息性别等于女	
        nextLogicalRel: '',//与上一条的关系；and、or	
        itemGroupId: '',
        itemId: '',
        queryType: '',
        colTable: '',
        colKey: '',
        colVal: '',

        itemList: [],
        colType: '',//详细参数的组件类型
        colOption: [],
        itemGroupName: '',
        itemLabel: '',
        queryTypeName: '',
        colValLabel: '',
        nextLogicalRelName: '',
      }

      this.resiRuleList.push(obj)
    },

    delPerson (index) {
      this.resiRuleList.splice(index, 1);
    },

    addHouse () {
      // let array = this.houseRuleList[this.houseRuleList.length - 1]

      // if (array.itemGroupId === '' ||
      //   array.itemId === '' ||
      //   array.queryType === '' ||
      //   array.colKey === '' ||
      //   array.colVal === '') {
      //   this.$message.info('请将上一条填写完整')
      //   return false
      // }
      let obj = {
        ruleDesc: '',
        nextLogicalRel: '',//与上一条的关系；and、or	
        queryType: '',
        colTable: '',
        colKey: '',
        colVal: '',

        titleName: '房屋信息',
        colType: '',//详细参数的组件类型
        colOption: [],
        itemGroupName: '房屋信息',
        itemLabel: '',
        queryTypeName: '',
        colValLabel: '',
        nextLogicalRelName: '',
      }

      this.houseRuleList.push(obj)
    },

    delHouse (index) {
      this.houseRuleList.splice(index, 1);
    },

    addStatic () {
      // let array = this.statRuleList[this.statRuleList.length - 1]

      // if (array.itemGroupId === '' ||
      //   array.itemId === '' ||
      //   array.queryType === '' ||
      //   array.colKey === '' ||
      //   array.colVal === '') {
      //   this.$message.info('请将上一条填写完整')
      //   return false
      // }
      let obj = {
        ruleDesc: '',
        nextLogicalRel: '',//与上一条的关系；and、or	
        queryType: '',
        colTable: '',
        colKey: '',
        colVal: '',

        titleName: '统计信息',
        colType: '',//详细参数的组件类型
        colOption: [],
        itemGroupName: '统计信息',
        itemLabel: '',
        queryTypeName: '',
        colValLabel: '',
        nextLogicalRelName: '',
      }

      this.statRuleList.push(obj)
    },

    delStatic (index) {
      this.statRuleList.splice(index, 1);
    },

    // 获取人员信息---第一列
    async loadPersonGroup () {
      const url = '/oper/customize/icformitemgroup/list'
      // const url = 'http://yapi.elinkservice.cn/mock/245/gov/org/isServiceProject/service/serviceScopeTree'
      let params = {
        formCode: 'resi_base_info',
        policyFlag: '1'
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.groupList = data
      } else {
        this.$message.error(msg)
      }


    },
    // 获取房屋信息--第二列
    async loadHouseItem () {
      const url = '/heart/policy/item-list/' + 'house'

      let params = {}

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.houseItemList = data
      } else {
        this.$message.error(msg)
      }


    },
    // 获取统计信息--第二列
    async loadStaticItem () {
      const url = '/heart/policy/item-list/' + 'stat'

      let params = {}

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.staticItemList = data
      } else {
        this.$message.error(msg)
      }


    },
    async loadDicOption () {
      const url = '/sys/dict/data/dictlist'
      // const url = 'http://yapi.elinkservice.cn/mock/245/gov/org/isServiceProject/service/serviceScopeTree'
      let params = {
        dictType: "sql_query_type"
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.queryList = data
      } else {
        this.$message.error(msg)
      }

    },


    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  computed: {
    dataRule () {
      return {


        serviceTimeStart: [
          { required: true, message: '服务时间不能为空', trigger: 'blur' }
        ],
        serviceScope: [
          { required: true, message: '服务范围不能为空', trigger: 'blur' }
        ],

      }
    },
    feedbackDataRule () {
      return {


        serviceGoal: [
          { required: true, message: '服务目标不能为空', trigger: 'blur' }
        ],

        serviceEffect: [
          { required: true, message: '服务效果不能为空', trigger: 'blur' }
        ],
        servicePeopleNumber: [
          { required: true, message: '服务人数不能为空', trigger: 'blur' }
        ],
        serviceStatus: [
          { required: true, message: '服务状态不能为空', trigger: 'blur' }
        ],
        satisfaction: [
          { required: true, message: '满意度不能为空', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '地址不能为空', trigger: 'blur' }
        ]
      }
    },

  },
  props: {

    formType: {
      type: String,
      required: 'true'
    },
    index: {
      type: Number,
      required: 'true'
    },

  }
}
</script>


<style lang="scss" scoped >
@import "@/assets/scss/buttonstyle.scss";

.tab-title {
  margin-right: 20px;
  cursor: pointer;
}

.tab-title-sel {
  color: #3e8ef7;
  text-decoration: underline;
}

.row-item {
  display: flex;
  margin-bottom: 10px;
}
.item_width_1 {
  width: 120px;
  margin-right: 10px;
}
.item_width_2 {
  width: 200px;
  margin-right: 10px;
}

/deep/ .el-checkbox {
  margin-right: 10px;
}
/deep/.el-checkbox:last-of-type {
  margin-right: 10px;
}

.img_del {
  width: 25px;
  height: 25px;
  margin-top: 3px;
  cursor: pointer;
}
</style>
