<!-- 公共的表格 -->
<template>
  <div id='colmn'>
    <!-- 
      * search-reset -- 清空搜索框内容
      * selection-reset -- 删除选中框回调
      * size-reset -- 默认展示页数
      * current-reset -- 当前页数
      * search-reset -- 搜索框情况改变回调
      * current-row-change -- 点击行单机
      * row-update -- 修改数据
      * row-save -- 新增数据
      * loading -- 请求loading,只在表格中进行展示
     -->

    <avue-crud v-show='dataShow' ref="crud" :data="newTables" :option="option" :table-loading="loading" :page="page"
      @selection-change="selectionChange" @size-change="sizeChange" @current-change="currentChange"
      @refresh-change="refreshChange" @current-row-change="handleCurrentRowChange" @expand-change="expandChange">

      <!-- 自定义 -->
      <template slot="empty">
        <span>{{emptyText}}</span>
      </template>

      <template slot-scope="scope" slot="menu">
        <el-button title='执行' type="info" icon='iconfont icon-carry-out' v-if='btn.implement' size="mini" plain
          @click.stop="implement(scope.row,scope.index)"></el-button>

        <!--
          1.特例情况：当启用和禁用按钮都存在的时候，直接按照权限按钮规则进行展示
          2.当启用和禁用按钮只有一个展示的时候，需要将数据进行处理完成后，赋值statusruleAddendum字段类型的值，控制启用和禁用的按钮展示权限
         -->

        <el-button title='启用' type="info" icon='iconfont icon-tuichu'
          v-if='btn.enable?(scope.row.statusruleAddendum?scope.row.statusruleAddendum:false):false' size="mini" plain
          @click.stop="enable(scope.row,scope.index)"></el-button>

        <el-button title='禁用' type="info" icon='iconfont icon-jinyong'
          v-if='btn.prohibit?(!scope.row.statusruleAddendum?true:!scope.row.statusruleAddendum):false' size="mini" plain
          @click.stop="prohibit(scope.row,scope.index)"></el-button>

        <el-button title='日志信息' type="info" icon='iconfont icon-xiangmucaozuojilu' v-if='btn.daily' size="mini" plain
          @click.stop="daily(scope.row,scope.index)"></el-button>

        <!-- 常用按钮 -->
        <el-button :title='editText' type="info" v-if='btn.editIcon' icon="el-icon-edit" size="mini" plain
          @click.stop="handleEdit(scope.row,scope.index)">
        </el-button>

        <el-button title='查看' type="info" v-if='btn.ruleAdden' icon="iconfont icon-chakan" size="mini" plain
          @click.stop="ruleAdden(scope.row,scope.index)"></el-button>

        <el-button title='删除' type="info" v-if='btn.delete' icon="el-icon-close" size="mini" plain
          @click.stop="delectVal(scope.row,scope.index)">{{deleteText}}</el-button>
        <el-button title='权限' type="info" icon='iconfont icon-quanxianguanli' v-if='btn.warrant' size="mini" plain
          @click.stop="warrant(scope.row,scope.index)"></el-button>

        <!-- 日志详情与数据分析 -->
        <span class='dailyTaskGet' :style="{'display': scope.row['status']==='RUNNING' ? '' : 'none'}"
          v-if='btn.taskCancel' @click.stop='cancel(scope.row,scope.index)'>取消</span>
        <span class='dailyTaskGet' v-if='btn.taskDaily' @click.stop='taskDaily(scope.row,scope.index)'>任务详情</span>

      </template>

      <!-- 自定义表格展示样式 Start -->

      <!-- 修改窗文字快捷键 -->
      <template slot-scope="scope" :slot="slotOverhidden">
        <a @click='handleEdit(scope.row)' class='tableHover'>{{scope.row[slotOverhidden]}}</a>
      </template>

      <!-- 表格展示，文字超长部分出现省略号 -->
      <template slot-scope="scope" slot="onlineTime">
        {{scope.row.onlineTime}}
      </template>

      <!-- 开始时间 -->
      <template slot-scope="scope" slot="startTime">
        {{scope.row['startTime']}}
      </template>

      <!-- 结束时间 -->
      <template slot-scope="scope" slot="endTime">
        {{scope.row['endTime']}}
      </template>

      <template slot-scope="scope" :slot="narrowTitle">
        {{scope.row[narrowTitle] | associationList}}
      </template>

      <template slot-scope="scope" slot="statusruleAddendumEsp">
        <!-- 规则列表状态 - 任务列表状态 -->
        <el-tooltip :content="scope.row.addendumTitle" placement="top">
          <el-switch @change="enable(scope.row,scope.index)" v-model="scope.row.statusruleAddendumEsp"
            active-color="#13ce66" inactive-color="#ff4949">
          </el-switch>
        </el-tooltip>
      </template>

      <!-- 自定义表格展示样式 End -->
    </avue-crud>
  </div>
</template>

