/**
* author: Louie Butch
* date: 2020/11/2
* email: 844089357@qq.com
* desc:
*/
<template>
<el-table-column v-if="type === 'selection' || type === 'expand'" ref="elTableColumn" :type="type"
                 :column-key="columnKey"
                 :label="label"
                 :width="width + ''"
                 :prop="prop"
                 :min-width="minWidth"
                 :fixed="fixed"
                 :sortable="sortable"
                 :sort-method="sortMethod"
                 :sort-by="sortBy"
                 :sort-orders="sortOrders"
                 :formatter="formatter"
                 :show-overflow-tooltip="showOverflowTooltip"
                 :align="align"
                 :resizable="resizable"
                 :header-align="headerAlign"
                 :class-name="className"
                 :label-class-name="labelClassName"
                 :selectable="_selectable"
                 :reserve-selection="reserveSelection">
        <template slot="header" slot-scope="scope">
            <slot v-if="$scopedSlots.header" name="header" :row="scope.row" :$index="scope.$index"></slot>
            <span v-else>{{label}}</span>
        </template>
    </el-table-column>

        <el-table-column v-else ref="elTableColumn" :type="type"
                         :column-key="columnKey"
                         :label="label"
                         :width="width + ''"
                         :prop="prop"
                         :min-width="minWidth"
                         :fixed="fixed"
                         :sortable="sortable"
                         :sort-method="sortMethod"
                         :sort-by="sortBy"
                         :sort-orders="sortOrders"
                         :formatter="_formatter"
                         :show-overflow-tooltip="showOverflowTooltip"
                         :align="align"
                         :resizable="resizable"
                         :header-align="headerAlign"
                         :class-name="className"
                         :label-class-name="labelClassName"
                         :selectable="selectable"
                         :reserve-selection="reserveSelection">
        <template slot="header" slot-scope="scope">
            <slot v-if="$scopedSlots.header" name="header" :row="scope.row" :$index="scope.$index"></slot>
            <span v-else>{{label}}</span>
            <!--            <div><el-input clearable  size="mini" placeholder="请输入"></el-input></div>-->
        </template>
        <template slot-scope="scope">
            <template v-if="scope.$index === 0 && hasSearchRow">
                <el-input v-if="showTool(scope, 'text')" v-model.trim="scope.row[prop]._value" clearable  :disabled="readOnlyColumns.indexOf(prop)>-1" size="mini" placeholder="请输入" @focus="focus($event)" @change="filterChange"></el-input>
                <el-select v-else-if="showTool(scope, 'simpleSelect')"
                           size="mini"
                           v-model="scope.row[prop]._value"
                           :disabled="readOnlyColumns.indexOf(prop)>-1"
                           clearable
                           multiple
                           collapse-tags
                           placeholder="请选择"
                           style="width: 100%"
                           @remove-tag="removeTag"
                           @clear="selectClear"
                           @visible-change="(visible) => {selectChange(visible, scope.row[prop]._value)}">
                    <el-option v-for="(item, index) in scope.row[prop]._options" :label="item.label" :value="item.value" :key="index"></el-option>
                </el-select>
                <el-select v-else-if="showTool(scope, 'dictionary')"
                           size="mini"
                           v-model="scope.row[prop]._value"
                           :disabled="readOnlyColumns.indexOf(prop)>-1"
                           clearable
                           multiple
                           :filterable="!hasOptions"
                           :remote="!hasOptions"
                           reserve-keyword
                           :remote-method="loadMethod"
                           collapse-tags
                           @remove-tag="removeTag"
                           @clear="selectClear"
                           @visible-change="(visible) => {selectChange(visible, scope.row[prop]._value)}"
                           :placeholder="hasOptions ? '请选择' : '请输入'" :loading="loading" style="width: 100%;margin-left:0;">
                    <el-option v-for="(item, index) in selectOptions" :label="item[defaultProp.label]" :value="item[defaultProp.value]" :key="index"></el-option>
                </el-select>
                <hd-num-range v-if="showTool(scope, 'number')" v-model="scope.row[prop]._value"  :disabled="readOnlyColumns.indexOf(prop)>-1"  @change="$parent.$parent.setFilters()"></hd-num-range>
                <el-date-picker
                        v-else-if="showTool(scope, 'dateRange')"
                        v-model="scope.row[prop]._value"
                        :disabled="readOnlyColumns.indexOf(prop)>-1"
                        type="daterange"
                        size="mini"
                        clearable
                        align="right"
                        unlink-panels
                        value-format="timestamp"
                        range-separator="至"
                        start-placeholder="日期"
                        end-placeholder="日期"
                        :default-time="['00:00:00', '23:59:59']"
                        @change="filterChange"
                        :picker-options="pickerOptions" style="width: 100%">
                </el-date-picker>
                <span v-else></span>
                <span v-if="type === 'index'"></span>
            </template>

            <template v-else>
                <slot v-if="$scopedSlots.default" :row="scope.row" :column="scope.column" :$index="scope.$index"></slot>
                <span v-else>{{_formatter(scope)}}</span>
                <span v-if="type === 'index'">
                    {{scope.$index}}
                </span>
            </template>
        </template>
    </el-table-column>
