<template>
  <div>
    <dialog-view
      :class="{ not_query_form_style: !queryFormItems.length }"
      :visible.sync="choiceDialogVisible"
      :width="choiceDialogWidth"
      :dialogTitle="choiceDialogTitle"
      :before-close="choiceDialogClose"
      :buttons="buttons"
      @button-click="buttonClick"
    >
      <template #dialogBody>
        <div class="choiceDialogBox">
          <div>
            <slot name="dialogSideSlot"></slot>
          </div>
          <div style="flex: 1">
            <div class="form_box" v-if="queryFormItems.length">
              <div
                class="page_view_query_box"
                :style="{ 'margin-right': selectData.length ? '0px' : '77px' }"
              >
                <query-form-view
                  ref="queryFormView"
                  v-bind="$attrs"
                  v-on="$listeners"
                  :queryFormItems="formItems"
                  @check="getList"
                  @query-update-form="queryUpdateForm"
                >
                  <template #button>
                    <slot name="button"></slot>
                  </template>
                </query-form-view>
              </div>
              <el-popover
                v-show="selectData.length"
                placement="bottom-end"
                width="288"
                trigger="hover"
                v-model="isShowPop"
              >
                <ul>
                  <li class="flex li_box li_title">
                    <span class="code">编号</span
                    ><span class="text">{{ selectDataShowText }}</span
                    ><el-link
                      @click="allDelete"
                      class="delete_all"
                      :underline="false"
                      type="danger"
                      >全部清除</el-link
                    >
                  </li>
                  <li
                    class="flex li_box"
                    v-for="(item, index) in selectData"
                    :key="index"
                  >
                    <span class="code">{{ index + 1 }}</span>
                    <span class="text">{{ item[selectDataField] }}</span>
                    <i
                      @click="showSelectDataDelete(item)"
                      class="el-icon-close close_item show_hand common_close"
                    ></i>
                  </li>
                </ul>
                <el-badge
                  slot="reference"
                  :value="selectData.length"
                  :max="999"
                  class="item"
                >
                  <el-button size="mini" class="choiced_btn"
                    >已选中<i
                      :class="{
                        'el-icon-arrow-down el-icon--right': !isShowPop,
                        'el-icon-arrow-up el-icon--right': isShowPop
                      }"
                    ></i>
                  </el-button>
                </el-badge>
              </el-popover>
            </div>
            <div
              class="choice_dialog_table_box"
              :class="{ not_page_style: !showPagination }"
            >
              <!-- 分页表格组件 -->
              <page-table-view
                ref="pageTableView"
                v-bind="$attrs"
                v-on="$listeners"
                :height="dialogTableHeight"
                :row-key="rowKey"
                :data="list"
                :columns="columns"
                :rightPageSpan="rightPageSpan"
                :showPagination="showPagination"
                @selection-change="selectionChange"
                @row-click="rowClick"
                :totalCount="totalCount"
                :page-size="query.size"
                :currentPage="query.start"
                @page-size-change="pageSizeChange"
                @page-current-change="pageCurrentChange"
              >
                <template #columns>
                  <slot name="columns"></slot>
                </template>
                <template
                  v-for="item in columns"
                  v-slot:[item.customSlot]="slotProps"
                >
                  <slot
                    :name="item.customSlot"
                    v-bind:customSlotData="slotProps.customSlotData"
                  ></slot>
                </template>
                <template v-slot:expandSlot="slotProps">
                  <slot
                    name="expandSlot"
                    v-bind:customSlotData="slotProps.customSlotData"
                  ></slot>
                </template>
                <template #pageSlot>
                  <slot name="pageSlot"></slot>
                </template>
                <template #paginationSlot>
                  <slot name="paginationSlot"></slot>
                </template>
                <template #pageTableBottomSlot>
                  <slot name="pageTableBottomSlot"></slot>
                </template>
              </page-table-view>
              <!-- <table-view
                ref="tableView"
                :height="dialogTableHeight"
                :row-key="rowKey"
                :data="list"
                :columns="columns"
                @selection-change="selectionChange"
                @row-click="rowClick"
                v-bind="$attrs"
                v-on="$listeners"
              >
                <template #columns>
                  <slot name="columns"></slot>
                </template>
                <template
                  v-for="item in columns"
                  v-slot:[item.customSlot]="slotProps"
                >
                  <slot
                    :name="item.customSlot"
                    v-bind:customSlotData="slotProps.customSlotData"
                  ></slot>
                </template>
                <template v-slot:expandSlot="slotProps">
                  <slot
                    name="expandSlot"
                    v-bind:customSlotData="slotProps.customSlotData"
                  ></slot>
                </template>
              </table-view>
              <el-row
                type="flex"
                align="middle"
                justify="center"
                class="page_view_set_row_padding"
                v-if="showChoiceDialogPage"
              >
                <el-col :span="24">
                  <pagination-view
                    v-bind="$attrs"
                    v-on="$listeners"
                    :totalCount="totalCount"
                    :page-size="query.size"
                    :currentPage="query.start"
                    @page-size-change="pageSizeChange"
                    @page-current-change="pageCurrentChange"
                  ></pagination-view>
                </el-col>
              </el-row> -->
            </div>
          </div>
        </div>
      </template>
    </dialog-view>
  </div>
