<template>
  <el-table-column v-if="type" :type="type" :selectable="selectable" :min-width="minWidth" :label="label" :fixed="fixed"
                   :align="align" :reserve-selection="type==='selection'&&openReserve"/>
  <el-table-column v-else :label="label" :prop="prop"
                   :min-width="minWidth" :show-overflow-tooltip="showOverflow"
                   :align="align" :fixed="fixed" :sortable="sortable">
    <slot name="otherColumn"></slot>
    <template #header="{row,$index}">
      <slot name="header">
        <span style="color: red" v-if="required">*</span>
        <span>{{ label }}</span>
      </slot>
    </template>
    <template #default="{ row, $index }">
      <el-form-item :prop="`${prop}${$index}`" :key="yid()" >
            <el-switch v-model="row[prop]" :active-value="activeValue" :inactive-value="inActiveValue"
                       @change="val=> handleChange(val,row,$index)">
            </el-switch>
      </el-form-item>
    </template>
  </el-table-column>
</template>

<script>
import yid from "yid";
import {isBlank} from "@/utils";

export default {
  name: 'CustomSwitchColumn',
  props: {
    openReserve: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: '',
    },
    selectable: {
      type: Function,
    },
    label: {
      type: String,
      default: '',
    },
    prop: {
      type: String,
    },
    minWidth: {
      type: Number,
      default: 0,
    },
    fixed: {
      type: String,
    },
    sortable: {
      type: Boolean,
      default: false,
    },
    align: {
      type: String,
      default: 'center',
    },
    showOverflow: {
      type: Boolean,
      default: false,
    },
    required: {
      type: Boolean,
      default: false
    },
    activeValue:{
      type:[String,Number],
      default:"0"
    },
    inActiveValue:{
      type:[String,Number],
      default:"1"
    }
  },
  methods: {
    yid,
    handleChange(val,row,index){
      let operationFlag = isBlank(row.id) ? '1' : '2'
      this.$set(row, 'operationFlag', operationFlag)
      this.$set(this.$parent.$parent.model, (this.prop + `${index}`), val);
      this.$emit('change', {val: val, row: row, index: index})
    }
  }

}
</script>
