/**
 * 表格上面 搜索栏超过 3 个，建议定义展开和收起操作
 * data中url定义 getList 为查询列表  deleteOne 为删除单条记录 
 * 表格页面获取表格数据的方法 请务必定义为 getList
 * 建议 弹窗方式的 <新增、修改> 方法 命名 handleSave 、 handleUpdate 、 handleDel
 * 如果要调用本文件的公共方法，
 * 页面表格标签绑定的方法 ， 然后页面 增删改 方法里调用  
 * this.$refs.crud.rowEdit(row, index)
 * this.$refs.crud.rowAdd(row, index)
 * this.$refs.crud.rowDel(row, index)
 * （需要在页面表格标签帮顶三个方法
 * @row-update="updateOne"
 * @row-save="saveOne"
 * @row-del="deleteOne"
 * ）
 * 弹窗 ref 指向 form
 * 行编辑方式的 <新增、修改> ，另外命名， 写在主页面
 * 行编辑需要的 cacheData ,请根据需要，定义在主页面
 * 删除方法建议命名 rowDel
 * 
 * 综上所述，在主页面有两个必须的参数： 
 * 1. 接口 url 对象--url ; 
 * 2. 页面自己的 selfOption ， 在 created 里，和 tableOption 合并
 *    比较重要的有：selfOption.column ，具体的使用方法可参考 @/views/warehouse/index 
 * 
 * 主页面必须要有的方法：
 * 1. 表格数据--getList 
 * 
 * 主页面两种编辑方式：
 * 1. 弹窗编辑：见 @/views/
 * 2. 行编辑： 见 @/views/
 * 
 */
import { fetchList, addResult, getResult, delResult, putResult } from '@/api/commonApis'
import { mapGetters } from 'vuex'

