<template>
  <div class="page-body">

    <a-row type="flex">
      <a-col :flex="$mk.config.ui.searchFlex">
        <!-- 搜索区 -->
        <vxe-form :data="searchFormData" :items="searchFormItems" titleColon @submit="onSearch">
          <template #date="{}">
            <a-form-item label="创建时间" :style="{ display: 'inline-block', width: 120 }">
            </a-form-item>
            <a-form-item :style="{ display: 'inline-block', width: 'calc(100% - 120px )' }">
              <a-range-picker @change="onDateChange" />
            </a-form-item>
          </template>
        </vxe-form>
      </a-col>
      <a-col :flex="$mk.config.ui.toolbarFlex">
        <!-- 工具条 -->
        <mk-toolbar @toolbarClick="toolbarClick"></mk-toolbar>
      </a-col>
    </a-row>




    <vxe-toolbar ref="xToolbar" custom>
      <template #buttons>
        <a-button type="primary" icon="delete" @click="pageDelete()">批量删除</a-button>
      </template>
    </vxe-toolbar>
    <!-- 表格区 -->
    <div class="gridPanel">
      <vxe-grid ref='xGrid' v-bind="gridOptions">

        <!-- =============================== 表格列 自动生成 Start =============================== -->

        <!-- =============================== 表格列 自动生成 End =============================== -->

        <template #op="{ row }">
          <div class="oplinks">
            <a @click.stop="pageEdit(row)" title="编辑"><a-icon type="edit" /></a>
            <a @click.stop="pageDelete(row)" title="删除"><a-icon type="delete" /></a>
          </div>
        </template>

      </vxe-grid>
    </div>


  </div>
</template>

<script>
import BASE_URL from '@/services/Middle/bathroom/BathroomLabor/api.js';