<script>
  /**
   * 列表组件,使用过程中,如果需要对数据进行处理,有需要请结合buttons组件进行交互
   */
  export default {
    data() {
      return {
        newTables: [],
        loading: false,
        stateaces: true,
        btn: {},
        deleteText: '',
        dataShow: false,
        option: {
          selection: false, //多选框选择
          delBtn: false, //原生删除按钮
          editBtn: false, //原生修改按钮
          menu: false, //是否显示操作菜单栏
          border: false, //是否显示边框
          refreshBtn: false, //是否显示刷新按钮
          highlightCurrentRow: false, //行选中
          align: 'left', //文字位置
          menuAlign: 'center', //图标位置
          column: [] //数据展示区
        },
        emptyText: '暂无数据',
        deleteList: [],
        page: { //表格分页
          pageSizes: [10, 20, 30, 40], //默认可以调节展示的页数
          currentPage: 1, //当前页数
          total: 1, //总条数
          pageSize: 10 //默认展示多少条数据
        },
        permissions: {
          implement: false, //执行
          enable: false, //启用
          daily: false, //禁用和日志信息
          editIcon: false, //修改图标
          ruleAdden: false, //规则查看
          delete: false, //删除
          warrant: false, //权限
          taskCancel: false, //取消按钮
          taskDaily: false, //日志信息查看按钮
        }
      };
    },
    props: {
      btnAuthority: {
        type: Object, //按钮权限
        required: false
      },
      slotOverhidden: {
        type: String, //接收扩展名称点击出现修改窗口
        required: ''
      },
      narrowTitle: {
        type: String, //缩放文字展示...
        required: ''
      },
      deleteTex: { //删除文字提示
        type: String,
        required: false
      },
      editText: { //修改文字提示
        type: String,
        required: false,
        default: '修改'
      }
    },
    computed: {},
    filters: {
      associationList(value) {
        // 泵站管理页面 - 关联站点编号数据处理
        let text = '';
        for (let [index, item] of value.entries()) {
          if (index === (value.length - 1)) {
            text += item['siteName']
          } else {
            text += (item['siteName'] + '，')
          }
        }
        return text
      }
    },
    created() {
      // 处理按钮展示问题
      this.btn = Object.assign(this.permissions, this.btnAuthority);
      this.deleteText = this.deleteTex === undefined ? '' : this.deleteTex
    },
    mounted() {},
    methods: {
      selectionChange(list) {
        /**
         * 多选框选择
         * @param {Array} 获取选中的参数
         */
        this.$emit('selectionChange', list);
      },
      ruleAdden(row, index) {
        /**
         * 查看图标
         * @param {Array} 获取选中的参数
         */
        this.$emit('ruleAdden', row, index);
      },
      sizeChange(val) {
        /**
         * 选择展示默认展示多少条数据
         * @param {Number} 数据展示多少条
         */
        this.page.currentPage = 1
        this.page.pageSize = val;
        /**
         * @event $emit#sizeSee
         * @returns {object} 当前页面展示数据的条数以及相关分页信息
         */
        this.$emit('sizeSee', val);
      },
      warrant(row, index) {
        /**
         * 授权
         */
        this.$emit('warrant', row, index)
      },
      cancel(row, index) {
        /**
         * 取消
         */
        this.$emit('cancel', row, index)
      },
      implement(row, index) {
        /**
         * 执行
         */
        this.$emit('implement', row, index)
      },
      enable(row, index) {
        /**
         * 启用
         */
        this.$emit('enable', row, index)
      },
      prohibit(row, index) {
        /**
         * 禁用
         */
        this.$emit('prohibit', row, index)
      },
      taskDaily(row, index) {
        /**
         * 查看执行记录
         */
        this.$emit('taskDaily', row, index)
      },
      daily(row, index) {
        /**
         * 日志信息
         */
        this.$emit('daily', row, index)
      },
      delectVal(row, index) {
        /**
         * 当行删除
         * @param {Object} row 当前行内的数据
         * @param {Object} index 当前行号
         */
        this.$emit('delectVal', row, index)
      },
      currentChange(val) {
        /**
         * 翻页功能
         * @param {Number} 页码
         * @event $emit#currentChange 翻页函数
         */
        this.page.currentPage = val;
        this.$emit('currentChange', val)
      },
      refreshChange({
        page,
        searchForm
      }) {
        /**
         * 暂无数据,点击刷新
         * @param {Object} 当前表格参数
         * @event $emit#refreshChange 无数据或异常进行刷新
         */
        let val = Object.assign(searchForm, this.search).slot;
        val = val === undefined ? '' : val;
        this.$emit('refreshChange', val)
      },
      handleCurrentRowChange(row) {
        /**
         * 行单击选中
         * @param {Object} 单行数据
         */
        this.$emit('handleCurrentRowChange', row);
      },
      onLoad(val = [], option = this.option, page = this.page) {
        /**
         * 初始化表格数据加载
         * @param {Array} val 表格参数
         * @param {Object} option 规则制度
         * @param {Object} page 当前页数
         */
        console.log('page', page)
        // 处理多选框，因选择少数内容，选中状态情况
        if (val.length !== 0 && !val[0]['id']) {
          for (let [keys, items] of val.entries()) {
            items['id'] = keys;
          }
        }

        this.newTables = val;
        this.option = Object.assign(this.option, option);
        this.page = page;
        this.dataShow = true;
      },
      handleEdit(row) {
        // 行内点击修改
        /**
         * 行内元素点击修改获取此行数据
         * @param {Object} 此行基本数据
         */
        this.$emit('handleEdit', row)
      },
      emptyCurrentRo() {
        // 清空选中行
        this.$refs.crud.setCurrentRow();
      },
      expandChange(row, expendList) {
        if (expendList.length) {
          this.option.expandRowKeys = []
          if (row) {
            this.option.expandRowKeys.push(row.taskId)
          }
        } else {
          this.option.expandRowKeys = []
        }
        this.$emit('expandChange', row)
      }
    }
  }

</script>

<style scoped>
  .tableHover {
    text-decoration: underline;
    font-size: 14px;
    color: #409eff;
  }

</style>