</template>
<script>
import tableView from './table.vue'
import paginationView from './baseView/pagination.vue'
import queryFormView from './choiceDialogQueryForm.vue'
import dialogView from './baseView/dialog.vue'
import pageTableView from './pageTable.vue'
export default {
  name: 'choice-dialog-view',
  components: {
    tableView,
    paginationView,
    queryFormView,
    dialogView,
    pageTableView
  },
  props: {
    //查询接口url
    choiceDialogRequestUrl: {
      type: String
      // required: true,
    },
    rowKey: {
      type: [Function, String],
      default: row => row.id
    },
    choiceDialogTitle: {
      type: String
    },
    choiceDialogWidth: {
      type: [String, Number],
      default: '850px'
    },
    showChoiceDialogPage: {
      type: Boolean,
      default: true
    },
    //拓展的查询接口参数
    extendQuery: {
      type: Object,
      default: () => ({})
    },
    //表格列
    columns: {
      type: [Object, Array],
      default: () => ({} || [])
    },
    showPagination: {
      type: Boolean,
      default: true
    }, //显示分页
    selectDataShowText: {
      type: String,
      default: 'SKU'
    },
    selectDataField: {
      type: String,
      default: 'sku'
    },
    // 表格高度
    dialogTableHeight: {
      type: [String, Number],
      default: '400px'
    },
    pageSize: {
      type: Number,
      default: 20
    },
    // 使用自定义保存方法
    isCustomSave: {
      type: Boolean
    },
    //当前页
    currentPage: {
      type: Number,
      default: 1
    },
    queryFormItems: {
      type: Array,
      default: () => []
    },
    apiName: {
      type: String
    },
    buttons: {
      type: Array,
      default: () => {
        return [
          {
            id: 'submit',
            text: '确定',
            type: 'primary'
          },
          {
            id: 'back',
            text: '返回'
          }
        ]
      }
    },
    rightPageSpan: {
      type: [String, Number],
      default: 24
    }
  },
  data() {
    return {
      choiceDialogVisible: false,
      selectData: [],
      list: [],
      totalCount: 0,
      isShowPop: false,
      formItems: [],
      currenSingeChoiceData: null,
      query: {
        size: 20,
        start: 1
      }
    }
  },
  // created() {
  //   this.$on('open', function (arg) {
  //     this.open(arg)
  //   })
  // },
  methods: {
    open(arg) {
      this.formItems = this.queryFormItems
      this.choiceDialogVisible = true
      this.query.size = this.pageSize
      this.query.start = this.currentPage
      this.$emit('choice-dialog-open')
      this.$nextTick(() => {
        this.$refs.queryFormView && this.$refs.queryFormView.updateForm()
        this.getList()
        this.$refs.pageTableView.$refs.tableView.$refs.table.clearSelection()
        this.$refs.pageTableView.$refs.tableView.$refs.table.setCurrentRow()
      })
    },
    buttonClick(arg) {
      switch (arg.id) {
        case 'back':
          this.cancelEvent()
          break
        case 'submit':
          this.submitEvent()
          break
        default:
          break
      }
      this.$emit('button-click-event', arg)
    },
    allDelete() {
      this.selectData.forEach(p => {
        this.showSelectDataDelete(p)
      })
    },
    showSelectDataDelete(row) {
      console.log(row)
      this.$refs.pageTableView.$refs.tableView.$refs.table.toggleRowSelection(
        row,
        false
      )
      if (!this.selectData.length) this.isShowPop = false
    },
    selectionChange(arg) {
      this.selectData = arg
    },
    rowClick(row, column, event, singleChoice) {
      this.currenSingeChoiceData = row
      this.$emit('row-click', row, column, event, singleChoice)
    },
    queryUpdateForm(arg, item) {
      this.query = Object.assign(this.query, arg, this.extendQuery)
      console.log('queryUpdateForm', this.query, item)
      if (item && item.name == 'skuQueryType') return
      this.$emit('query-update-form', arg, item)
    },
    choiceDialogClose() {
      this.selectData = []
      this.currenSingeChoiceData = null
      this.$refs.pageTableView.$refs.tableView.currentSingleChoice = null
      this.formItems.forEach(p => (p.value = ''))
      this.$refs.queryFormView && this.$refs.queryFormView.updateForm()
      this.list = []
      this.choiceDialogVisible = false
    },
    submitEvent() {
      let arr = Array.from(new Set([...this.selectData]))
      this.$emit('submit-event', arr)
      this.$emit('single-submit-event', this.currenSingeChoiceData)
      if (!this.isCustomSave) {
        this.choiceDialogClose()
      }
    },
    cancelEvent() {
      this.$emit('cancel-event')
      this.choiceDialogClose()
    },
    getList() {
      if (this.choiceDialogRequestUrl || this.apiName) {
        if (Object.keys(this.extendQuery).length)
          this.query = Object.assign({}, this.query, this.extendQuery)
        console.log(
          '请求api',
          this.choiceDialogRequestUrl,
          this.apiName,
          '请求参数',
          this.query
        )
        this.$api
          .post(
            this.choiceDialogRequestUrl
              ? this.choiceDialogRequestUrl
              : `${this.apiName}/page`,
            this.query
          )
          .then(res => {
            if (res) {
              this.list = res.list
              this.totalCount = Number(res.totalCount)
            }
            this.$emit('get-list-callback', res)
          })
      }
    },
    pageSizeChange(arg) {
      this.query.start = 1
      this.query.size = arg
      this.getList()
      this.$emit('page-size-change', this.query)
    },
    pageCurrentChange(arg) {
      this.query.start = arg
      this.getList()
      this.$emit('page-current-change', this.query)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-dialog__body {
  padding: 0px;
}
/deep/.el-table--border,
.el-table--group {
  border: none !important;
}
/deep/ .el_table__body tr:hover-row > td.el-table__cell {
  background: #fafafa;
}
.choiceDialogBox {
  // display: flex;
  // width:100%;
}
.choiceDialogBtn {
  text-align: center;
  width: 100%;
}

.page_view_set_row_padding {
  padding: 10px 0;
}
.form_box {
  display: flex;
  // justify-content: space-between;
  align-items: center;
  // border-bottom: 1px solid #e8ecf0;
  padding: 0 16px;
  background: #fff;
  overflow: hidden;
  padding-bottom: 0 !important;
  .item {
    // background-color: #fa5555;
    margin-right: 10px;
    .el-button {
      border-radius: 8px;
    }
  }
  .choiced_btn {
    padding-right: 6px;
    padding-left: 6px;
  }
  /deep/ .el-badge__content {
    background: #fa5555;
  }
}
ul {
  // display: flex;
  max-height: 366px;
  overflow-y: auto;
  .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .li_title {
    background: #f5f5f5;
  }

  .li_box {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    // flex:1;
    .code {
      width: 50px;
      text-align: center;
    }
    .text {
      flex: 1;
      margin-left: 20px;
      white-space: nowrap; /*文本强制一行显示*/
      overflow: hidden; /*文本溢出隐藏*/
      text-overflow: ellipsis; /*溢出的文本显示省略号*/
    }
    .delete_all {
      margin-right: 10px;
      width: 56px;
      text-align: right;
      color: #fa5555;
    }
    .close_item {
      margin-right: 10px;
      font-size: 12px;
    }
  }
}

.form_box /deep/ .el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
.page_view_query_box {
  display: block;
  flex: 1;
  float: none;
  padding: 10px 0;
}
.choice_dialog_table_box {
  /deep/ .el-table::before {
    border-bottom: none;
  }
}

.not_page_style {
  /deep/ .el-table::before {
    z-index: 0;
  }
}
.not_query_form_style {
  /deep/ .el-dialog__header {
    border-bottom: none;
  }
}
// 关闭按钮样式
.common_close {
  color: #909399;
}
.common_close:hover {
  color: #fff;
  border-radius: 50%;
  padding: 2px;
  background: rgba(0, 0, 0, 0.25);
}
</style>