export const GnTableMixin = {
  data() {
    return {
      /* 查询条件-请不要在 searchForm 中声明非字符串值的属性 */
      searchForm: {},
      /* 数据源 */
      tableData: [],
      /* 分页参数 */
      page: {
        total: 0,                     // 总页数
        currentPage: 1,               // 当前页数
        pageSize: 20,                 // 每页显示多少条
        pageSizes: [10, 20, 30, 50],
      },
      tableLoading: false,
      // 表格 tableOption
      tableOption: {
        // ===== 表格相关 ===== //
        border: true,                 // 是否显示表格边框
        index: true,                 // 是否显示表格序号（根据分页会自动计算，比如每页10行，到了第二页就会从11开始记数）
        indexLabel: "序号",           // 表格序号列名       
        stripe: true,                 // 是否显示表格的斑马条纹
        // showHeader: true,             //是否显示表格的表头
        defaultSort: {                // 表格的排序字段， prop 默认排序字段， order 排序方式
          prop:'date', 
          order:'descending'          // descending/ascending  降序/升序
        },
        align: 'center',              // 表格列对其方式 left/center/right
        menu: true,                   // 是否显示操作菜单栏
        menuAlign: 'center',            // 菜单栏对齐方式 left/center/right
        // menuWidth: 240,               // 操作菜单栏的宽度  ----  <建议设置为 页面属性/方法>
        
        // ===== 搜索栏相关 ===== //
        searchIndex: 3,               // 表格搜索栏 配置收缩展示的个数
        searchIcon: true,             // 表格搜索栏 是否启用功能按钮
        searchShowBtn: true,         // 表格搜索栏 隐藏搜索显隐按钮
        searchSize: 'small',          // 搜索控件的大小 small/mini
        searchLabelWidth: 120,        // 搜索属性项名宽度 ---- 建议根据属性项名实际宽度自定义
        searchMenuPositio: 'right',   // 搜索操作按钮的位置 left/center/right
        
        // ===== 按钮相关 ===== //     // <建议按钮设为 页面属性/方法>
        // menuType:'icon',              // menuType 为 icon 时表格操作栏为图标按钮
        columnBtn: true,              // 列显隐按钮
        refreshBtn: true,             // 刷新按钮
        searchBtn: true,              // 搜索显隐按钮（当column中有搜索的属性，或 searchslot 为 true 时自定义搜索启动起作用）
        addBtn: true,                 // 添加按钮
        editBtn: true,                // 行内编辑按钮
        delBtn: true,                 // 行内删除按钮

        // ===== 选择相关 ===== //
        // selection: true,              // 默认值：false , 表格勾选列开启
        // reserveSelection: true,       // 默认值：true , 仅对 selection 为 true 的列有效，类型为 Boolean,为 true 则会在数据更新之后保留之前选中的数据（需指定 rowKey）
        // selectClearBtn: true,         // 默认值：true , 清空选中按钮（当selection为true起作用）

      },

      /* table选中records*/
      selectionRows: [],

    }
  },
  created() {
    
  },
  computed: {
    ...mapGetters(['permissions']),
  },
  methods: {
    // 刷新按钮
    refreshChange() {
      this.getList(this.page.currentPage);
    },
    // 搜索按钮
    searchChange(form, done) {
      this.searchForm = JSON.parse(JSON.stringify(form))
      // 入库日期特殊处理
      if(this.searchForm.warehousingDate && this.searchForm.warehousingDate.length) {
        this.searchForm.beginDate = this.searchForm.warehousingDate[0]
        this.searchForm.endDate = this.searchForm.warehousingDate[1]
        delete this.searchForm.warehousingDate
      }
      // 出库日期特殊处理
      if(this.searchForm.exWarehouseDate && this.searchForm.exWarehouseDate.length) {
        this.searchForm.beginDate = this.searchForm.exWarehouseDate[0]
        this.searchForm.endDate = this.searchForm.exWarehouseDate[1]
        delete this.searchForm.exWarehouseDate
      }
      // 退货日期特殊处理
      if(this.searchForm.cancelDate && this.searchForm.cancelDate.length) {
        this.searchForm.beginDate = this.searchForm.cancelDate[0]
        this.searchForm.endDate = this.searchForm.cancelDate[1]
        delete this.searchForm.cancelDate
      }
      this.getList(1)
      done()
    },
    // 分页相关
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
      this.getList(this.page.currentPage)
    },
    currentChange(current) {
      this.page.currentPage = current
      this.getList(this.page.currentPage)
    },
    // 表格选中事件
    selectionChange(selectionRows) {
      this.selectionRows = selectionRows
    },
    /**
     * 这里的 getList 只是一个样板，具体请根据实际情况写在页面
     * 查表格数据
     * @param current Number，当前分页参数
     * @param params  Object，需要合并进入搜索条件的参数
     */
    // getList(current, params) {
    //   this.tableLoading = true;
    //   if (current) {
    //     this.page.currentPage = current
    //   }
    //   if (params) {
    //     this.searchForm = Object.assign(this.searchForm, params)
    //   }
    //   fetchList(this.url.getList, Object.assign({
    //     current: this.page.currentPage,
    //     size: this.page.pageSize,
    //   }, this.searchForm)).then(res => {
    //     if(res.data.code === 200) {
    //       this.tableData = res.data.data.records
    //       this.page.total = res.data.data.total
    //     } else {
    //       this.$message.warning('获取的表格数据为空！')
    //       this.tableData = []
    //       this.page.total = 0
    //     }
    //     this.tableLoading = false
    //   }).catch(err => {
    //     this.$message.error('获取表格数据错误！原因：' + err)
    //     this.tableLoading = false
    //     this.tableData = []
    //     this.page.total = 0
    //   });
    // },
    // 更新
    updateOne(row, index, done, loading) {
      this.$refs.formRef.validate((valid) => {
        if (!valid) return
        putResult(this.url.editOne, row).then(res => {
          if(res.data.code === 200) {
            this.$message.success('修改成功!')
            this.getList()
          } else {
            this.$message.warning('修改失败！原因：' + res.data.message)
          }
          loading();
          done();
        }).catch(err => {
          loading()
          this.$message.error("错误！原因：" + err)
        });
      })
    },
    // 新增
    saveOne(form, done, loading) {
      this.$refs.formRef.validate((valid) => {
        if (!valid) return
        addResult(this.url.addOne, form).then(res => {
          if(res.data.code === 200) {
            this.$message.success('新增成功!')
            this.getList()
          } else {
            this.$message.warning('新增失败！原因：' + res.data.message)
          }
          loading();
          done();
        }).catch(err => {
          loading()
          this.$message.error("错误！原因：" + err)
        });
      })
    },
    // 删除
    deleteOne(row, index) {
      this.$confirm('是否确认删除序号为' + (this.page.pageSize * this.page.currentPage + index + 1) + '的数据！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delResult(this.url.deleteOne, row.id)
      }).then(res => {
        if(res.data.code === 200) {
          this.$message.success('删除成功！')
          this.getList()
        } else {
          this.$message.warning('删除失败！原因：' + res.data.message)
        }
      }).catch(err => {
        this.$message.error("错误！原因：" + err)
      })
    },


  }
}