<template>
  <a-card :bordered="false" class="card-area">
    <ItemFactor @handleSearch="handleSearch" @reset="reset"></ItemFactor>
    <div>
      <div class="operator" style="width: auto">
        <a-dropdown v-hasPermission="['healthKnowledge:export']">
          <a-menu slot="overlay" v-if="showMoreStatus">
              <a-menu-item key="export-data" @click="exportExcel">导出数据</a-menu-item>
          </a-menu>
          <a-button>
              更多操作 <a-icon type="down" />
          </a-button>
        </a-dropdown>
        <ImportExcel
          v-hasPermission="['healthKnowledge:importData']" ref="ImportExcel"
          :importUrl="importUrl"
          :acceptFile="acceptFile"
          @importSuccess="handleImportSuccess"
          @importError="handleImportError"/>
      </div>
      <div class="table-view">
        <div class="table-item" v-for="(item,index) in dataSource " :key="index">
          <div class="item-title">
            {{item.itemSubject}}
          </div>
          <div class="item-value">
            <a-button type="primary" size="small" @click="showRichText(item.itemContent)" v-if="$isAuth('healthKnowledge:view')">查看详情</a-button>
          </div>
        </div>
      </div>
      <div class="pagination-view">
        <a-pagination
            show-size-changer
            :pageSizeOptions="pagination.pageSizeOptions"
            :default-current="pagination.defaultCurrent"
            :total="pagination.total"
            @change="showSizeChange"
        />
      </div>
    </div>
    <a-modal
        width="50%"
        height="50%"
        :visible="viewRichTextVisible"
        :footer="null" @cancel="viewRichTextVisible = false">
      <div v-html="richText"></div>
    </a-modal>
  </a-card>
</template>
<script>
import ImportExcel from '@/components/import/ImportExcel'
import ItemFactor from './ItemFactor'
import moment from 'moment'
import baseUtils from '@/utils/baseUtils'
import {mapState, mapMutations} from 'vuex'
moment.locale('zh-cn')

export default {
  name: 'ItemList',
  components: {
    ImportExcel:ImportExcel,
    ItemFactor:ItemFactor,
    baseUtils:baseUtils,
  },
  data () {
    return {
      richText:``,
      viewRichTextVisible:false,
      authUserIdOption:[],
      showMoreStatus:false,
      pageUrl:'api/v1/healthKnowledge/queryByPage',//分页查询链接
      exportUrl:'api/v1/healthKnowledge/exportData', //导出链接
      acceptFile:'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      importUrl:process.env.BASE_API+'api/v1/healthKnowledge/importData', //文件时上传,
      itemData:{ //行信息
        data:{

        },
      },
      loading: false,
      validateStatus:'',//校验状态
      help:'',//提示信息
      previewImageVisible: false, //预览图片的弹出框
      previewImageUrl: '', //预览图片的URL
      advanced: false,
      dataSource: [],
      //最终要显示的列
      columns:[],
      paginationInfo: null,
      pagination: {
        pageSizeOptions: ['10', '20', '30', '40', '100'],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
      },
      expressForm: this.$form.createForm(this),
      queryParams: {
        itemContent:'',
        itemSubject:'',
      },
    }
  },
  created () {

  },
  computed: {
    ...mapState({
        currentUser: state => state.account.user
    }),
  },
  mounted () {
    this.fetch()
  },
  methods: {
    moment,
    showSizeChange(page, pageSize){
      console.log('page:'+page)
      console.log('pageSize:'+pageSize)
      this.pagination.defaultCurrent = page
      this.pagination.defaultPageSize = pageSize
      this.fetch({...this.queryParams})
    },
    async showRichText(data){
      this.richText = data
      this.viewRichTextVisible = true
    },
    handleSearch(queryParams){
      if(!baseUtils.isNull(queryParams)){
        this.queryParams =  queryParams
      }
      this.fetch({
        ...this.queryParams
      })
    },
    handleImportSuccess(){ //处理导入成功
      console.log('导入成功')
      this.fetch(...this.queryParams)
    },
    handleImportError(){
      this.$message.error('导入失败')
    },
    async setOtherData(){
      this.authUserIdOption = await this.$commonConstants.authUserIdOption()
    },
    handleTypeByValue(value,optionList){
      console.log('optionList : '+JSON.stringify(optionList))
      console.log('value : '+value)
      if(baseUtils.isNull(value)){
        return '无'
      }
      if(!optionList || !optionList.length >0){
        return '';
      }
      let resultList  =
        optionList.filter(item => item.value == value);
      console.log(JSON.stringify(resultList))
      if(resultList && resultList.length > 0){
        return resultList[0].text;
      }else{
        return '无'
      }
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
      if (!this.advanced) {
          this.queryParams.fieldName = ''
      }
    },
    exportExcel () {
      this.$exportData(this.exportUrl, {
        ...this.queryParams
      })
    },
    search () {
      this.fetch({
        ...this.queryParams
      })
    },
    reset () {
      if (this.paginationInfo) {
        this.paginationInfo.current = this.pagination.defaultCurrent
        this.paginationInfo.pageSize = this.pagination.defaultPageSize
      }
      this.paginationInfo = null
      // 重置查询参数
      this.queryParams = {}
      this.fetch()
    },
    fetch (params = {}) {
      this.loading = true
      if (this.paginationInfo) {
        params.pageSize = this.paginationInfo.pageSize
        params.pageNum = this.paginationInfo.current
      } else {
        // 如果分页信息为空，则设置为默认值
        params.pageSize = this.pagination.defaultPageSize
        params.pageNum = this.pagination.defaultCurrent
      }
      this.$postBodyRequest(this.pageUrl, {
          ...params
      }).then((r) => {
        let data = r.data.data
        const pagination = { ...this.pagination }
        pagination.total = baseUtils.isNull(data.total) ? 0 : data.total
        this.loading = false
        this.dataSource = data.rows
        this.pagination = pagination
        this.setOtherData();
      })
    }
  }
}
</script>

<style lang="less" scoped>
    /*webpack 会以~符号作为前缀的路径视为依赖模块去解析*/
    @import "~@static/less/Common";
    .table-view{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      width: 100%;
      flex-wrap: wrap;
      .table-item{
        width: 20%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        border-radius: 10px;
        //border: 2px solid #ff0000;
        box-shadow: 5px 5px 5px #888888;
        margin: 10px 10px;
        .item-title{
          //border: 2px solid #75e02a;
          width: 50%;
          word-wrap: break-word;
          word-break: break-all;
          font-size: 15px;
          margin: 20px 20px;
        }
        .item-value{
          margin: 20px 20px;
        }
      }
    }
    .pagination-view{
      width: 100%;
      margin: 10px 10px;
    }
</style>
