<!--
 * @Author: ym
 * @Date: 2021-09-24 22:39:37
 * @LastEditTime: 2022-08-26 17:09:49
 * @LastEditors: chenkangxu
 * @Description: 表格解决方案
 * @FilePath: \background-front-end\src\components\common\table\custable.vue
-->

<!--表格组件 -->
<template>
<section class="ces-table-page">
  <!-- 表格操作按钮 -->
    <section class="ces-handle" v-if='tableHandles.length > 0'>
      <el-row class="operate">
       <el-col :span="24">
          <el-button
            v-for='item in tableHandles'
            :key='item.label'
            :type="item.type"
            :icon='item.icon'
            :disabled='item.disabled&&item.disabled()'
            @click="item.handle()">{{item.label}}</el-button>
        </el-col>
       </el-row>
    </section>
    <slot name="insert"></slot>
    <!-- 数据表格 -->
    <section class="ces-table">
        <el-table id="cesTable" :data='tableData' :size='size' style="width: 100%;height:100%"  :height="tableHeight"
          :border  ='isBorder'
          @selection-change='selectChange'
          @current-change='currentChange'
          @cell-dblclick="celldblclick"
          v-loading='loading'
          :defaultSelections='defaultSelections'
          :highlight-current-row='highlightCurrentRow'
          :row-key="rowKey"
          ref="cesTable">
            <el-table-column v-if="isSelection" type="selection" align="center" ></el-table-column>
            <el-table-column v-if="isIndex" type="index" :fixed="indexFixed" :index="indexMethod" :label="indexLabel" align="center" width="50"></el-table-column>
            <!-- 数据栏 -->
            <el-table-column v-for="item in tableCols"
              :key="item.id"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              :align="item.align"
              :render-header="item.require?renderHeader:null"
              :show-overflow-tooltip="item.overflow"
              :fixed="item.fixed"
              >
                <template slot-scope="scope" >
                  <!-- html -->
                  <span v-if="item.type==='html'" v-html="item.html(scope.row)"></span>
                  <!-- 按钮 -->
                  <span v-if="item.type==='button'" >
                    <el-button v-for="btn in item.btnList"  :key="(typeof btn.label).toLowerCase()=='string'?btn.label:btn.auth"
                      :disabled="btn.disabled && btn.disabled(scope.row,scope.$index)"
                      :type="btn.type"
                      :size="item.size || btn.size"
                      :icon="btn.icon"
                      @click="btn.handle && btn.handle(scope.row,scope.$index)">{{( typeof btn.label).toLowerCase()=="string"?btn.label:btn.label(scope.row)}}</el-button>
                    </span>
                  <!-- 状态 -->
                  <span v-if="item.type==='status'" >
                      <el-tag v-if="scope.row.status === 0" size="small" type="danger">禁用</el-tag>
                      <el-tag v-else size="small">正常</el-tag></span>
                  <!-- 标签 -->
                  <span v-if="item.type==='tag'" >
                    <el-tag v-for="tag in item.tagList"  :key="(typeof tag.label).toLowerCase()=='string'?tag.label:tag.auth"
                      :type="tag.type"
                      :effect="tag.effect"
                      :size="tag.size || size">{{(typeof tag.label).toLowerCase()=="string"?tag.label:tag.label(scope.row)}}</el-tag>
                  </span>
                  <!-- 日期时间 -->
                  <el-date-picker
                    :style="'width:' + item.width"
                    v-if="item.type === 'DateTime'"
                    type="datetime"
                    v-model="scope.row[item.prop]"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="item.defaultTime?item.defaultTime:'00:00:00'"
                    :disabled="item.disabled && item.disabled(scope.row[item.prop],scope.$index)"
                    @change="
                      item.change && item.change(scope.row[item.prop], item.params)
                    "
                  ></el-date-picker>
                  <!-- 日期 -->
                  <el-date-picker
                    :style="'width:' + item.width"
                    v-if="item.type === 'Date'"
                    v-model="scope.row[item.prop]"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :disabled="item.disabled && item.disabled(scope.row[item.prop],scope.$index)"
                    @change="
                      item.change && item.change(scope.row[item.prop], item.params)
                    "
                  ></el-date-picker>
                  <!-- 带验证的输入框 -->
                  <el-form style="padding:16px 0px" :ref="'cesForm'+scope.$index" :model="scope.row" v-if="item.validate" :rules="item.rules" :label-width="item.labelWidth">
                    <el-form-item label="" :prop="item.prop">
                        <el-input  :type="item.inputType" v-if="item.type==='formInput'" v-model="scope.row[item.prop]" :size="size || btn.size"
                            :disabled="item.isDisabled && item.isDisabled(scope.row,scope.$index)"
                        @focus="item.focus && item.focus(scope.row)" @change="item.change && item.change(scope.row)"></el-input>
                       
                        <el-date-picker
                          v-if="item.type === 'formDate'"
                          v-model="scope.row[item.prop]"
                          :clearable="false"
                          type="date"
                          format="yyyy-MM-dd"
                          :default-time="item.defaultTime?item.defaultTime:'00:00:00'"
                          :pickerOptions="item.pickerOptions&&item.pickerOptions(scope.row,scope.$index)"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          :disabled="item.disabled && item.disabled(scope.row[item.prop],scope.$index)"
                          @change="
                            item.change && item.change(scope.row[item.prop], item.params)
                          "
                        ></el-date-picker>
                    </el-form-item>
                  </el-form>
                  <!-- 输入框 -->
                  <el-input v-if="item.type==='input'" :type="item.inputType" v-model="scope.row[item.prop]" :size="size || btn.size"
                    :disabled="item.isDisabled && item.isDisabled(scope.row,scope.$index)"
                    @focus="item.focus && item.focus(scope.row)" @change="item.change && item.change(scope.row)"></el-input>
                  <!-- 下拉框 -->
                  <el-select v-if="item.type==='select'" v-model="scope.row[item.prop]" :size="size || btn.size"  :props="item.props"
                    :disabled="item.isDisabled && item.isDisabled(scope.row)"
                    @change='item.change && item.change(scope.row)'>
                      <el-option v-for="op in item.options" :label="op.label" :value="op.value" :key="op.value"></el-option>
                  </el-select>
                  <!-- 单选组 -->
                  <el-radio-group v-if="item.type==='radioGroup'" v-model="scope.row[item.prop]"
                    :disabled="item.isDisabled && item.isDisabled(scope.row)" :size="size || btn.size"
                    @change='item.change && item.change(scope.row)'>
                      <el-radio v-for="ra in item.radios" :label="ra.value" :key="ra.value">{{ra.label}}</el-radio>
                  </el-radio-group>
                  <!-- 复选框 -->
                  <el-checkbox-group v-if="item.type==='checkbox'" v-model="scope.row[item.prop]"
                    :disabled="item.isDisabled && item.isDisabled(scope.row)" :size="size || btn.size"
                    @change='item.change && item.change(scope.row)'>
                      <el-checkbox v-for="ra in item.checkboxs" :label="ra.value" :key='ra.value'>{{ra.label}}</el-checkbox>
                  </el-checkbox-group>
                  <!-- 评价 -->
                  <el-rate v-if="item.type==='rate'" v-model="scope.row[item.prop]"
                    :disabled="item.isDisabled && item.isDisabled(scope.row)" :size="size || btn.size"
                    @change='item.change && item.change(scope.row)'></el-rate>
                  <!-- 开关 -->
                  <el-switch v-if="item.type==='switch'" v-model="scope.row[item.prop]" :size="size || btn.size"
                    :active-value='item.values&&item.values[0]'
                    :inactive-value='item.values&&item.values[1]'
                    :disabled="item.isDisabled && item.isDisabled(scope.row)"
                    @change='item.change && item.change(scope.row)'></el-switch>
                  <!-- 图像 -->
                  <!-- <el-image v-if="item.type==='image'" :src="scope.row[item.prop]"/> -->
                  <div v-if="item.type==='elImage'" > 
                    <div v-if="scope.row[item.prop] instanceof Array " style="display:flex" >
                        <el-image :style="{marginRight:i!==scope.row[item.prop].length-1&&scope.row[item.prop].length!==1?'10px':'0x'}" fit="cover" v-show="i<item.limit" :preview-src-list="img?[img]:require('@/assets/images/noimg.svg')"   v-for="(img,i) in scope.row[item.prop]" :key="img" :src="img?img:require('@/assets/images/noimg.svg')" alt=""></el-image >
                    </div>
                    <el-image v-else  :preview-src-list="scope.row[item.prop]?[scope.row[item.prop]]:require('@/assets/images/noimg.svg')"  :src="scope.row[item.prop]?scope.row[item.prop]:require('@/assets/images/noimg.svg')" alt=""></el-image >
                  </div>
                  
                  <el-popover v-if="item.type==='image' && item.popover"
                    placement="right"
                    title=""
                    trigger="hover"
                    width="500"
                    >
                    <img :src="scope.row[item.prop]" style="width: 100%"/>
                    <img slot="reference" :src="scope.row[item.prop]" :alt="scope.row[item.prop]" style="height: 80px;width: 80px;">
                  </el-popover>
                   <img v-if="item.type==='image' && !item.popover" :src="scope.row[item.prop]?scope.row[item.prop]:require('@/assets/images/noimg.svg')" :alt="scope.row[item.prop]" style="height: 80px;width: 80px; ">
                  <!-- 滑块 -->
                  <el-slider  v-if="item.type==='slider'" v-model="scope.row[item.prop]"
                  :disabled="item.isDisabled && item.isDisabled(scope.row)" :size="size || btn.size"
                    @change='item.change && item.change(scope.row)'></el-slider>
                  <!-- 默认 -->
                  <span v-if="!item.type" @click="item.click && item.click(scope.row)"
                    :style="item.itemStyle && item.itemStyle(scope.row)" :size="size || btn.size"
                    :class="item.itemClass && item.itemClass(scope.row)">{{(item.formatter && item.formatter(item.prop,scope.row,item.codeType)) || scope.row[item.prop]}}</span>
                  <span  v-if="item.type ==='foreachtext'">
                    <p  style='cursor:pointer;color:blue' @click="item.downloadmp4(val)" v-for="(val,index) in scope.row[item.prop]" :key="index">
                        {{val.fileName}}
                    </p>
                  </span>
                  <span  v-if="item.type ==='link'" @click="item.click && item.click(scope.row)">
                    <p  style='cursor:pointer;color:blue' >
                        {{scope.row[item.prop]}}
                    </p>
                  </span>
                </template>
              </el-table-column>
        </el-table>
    </section>
    <!-- 分页 -->
    <section class="ces-pagination"  v-if='isPagination'>
        <el-pagination
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            layout="total,sizes ,prev, pager, next,jumper"
            :page-size="tablePage.pageSize"
            :page-sizes="tablePage.pageSizeRange"
            :current-page.sync="tablePage.currentPage"
            :total.sync="tablePage.pageTotal"
        >
        </el-pagination>
    </section>