export default {
  name: 'BathroomLaborSettingsList',
  i18n: require('./i18n'), // 国际化
  props: {
    pageMode: {
      type: String,
      default: "edit"
    }
  },
  data() {

    const listFieldName  = 'BathroomLabor';
    // 页面数据
    var pageData = { // 页面数据变量

      keyName: 'id', // 主键字段名


      // 接口动作
      actions: { // Api 接口地址
        // =============================== 接口地址 自动生成 Start ===============================
					Settings: `${BASE_URL.BASE_URL}/BathroomLabor/v1/settings/list`, // 用户配置
					SettingsUpdate: `${BASE_URL.BASE_URL}/BathroomLabor/v1/settings/update`, // 用户配置修改

        // =============================== 接口地址 自动生成 End ===============================
      },

      start_time: 0, // 开始时间
      end_time: 0, // 结束时间


      //搜索区
      searchFormData: {
        title: '',
        desc: '',
      },
      // 搜索区配置
      searchRules: [
        { key: "title", mode: "like" },
        { key: "desc", mode: "like" }
      ],
      //搜索区
      searchFormItems: [ // 子项
        { field: 'title', title: '标题', span: 5, itemRender: { name: '$input', props: { placeholder: '请输入标题' } } },
        { field: 'desc', title: '描述', span: 5, itemRender: { name: '$input', props: { placeholder: '请输入描述' } } },
        { span: 8, slots: { default: 'date' } },  // 自定义列
        {
          align: 'right', span: 4, itemRender: {  // 按钮列
            name: '$buttons', children: [{ props: { type: 'submit', content: '搜索', status: 'primary' } },  // 搜索按钮
              { props: { type: 'reset', content: '重置' } }]
          }
        }
      ],


      //数据区
      gridOptions: { // 表格配置
        height: '100%', // 表格高度  100% 会自动撑满父容器
        stripe: true, // 启用斑马纹
        id: 'datagrid_1', // 表格唯一标识

        // 接口获取数据
        proxyConfig: { // 配置代理
          sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
          filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
          props: {
            result: listFieldName, // 配置响应结果列表字段
            total: 'total' // 配置响应结果总页数字段
          },
          // 接收Promise
          ajax: {
            // 当点击工具栏查询按钮或者手动提交指令 query或reload 时会被触发
            query: (options) => { // options 为当前表格的配置项
              const { page, sorts } = options; // 获取当前页码、每页条数、排序信息
              var params = {}; // 定义请求参数
              params.page = page.currentPage; // 当前页码
              params.limit = page.pageSize; // 每页条数
              params.order_bys = []; // 排序信息
              params.search_rules = this.getSearchParms(); // 搜索信息
              if (sorts) { // 如果有排序信息
                sorts.forEach((v) => { // 遍历排序信息
                  params.order_bys.push({ // 添加排序信息
                    column: v.property, // 字段名
                    order: v.order // 排序方式
                  })
                });
              }
              return this.loadData({ params }); // 返回请求结果
            }
          }
        },


        // 表格列配置
        columns: [
          { type: 'checkbox', width: 'auto' }, // 多选框
          { type: 'seq', width: 'auto' }, // 序号


          // =============================== 表格列 自动生成 Start ===============================


          // =============================== 表格列 自动生成 Start ===============================


          { title: '操作', slots: { default: 'op' }, width: 120 }
        ]
      }

    };
    pageData.actions.getList = pageData.actions.BathroomLaborList;
    pageData.actions.delete = pageData.actions.BathroomLaborBatchDelete;
    pageData.gridOptions = Object.assign({}, this.$mk.config.defaults.gridOptions, pageData.gridOptions); // 合并表格数据

    return pageData; // 返回页面数据
  },

  // 计算属性
  computed: {
    // 页面描述
    desc() {
      return this.$t('pageDesc')
    }
  },

  // 创建完成
  created() {
    this.$nextTick(() => { // 在下次 DOM 更新循环结束之后执行延迟回调
      // 将表格和工具栏进行关联
      this.$refs.xGrid.connect(this.$refs.xToolbar) // 将表格和工具栏进行关联
    });
  },
  // 挂载完成
  onLoad() {

  },
  // 动作
  methods: {


    // =============================== 基于status进行开关 自动生成 Start ===============================

    // =============================== 基于status进行开关 自动生成 End ===============================

    // 修改日期
    onDateChange(date) { // 日期选择器事件
      if (date && date.length) { // 如果有值
        this.start_time = parseInt(date[0]._d.getTime() / 1000); // 将日期转换为时间戳
        this.end_time = parseInt(date[1]._d.getTime() / 1000); // 将日期转换为时间戳
      } else { // 如果没有值
        this.start_time = 0; // 将日期转换为时间戳
        this.end_time = 0; // 将日期转换为时间戳
      }
    },
    // 获取搜索参数
    getSearchParms() { // 获取搜索参数
      var rules = []; // 定义搜索参数
      let findMode = k => { // 查找搜索模式
        for (let i in this.searchRules) { // 遍历搜索规则
          if (this.searchRules[i].key == k) return this.searchRules[i].mode; // 如果找到了就返回搜索模式
        }
        return "equal"; // 如果没有找到就返回等于
      };

      for (let key in this.searchFormData) { // 遍历搜索表单数据
        let value = this.searchFormData[key]; // 获取值
        if (value) { // 如果有值
          let mode = findMode(key); // 获取搜索模式
          if (mode == "like") { // 如果是模糊搜索
            value = "%" + value + "%"; // 如果是模糊搜索就在两边加上%
          }
          rules.push({ // 添加搜索参数
            column: key, // 字段名
            mode: mode, // 搜索模式
            value: value // 值
          });
        }
      }
      return rules; // 返回搜索参数
    },
    // 获取选中行
    getSelectdRow() { // 获取选中行
      let row = this.$refs.xGrid.getCurrentRecord(); // 获取当前行
      if (!row) { // 如果没有选中行
        let rows = this.$refs.xGrid.getCheckboxRecords(); // 获取选中行
        if (rows && rows.length) { row = rows[0]; } // 如果有选中行就取第一行
      }
      return row; // 返回选中行
    },
    // 加载数据
    loadData({ params }) {
      params.start_time = this.start_time; // 开始时间
      params.end_time = this.end_time; // 结束时间
      return this.$mk.getPagedData({ url: this.actions.getList, data: params }); // 获取分页数据
    },

    // 工具栏点击事件 add / log / setting
    toolbarClick(e) {
      if (e.name == "add") { // 如果是添加
        this.$openPage("/BathroomLabor/BathroomLaborSettingsAdd"); // 打开页面
      }
    },

    // 编辑
    pageEdit(row) {
      if (!row) { // 如果没有选中行
        this.$mk.msg("请选择行"); // 提示
        return; // 返回
      }
      this.$openPage("/BathroomLabor/BathroomLaborSettingsUpdate/" + row[this.keyName]); // 打开页面
    },

    // 删除
    pageDelete(row) {
      let rows = row ? [row] : this.$refs.xGrid.getCheckboxRecords(); // 获取选中行
      let ids = []; // 定义id数组
      rows.forEach((row) => { // 遍历选中行
        ids.push(row[this.keyName]); // 将选择行的id添加到id数组
      });

      if (!ids.length) {  // 如果没有选中行
        this.$mk.error("请选择行"); // 提示
        return;
      }

      this.$mk.confirm('您确定要删除吗？').then(type => { // 确认删除
        if (type == 'confirm') { // 如果确认删除
          this.$mk.post({
            url: this.actions.delete, // 请求删除数据地址
            loading: "删除中...", // 加载提示
            data: {
              ids: ids // 传递id数组
            },
            useBigInt : true
          }).then(() => { // 成功
            this.$mk.success("删除成功"); // 提示成功
            this.onSearch(); // 重新加载数据
          }).catch((a) => { // 失败
            this.$mk.error(a.data.msg); // 提示错误信息
          });
        }
      });
    },

    // 搜索
    onSearch() {
      this.$refs.xGrid.commitProxy('query') // 提交搜索
    },


  },
  // 监听属性
  watch: {

  }
};

</script>
<style scoped lang="less">
.page-body {
  padding: 30px;
  background: @base-bg-color;
}

.gridPanel {
  height: calc(100vh - 400px);
}
</style>

<style>
.oplinks svg {
  width: 22px;
  height: 22px;
  margin: 0 5px 0 0;
}
</style>