<template>
  <div>
    <el-table
      class="xd-table"
      ref="multipleTable"
      fit
      size="small"
      highlight-current-row
      style="width: 100%"
      :stripe="stripe"
      :max-height="maxHeight"
      :class="{
      font14: size === 'font14' ,
      font12: size === 'font12',
      hasExpand: hasExpand
    }"
      :row-class-name="`${hasExpand ? 'mainRow': ''}`"
      :data="tableData"
      :border="isBorder"
      :row-key="rowKey"
      :expand-row-keys="expands"
      :show-header="showHeader"
      :current-row-key="currentRowKey"
      :defaultExpandAll="defaultExpandAll"
      :defaultSort="defaultSort"
      :span-method="handleCustom"
      :highlight-current-row="false"
      @selection-change="handleSelectionChange"
      @expand-change="handleExpandChange"
      @sort-change="handleSortChange"
    >
      <template v-for="(header,index) in uiHeaders">
        <el-table-column
          v-if="header.type === 'selection'"
          align="center"
          type="selection"
          width="55"
          :selectable="handleSelectionRowDisabled"
        ></el-table-column>
        <el-table-column v-if="header.type === 'index'" type="index" width="50"></el-table-column>
        <el-table-column
          v-if="header.type === 'expand'"
          type="expand"
          :width="header.hide ? '1px': null"
          :class-name="`${header.hide?'hide': ''}`"
        >
          <template slot-scope="scope">
            <slot name="expand" :row="scope.row" :index="scope.$index"></slot>
          </template>
        </el-table-column>
        <template v-if="header.type === 'normal'">
          <el-table-column
            :show-overflow-tooltip="header.showOverflow"
            :sortable="header.sort || false"
            :prop="header.prop"
            :label="header.label"
            :width="header.width ?header.width + 'px': null"
            :min-width="header.minWidth ?header.minWidth + 'px': null"
            :align="header.align"
            :class-name="`${header.hide?'hide': ''} ${header['notice'] && header['notice']['data']?'cNotice':''}`"
          >
            <template slot="header" v-if="header['notice'] && header['notice']['data']">
              <xd-table-notice
                :label="header.label"
                :notice="header['notice']['data']"
              ></xd-table-notice>
            </template>
            <template slot-scope="scope">
              <slot
                :name="header.prop"
                :row="scope.row"
                :index="scope.$index"
              >{{scope.row[header.prop]}}</slot>
            </template>
          </el-table-column>
        </template>
        <template v-if="header.type === 'percentage'">
          <el-table-column
            :sortable="header.sort || false"
            :prop="header.prop"
            :label="header.label"
            :width="header.width ?header.width + 'px': null"
            :min-width="header.minWidth ?header.minWidth + 'px': null"
            :align="header.align"
            :class-name="`${header.hide?'hide': ''} ${header['notice'] && header['notice']['data']?'cNotice':''}`"
          >
            <template slot="header" v-if="header['notice'] && header['notice']['data']">
              <xd-table-notice
                :label="header.label"
                :notice="header['notice']['data']"
              ></xd-table-notice>
            </template>
            <template slot-scope="scope">
              <slot
                :name="header.prop"
                :row="scope.row"
                :index="scope.$index"
              >{{scope.row[header.prop]|filterPercentage}} %</slot>
            </template>
          </el-table-column>
        </template>
        <template v-if="header.type === 'image'">
          <el-table-column
            :label="header.label"
            :width="header.width ?(header.width + 20) + 'px': null"
            :min-width="header.minWidth ?header.minWidth + 'px': null"
            :align="header.align"
            :class-name="`${header.hide?'hide': ''} ${header['notice'] && header['notice']['data']?'cNotice':''}`"
          >
            <template slot="header" v-if="header['notice'] && header['notice']['data']">
              <xd-table-notice
                :label="header.label"
                :notice="header['notice']['data']"
              ></xd-table-notice>
            </template>
            <template slot-scope="scope">
              <slot :name="header.prop" :row="scope.row" :index="scope.$index">
                <xd-table-image
                  :key="refresh"
                  :thumb="scope.row[header.prop]"
                  :thumb-preview="header.orgImage?[scope.row[header.orgImage]]:[scope.row[header.prop]]"
                  :width="header.width? (header.width) : 113"
                  :height="header.height? (header.height) : 100"
                ></xd-table-image>
              </slot>
            </template>
          </el-table-column>
        </template>
        <template v-if="header.type === 'tag'">
          <el-table-column
            :label="header.label"
            :width="header.width ?(header.width + 20) + 'px': null"
            :min-width="header.minWidth ?header.minWidth + 'px': null"
            :align="header.align"
            :class-name="`xd-table__tag ${header['notice'] && header['notice']['data']?'cNotice':''}`"
            style="padding: 5px 0"
          >
            <template slot="header" v-if="header['notice'] && header['notice']['data']">
              <xd-table-notice
                :label="header.label"
                :notice="header['notice']['data']"
              ></xd-table-notice>
            </template>
            <template slot-scope="scope">
              <slot :name="header.prop" :row="scope.row" :index="scope.$index">
                <div :class="`xd-table__tag-box ${header.align}`">
                  <el-tag
                    v-for="(tag,idx) in getTags(scope.row[header.prop])"
                    :key="idx"
                  >{{tag|getTagName}}</el-tag>
                </div>
              </slot>
            </template>
          </el-table-column>
        </template>
        <template v-if="header.type === 'price'">
          <el-table-column
            :sortable="header.sort || false"
            :label="header.label"
            :prop="header.prop"
            :width="header.width ?(header.width + 20) + 'px': null"
            :min-width="header.minWidth ?header.minWidth + 'px': null"
            :align="header.align"
            :sort-method="(a,b)=>{handleSortPrice(a, b, header.prop)}"
            :class-name="`${header['notice'] && header['notice']['data']?'cNotice':''}`"
          >
            <template slot="header" v-if="header['notice'] && header['notice']['data']">
              <xd-table-notice
                :label="header.label"
                :notice="header['notice']['data']"
              ></xd-table-notice>
            </template>
            <template slot-scope="scope">
              <slot :name="header.prop" :row="scope.row" :index="scope.$index">
                <xd-table-price :mode="header.mode?header.mode:'price'" :key="refresh" :price="scope.row[header.prop]" :unit="header.unit"></xd-table-price>
              </slot>
            </template>
          </el-table-column>
        </template>
        <template v-if="header.type === 'priceNumber'">
          <el-table-column
            :sortable="header.sort || false"
            :label="header.label"
            :width="header.width ?(header.width + 20) + 'px': null"
            :min-width="header.minWidth ?header.minWidth + 'px': null"
            :align="header.align"
            :sort-method="(a,b)=>{handleSortPrice(a, b, header.prop)}"
            :class-name="`${header['notice'] && header['notice']['data']?'cNotice':''}`"
          >
            <template slot="header" v-if="header['notice'] && header['notice']['data']">
              <xd-table-notice
                :label="header.label"
                :notice="header['notice']['data']"
              ></xd-table-notice>
            </template>
            <template slot-scope="scope">
              <slot :name="header.prop" :row="scope.row" :index="scope.$index">
                <xd-table-price-number
                  :key="refresh"
                  :align="header.align || 'center'"
                  :price="scope.row"
                  :message="header.message || ['price', 'number']"
                  :unit="header.unit"
                ></xd-table-price-number>
              </slot>
            </template>
          </el-table-column>
        </template>
        <template v-if="header.type === 'input'">
          <el-table-column
            :label="header.label"
            :width="header.width ?(header.width + 20) + 'px': null"
            :min-width="header.minWidth ?header.minWidth + 'px': null"
            :align="header.align"
            :class-name="`${header['notice'] && header['notice']['data']?'cNotice':''}`"
          >
            <template slot="header" v-if="header['notice'] && header['notice']['data']">
              <xd-table-notice
                :label="header.label"
                :notice="header['notice']['data']"
              ></xd-table-notice>
            </template>
            <template slot-scope="scope">
              <slot :name="header.prop" :row="scope.row" :index="scope.$index">
                <el-input
                  type="number"
                  @input="e => handleInput(e, scope.row,scope.$index)"
                  v-model="scope.row[header.prop]"
                  :disabled="header.disabled === undefined?false:header.disabled"
                ></el-input>
              </slot>
            </template>
          </el-table-column>
        </template>
        <template v-if="header.type === 'field'">
          <el-table-column
            :sortable="header.sort || false"
            :label="header.label"
            :width="header.width ?(header.width + 20) + 'px': null"
            :min-width="header.minWidth ?header.minWidth + 'px': null"
            :align="header.align"
            :sort-method="(a,b)=>{handleSortPrice(a, b, header.prop)}"
            :class-name="`${header['notice'] && header['notice']['data']?'cNotice':''}`"
          >
            <template slot="header" v-if="header['notice'] && header['notice']['data']">
              <xd-table-notice
                :label="header.label"
                :notice="header['notice']['data']"
              ></xd-table-notice>
            </template>
            <template slot-scope="scope">
              <slot :name="header.prop" :row="scope.row" :index="scope.$index">
                <xd-detail
                  :key="refresh"
                  style="width: 100%"
                  no-hover
                  is-filter-empty
                  :min-width="getDetailWidth(header, 'min')"
                  :label-width="getDetailWidth(header, 'label')"
                  :size="header.size || 'small'"
                  :list="getDetailData(header,scope.row)"
                ></xd-detail>
              </slot>
            </template>
          </el-table-column>
        </template>
        <template v-if="header.type === 'priceGroup'">
          <el-table-column
            :sortable="header.sort || false"
            :label="header.label"
            :width="header.width ?(header.width + 20) + 'px': null"
            :min-width="header.minWidth ?header.minWidth + 'px': null"
            :align="header.align"
            :sort-method="(a,b)=>{handleSortPrice(a, b, header.prop)}"
          >
            <template slot="header" v-if="header['headerSlot'] && header['headerSlot'].length > 0">
              <div
                class="header-custom"
                :class="{
                center: header.align === 'center',
                left: header.align === 'left',
                right: header.align === 'right'
              }"
              >
                <span>{{header.label}}</span>
                <el-tooltip class="item" effect="dark" placement="top">
                  <i class="el-icon-question" style="font-size:16px; color:#aaa;"></i>
                  <div
                    slot="content"
                    v-if="header['headerSlot'] && header['headerSlot'].length > 0"
                  >
                    <div v-for="(hea,heaIdx) in header['headerSlot']" :key="heaIdx">{{hea}}</div>
                  </div>
                </el-tooltip>
              </div>
            </template>
            <template slot-scope="scope">
              <slot :name="header.prop" :row="scope.row" :index="scope.$index">
                <xd-detail
                  :key="refresh"
                  style="width: 100%"
                  no-hover
                  is-filter-empty
                  :min-width="getDetailWidth(header, 'min')"
                  :label-width="getDetailWidth(header, 'label')"
                  :size="header.size || 'small'"
                  :list="getDetailGroupData(header,scope.row)"
                ></xd-detail>
              </slot>
            </template>
          </el-table-column>
        </template>
        <template v-if="header.type === 'status'">
          <el-table-column
            :label="header.label"
            :width="header.width ?(header.width + 20) + 'px': null"
            :min-width="header.minWidth ?header.minWidth + 'px': null"
            :align="header.align"
            :class-name="`${header['notice'] && header['notice']['data']?'cNotice':''}`"
          >
            <template slot="header" v-if="header['notice'] && header['notice']['data']">
              <xd-table-notice
                :label="header.label"
                :notice="header['notice']['data']"
              ></xd-table-notice>
            </template>
            <template slot-scope="scope">
              <slot :name="header.prop" :row="scope.row" :index="scope.$index">
                <xd-table-status
                  :key="refresh"
                  :status="scope.row[header.prop]"
                  :message="header.message ? header.message : ['正常', '禁用']"
                ></xd-table-status>
              </slot>
            </template>
          </el-table-column>
        </template>
        <template v-if="header.type === 'edit'">
          <el-table-column
            :label="header.label"
            :width="header.width ?(header.width + 20) + 'px': null"
            :min-width="header.minWidth ?header.minWidth + 'px': null"
            :align="header.align"
            :class-name="`${header['notice'] && header['notice']['data']?'cNotice':''}`"
          >
            <template slot="header" v-if="header['notice'] && header['notice']['data']">
              <xd-table-notice
                :label="header.label"
                :notice="header['notice']['data']"
              ></xd-table-notice>
            </template>
            <template slot-scope="scope">
              <slot :name="header.prop" :row="scope.row" :index="scope.$index">
                <xd-table-edit-item
                  :type="header.elType || 'text'"
                  :blur="header.blur === undefined?true:header.blur"
                  :sp="scope.row[header.sp]"
                  :key="refresh"
                  :align="header.align"
                  v-model="scope.row[header.prop]"
                  @onSave="(cb)=>{handleEdit(header,scope.row,cb,scope.$index)}"
                ></xd-table-edit-item>
              </slot>
            </template>
          </el-table-column>
        </template>
        <template v-if="header.type === 'sort'">
          <el-table-column
            :sortable="header.sort || false"
            :label="header.label"
            :width="header.width ?(header.width + 20) + 'px': null"
            :min-width="header.minWidth ?header.minWidth + 'px': null"
            :align="header.align"
            :class-name="`${header['notice'] && header['notice']['data']?'cNotice':''}`"
          >
            <template slot="header" v-if="header['notice'] && header['notice']['data']">
              <xd-table-notice
                :label="header.label"
                :notice="header['notice']['data']"
              ></xd-table-notice>
            </template>
            <template slot-scope="scope">
              <slot :name="header.prop" :row="scope.row" :index="scope.$index">
                <xd-table-sort
                  :key="refresh"
                  :default-value="scope.row[header.prop]"
                  :min="header.min || 1"
                  :max="header.max || 99999"
                  @change="({value,  cb})=>{handleChange(scope.row, header.prop, {value, cb})}"
                ></xd-table-sort>
              </slot>
            </template>
          </el-table-column>
        </template>
        <template v-if="header.type === 'switch'">
          <el-table-column
            :label="header.label"
            :width="header.width ?(header.width + 20) + 'px': null"
            :min-width="header.minWidth ?header.minWidth + 'px': null"
            :align="header.align"
            :class-name="`${header['notice'] && header['notice']['data']?'cNotice':''}`"
          >
            <template slot="header" v-if="header['notice'] && header['notice']['data']">
              <xd-table-notice
                :label="header.label"
                :key="refresh"
                :notice="header['notice']['data']"
              ></xd-table-notice>
            </template>
            <template slot-scope="scope">
              <slot :name="header.prop" :row="scope.row" :index="scope.$index">
                <xd-table-witch
                  :inactiveText="header.inactiveText"
                  :activeText="header.activeText"
                  :key="refresh"
                  :default-value="scope.row[header.prop]"
                  :is-back-type="header.is_back_type || 1"
                  @change="({value,  cb})=>{handleChange(scope.row, header.prop, {value, cb})}"
                ></xd-table-witch>
              </slot>
            </template>
          </el-table-column>
        </template>
        <template v-if="header.type === 'qrCode' || header.type === 'barCode'">
          <el-table-column
            :label="header.label"
            :width="header.width ?(header.width + 20) + 'px': null"
            :min-width="header.minWidth ?header.minWidth + 'px': null"
            :align="header.align"
            :class-name="`${header['notice'] && header['notice']['data']?'cNotice':''}`"
          >
            <template slot="header" v-if="header['notice'] && header['notice']['data']">
              <xd-table-notice
                :label="header.label"
                :key="refresh"
                :notice="header['notice']['data']"
              ></xd-table-notice>
            </template>
            <template slot-scope="scope">
              <div
                class="code"
                @click="handleQrCode(scope.row[header.prop],header)"
                style="text-align: center"
              >
                <slot :name="header.prop" :row="scope.row" :index="scope.$index">
                  <el-button
                    :type="(header.params && header.params['type']) || 'primary'"
                    :size="(header.params && header.params['size']) || 'mini'"
                  >{{header.label}}</el-button>
                </slot>
              </div>
            </template>
          </el-table-column>
        </template>
        <template v-if="header.type === 'operate'">
          <el-table-column
            :label="header.label"
            :width="isPc ? (header.width ?(header.width + 20) + 'px': null) : (iphoneWidth + 20) + 'px'  "
            :align="header.align"
            fixed="right"
            :class-name="`${hasExpand ? 'operate': ''} ${header.hide?'hide': '' }`"
          >
            <template slot-scope="scope">
              <slot :name="header.prop" :row="scope.row" :btn="header.values" :index="scope.$index">
                <div class="app-container__list-table-option" :class="{iphone: !isPc}">
                  <template v-for="(value,idx) in header.values">
                    <el-tooltip
                      v-if="value.ui === 'link' && getBtnShowStatus(value,header,scope.row)"
                      :content="value.name"
                      effect="dark"
                      placement="top"
                    >
                      <router-link :target="value.target" :to="toLink(scope.row, value, idx)">
                        <el-button :type="value.type" size="mini" :icon="value.icon"></el-button>
                      </router-link>
                    </el-tooltip>
                    <router-link
                      v-else-if="value.ui === 'text-link' && getBtnShowStatus(value,header,scope.row)"
                      :target="value.target"
                      :to="toLink(scope.row, value, idx)"
                    >
                      <el-button :type="value.type" size="mini" :icon="value.icon">{{value.name}}</el-button>
                    </router-link>
                    <el-button
                      :disabled="value.disabled === undefined?false:value.disabled "
                      v-else-if="value.ui === 'text-button' && getBtnShowStatus(value,header,scope.row)"
                      size="mini"
                      :type="value.type"
                      :icon="value.icon"
                      @click="handleClick(scope.row , value, idx, scope.$index)"
                    >{{value.name}}</el-button>
                    <el-tooltip
                      v-else-if="value.ui === 'button' && getBtnShowStatus(value,header,scope.row)"
                      :content="value.name"
                      effect="dark"
                      placement="top"
                    >
                      <el-button
                        size="mini"
                        :type="value.type"
                        :icon="value.icon"
                        :disabled="value.disabled === undefined?false:value.disabled "
                        @click="handleClick(scope.row,value, idx, scope.$index)"
                      ></el-button>
                    </el-tooltip>
                  </template>
                </div>
              </slot>
            </template>
          </el-table-column>
        </template>
      </template>
    </el-table>
    <xd-dialog
      v-if="qrShow"
      :show.sync="qrShow"
      :width="qrWidth"
      :title="qrTitle"
      @onClose="handleQrClose"
    >
      <div class="qrCode-box">
        <div class="qrCode">
          <el-image :src="qrSrc"></el-image>
        </div>
        <div class="qrCode-download" v-if="qrDownload">
          <el-button type="success" @click="handleDownload">下载{{qrTitle}}</el-button>
        </div>
      </div>
    </xd-dialog>
  </div>
