<template>
  <!-- 纳排条件管理 -->
  <!-- 内容 -->
  <div class="content">
    <!-- 或并 -->
    <el-table :data="formContent" style="width: 100%" :show-header="false">
      <el-table-column width="120">
        <template slot-scope="scope">
          <!-- v-show="scope.$index!=0" -->
          <el-select
            v-model="filterItemList[scope.$index].connection"
            placeholder="请选择"
            class="select-join"
            size="small"
            clearable
            @change="joinContentChange(scope.$index,$event)"
          >
            <el-option
              v-for="item in scope.row.joinContent[0].join"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :style="{'display': item.value==='should'&& pageName=='condition' ? 'none' : 'block'}"
              :disabled="item.value==='should'&& pageName=='condition' ? true :false"
            />
          </el-select>
        </template>
      </el-table-column>

      <!-- 患者信息 -->
      <el-table-column width="350">
        <template slot-scope="scope">
          <el-select
            v-model="filterItemList[scope.$index].id"
            filterable
            placeholder="请选择"
            class="select-info"
            size="small"
            clearable
            @change="patientInfoChange(scope.$index,$event)"
          >
            <el-option-group
              v-for="group in scope.row.patientInfoContent[0].patientInfo"
              :key="group.tableDescription"
              :label="group.tableDescription"
              class="select-group"
            >
              <el-option
                v-for="item in group.list"
                :key="item.id"
                :label="item.fieldDescription"
                :value="item.id"
              />
            </el-option-group>
          </el-select>
        </template>
      </el-table-column>

      <!-- 匹配 -->
      <el-table-column width="200">
        <template slot-scope="scope">
          <el-select
            v-model="filterItemList[scope.$index].queryType"
            placeholder="请选择"
            class="select-matching"
            size="small"
            clearable
            @change="matchingChange(scope.$index,$event)"
          >
            <el-option
              v-for="item in scope.row.matchingContent[0].matching"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            />
          </el-select>
        </template>
      </el-table-column>

      <!-- 大于等于符号 -->
      <!-- <el-table-column width="160">
        <template slot-scope="scope">
          <el-select v-model="scope.row.symbolContent[0].selectValueArr[scope.$index]"
            placeholder="请选择" class="select-symbol" size="small">
            <el-option v-for="item in scope.row.symbolContent[0].symbol" :key="item.value"
              :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column> -->

      <!-- 输入字符串/日期/范围-->
      <el-table-column width="400">
        <template slot-scope="scope">
          <!-- 字符串 -->
          <el-input
            v-show="scope.row.patientInfoContent[0].showMode[scope.$index]!='date' && scope.row.patientInfoContent[0].showMode[scope.$index]!='number'"
            v-model="filterItemList[scope.$index].queryValue.eq"
            placeholder="请输入内容"
            class="patient-input-content"
            size="small"
            clearable
            @input="stringInput(scope.$index,$event)"
          />
          <!-- 日期 -->
          <el-date-picker
            v-show="scope.row.patientInfoContent[0].showMode[scope.$index]=='date'"
            v-model="scope.row.InputData[0].dataRange[scope.$index]"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
            clearable
            @change="dateChange(scope.$index,$event)"
          />

          <!-- 范围 -->
          <div v-show="scope.row.patientInfoContent[0].showMode[scope.$index]=='number'" class="number-range">
            <el-input
              v-model="filterItemList[scope.$index].queryValue.gte"
              placeholder="区间范围"
              class="patient-number-content"
              size="small"
              clearable
              @input="numberOneInput(scope.$index,$event)"
            />
            <span class="number-line">-</span>
            <el-input
              v-model="filterItemList[scope.$index].queryValue.lte"
              placeholder="区间范围"
              class="patient-number-content"
              size="small"
              clearable
              @input="numberTwoInput(scope.$index,$event)"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <span v-show="scope.row.iconState[scope.$index].state!=true">
            <slot name="check" :index="scope.$index" />
          </span>
          <span>
            <slot name="close" :index="scope.$index" />
          </span>
          <span v-show="scope.row.iconState[scope.$index].state==true">
            <slot name="plus" :index="scope.$index" />
          </span>

        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    filterItemList: {
      type: Array,
      default: () => []
    },
    formContent: {
      type: Array,
      default: () => []
    },
    conditionObj: {
      type: Object,
      default: () => {
        return {}
      }
    },
    pageName: {
      type: String,
      default: ''
    }

  },
  data() {
    return {
    }
  },
  methods: {
    // 或并选择
    joinContentChange(index, e) {
      this.$emit('setIconStateFalse', index)
    },
    // 患者信息选择
    patientInfoChange(index, e) {
      // 患者数据只要发生改变就可以从新查询
      this.$emit('setIconStateFalse', index)
      this.$emit('patientInfoChange', index, e)
    },
    // 匹配选择
    matchingChange(index, e) {
      this.$emit('setIconStateFalse', index)
    },
    // 字符串输入框内容发生变化时
    stringInput(index, e) {
      this.$emit('setIconStateFalse', index)
    },
    // 范围1-输入框内容发生变化时
    numberOneInput(index, e) {
      this.$emit('setIconStateFalse', index)
    },
    // 范围2-输入框内容发生变化时
    numberTwoInput(index, e) {
      this.$emit('setIconStateFalse', index)
    },
    // 日期区间
    dateChange(index, e) {
      console.log(index, e)
      this.$emit('setIconStateFalse', index)
      // this.$parent.setIconStateFalse(index, e)
      this.filterItemList[index].queryValue.gte = this.$moment(e[0]).format('l')
      this.filterItemList[index].queryValue.lte = this.$moment(e[1]).format('l')
    }
  }
}
</script>
<style lang='scss' scoped>
.content {
  // padding: 16px;
  .el-select {
    display: block;
  }

  .select-symbol {
    margin-right: 5px;
  }
  .el-icon-close {
    font-size: 30px;
    color: #ff4d4f;
  }
  .el-icon-plus {
    font-size: 26px;
    color: #1890ff;
  }
  .el-icon-check {
    font-size: 30px;
    color: #52c41a;
  }
  .number-range {
    display: flex;
    align-items: center;
    .number-line {
      padding: 0 8px;
    }
  }
  .select-group >>> .el-select-group__title {
  font-size: 14px;
  font-weight: 600;
  color: #409eff;
  /* background-color: aliceblue; */
}
}
</style>
<style lang="scss">
.content {
  .el-table .cell {
    padding-right: 0 !important;
  }
  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background: none;
  }
}
</style>
