<template>
  <a-spin :spinning="formLoading.visible">
    <a-card :bordered="false" class="ant-pro-components-tag-select" style="padding-bottom: 0px">
      <div class="page-menu-search">
        <a-input-search
          style="width: 80%; max-width: 522px"
          placeholder="请输入..."
          size="large"
          enterButton="搜索"
          v-model="keyText"
          @search="search"
        />
        <a-button v-if="false" @click="createIndex1">索引测试1</a-button>
        <a-button v-if="false" @click="createIndex">索引测试</a-button>
      </div>
      <a-form :form="form" layout="inline">
        <standard-form-row title="复杂类别" block style="padding-bottom: 11px">
          <a-form-item>
            <tag-select @change="handleTagSelect">
              <tag-select-option v-for="(item, index) in tags" :key="index" :value="item">{{ item }}</tag-select-option>
            </tag-select>
          </a-form-item>
        </standard-form-row>
      </a-form>
    </a-card>

    <a-card style="padding-top: 0px" :bordered="false">
      <a-empty v-if="data.length === 0"> </a-empty>
      <a-list
        v-else
        size="large"
        rowKey="id"
        :loading="loading"
        itemLayout="vertical"
        :dataSource="data"
        :pagination="pagination"
      >
        <a-list-item :key="item.id" slot="renderItem" slot-scope="item" style="padding-left: 16px; padding-right: 16px">
          <a-list-item-meta>
            <a
              slot="title"
              href="打开案例详情"
              v-html="`${item.jh}(${item.fsrq.split(' ')[0]} / ${item.jcrq.split(' ')[0]})`"
            >
            </a>
            <template slot="description">
              <span>
                <a-tag v-html="item.sglb"></a-tag>
                <a-tag v-html="item.sgmc"></a-tag>
                <a-tag v-html="item.sgdj"></a-tag>
              </span>
            </template>
          </a-list-item-meta>
          <div class="antd-pro-components-article-list-content-index-listContent" style="padding: 8px">
            <a-row :gutter="16" type="flex">
              <a-col span="12">
                <a-alert
                  message="发生经过"
                  type="warning"
                  showIcon
                  style="height: calc(100% - 8px); margin-bottom: 8px"
                >
                  <a-icon slot="icon" type="exclamation-circle" />
                  <p slot="description" v-html="item.fsjgjyy"></p>
                </a-alert>
              </a-col>
              <a-col span="12">
                <a-alert message="处理过程" type="info" showIcon style="height: calc(100% - 8px); margin-bottom: 8px">
                  <a-icon slot="icon" type="clock-circle" />
                  <p slot="description" v-html="item.sgclgk"></p>
                </a-alert>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <a-alert message="钻具组合" type="success" showIcon style="margin-bottom: 8px">
                  <a-icon slot="icon" type="tool" />
                  <p slot="description" v-html="item.zjzh"></p>
                </a-alert>
              </a-col>
            </a-row>
          </div>
        </a-list-item>
      </a-list>
    </a-card>
  </a-spin>
</template>

<script>
import _ from 'lodash'
import warnApi from '@/api/warnApi'
import StandardFormRow from '@/components/StandardFormRow/'
import TagSelect from '@/components/TagSelect'
const TagSelectOption = TagSelect.Option


export default {
  name: 'CaseSearch',
  components: {
    TagSelect,
    TagSelectOption,
    StandardFormRow,
  },
  data () {
    return {
      data: [],
      pagination: {
        onChange: page => {
          this.pagination.current = page
          this.search()
        },
        pageSize: 10,
        total: 0,
        current: 1
      },
      loading: true,
      formLoading: {
        visible: false
      },
      keyText: '',
      tagValue: [],
      tags: ['井涌', '卡钻', '井漏', '断钻具', '井塌', '钻井液污染']
    }
  },
  methods: {
    createIndex1 () {
      warnApi.luceneIndex1({})
        .then(res => {
          this.$message.info(res)
        }).catch(e => {
          this.$message.error(e)
        })
    },
    createIndex () {
      warnApi.luceneIndex({})
        .then(res => {
          this.$message.info(res)
        }).catch(e => {
          this.$message.error(e)
        })
    },
    search () {
      this.loading = true
      if (_.isString(this.keyText) && !(_.isEmpty(_.trim(this.keyText)))) {

        warnApi.luceneSearch({
          text: this.tagValue.length === 0 ? this.keyText : this.keyText + this.tagValue.join(' '),
          pageNo: this.pagination.current,
          pageSize: this.pagination.pageSize
        })
          .then(res => {
            this.data = res.result.data
            this.pagination.total = res.result.total
            this.loading = false
          }).catch(e => {
            this.$message.error(e)
            this.loading = false
          })
      } else {
        this.$message.warning('请输入关键字')
        this.loading = false
      }
    },
    handleTagSelect (val) {
      if (val === 'total') {
        if (val.checked) {
          this.tagValue = [...this.tags]
        } else {
          this.tagValue = []
        }
      } else {
        if (val.checked) {
          this.tagValue.push(val.value)
        } else {
          _.pull(this.tagValue, val.value)
        }
      }
    }
  },
  created () { },
  mounted () { },
  computed: {},
  watch: {}
}
</script>

<style lang="less" scoped>
@import '~ant-design-vue/lib/style/index';
.ant-pro-components-tag-select {
  /deep/ .ant-pro-tag-select .ant-tag {
    margin-right: 24px;
    padding: 0 8px;
    font-size: 14px;
  }
}
.ant-pro-pages-list-projects-cardList {
  margin-top: 24px;

  /deep/ .ant-card-meta-title {
    margin-bottom: 4px;
  }

  /deep/ .ant-card-meta-description {
    height: 44px;
    overflow: hidden;
    line-height: 22px;
  }

  .cardItemContent {
    display: flex;
    height: 20px;
    margin-top: 16px;
    margin-bottom: -4px;
    line-height: 20px;

    > span {
      flex: 1 1;
      color: rgba(0, 0, 0, 0.45);
      font-size: 12px;
    }

    /deep/ .ant-pro-avatar-list {
      flex: 0 1 auto;
    }
  }
}
.page-menu-search {
  text-align: center;
  margin-bottom: 16px;
}

.antd-pro-components-article-list-content-index-listContent {
  .description {
    line-height: 22px;
  }
  .extra {
    margin-top: 16px;
    color: @text-color-secondary;
    line-height: 22px;

    & /deep/ .ant-avatar {
      position: relative;
      top: 1px;
      width: 20px;
      height: 20px;
      margin-right: 8px;
      vertical-align: top;
    }

    & > em {
      margin-left: 16px;
      color: @disabled-color;
      font-style: normal;
    }
  }
}
</style>
