<template>
  <div class="xl-table-box">
    <el-table
      :ref="curRef"
      v-loading="listLoading"
      element-loading-text="Loading"
      :data="tableData"
      :tree-props="treeProps"
      :row-key="curRowKey"
      :span-method="objectSpanMethod"
      stripe
      class="xl-table"
      @sort-change="sortChange"
      @selection-change="selectionChange"
      @select="select"
      @select-all="selectAll"
    >
      <template v-for="(column, index) in columns.rows">
        <template v-if="insertSlotArr.indexOf(index) > -1">
          <slot :name="`OI${index}`" />
        </template>
        <el-table-column
          v-if="column.type === 'selection'"
          :key="index"
          width="55"
          type="selection"
          :align="'center'"
        />
        <el-table-column
          v-else-if="column.type === 'inputNumber'"
          :key="index"
          :prop="column.prop"
          :label="column.label"
          :align="column.align || 'center'"
          :width="200"
        >
          <template slot-scope="scope">
            <div v-if="!scope.row[column.hide]" class="xl-form">
              <el-input-number
                v-model="scope.row[column.prop]"
                step-strictly
                :step="scope.row[column.step]"
                :min="column.min ? scope.row[column.min] : 1"
                @change="inputNumberChange"
                @input.native="column.more ? column.more.params ? column.more.func(scope.row[column.more.params[0]], scope.row[column.more.params[1]]) : column.more.func(scope.row) : ''"
                @blur="column.more ? column.more.params ? column.more.func(scope.row[column.more.params[0]], scope.row[column.more.params[1]]) : column.more.func(scope.row) : ''"
                @click.native="column.more ? column.more.params ? column.more.func(scope.row[column.more.params[0]], scope.row[column.more.params[1]]) : column.more.func(scope.row) : ''"
              />
            </div>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="column.type === 'input'"
          :key="index"
          :prop="column.prop"
          :label="column.label"
          :align="column.align || 'center'"
          :width="column.width || 200"
        >
          <template slot-scope="scope">
            <div class="xl-form">
              <el-input
                v-model="scope.row[column.prop]"
                @input.native="column.more ? column.more.params ? column.more.func(scope.row[column.more.params[0]], scope.row[column.more.params[1]]) : column.more.func(scope.row) : ''"
                @blur.native="column.more ? column.more.params ? column.more.func(scope.row[column.more.params[0]], scope.row[column.more.params[1]]) : column.more.func(scope.row) : ''"
                @click.native="column.more ? column.more.params ? column.more.func(scope.row[column.more.params[0]], scope.row[column.more.params[1]]) : column.more.func(scope.row) : ''"
              >
                <template v-if="column.appendFont" slot="append">{{ column.appendFont }}</template>
              </el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="column.type === 'flag'"
          :key="index"
          :prop="column.prop"
          :label="column.label"
          :align="column.align || 'center'"
          :width="column.width"
          :min-width="column.minWidth"
        >
          <template slot-scope="scope">
            <span :class="column.fullShow || 'scoped-text-one'" :title="noEmpty(scope.row[column.prop]) ? column.flags[scope.row[column.prop]] : '-'">{{ column.flags[scope.row[column.prop]] || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="column.type === 'twoProp'"
          :key="index"
          :prop="column.prop"
          :label="column.label"
          :align="column.align || 'center'"
          :width="column.width"
          :min-width="column.minWidth"
        >
          <template slot-scope="scope">
            <template v-if="noEmpty(scope.row[column.prop])">
              <span>{{ scope.row[column.prop] }}{{ column.dotStr }}{{ scope.row[column.prop2] }}</span>
            </template>
            <template v-else>-</template>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="column.type === 'tag'"
          :key="index"
          :prop="column.prop"
          :label="column.label"
          :align="column.align || 'center'"
          :width="column.width"
          :min-width="column.minWidth"
        >
          <template slot-scope="scope">
            <template v-if="noEmpty(scope.row[column.prop])">
              <template v-if="column.tagTypeObj">
                <el-tag size="mini" :type="column.tagTypeObj[scope.row[column.prop]]">
                  {{ column.tags[scope.row[column.prop]] }}
                </el-tag>
              </template>
              <template v-else>
                <el-tag v-if="scope.row[column.prop] === 0" size="mini" type="primary">
                  {{ column.tags[scope.row[column.prop]] }}
                </el-tag>
                <el-tag v-else-if="scope.row[column.prop] === 1" size="mini" type="success">
                  {{ column.tags[scope.row[column.prop]] }}
                </el-tag>
                <el-tag v-else-if="scope.row[column.prop] === 2" size="mini" type="danger">
                  {{ column.tags[scope.row[column.prop]] }}
                </el-tag>
                <el-tag v-else size="mini">
                  {{ column.tags[scope.row[column.prop]] }}
                </el-tag>
              </template>
            </template>
            <template v-else>-</template>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="column.type === 'img'"
          :key="index"
          :label="column.label"
          :prop="column.prop"
          :align="column.align || 'center'"
          :width="column.width || 100"
          :min-width="column.minWidth"
        >
          <template slot-scope="scope">
            <div v-if="noEmpty(scope.row[column.prop])" class="img-box" @click="bigImgHandle(scope.row[column.prop])">
              <img :src="`${scope.row[column.prop]}`" class="s-img">
            </div>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="column.type === 'img2'"
          :key="index"
          :label="column.label"
          :prop="column.prop"
          :align="column.align || 'center'"
          :width="column.width || 100"
          :min-width="column.minWidth"
        >
          <template slot-scope="scope">
            <div v-if="noEmpty(scope.row[column.prop])" class="img-box" @click="bigImgHandle(scope.row[column.prop])">
              <img :src="`${scope.row[column.prop]}`" class="s-img">
            </div>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="column.type === 'handle'"
          :key="index"
          fixed="right"
          :prop="column.prop"
          :label="column.label"
          :align="column.align || 'center'"
          :width="column.width"
          :min-width="column.minWidth"
        >
          <template slot-scope="scope">
            <el-button
              v-for="(operate, indexBtn) in column.operations"
              :key="indexBtn"
              type="text"
              :style="{ color: operate.labelConfig && operate.labelConfig.colors ? operate.labelConfig.colors[scope.row[operate.labelFor]] : operate.color ? operate.color : '' }"
              size="small"
              @click="operate.params ? operate.func(scope.row[operate.params[0]], scope.row[operate.params[1]]) : operate.func(scope.row)"
            >
              {{ noEmpty(scope.row[operate.labelFor]) ? operate.labelConfig.texts[scope.row[operate.labelFor]] : operate.label }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="column.type === 'handle2'"
          :key="index"
          :fixed="column.fixed || 'right'"
          :prop="column.prop"
          :label="column.label"
          :align="column.align || 'center'"
          :width="column.operations.length > operationsDefaultLength ? '60' : column.width"
          :min-width="column.minWidth"
        >
          <template slot-scope="scope">
            <template v-if="!scope.row.isHideHandle">
              <template v-if="column.operations.length > operationsDefaultLength">
                <el-popover
                  placement="right"
                  :width="column.subWidth || 100"
                  trigger="click"
                >
                  <el-table :data="column.operations" class="noborderbottom-table">
                    <el-table-column :width="column.subWidth || 100" property="key" :label="column.label">
                      <template slot-scope="sub">
                        <template v-if="sub.row.hide && scope.row[sub.row.hide]" />
                        <template v-else>
                          <template v-if="sub.row.disabled && typeof sub.row.disabled === 'function'">
                            <el-button
                              v-if="sub.row.params ? sub.row.disabled(scope.row[sub.row.params[0]], scope.row[sub.row.params[1]]) : sub.row.disabled(scope.row)"
                              :type="`${sub.row.labelConfig && sub.row.labelConfig.btnTypes ? sub.row.labelConfig.btnTypes[scope.row[sub.row.labelFor]] : sub.row.btnType}`"
                              size="mini"
                              @click="sub.row.params ? sub.row.func(scope.row[sub.row.params[0]], scope.row[sub.row.params[1]]) : sub.row.func(scope.row)"
                            >
                              {{ noEmpty(scope.row[sub.row.labelFor]) ? sub.row.labelConfig.texts[scope.row[sub.row.labelFor]] : sub.row.label }}
                            </el-button>
                          </template>
                          <template v-else>
                            <el-button
                              :type="`${sub.row.labelConfig && sub.row.labelConfig.btnTypes ? sub.row.labelConfig.btnTypes[scope.row[sub.row.labelFor]] : sub.row.btnType}`"
                              size="mini"
                              @click="sub.row.params ? sub.row.func(scope.row[sub.row.params[0]], scope.row[sub.row.params[1]]) : sub.row.func(scope.row)"
                            >
                              {{ noEmpty(scope.row[sub.row.labelFor]) ? sub.row.labelConfig.texts[scope.row[sub.row.labelFor]] : sub.row.label }}
                            </el-button>
                          </template>
                        </template>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div slot="reference" class="link-text">操作</div>
                </el-popover>
              </template>
              <template v-else>
                <template v-for="(operate, indexBtn) in column.operations">
                  <template v-if="operate.hide && scope.row[operate.hide]" />
                  <template v-else>
                    <template v-if="operate.disabled && typeof operate.disabled === 'function'">
                      <el-button
                        v-if="operate.params ? operate.disabled(scope.row[operate.params[0]], scope.row[operate.params[1]]) : operate.disabled(scope.row)"
                        :key="indexBtn"
                        :type="`${operate.labelConfig && operate.labelConfig.btnTypes ? operate.labelConfig.btnTypes[scope.row[operate.labelFor]] : operate.btnType}`"
                        size="mini"
                        @click="operate.params ? operate.func(scope.row[operate.params[0]], scope.row[operate.params[1]]) : operate.func(scope.row)"
                      >
                        {{ noEmpty(scope.row[operate.labelFor]) ? operate.labelConfig.texts[scope.row[operate.labelFor]] : operate.label }}
                      </el-button>
                    </template>
                    <template v-else>
                      <el-button
                        :key="indexBtn"
                        :type="`${operate.labelConfig && operate.labelConfig.btnTypes ? operate.labelConfig.btnTypes[scope.row[operate.labelFor]] : operate.btnType}`"
                        size="mini"
                        @click="operate.params ? operate.func(scope.row[operate.params[0]], scope.row[operate.params[1]]) : operate.func(scope.row)"
                      >
                        {{ noEmpty(scope.row[operate.labelFor]) ? operate.labelConfig.texts[scope.row[operate.labelFor]] : operate.label }}
                      </el-button>
                    </template>
                  </template>
                </template>
              </template>
            </template>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="column.type === 'link'"
          :key="index"
          :sortable="column.sortable"
          :prop="column.prop"
          :label="column.label"
          :align="column.align || 'center'"
          :width="column.width"
          :min-width="column.minWidth"
        >
          <template slot-scope="scope">
            <template v-if="noEmpty(scope.row[column.prop])">
              <template v-if="Object.prototype.toString.call(scope.row[column.prop]) === '[object Array]'">
                <template v-if="scope.row[column.prop].length < 3">
                  <div v-for="(curLinkItem, l) in scope.row[column.prop]" :key="l" class="link-text" @click="locationHref(column.link, curLinkItem, column.linkStr)">{{ noEmpty(curLinkItem.key) ? curLinkItem.key : '-----' }}</div>
                </template>
                <template v-else>
                  <div v-for="(curLinkItem, l) in scope.row[column.prop]" :key="l" class="link-text">
                    <div v-if="l < 3" @click="locationHref(column.link, curLinkItem, column.linkStr)">
                      {{ noEmpty(curLinkItem.key) ? curLinkItem.key : '---' }}
                    </div>
                  </div>
                  <el-popover
                    placement="right"
                    width="200"
                    trigger="click"
                  >
                    <el-table :data="scope.row[column.prop]">
                      <el-table-column width="150" property="key" :label="column.label">
                        <template slot-scope="scope2">
                          <div class="link-text" :title="noEmpty(scope2.row.key) ? scope2.row.key : '-'" @click="locationHref(column.link, scope2.row, column.linkStr)">{{ noEmpty(scope2.row.key) ? scope2.row.key : '-' }}</div>
                        </template>
                      </el-table-column>
                    </el-table>
                    <div slot="reference" class="link-text">查看全部</div>
                  </el-popover>
                </template>
              </template>
              <template v-else>
                <div class="link-text" @click="locationHref(column.link, scope.row, column.linkStr)">{{ noEmpty(scope.row[column.prop]) ? scope.row[column.prop] : '-' }}</div>
              </template>
            </template>
            <template v-else><span>-</span></template>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="column.type === 'html'"
          :key="index"
          :sortable="column.sortable"
          :prop="column.prop"
          :label="column.label"
          :align="column.align || 'center'"
          :width="column.width"
          :min-width="column.minWidth"
        >
          <template slot-scope="scope">
            <div class="table-scoped-html" v-html="noEmpty(scope.row[column.prop]) ? scope.row[column.prop] : '-'" />
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :key="index"
          :sortable="column.sortable"
          :prop="column.prop"
          :label="column.label"
          :align="column.align || 'center'"
          :width="column.width"
          :min-width="column.minWidth"
        >
          <template slot-scope="scope">
            <span :class="column.fullOneShow ? 'scoped-text-one' : column.fullShow || 'scoped-text'" :title="noEmpty(scope.row[column.prop]) ? scope.row[column.prop] : '-'">{{ noEmpty(scope.row[column.prop]) ? scope.row[column.prop] : '-' }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="xl-pagination clearfix">
      <el-form class="xl-form">
        <el-button v-if="isAdd" type="small" icon="el-icon-plus" class="xl-form-btn bgc2" @click="addTableRow">添加</el-button>
        <slot name="otherItem" />
      </el-form>
      <el-pagination
        v-if="!listLoading && pageSize !== -1"
        background
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 30, 40, 50]"
        :layout="hasSizeChange ? 'total, sizes, prev, pager, next' : 'total, prev, pager, next'"
        :page-size="pageSize"
        :total="totalRecords"
        :pager-count="5"
        @current-change="currentChange"
        @size-change="sizeChange"
      />
    </div>
    <popup-big-img :is-show="bigImgShow" :src="`${bigImgSrc}`" @close="closebigImg" />
  </div>
</template>
<script>
import PopupBigImg from './PopupBigImg'
export default {
  name: 'TableList',
  components: { PopupBigImg },
  props: {
    curRef: {
      type: String,
      default: () => {
        return 'table' + Math.floor(Math.random() * 10000)
      }
    },
    listLoading: Boolean,
    currentPage: Number,
    totalRecords: Number,
    pageSize: Number,
    data: Array,
    columns: Object,
    sortable: String,
    treeProps: {
      type: Object,
      default: () => {
        return { id: 'randomId' }
      }
    },
    isAdd: {
      type: Boolean,
      default: false
    },
    hasSizeChange: {
      type: Boolean,
      default: false
    },
    insertSlotArr: {
      default: () => [],
      type: Array
    },
    operationsDefaultLength: {
      default: 2,
      type: Number
    },
  },
  data() {
    const { id } = this.treeProps
    const curRowKey = id || 'randomId'
    return {
      bigImgSrc: '',
      bigImgShow: false,
      curRowKey
    }
  },
  computed: {
    tableData() {
      const data = this.data || []
      data.map(item => {
        item.randomId = parseInt(Math.random() * 100000000000)
      })
      return data
    }
  },
  methods: {
    addTableRow() {
      this.$emit('add')
    },
    select(selection, row) {
      this.$emit('select', selection, row)
    },
    selectAll(selection) {
      this.$emit('select-all', selection)
    },
    objectSpanMethod(row, column, rowIndex, columnIndex) {
      // console.log(row, column, rowIndex, columnIndex)
    },
    inputNumberChange(currentValue, oldValue, a) {
      this.$parent.listLoadinglistLoading = true
      window.setTimeout(() => {
        this.$parent.listLoading = false
      }, 10)
    },
    // 待整理优化
    locationHrefMore(str, curLink) {
      const [type, url] = str.split('.')
      let [path, query] = url.split('?')
      if (query) {
        const qArr = query.split('&')
        const qStr = qArr.map(item => {
          const [key, val] = item.split('=')
          return `${key}=${curLink}`
        })
        path += `?${qStr.join('&')}`
      }
      if (type) {
        if (type === 'router') {
          this.$router.push(path)
        } else {
          window.location.href = path
        }
      }
    },
    locationHref(str, row, linkStr) {
      const [type, url] = str.split('.')
      let [path, query] = url.split('?')
      if (linkStr) {
        window.location.href = row[path]
      } else {
        // router./device/index?shop_id=id&name=name
        if (query) {
          const qArr = query.split('&')
          const qStr = qArr.map(item => {
            const [key, val] = item.split('=')
            return `${key}=${row[val]}`
          })
          path += `?${qStr.join('&')}`
        }
        if (type) {
          if (type === 'router') {
            this.$router.push(path)
          } else {
            window.location.href = path
          }
        }
      }
    },
    bigImgHandle(src) {
      this.bigImgSrc = src
      this.bigImgShow = true
    },
    closebigImg(src) {
      this.bigImgShow = false
    },
    currentChange(page) {
      this.$emit('currentChange', page)
    },
    sizeChange(page) {
      this.$emit('sizeChange', page)
    },
    selectionChange(val) {
      this.$emit('selection-change', val)
    },
    rowClick(row, event, column) {
      this.$emit('row-click', row, event, column)
    },
    sortChange(column) {
      this.$emit('sort-change', column)
    }
  }
}
</script>
  <style lang="scss" scoped>
    ::v-deep .table-scoped-html {
      .op {
        padding-bottom: 5px;
      }
      a {
        color: #2d8cf0;
      }
    }
    .img-box .s-img {
      max-width: 60px;
      max-height: 60px;
    }
    .link-text {
      color: #2d8cf0;
      text-decoration: underline;
      cursor: pointer;
      user-select: none;
    }
    .scoped-text {
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      overflow: hidden;
      word-break: break-all;
      max-height: 36px;
    }
    .scoped-text-one {
      display: inline-block;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    ::v-deep .el-input__inner {
      text-align: center!important;
      padding: 0;
    }
  </style>

