<template>
  <div>
    <template v-if="showAlertBar">
      <a-alert type="info" showIcon style="margin-bottom: 16px;">
        <template slot="message">
          <span>已选择</span>
          <a style="font-weight: 600;padding: 0 4px;">{{ selectedRowKeys.length }}</a>
          <span>项</span>
          <template v-if="selectedRowKeys.length>0">
            <a-divider type="vertical"/>
            <a @click="onClearSelected">清空</a>
          </template>
          <span style="float:right;">
            <a @click="loadData()"><a-icon type="sync" />刷新</a>
            <a-divider type="vertical" />
            <a-popover title="自定义列" trigger="click" placement="leftBottom">
              <template slot="content">
                <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
                  <a-row style="width: 400px">
                    <template v-for="(item,index) in defColumns">
                      <template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
                          <a-col :span="12"><a-checkbox :value="item.dataIndex"><j-ellipsis :value="item.title" :length="10"></j-ellipsis></a-checkbox></a-col>
                      </template>
                    </template>
                  </a-row>
                </a-checkbox-group>
              </template>
              <a><a-icon type="setting" />设置</a>
            </a-popover>
          </span>

        </template>
      </a-alert>
    </template>
    <cgform-auto-list-table-wrap
      ref="cgformAutoList"
      :class="{'j-table-force-nowrap': enableScrollBar}"
      :style="{'minHeight': showAlertBar?'300px':'none'}"
      bordered
      size="middle"
      rowKey="id"
      :columns="tableColumn"
      :dataSource="table.dataSource"
      :pagination="table.pagination"
      :loading="table.loading"
      :rowSelection="rowSelectionConfig"
      :scroll="tableScroll"
      :scopedSlots="$scopedSlots"
      @change="handleTableChange"
    >
      <template slot="dateSlot" slot-scope="text">
        <span>{{getFormatDate(text)}}</span>
      </template>
      <template slot="htmlSlot" slot-scope="text">
        <div v-html="text"></div>
      </template>
      <template slot="imgSlot" slot-scope="text,record">
        <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
        <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
      </template>
      <template slot="fileSlot" slot-scope="text">
        <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
        <a-button
          v-else
          :ghost="true"
          type="primary"
          icon="download"
          size="small"
          @click="downloadFile(text)">
          下载
        </a-button>
      </template>

      <template slot="action" slot-scope="text, record">
        <template v-if="buttonSwitch.update">
          <a v-if="" @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
        </template>
        <a-dropdown>
          <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a @click="handleDetail(record)">详情</a>
            </a-menu-item>
            <template v-if="buttonSwitch.update">
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDeleteOne(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </template>

          </a-menu>
        </a-dropdown>
      </template>

    </cgform-auto-list-table-wrap>

  </div>
</template>

<script>

import CgformAutoListTableWrap from './CgformAutoListTableWrap';

export default {
  name: 'CgformAutoListTable',
  inject : ["loadData", "handleEdit", "handleDetail", "handleDeleteOne", "onClearSelected", "cgButtonLinkHandler"],
  components : {
    CgformAutoListTableWrap : CgformAutoListTableWrap
  },
  props : {
    url : {
      type : Object,
      required : true
    },
    showAlertBar : {
      type : Boolean,
      default : true
    },
    table : Object,
    isorter : Object,
    buttonSwitch : Object,
    cgButtonLinkList : Array,
    currentTableName : String,
    checkboxFlag : Boolean,
    hasBpmStatus : Boolean,
    scrollFlag : Number,
    settingColumns : Array
  },
}
</script>

<style scoped>

</style>