</section>
</template>

<script>

export default {
  props:{
    //表格高度
    tableHeight:{default:"65vh"},
    //序号是否锁定
    indexFixed:{default:''},
    // 表格型号：mini,medium,small
    size:{type:String,default:'medium'},
    isBorder:{type:Boolean,default:true},
    loading:{type:Boolean,default:false},
    // 表格操作
    isHandle:{type:Boolean,default:false},
    tableHandles:{type:Array,default:()=>[]},
    // 表格数据
    tableData:{ type:Array,default:()=>[]},
    // 表格列配置
    tableCols:{ type:Array,default:()=>[]},
    // 是否显示表格复选框
    isSelection:{type:Boolean,default:false},
    defaultSelections:{ type:[Array,Object], default:()=>null},
    // 是否显示表格索引
    isIndex:{type:Boolean,default:false},
    indexLabel: {type:String,default:'序号'},
    indexMethod:{type:Function,default:(index)=>{return index+1}},
    // 是否显示分页
    isPagination:{type:Boolean,default:true},
    // 分页数据
    tablePage:{ type:Object,default:()=>({
          currentPage: 1,
          pageSize: 5,
          pageTotal: 0,
          pageSizeRange: [5, 10, 20, 50],
        })},
    highlightCurrentRow:{type:Boolean,default:false},
    // 渲染树形数据标识
    rowKey:{type:String,default:'id'},
  },
  data(){
    return {
    }
  },
  watch:{
    'defaultSelections'(val) {
        this.$nextTick(function(){
          if(Array.isArray(val)){
            val.forEach(row=>{
              this.$refs.cesTable.toggleRowSelection(row)
            })
          }else{
            this.$refs.cesTable.toggleRowSelection(val)
          }
        })
    }
  },
  methods:{
    selectChange(val){
      this.$emit('selectChange',val);
    },
    // 表格勾选
    select(rows,row){
      this.$emit('select',rows,row);
    },
    // 全选
    selectAll(rows){
      this.$emit('select',rows)
    },
    //
    handleCurrentChange(val){
      this.tablePage.currentPage = val;
      this.$emit('handleCurrentChange',val);
    },
    handleSizeChange(val) {
      this.tablePage.pageSize = val;
      this.$emit('handleSizeChange',val);
    },
    renderHeader(h,obj) {
      return h('span',{class:'ces-table-require'},obj.column.label)
    },
    currentChange(currentRow, oldCurrentRow){
       this.$emit('currentChange',currentRow);
    },
    celldblclick(row, column, cell, event){
      // let _this = this;
      // this.$copyText(row[column.property]).then(function (e) {
      //   // _this.onCopy()
      // }, function (e) {
      //   // _this.onError()
      // })
    }
  },
}
</script >
<style scoped>
.ces-table-require::before{
  content:'*';
  color:red;
}
.ces-handle{
  margin-bottom: 15px;
}
</style>
