<template>
  <div class="storeAffairsPluginCompent">
    <div class="foldingPanel">
      <i class="icon iconfont iconicon-zhankai"></i>
    </div>
    <PosFormLayout
      ref="PosFormLayout"
      :data="dataList"
      :defaultColumn="defaultColumn"
      :operation="operation"
    >
    </PosFormLayout>
    <div class="line"></div>
    <div class="chooseBlock">
      <Page :total="100" show-sizer />
      <buttonsBlock></buttonsBlock>
    </div>
    <PosTable></PosTable>
    <div class="FilterSettings">
      <span>*</span>当前过滤设置: (( (单据日期: 20210831~20210907) 并且
      (提交状态=未提交) ) 并且 (可用 = 是) )
    </div>
    <div class="statusTips">
      <div class="status">提交状态</div>
      <span class="commit">提交</span>
      <span class="wait">待批</span>
      <span class="cancle">待取消</span>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import PosFormLayout from "../../posFormLayout/src/index.vue";
import PosTable from "../../posTable/src/index.vue";
import {randImg3} from "../../../api/index";
import { Page } from "@syman/ark-ui";
let that: any = {};
@Component({
  name: "PosstoreAffairs",
  components: {
    PosFormLayout,
    PosTable,
    Page,
  },
})
export default class storeAffairs extends Vue {
  private defaultColumn = 4;
  private operation = [
    {
      style: "",
      props: {
        type: "primary",
        value: "查找F1",
        icon: "iconsousuo",
      },
      event: {
        click: () => {
          that.submit();
        },
      },
    },
    {
      style: "margin:0 24px",
      props: {
        value: "收藏夹",
        type: "default",
        icon: "iconbaocun",
      },
      event: {
        click: (e) => {
          console.log("提交回调", e);
          (this.$refs.FormLayout as any).reset();
        },
      },
    },
    {
      style: "",
      props: {
        value: "明细查询",
        type: "default",
        icon: "iconicon-chakan",
      },
      event: {
        click: (e) => {
          console.log("提交回调", e);
          (this.$refs.FormLayout as any).reset();
        },
      },
    },
  ];
  private dataList = [
    {
      item: {
        type: "Input", // 组件类型
        required: false, // 是否必填
        field: "billNo",
        label: "单据编号",
        props: {
          placeholder: "",
          value: "",
        },
      },
    },
    {
      show: true, // 是否显示隐藏
      item: {
        type: "singDatePicker", // 组件类型
        required: false, // 是否必填
        field: "order-Date",
        label: "单据日期",
        props: {
          type: "date",
          value: "2021-10-09",
        },
      },
    },
    {
      show: true, // 是否显示隐藏
      item: {
        type: "DateRangePicker", // 组件类型
        required: false, // 是否必填
        field: "order-Date1",
        label: "日期选择",
        props: {
          value: "2020-10-01~2020-10-08",
        },
      },
    },
    {
      show: true, // 是否显示隐藏
      item: {
        type: "DateRangePicker", // 组件类型
        required: false, // 是否必填
        field: "order-Date2",
        label: "日期选择2",
        props: {
          value: "",
        },
      },
    },
    // {

    //   item: {
    //     type: "DatePicker", // 组件类型
    //     required: false, // 是否必填
    //     field: "order-Date",
    //     label: "单据日期",
    //     props: {
    //       type:'date',
    //       options:"options",
    //       placeholder: "",
    //       value: "",
    //       event: {
    //         click: (e) => {
    //           console.log("提交回调", e);
    //           (this.$refs.FormLayout as any).reset();
    //         },
    //       },
    //     },
    //   },
    // },
    {
      item: {
        type: "Input", // 组件类型
        required: false, // 是否必填
        field: "VIPNo",
        label: "VIP卡号",
        props: {
          placeholder: "",
          value: "",
        },
      },
    },
    {
      item: {
        type: "Input", // 组件类型
        required: false, // 是否必填
        field: "VIPactive",
        label: "VIP充值活动定义",
        props: {
          placeholder: "",
          icon: "shaixuan1", //icon不要带会自动拼接
        },
      },
    },
    {
      item: {
        type: "Select", // 组件类型
        required: false, // 是否必填
        field: "VIPactive",
        label: "充值方式",
        props: {
          placeholder: "",
          value: "",
        },
      },
    },
    {
      item: {
        type: "Input", // 组件类型
        required: false, // 是否必填
        field: "desc",
        label: "备注",
        props: {
          placeholder: "",
          value: "",
        },
      },
    },
    {
      item: {
        type: "Select", // 组件类型
        required: false, // 是否必填
        field: "commitStatus",
        label: "提交状态",
        props: {
          placeholder: "",
          value: "",
        },
      },
    },
    {
      item: {
        type: "Select", // 组件类型
        required: false, // 是否必填
        field: "available",
        label: "可用",
        props: {
          placeholder: "",
          value: "New York",
          options: [
            {
              value: "New York",
              label: "New York",
            },
            {
              value: "London",
              label: "London",
            },
          ],
        },
      },
    },
    // {
    //   show: true, // 是否显示隐藏
    //   row: 1, // 行高
    //   col: 1, // 列宽
    //   item: {
    //     type: "Checkbox", // 组件类型
    //     required: true, // 是否必填
    //     label: "116666",
    //     field: "key4",
    //     props: {
    //       circle: true,
    //       value: false,
    //     },
    //   },
    // },
    // {
    //   show: true, // 是否显示隐藏
    //   row: 1, // 行高
    //   col: 1, // 列宽
    //   item: {
    //     type: "CheckboxGroup", // 组件类型
    //     required: true, // 是否必填
    //     label: "116666",
    //     field: "key5",
    //     props: {
    //       value: ["Female1"],
    //       options: [
    //         {
    //           value: "0",
    //           label: "Male0",
    //         },
    //         {
    //           value: "1",
    //           label: "Female1",
    //         },
    //       ],
    //     },
    //   },
    // },
    // {
    //   show: true, // 是否显示隐藏
    //   row: 1, // 行高
    //   col: 2, // 列宽
    //   item: {
    //     type: "Select", // 组件类型
    //     required: true,
    //     field: "key3",
    //     label: "下拉框组件",
    //     props: {
    //       placeholder: "后台字段",
    //       options: [
    //         {
    //           value: "New York",
    //           label: "New York",
    //         },
    //         {
    //           value: "London",
    //           label: "London",
    //         },
    //       ],
    //     },
    //     event: {
    //       "on-change": (e) => {
    //         console.log(e);
    //       },
    //     },
    //   },
    // }
    // ,{
    //   show: true, // 是否显示隐藏
    //   col: 2, // 列宽
    //   item: {
    //     soltName: "test", // 组件类型
    //   },
    // }
  ];
  private reset(): void {
    (this.$refs.FormLayout as any).reset();
  }
  private submit(): void {
    (this.$refs.PosFormLayout as any).submit((verifyMessage, data) => {
      console.log("verifyMessage", data);
    });
  }
  private created() {
    that = this;
    randImg3({})
  }
}
</script>
<style lang="less" scoped>
.storeAffairsPluginCompent {
  padding: 0 16px;
  .foldingPanel {
    position: relative;
    margin-top: 16px;
    width: 100%;
    height: 14px;
    border-radius: 2px;
    border: 1px solid #dcdee2;
    i {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .line {
    position: relative;
    left: -16px;
    width: calc(100% + 32px);
    height: 1px;
    border: 1px solid #dcdee2;
    margin: 14px 0 13px 0;
  }
  .chooseBlock {
    display: flex;
    justify-content: space-between;
  }
  .FilterSettings {
    margin: 10px 0 11px 0;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #515a6e;
    // color: @text-middle;
    span {
      color: #ff0000;
    }
  }
  .statusTips {
    display: flex;
    align-items: center;
    span {
      padding: 0 8px;
      height: 18px;
      border: 1px solid #dcdee2;
      font-size: 12px;
      font-weight: 400;
      line-height: 18px;
      margin-left: 10px;
    }
    .status {
      font-size: 12px;
      font-weight: 400;
      color: #515a6e;
    }
    .commit {
      background: #ffffff;
      color: #008000;
    }
    .wait {
      background: #ffffff;
      color: #515a6e;
    }
    .cancle {
      background: #fef3f3;
      color: #515a6e;
    }
  }
}
</style>