</template>

<script>
 import hdNumRange from "../../hdNumRange/src/hdNumRange";

 export default {
     name: 'hd-table-column',
     components: {hdNumRange},
     props: {
         type: {
             type: String
         },
         columnKey: {
             type: String
         },
         label: {
             type: String,
         },
         prop: {
             type: String,
             default: ''
         },
         width: {
             type: String,
             default: ''
         },
         minWidth: {
             type: String,
             default: ''
         },
         fixed: {
             type: [String, Boolean]
         },
         sortable: {
             type: [Boolean, String]
         },
         sortMethod: {
             type: Function
         },
         sortBy: {
             type: [String, Array, Function]
         },
         sortOrders: {
             type: Array
         },
         formatter: {
             type: Function,
             default(row, column, cellValue, index){
                 return cellValue;
             }
         },
         showOverflowTooltip: {
             type: Boolean
         },
         align: {
             type: String
         },
         headerAlign: {
             type: String
         },
         className: {
             type: String
         },
         labelClassName: {
             type: String
         },
         selectable: {
             type: Function
         },
         reserveSelection: {
             type: Boolean
         },
         remoteMethod: {
             type: Function,
             default: () => {}
         },
         defaultProp: {
             type: Object,
             default: () => {
                 return {
                     label: 'label',
                     value: 'value'
                 };
             }
         },
         options: {
             type: Array,
             default: () => []
         },
         resizable:{
             type: Boolean,
             default:true
         },
         show:{
             type: Boolean,
             default:true
         },
         readOnlyColumns:{
             type: Array,
             default: () => []
         }
     },
     computed: {
         showTool(){
             return (scope, type) => {
                 if (this.prop && this.show) {
                     let value = scope.row[this.prop];

                     if (value) {
                         if (value.constructor === Object){

                             if (value.fieldType === type) {
                                 return  true;
                             }
                         }
                     }
                 }

                 return false;
             }
         },
         simpleSelectOptions(){
             return (options) => {
                 if (this.hasOptions) {
                     return this.options;
                 } else {
                     if (options.length === 0) {
                         return  this.options;
                     } else {
                         return options;
                     }
                 }
             }
         },
         hasOptions(){
             this.selectOptions = this.options;
             return this.options.length > 0
         }
     },
     data(){
         return {
             hasSearchRow: false,
             showWidth: this.width,
             loading: false,
             pickerOptions: {
                 shortcuts: [{
                     text: '最近一周',
                     onClick(picker) {
                         const end = new Date();
                         const start = new Date();
                         start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                         picker.$emit('pick', [start, end]);
                     }
                 }, {
                     text: '最近一个月',
                     onClick(picker) {
                         const end = new Date();
                         const start = new Date();
                         start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                         picker.$emit('pick', [start, end]);
                     }
                 }, {
                     text: '最近三个月',
                     onClick(picker) {
                         const end = new Date();
                         const start = new Date();
                         start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                         picker.$emit('pick', [start, end]);
                     }
                 }]
             },
             selectOptions: [],
             selectValue: null
         };
     },
     created(){
         this.hasSearchRow = this.$parent.$attrs.hasSearchRow;
     },
     methods: {
         /**
          * 重新定义 格式化内容
          * @param scope
          * @returns {*}
          * @private
          */
         _formatter(scope){
             if (this.formatter) {
                 return this.formatter(scope.row, scope.column, scope.row[this.prop], scope.$index);
             }

             return scope.row[this.prop];
         },

         _selectable(row, index){
             if (row._isSearchRow){
                 return false;
             } else {
                 if (this.selectable){
                     return this.selectable(row, index);
                 }
             }

             return true;
         },

         /**
          * 聚焦全选
          * @param event
          */
         focus(event){
             event.currentTarget.select();
         },

         filterChange(val){
             this.$parent.$parent.setFilters();
         },

         selectChange(visible, value){
             if (visible) {
                 this.selectValue = JSON.parse(JSON.stringify(value));
             } else {
                 let hasChange = false;
                 if (this.selectValue.length === value.length) {
                     if (value.length === 0) {
                         hasChange = false;
                     } else {
                         hasChange = value.some((val) => this.selectValue.indexOf(val) < 0);
                     }
                 } else {
                     hasChange = true;
                 }

                 if (hasChange) {
                     // 调动 hdTable  越过 elTable 方法
                     this.$parent.$parent.setFilters();
                 }
             }
         },

         selectClear(){
             this.$parent.$parent.setFilters();
         },

         removeTag(){
             this.$parent.$parent.setFilters();
         },

         loadMethod(query){
             if (this.hasOptions){
                 return;
             }

             if (query !== '') {
                 this.loading = true;

                 this.remoteMethod(query).then(({data}) => {
                     this.loading = false;
                     if (data) {
                         this.selectOptions = data;
                     }
                 }).catch((err) => {
                     this.loading = false;
                     console.log(err.message);
                 });
             } else {
                 this.selectOptions = [];
             }
         }
     }
 }
</script>