<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>




    <!-- 表格区 -->
    <div class="cardPanel">

      <a-row style="background: white;">
        <a-col style="margin-bottom: 12px;margin-right: 12px;" v-for="(item,index) in listData" :key="index" :span="5">
          <a-card hoverable>
            <img class="scheme-img" slot="cover" alt="example" :src="item.image || defaultImage" />
            <template slot="actions" class="ant-card-actions"> 
              <a-icon key="edit" type="edit" @click="pageEdit(item)" />
              <a-icon key="delete" type="delete" @click="pageDelete(item)" />
            </template>
            <a-card-meta :title="item.name" :description="item.description">
            </a-card-meta>
          </a-card>
        </a-col>
      </a-row>
      <a-pagination :show-total="total => `总 ${total} 条记录`" v-model="currentPageIndex" :pageSize="pageSize" :total="listTotal" @change="pageChange" show-less-items />



    </div>


  </div>
</template>

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

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

    // 页面数据
    var pageData = { // 页面数据变量

      keyName: 'id', // 主键字段名
      defaultImage:"http://zhengjiguangdong.oss-cn-beijing.aliyuncs.com/2023/16811166643739833.png",
      currentPageIndex: 1,
      pageSize: 8,
      listData:[],
      listTotal:0,

      // 接口动作
      actions: { // Api 接口地址
        // =============================== 接口地址 自动生成 Start ===============================
        BathroomSchemeList: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/list`, // 设计方案列表
        BathroomSchemeDetail: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/detail`, // 设计方案详情
        BathroomSchemeCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/create`, // 创建设计方案
        BathroomSchemeUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/update`, // 更新设计方案
        BathroomSchemeDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/detele`, // 删除设计方案
        BathroomSchemeBatchDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/batchDelete`, // 批量删除设计方案
        BathroomSchemeBatchUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/batchUpdate`, // 批量更新设计方案
        BathroomSchemeBatchCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/batchCreate`, // 批量创建设计方案
        BathroomSchemeExportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/export/excel`, // 导出设计方案数据到EXCEL
        BathroomSchemeImportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/import/excel`, // 批量导入EXCEL设计方案数据
        BathroomSchemeFittingsList: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/fittings/list`, // 报价单部件列表
        BathroomSchemeFittingsDetail: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/fittings/detail`, // 报价单部件详情
        BathroomSchemeFittingsCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/fittings/create`, // 创建报价单部件
        BathroomSchemeFittingsUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/fittings/update`, // 更新报价单部件
        BathroomSchemeFittingsDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/fittings/detele`, // 删除报价单部件
        BathroomSchemeFittingsBatchDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/fittings/batchDelete`, // 批量删除报价单部件
        BathroomSchemeFittingsBatchUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/fittings/batchUpdate`, // 批量更新报价单部件
        BathroomSchemeFittingsBatchCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/fittings/batchCreate`, // 批量创建报价单部件
        BathroomSchemeFittingsExportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/fittings/export/excel`, // 导出报价单部件数据到EXCEL
        BathroomSchemeFittingsImportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/fittings/import/excel`, // 批量导入EXCEL报价单部件数据
        BathroomSchemePartsList: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/parts/list`, // 报价单配件列表
        BathroomSchemePartsDetail: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/parts/detail`, // 报价单配件详情
        BathroomSchemePartsCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/parts/create`, // 创建报价单配件
        BathroomSchemePartsUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/parts/update`, // 更新报价单配件
        BathroomSchemePartsDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/parts/detele`, // 删除报价单配件
        BathroomSchemePartsBatchDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/parts/batchDelete`, // 批量删除报价单配件
        BathroomSchemePartsBatchUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/parts/batchUpdate`, // 批量更新报价单配件
        BathroomSchemePartsBatchCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/parts/batchCreate`, // 批量创建报价单配件
        BathroomSchemePartsExportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/parts/export/excel`, // 导出报价单配件数据到EXCEL
        BathroomSchemePartsImportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/parts/import/excel`, // 批量导入EXCEL报价单配件数据
        BathroomSchemeMaterialList: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/material/list`, // 报价单材料列表
        BathroomSchemeMaterialDetail: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/material/detail`, // 报价单材料详情
        BathroomSchemeMaterialCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/material/create`, // 创建报价单材料
        BathroomSchemeMaterialUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/material/update`, // 更新报价单材料
        BathroomSchemeMaterialDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/material/detele`, // 删除报价单材料
        BathroomSchemeMaterialBatchDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/material/batchDelete`, // 批量删除报价单材料
        BathroomSchemeMaterialBatchUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/material/batchUpdate`, // 批量更新报价单材料
        BathroomSchemeMaterialBatchCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/material/batchCreate`, // 批量创建报价单材料
        BathroomSchemeMaterialExportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/material/export/excel`, // 导出报价单材料数据到EXCEL
        BathroomSchemeMaterialImportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/material/import/excel`, // 批量导入EXCEL报价单材料数据
        BathroomSchemeLaborList: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/labor/list`, // 报价单人工费用列表
        BathroomSchemeLaborDetail: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/labor/detail`, // 报价单人工费用详情
        BathroomSchemeLaborCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/labor/create`, // 创建报价单人工费用
        BathroomSchemeLaborUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/labor/update`, // 更新报价单人工费用
        BathroomSchemeLaborDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/labor/detele`, // 删除报价单人工费用
        BathroomSchemeLaborBatchDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/labor/batchDelete`, // 批量删除报价单人工费用
        BathroomSchemeLaborBatchUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/labor/batchUpdate`, // 批量更新报价单人工费用
        BathroomSchemeLaborBatchCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/labor/batchCreate`, // 批量创建报价单人工费用
        BathroomSchemeLaborExportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/labor/export/excel`, // 导出报价单人工费用数据到EXCEL
        BathroomSchemeLaborImportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/labor/import/excel`, // 批量导入EXCEL报价单人工费用数据
        BathroomSchemeProcessList: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/process/list`, // 报价单工序列表
        BathroomSchemeProcessDetail: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/process/detail`, // 报价单工序详情
        BathroomSchemeProcessCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/process/create`, // 创建报价单工序
        BathroomSchemeProcessUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/process/update`, // 更新报价单工序
        BathroomSchemeProcessDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/process/detele`, // 删除报价单工序
        BathroomSchemeProcessBatchDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/process/batchDelete`, // 批量删除报价单工序
        BathroomSchemeProcessBatchUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/process/batchUpdate`, // 批量更新报价单工序
        BathroomSchemeProcessBatchCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/process/batchCreate`, // 批量创建报价单工序
        BathroomSchemeProcessExportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/process/export/excel`, // 导出报价单工序数据到EXCEL
        BathroomSchemeProcessImportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/process/import/excel`, // 批量导入EXCEL报价单工序数据
        BathroomSchemePackagingList: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/packaging/list`, // 包装材料列表
        BathroomSchemePackagingDetail: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/packaging/detail`, // 包装材料详情
        BathroomSchemePackagingCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/packaging/create`, // 创建包装材料
        BathroomSchemePackagingUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/packaging/update`, // 更新包装材料
        BathroomSchemePackagingDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/packaging/detele`, // 删除包装材料
        BathroomSchemePackagingBatchDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/packaging/batchDelete`, // 批量删除包装材料
        BathroomSchemePackagingBatchUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/packaging/batchUpdate`, // 批量更新包装材料
        BathroomSchemePackagingBatchCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/packaging/batchCreate`, // 批量创建包装材料
        BathroomSchemePackagingExportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/packaging/export/excel`, // 导出包装材料数据到EXCEL
        BathroomSchemePackagingImportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/packaging/import/excel`, // 批量导入EXCEL包装材料数据
        BathroomSchemeOutsourcingList: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/outsourcing/list`, // 外购产品列表
        BathroomSchemeOutsourcingDetail: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/outsourcing/detail`, // 外购产品详情
        BathroomSchemeOutsourcingCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/outsourcing/create`, // 创建外购产品
        BathroomSchemeOutsourcingUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/outsourcing/update`, // 更新外购产品
        BathroomSchemeOutsourcingDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/outsourcing/detele`, // 删除外购产品
        BathroomSchemeOutsourcingBatchDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/outsourcing/batchDelete`, // 批量删除外购产品
        BathroomSchemeOutsourcingBatchUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/outsourcing/batchUpdate`, // 批量更新外购产品
        BathroomSchemeOutsourcingBatchCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/outsourcing/batchCreate`, // 批量创建外购产品
        BathroomSchemeOutsourcingExportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/outsourcing/export/excel`, // 导出外购产品数据到EXCEL
        BathroomSchemeOutsourcingImportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/outsourcing/import/excel`, // 批量导入EXCEL外购产品数据
        BathroomSchemePaintList: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/paint/list`, // 油漆列表
        BathroomSchemePaintDetail: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/paint/detail`, // 油漆详情
        BathroomSchemePaintCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/paint/create`, // 创建油漆
        BathroomSchemePaintUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/paint/update`, // 更新油漆
        BathroomSchemePaintDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/paint/detele`, // 删除油漆
        BathroomSchemePaintBatchDelete: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/paint/batchDelete`, // 批量删除油漆
        BathroomSchemePaintBatchUpdate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/paint/batchUpdate`, // 批量更新油漆
        BathroomSchemePaintBatchCreate: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/paint/batchCreate`, // 批量创建油漆
        BathroomSchemePaintExportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/paint/export/excel`, // 导出油漆数据到EXCEL
        BathroomSchemePaintImportExcel: `${BASE_URL.BASE_URL}/BathroomScheme/v1/bathroom/scheme/paint/import/excel`, // 批量导入EXCEL油漆数据

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

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


      //搜索区
      searchFormData: {
        title: '',
        desc: '',
      },
      // 搜索区配置
      searchRules: [
        { key: "name", mode: "like" },
        { key: "desc", mode: "like" }
      ],
      //搜索区
      searchFormItems: [ // 子项
        { field: 'name', 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: '重置' } }]
          }
        }
      ],



    };
    pageData.actions.getList = pageData.actions.BathroomSchemeList;
    pageData.actions.delete = pageData.actions.BathroomSchemeBatchDelete;

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

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

  // 创建完成
  created() {
   

    this.loadData();

  },
  // 挂载完成
  onLoad() {
  },
  // 动作
  methods: {

    pageChange(){
      this.loadData();
    },

    // 修改日期
    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() {
      var params = {}; // 定义请求参数
      params.page = this.currentPageIndex;
      params.limit = this.pageSize; // 每页条数
      params.order_bys = []; // 排序信息
      params.search_rules = this.getSearchParms(); // 搜索信息

      params.start_time = this.start_time; // 开始时间
      params.end_time = this.end_time; // 结束时间
      this.$mk.getPagedData({ url: this.actions.getList, data: params }).then(r => {

        this.listData = r.BathroomScheme;
        this.listTotal = r.total; 
      })
    },



    // 工具栏点击事件 add / log / setting
    toolbarClick(e) {
      if (e.name == "add") { // 如果是添加
        this.$openPage("/BathroomScheme/BathroomSchemeAdd"); // 打开页面
      }
      if (e.name == "setting") { 
        this.openSettings();
      }
    },
    openSettings() {
      this.$mk.dialog.open({
        page:  () => import("@/pages/Middle/bathroom/basic/settings.vue"),
        title: "参数配置",
        pageOptions: { 
        },
        width: 800,
        height: 600,
        dataId: 0
      });
    },
    // 编辑
    pageEdit(row) {
      if (!row) { // 如果没有选中行
        this.$mk.msg("请选择行"); // 提示
        return; // 返回
      }
      this.$openPage("/BathroomScheme/BathroomSchemeUpdate/" + row[this.keyName]); // 打开页面
    },

    // 删除
    pageDelete(row) {
      let rows =[row]; // 获取选中行
      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.loadData();
    },


  },
  // 监听属性
  watch: {

  }
};

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

.gridPanel {
  height: calc(100vh - 400px);
}
 
.oplinks svg {
  width: 22px;
  height: 22px;
  margin: 0 5px 0 0;
}

.scheme-img{
  width:100%;height:300px;
}
</style>