</template>

<script>
import XdTableImage from "@/components/XdTableImage"
import XdTablePrice from "@/components/XdTablePrice"
import XdTableStatus from "@/components/XdTableStatus"
import XdTableSort from "@/components/XdTableSort"
import XdTableWitch from "@/components/XdTableWitch"
import XdTablePriceNumber from "@/components/XdTablePriceNumber"
import XdDetail from "@/components/XdDetail"
import XdTableNotice from "@/components/XdTableNotice.vue";
import QRCode from "@/utils/QRCode"
import BarCode from "@/utils/BarCode"
import XdDialog from "@/components/XdDialog"
import downloadJs from 'downloadjs'
import XdTableEditItem from "@/components/XdTableEditItem.vue";

let $vm = null
export default {
  name: "XdNewTable",
  components: {
    XdTableNotice,
    XdDialog,
    XdDetail,
    XdTableImage,
    XdTablePrice,
    XdTableStatus,
    XdTableSort,
    XdTableWitch,
    XdTablePriceNumber,
    XdTableEditItem
  },
  props: {
    defaultExpandAll: {
      type: Boolean,
      default: false
    },
    defaultSort: {
      type: Object,
      default () {
        return {}
      }
    },
    stripe: {
      type: Boolean,
      default: true
    },

    showHeader: {
      type: Boolean,
      default: true
    },

    hasExpand: {
      type: Boolean,
      default: false
    },

    isBorder: {
      type: Boolean,
      default: false
    },

    size: {
      type: String,
      default: 'font14'
    },

    getLink: {
      type: Function | null,
      default: null
    },

    list: {
      type: Array | null,
      default: null
    },

    headers: {
      type: Array | null,
      default: null
    },

    defaultSelect: {
      type: Array,
      default () {
        return []
      }
    },
    iphoneWidth: {
      type: Number,
      default: 80
    },
    selectionRowIsDisabled: {
      type: Function | null,
      default: null
    },
    selectionKey: {
      type: String,
      default: 'id'
    },
    currentRowKey: {
      type: String | null,
      default: null
    },

    customFunction: {
      type: Function | null,
      default: null
    },

    expands: {
      type: Array | null,
      default: null
    },
    rowKey: {
      type: String | null,
      default: null
    },
    maxHeight: {
      type: Number,
      default: null
    },

  },
  data () {
    return {
      //码展示
      qrShow: false,
      qrTitle: '',
      qrSrc: '',
      qrWidth: 5,
      qrDownload: false,

      tableData: [],
      uiHeaders: [],
      select: [],
      testHeaders: [
        { type: 'selection' },
        { type: 'expand' },
        { type: 'normal', prop: 'id', align: 'left', width: 200, label: '商品 ID' },
        { type: 'image', prop: 'image', align: 'center', width: 100, height: 100, label: 'ICON' },
        { type: 'price', prop: 'price', align: 'center', width: 100, label: '价格', unit: '元' },
        { type: 'status', prop: 'status', align: 'center', width: 100, label: '状态' },
        { type: 'normal', prop: 'name', align: 'center', minWidth: 200, label: '商品名称' },
        {
          type: 'operate',
          align: 'center',
          width: 170,
          label: '操作',
          isCheckHide: true,
          values: [
            { ui: 'link', icon: 'el-icon-view', target: '_blank', name: '查看', type: 'primary' },
            { ui: 'button', icon: 'el-icon-delete', name: '删除', type: 'danger' },
            { ui: 'button', icon: 'el-icon-share', name: '关联', type: 'warning' }
          ]
        }
      ],
      testTableData: [
        {
          id: '12987122',
          name: '好滋好味鸡蛋仔',
          edit:'好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333',
          price: '200',
          status: 'Y',
          image: 'https://jfbcake.oss-cn-beijing.aliyuncs.com/uploads/20200710/6e6e8d3be52ec622216e667620ee9634.jpg'
        }, {
          id: '12987123',
          name: '好滋好味鸡蛋仔',
          edit:'好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333',
          price: '200',
          status: 2,
          image: 'https://jfbcake.oss-cn-beijing.aliyuncs.com/uploads/20200710/6e6e8d3be52ec622216e667620ee9634.jpg'
        }, {
          id: '12987125',
          name: '好滋好味鸡蛋仔',
          edit:'好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333',
          price: '200',
          status: 1,
          image: 'https://jfbcake.oss-cn-beijing.aliyuncs.com/uploads/20200710/6e6e8d3be52ec622216e667620ee9634.jpg'
        }, {
          id: '12987126',
          name: '好滋好味鸡蛋仔',
          edit:'好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333',
          price: '200',
          status: 0,
          image: 'https://jfbcake.oss-cn-beijing.aliyuncs.com/uploads/20200710/6e6e8d3be52ec622216e667620ee9634.jpg'
        }
      ],
      image: '../assets/system.png',
      isPc: true,
      timer: null,

      hasCheckBox: false, //是否有复选框功能
      refresh: 'refresh',
    }
  },
  filters: {
    raw (value) {
      return JSON.stringify(value)
    },
    getTagName (value) {
      if ($vm.$xdHelper.checkVarType(value) === 'string') return value
      if ($vm.$xdHelper.checkVarType(value) === 'object'
        && (value.label || value.name)
      ) return value.label || value.name
    },
    filterPercentage (value) {
      console.log(value)
      if (value === undefined || value === null || value === '') return '--'
      if ($vm.$xdHelper.checkVarType(value) === 'string') {
        value = Number(value)
      }
      if ($vm.$xdHelper.checkVarType(value) !== 'number') return '--'
      return $vm.$xdHelper.divisionFloatNumber(value, 100)
    }
  },
  watch: {
    list () {
      this.init()
    }
  },

  created () {
    $vm = this
    this.isPc = this.$xdHelper.isPC()

    if (this.headers === null) {
      this.uiHeaders = this.$xdHelper.cloneDeep(this.testHeaders)
    } else this.uiHeaders = this.$xdHelper.cloneDeep(this.headers)

    this.hasCheckBox = this.uiHeaders.filter(item => {
      return item.type === 'selection'
    }).length > 0

    this.init()
  },

  methods: {
    handleDownload () {
      if (this.qrSrc) {
        downloadJs(this.qrSrc, `下载${this.qrTitle}.png`)
      }
    },
    async handleQrCode (data, header) {
      if (!data) {
        this.$message({ message: `生成${header.label}内容不能为空`, type: 'error' })
        return
      }
      let options = Object.assign({}, {
        text: data,
        width: 500,
        color: {
          dark: '#000', //二维码颜色
          light: '#f8f8f8', //二维码空区域颜色
        }
      }, header.ext || {})

      if (header.type === 'barCode') {
        options = null
        options = Object.assign({}, {
          text: data,
          width: 2.5,
        }, header.ext || {})
      }

      this.qrWidth = options.width + 'px'
      this.qrDownload = (header.ext && header.ext.download) || false
      if (header.type === 'qrCode') this.qrSrc = await QRCode(options).then().catch()
      if (header.type === 'barCode') {
        this.qrWidth = '800px'
        this.qrSrc = await BarCode(options).then().catch()
      }
      this.qrTitle = header.label
      this.qrShow = true

      console.log(this.qrWidth, header, options)

    },
    handleQrClose () {
      this.qrDownload = false
      this.qrSrc = ''
      this.qrTitle = ''
      this.qrShow = false
    },

    getTags (data) {
      if (this.$xdHelper.checkVarType(data) === 'string') {
        return [data]
      }
      return data
    },
    getBtnShowStatus (btn, header, row) {
      //需要检查状态
      if (typeof this.customFunction === 'function'
        && header.isCheckHide === true
      ) {
        return this.customFunction({
          action: 'btn',
          data: { btn, header, row }
        })
      }
      else return true
    },
    /**
     * @description 数据项可编辑时候
     * @param header
     * @param row
     * @param  cb
     */
    handleEdit(header, row , cb,index){
      this.$emit('onEdit',{header, row, cb,index})
    },

    getDetailWidth (header, type = 'min') {
      let labelWidth = parseInt(header.labelWidth) || 80
      if (type === 'min') {
        let w = header.width || header.minWidth
        return (w - labelWidth - 10) + 'px'
      }
      if (type === 'label') {
        return labelWidth + 'px'
      }
    },
    getDetailData (header, row) {
      if (header.message && this.$xdHelper.checkVarType(header.message) === 'object') {
        let temp = {
          title: '',
          items: [],
        }
        Object.keys(header.message).map(key => {
          if (this.$xdHelper.checkVarType(header.message[key]) === 'array') {
            temp.items.push({ label: header.message[key][0], value: row[key], type: header.message[key][1], field: key })
          }
          else {
            temp.items.push({ label: header.message[key], value: row[key], type: 'normal', field: key })
          }
        })
        return [temp]
      }
      else throw new Error(`header.message必须配置使用字段, 例如配置格式:['id', 'name', 'status', ['price', 'price']]
        \n（id，name，status）为普通模式，['price', 'price']使用几个模式`)
    },
    getDetailGroupData (header, row) {
      let temp = {
        title: '',
        items: [],
      };
      `
        {label: '单位', value: 33, type: 'unit', field: 'unit', params: {unit: '元',color: '#999'}}
        {label: '折扣', value: 8877, type: 'ratio', field: 'ratio', params: {unit: '折'}},
        {label: '价格&折扣', value: [8877, 1000], type: 'priceAndRatio', field: 'priceAndRatio', params: {unit: ['元', '%']}},
        {label: '价格', value: 250, type: 'price', field: 'price', params: {unit: '元'}},
        `
      Object.keys(header.message).map(key => {
        let params = { unit: header.message[key][2] }
        if (header.message[key][1] === 'unit') params['color'] = '#999'
        let value = row[header['prop']][key]
        if (key.indexOf('&') !== -1) {
          let ks = key.split('&')
          value = [row[header['prop']][key][ks[0]], row[header['prop']][key][ks[1]]]
        }
        temp.items.push({
          label: header.message[key][0],
          value: value,
          type: header.message[key][1],
          field: key,
          params: params
        })
      })
      return [temp]
    },

    handleCustom ({ row, column, rowIndex, columnIndex }) {
      if (typeof this.customFunction === 'function') {
        return this.customFunction({
          action: 'merge',
          data: { row, column, rowIndex, columnIndex }
        })
      }
    },
    handleSortPrice (a, b, prop) {
      a = a[prop]
      b = b[prop]
      if (this.$xdHelper.checkVarType(a) === 'string') a = Number(a)
      if (this.$xdHelper.checkVarType(b) === 'string') b = Number(b)
      this.refresh = this.$xdHelper.randomChar(20)
      if (a < b) return -1
      else if (a > b) return 1
      else return 0
    },

    getTableData () {
      if (this.hasCheckBox) return this.select.map(id => {
        return this.$refs['multipleTable'].data.filter(it => {
          return id === it[this.selectionKey]
        })[0]
      })
      return this.$refs['multipleTable'].data
    },

    handleInput (e, row,index) {
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
      this.timer = setTimeout(() => {
        this.$emit('change', { value: e, data: row ,index:index})
      }, 300)
    },

    init () {
      if (this.list === null) {
        this.tableData = this.$xdHelper.cloneDeep(this.testTableData)
      } else this.tableData = this.$xdHelper.cloneDeep(this.list)
      this.select = this.defaultSelect
      this.setTableItem(this.select)
      this.refresh = this.$xdHelper.randomChar(20)
    },

    /**
     * @description 获取访问链接地址
     * @param row
     * @param value
     * @param index
     */
    toLink (row, value, index) {
      if (typeof this.getLink === 'function') {
        return this.getLink({ row, value, index })
      }
    },

    /**
     * @description 点击操作按钮时间
     * @param row
     * @param value
     * @param index
     * @param rowIndex
     */
    handleClick (row, value, index, rowIndex) {
      this.$emit('onClick', { row, value, index, rowIndex })
    },

    /**
     * @description 选择 Selection
     * @param val
     */
    handleSelectionChange (val) {
      let ids = this.$xdHelper.getListKeyForValue(val, this.selectionKey)
      this.select = ids
      this.$emit('onSelect', { select: val, ids: ids })
    },
    handleExpandChange (row, expand) {
      this.$emit('onExpandChange', { row, expand })
    },

    /**
     * @description 设置选择行
     * @param values []
     */
    setTableItem (values = []) {
      if (!this.hasCheckBox) return
      this.$nextTick(() => {
        let rows = this.$xdHelper.getValuesForList(this.tableData, values, this.selectionKey)
        if (rows.length === 0) {
          this.$refs['multipleTable'].clearSelection()
        } else {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row)
          })
        }
      })
    },

    /**
     * @description 自定义事件
     * @param value {any} 返回值
     * @param prop {string} header.prop
     * @param cb {Function} 回调方法
     * @param row {Object} 当前行数据
     */
    handleChange (row, prop, { value, cb }) {
      this.$emit('handleCustom', { value, prop, cb, row })
    },

    handleSortChange ({ column, prop, order }) {
      this.$emit('onSortChange', { column, prop, order })
    },

    /**
     * @description 返回值用来决定这一行的 CheckBox 是否可以勾选
     * @param row {Object} 行对象
     * @param index {number} 行索引值
     */
    handleSelectionRowDisabled (row, index) {
      if (typeof this.selectionRowIsDisabled === 'function') {
        return this.selectionRowIsDisabled(row, index)
      }
      return true

    }
  }
}
</script>

<style scoped lang="scss">
.qrCode-download {
  margin-top: 10px;
}

.header-custom {
  display: flex;
  align-items: center;

  & > span {
    margin-right: 5px;
  }

  &.left {
    justify-content: flex-start;
  }

  &.right {
    justify-content: flex-end;
  }
  &.center {
    justify-content: center;
  }
}

.qrCode-box {
}

.xd-table {
  $padding: 5px;

  .code {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &.hasExpand {
    ::v-deep .mainRow {
      td {
        background: #f4f7fa;
      }
    }

    ::v-deep .operate {
      border-right: 1px solid #e5e5e5;
    }
    ::v-deep .has-gutter th {
      &:first-child {
        border-left: 1px solid #e5e5e5;
      }
    }

    ::v-deep .el-table__header {
      border-top: 1px solid #e5e5e5;
    }

    ::v-deep .expanded > td {
      &.el-table-column--selection {
        border-left: 1px solid #e5e5e5;
      }

      &:last-child {
        border-right: 1px solid #e5e5e5;
      }
    }
    ::v-deep .el-table__expanded-cell {
      padding: 0 0 20px 0;
      position: relative;
      top: -1px;
      left: 0;
      border-left: 0;
      box-sizing: content-box;
    }

    ::v-deep tr:last-child .el-table__expanded-cell {
      border-bottom: 0;
      padding-bottom: 0;
    }
  }

  & ::v-deep .hide {
    .cell {
      display: none;
    }
  }

  &__tag {
    &-box {
      display: flex;
      align-items: center;
      flex-flow: wrap;
      padding-top: $padding;

      & > * {
        margin: 0 $padding $padding;
      }

      &.center {
        justify-content: center;
      }

      &.left {
        justify-content: flex-start;
      }

      &.right {
        justify-content: flex-end;
      }
    }
  }

  & ::v-deep &__tag {
    padding: 0;
  }

  & ::v-deep .el-table__header tr th {
    background: #f8f8f8;
  }

  & ::v-deep .el-button {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &.font14 {
    & ::v-deep .el-table__header tr th {
      font-size: 14px;
      color: #666;
    }
  }

  &.font12 {
    & ::v-deep .el-table__header tr th {
      font-size: 12px;
      color: #666;
    }
  }
}

::v-deep .el-table__header tr th.cNotice .cell {
  display: flex;
  width: 100%;
  justify-content: flex-start;
}
::v-deep .el-table__header tr th.cNotice.is-left .cell {
  justify-content: flex-start;
}
::v-deep .el-table__header tr th.cNotice.is-center .cell {
  justify-content: center;
}
::v-deep .el-table__header tr th.cNotice.is-right .cell {
  justify-content: flex-end;
}

</style>
