﻿<template>
  <Form
    :model="searchForm"
    label-position="right"
    ref="searchForm"
    class="ivu-form-no-margin-bottom"
    inline
  >
    <Form-item v-if="hasOwnProperty('batchNum')" prop="batchNum" label="批次号">
      <Input type="text" v-model="searchForm.batchNum" clearable/>
    </Form-item>
    <Form-item v-if="hasOwnProperty('parentCode')" prop="parentCode" label="原收款单号">
      <Input type="text" v-model="searchForm.parentCode" clearable/>
    </Form-item>
    <!-- 显示域 -->
    <Form-item v-if="hasOwnProperty('receivablesNum')" prop="receivablesNum" label="原收款单号">
      <Input type="text" v-model="searchForm.receivablesNum" clearable/>
    </Form-item>
    <Form-item
      v-if="hasOwnProperty('receivablesRelLineNumber')"
      prop="receivablesRelLineNumber"
      label="关联收款单号"
    >
      <Input type="text" v-model="searchForm.receivablesRelLineNumber" clearable/>
    </Form-item>
    <!-- 收款单号 -->
    <Form-item v-if="hasOwnProperty('receivablesLineNum')" prop="receivablesLineNum" label="收款单号">
      <Input type="text" v-model="searchForm.receivablesLineNum" clearable/>
    </Form-item>
    <Form-item v-if="hasOwnProperty('compCode')" prop="compName" label="收款单位">
      <SelectComp
        placeholder="请选择收款单位"
        title="请选择收款单位"
        v-model="searchForm.compName"
        @handleSelect="select_compCode"
      ></SelectComp>
    </Form-item>
    <Form-item v-if="hasOwnProperty('receivablesBankNum')" prop="receivablesBankNum" label="收款账号">
      <SelectCompCode
        title="请选择收款账号"
        v-model="searchForm.receivablesBankNum"
        @handleSelect="select_receivablesBankNum"
      ></SelectCompCode>
    </Form-item>
    <Form-item v-if="hasOwnProperty('paymentCompName')" prop="paymentCompName" label="付款单位">
      <Input type="text" v-model="searchForm.paymentCompName" clearable/>
    </Form-item>
    <Form-item v-if="hasOwnProperty('paymentBankNum')" prop="paymentBankNum" label="付款账号">
      <Input type="text" v-model="searchForm.paymentBankNum" clearable/>
    </Form-item>
    <Form-item v-if="hasOwnProperty('_amount')" prop="_amount" label="收款金额">
      <NumberRange clearable v-model="searchForm._amount" @input="getAmount" :tofixed="2"></NumberRange>
    </Form-item>
    <Form-item v-if="hasOwnProperty('_claimedAmount')" prop="_claimedAmount" label="认领金额">
      <NumberRange
        clearable
        v-model="searchForm._claimedAmount"
        @input="getClaimedAmount"
        :tofixed="2"
      ></NumberRange>
    </Form-item>
    <!-- 这个收款状态是用来做全部状态查询 -->
    <Form-item v-if="hasOwnProperty('_status')" prop="receivablesStatus" label="收款状态">
      <DataSelect
        clearable
        v-model="searchForm.receivablesStatus"
        code="ReceivablesStatus"
        @loadFinish="(data)=>{dataSet.ReceivablesStatus = data.valueMap}"
      ></DataSelect>
    </Form-item>
    <!-- 主表收款状态值集 -->
    <Form-item v-if="hasOwnProperty('_mainStatus')" prop="receivablesStatus" label="收款状态">
      <DataSelect
        clearable
        v-model="searchForm.receivablesStatus"
        code="ReceivableMainStatus"
        @loadFinish="(data)=>{dataSet.ReceivableMainStatus = data.valueMap}"
      ></DataSelect>
    </Form-item>
    <!-- receivablesAllStatus  收款工作台查询  专用值集 -->
    <Form-item
      v-if="hasOwnProperty('receivablesAllStatus')"
      prop="receivablesAllStatus"
      label="收款状态"
    >
      <DataSelect
        clearable
        v-model="searchForm.receivablesAllStatus"
        code="receivablesAllStatus"
        @loadFinish="(data)=>{dataSet.receivablesAllStatus = data.valueMap}"
      ></DataSelect>
    </Form-item>
    <!-- 
      收款状态 ：用来在三个类别认领页面 增加的搜索条件 
      客户类收款 
      其他类
      供应商类
        ====  收款认领 增加 未认领和部分认领 搜索条件 
    -->
    <Form-item v-if="hasOwnProperty('_status_search')" prop="receivablesStatus" label="收款状态">
      <Select clearable v-model="searchForm.receivablesStatus">
        <Option :value="5">未认领</Option>
        <Option :value="6">部分认领</Option>
      </Select>
    </Form-item>
    <!--收款状态: 用于 导入失败收款工作台查询 只有 导入/生成失败-->
    <Form-item v-if="hasOwnProperty('_status_fail')" prop="receivablesStatus" label="收款状态">
      <Select clearable v-model="searchForm.receivablesStatus">
        <Option :value="5">导入失败</Option>
        <Option :value="7">生成失败</Option>
      </Select>
    </Form-item>
    <Form-item v-if="hasOwnProperty('isPush')" prop="isPush" label="推送情况">
      <Select clearable v-model="searchForm.isPush">
        <Option value="Y" key="Y">已推送</Option>
        <Option value="N" key="N">未推送</Option>
      </Select>
    </Form-item>
    <Form-item v-if="hasOwnProperty('_date')" prop="_date" label="收款日期">
      <DatePicker
        clearable
        :editable="false"
        type="daterange"
        :options="options.datePickerOptions"
        format="yyyy-MM-dd"
        v-model="searchForm._date"
        @on-change="input_date"
        style="width:180px"
      ></DatePicker>
    </Form-item>
    <!-- <Form-item v-if="hasOwnProperty('categoryCode')" prop="categoryCode" label="业务类型">
      <DataSelect v-model="searchForm.categoryCode" code='BUSINESS_TYPE' @loadFinish="(data)=>{dataSet.BUSINESS_TYPE = data.valueMap}"></DataSelect>
    </Form-item>-->
    <!-- 2018/10/18 changanmin1@crc.com.hk 业务类型改为组件方式 -->
    <!-- <Form-item v-if="hasOwnProperty('categoryCode')" prop="categoryCode" label="业务类型">
      <Select transfer v-model="searchForm.categoryCode" filterable @on-change="setGroupName" clearable>
        <Option v-for="(option, index) in categoryList" :value="option.value" :key="index">{{option.label}}</Option>
      </Select>
    </Form-item>-->
    <Form-item v-if="hasOwnProperty('categoryCode')" prop="categoryCode" label="业务类型">
      <SelectCategory
        :receivablesClass="hasOwnProperty('_category_rclass')?searchForm._category_rclass:''"
        v-model="searchForm.categoryCode"
      ></SelectCategory>
    </Form-item>

    <Form-item v-if="hasOwnProperty('receivablesSource')" prop="receivablesSource" label="收款来源">
      <DataSelect
        clearable
        v-model="searchForm.receivablesSource"
        code="ReceivablesSource"
        @loadFinish="(data)=>{dataSet.ReceivablesSource = data.valueMap}"
      ></DataSelect>
    </Form-item>
    <Form-item v-if="hasOwnProperty('paymentTypeCode')" prop="paymentTypeCode" label="收款方式">
      <DataSelect
        clearable
        v-model="searchForm.paymentTypeCode"
        code="ReceivablesPaymentType"
        @loadFinish="(data)=>{dataSet.ReceivablesPaymentType = data.valueMap}"
      ></DataSelect>
    </Form-item>
    <Form-item v-if="hasOwnProperty('paymentTypeCodeFilter')" prop="paymentTypeCode" label="收款方式">
      <DataSelect
        :filterValue="['1']"
        clearable
        v-model="searchForm.paymentTypeCode"
        code="ReceivablesPaymentType"
        @loadFinish="(data)=>{dataSet.ReceivablesPaymentType = data.valueMap}"
      ></DataSelect>
    </Form-item>
    <Form-item v-if="hasOwnProperty('currencyCode')" prop="currencyCode" label="收款币种">
      <DataSelect
        clearable
        v-model="searchForm.currencyCode"
        @loadFinish="(data)=>{dataSet.currency = data.valueMap}"
        code="currency"
      ></DataSelect>
    </Form-item>
    <Form-item
      v-if="hasOwnProperty('receivablesClass') && hasOwnProperty('_receivablesClass')"
      prop="receivablesClass"
      label="收款分类"
    >
      <DataSelect
        clearable
        v-model="searchForm.receivablesClass"
        code="ReceivablesClassQuery"
        @loadFinish="(data)=>{dataSet.ReceivablesClass = data.valueMap}"
      ></DataSelect>
    </Form-item>
    <!-- SelectCostCenters 成本中心 待确认 后期可能会换成组件-->
    <Form-item v-if="hasOwnProperty('_costCenters')" prop="costcenterName" label="成本中心">
      <Input type="text" v-model="searchForm.costcenterName" clearable/>
    </Form-item>
    <Form-item v-if="hasOwnProperty('_customerSite')" prop="customerSiteName" label="客户地点">
      <Input type="text" v-model="searchForm.customerSiteName" clearable/>
    </Form-item>
    
    <Form-item v-if="hasOwnProperty('_customerOrVendor')" prop="customerOrVendor" label="客户/供应商">
      <Input type="text" v-model="searchForm.customerOrVendor" clearable/>
    </Form-item>
    <Form-item v-if="hasOwnProperty('_customerOrVendorSite')" prop="customerOrVendorSite" label="客户/供应商地点">
      <Input type="text" v-model="searchForm.customerOrVendorSite" clearable/>
    </Form-item>
    
    <Form-item v-if="hasOwnProperty('claimedAmount')" prop="claimedAmount" label="本次认领金额">
      <Input type="text" number v-model="searchForm.claimedAmount" clearable/>
    </Form-item>
    <!-- 供应商 和供应商地点-->

    <Form-item v-if="hasOwnProperty('vendorName')" prop="vendorName" label="供应商">
      <SelectVendorBankInfo
        clearable
        title="请选择供应商"
        v-model="searchForm.vendorName"
        @handleSelect="select_vendor"
        @cleanSelected="clear_vendor"
      ></SelectVendorBankInfo>
    </Form-item>
    <Form-item v-if="hasOwnProperty('vendorSiteName')" prop="vendorSiteName" label="供应商地点">
      <SelectVendorBankInfo
        clearable
        title="请选择供应商"
        v-model="searchForm.vendorSiteName"
        @handleSelect="select_vendor"
        @cleanSelected="clear_vendor"
      ></SelectVendorBankInfo>
    </Form-item>

    <Form-item v-if="hasOwnProperty('_customer')" prop="customerName" label="客户">
      <SelectCustomer
        title="请选择客户"
        v-model="searchForm.customerName"
        @handleSelect="select_customerName"
      ></SelectCustomer>
    </Form-item>
    <!-- 权限配置：菜单 公司 用户-->
    <!-- <Form-item v-if="hasOwnProperty('resourceName')" prop="resourceName" label="菜单名或编码">
          <Input type="text" v-model="searchForm.resourceName" />
    </Form-item>-->
    <Form-item v-if="hasOwnProperty('companyName')" prop="companyName" label="公司名称或编码">
      <Input type="text" v-model="searchForm.companyName" clearable/>
    </Form-item>
    <Form-item v-if="hasOwnProperty('userName')" prop="userName" label="用户姓名或账号">
      <Input type="text" v-model="searchForm.userName" clearable/>
    </Form-item>
    <!-- 操作人 || 业务员 -->
    <Form-item v-if="hasOwnProperty('updatedByName')" prop="updatedByName" label="操作人">
      <Input type="text" v-model="searchForm.updatedByName" clearable/>
    </Form-item>
    <Form-item v-if="hasOwnProperty('bankSerialNumber')" prop="bankSerialNumber" label="流水号">
      <Input type="text" v-model="searchForm.bankSerialNumber" clearable/>
    </Form-item>

    <!-- 隐藏域 -->
    <DataSelect
      v-show="false"
      code="ReceivablesStatus"
      @loadFinish="(data)=>{dataSet.ReceivablesStatus = data.valueMap}"
    ></DataSelect>
    <Form-item v-if="hasOwnProperty('_amount')" v-show="false" prop="receivablesStartAmount" label>
      <Input type="text" v-model="searchForm.receivablesStartAmount" clearable/>
    </Form-item>
    <Form-item v-if="hasOwnProperty('_amount')" v-show="false" prop="receivablesEndAmount" label>
      <Input type="text" v-model="searchForm.receivablesEndAmount" clearable/>
    </Form-item>
    <Form-item v-if="hasOwnProperty('_date')" v-show="false" prop="receivablesStartDate" label>
      <Input type="text" v-model="searchForm.receivablesStartDate" clearable/>
    </Form-item>
    <Form-item v-if="hasOwnProperty('_date')" v-show="false" prop="receivablesEndDate" label>
      <Input type="text" v-model="searchForm.receivablesEndDate" clearable/>
    </Form-item>
    <Form-item v-if="hasOwnProperty('compCode')" v-show="false" prop="compCode" label>
      <Input type="text" v-model="searchForm.compCode" clearable/>
    </Form-item>
    <Form-item v-if="hasOwnProperty('_customer')" v-show="false" prop="customerCode" label>
      <Input type="text" v-model="searchForm.customerCode" clearable/>
    </Form-item>
    <Form-item v-if="hasOwnProperty('vendorName')" v-show="false" prop="vendorCode" label>
      <Input type="text" v-model="searchForm.vendorCode" clearable/>
    </Form-item>
    <Form-item v-if="hasOwnProperty('vendorSiteName')" v-show="false" prop="vendorSiteCode" label>
      <Input type="text" v-model="searchForm.vendorSiteCode" clearable/>
    </Form-item>
    <Form-item v-show="false" label>
      <DataSelect
        code="receivablesAllStatus"
        @loadFinish="(data)=>{dataSet.receivablesAllStatus = data.valueMap}"
        clearable
      ></DataSelect>
    </Form-item>
    <slot name="counter"></slot>
  </Form>
</template>
<script>
import { NumberRange, DataSelect, SelectVendorBankInfo } from "ems-components";
import { SelectCompCode, SelectComp, SelectCustomer, SelectCategory } from "ems-receivable@/components/index.js";
// import SelectCompCode from "ems-receivable@/components/selectCompCode/index.vue";
// import SelectCustomer from "ems-receivable@/components/selectCustomer/index.vue";
// import SelectCategory from "ems-receivable@/components/selectCategory/index.vue";
//
import Server from "./server.js";
const server = new Server();
export default {
  components: {
    NumberRange,
    DataSelect,
    SelectVendorBankInfo,
    SelectCompCode,
    SelectComp,
    SelectCustomer,
    SelectCategory
  },
  name: "SearchFormItem",
  props: {
    elItem: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      server: server,
      categoryList: [],
      options: {
        datePickerOptions: {
          disabledDate(date) {
            return date && date.valueOf() > new Date().valueOf();
          }
        }
      },
      searchForm: {
        // parentCode:"",// 原收款单号 输入
        // receivablesNum: "", //收款单号 输入
        // compCode: "", // 收款单位 t_md_bank 弹出选择
        // receivablesBankNum: "", // 收款账号 弹出选择
        // paymentCompName: "", // 付款单位 输入
        // paymentBankNum: "", // 付款账号 输入
        // _amount:true,          // 收款金额 是否显示
        // receivablesStartAmount: "", // 收款开始金额 输入
        // receivablesEndAmount: "", // 收款结束金额输入
        // _status:false,        //收款状态 是否显示
        // receivablesStatus: -1, // 收款状态 值集
        // _isPush:Y,//推送状况
        // _date:"",//收款日期
        // receivablesStartDate: "", // 收款日期 收款开始日期，格式为“2018-12-12”
        // receivablesEndDate: "", //   收款结束日期，格式为“2018-12-12”
        // businessType:"",// 业务类型 值集
        // receivablesSource: "", // 收款来源 值集
        // paymentTypeCode: "", // 收款方式 值集
        // currencyCode: "", // 收款币种 值集
        // "receivablesClass":"",//收款分类// 收款分类 值集
        // _receivablesClass:"",//是否显示收款分类
        // _customer:""// 客户item 是否显示
        // customerName:"", // // 客户名称
        // customerCode :"",//客户编码
        // customerId:"",//客户ID
        //客户地点编码
        //客户地点ID
        // // 成本中心
        // // 业务员 updatedByName
        // // 本次认领金额
        // vendorName:"",// 供应商
        // vendorSiteName:"",// 地点
        // vendorCode
        // vendorName
        // vendorSiteCode
        // vendorSiteName
        //paymentCompName："", //付款方
      },
      dataSet: {
        ReceivablesStatus: null,
        currency: null,
        BUSINESS_TYPE: null,
        ReceivablesSource: null,
        ReceivablesPaymentType: null,
        ReceivablesClass: null
      }
    };
  },
  created() {
    this.searchForm = Object.assign({}, this.elItem);
  },
  methods: {
    clear_customerName() {
      this.searchForm.customerName = "";
      this.searchForm.customerCode = "";
    },
    select_customerName(data) {
      if (!data) {
        return this.clear_customerName();
      }
      this.searchForm.customerName = data.customerName;
      this.searchForm.customerCode = data.customerCode;
    },
    load_currency() {
      this.dataSet.currency = data.valueMap;
    },

    clear_compCode() {
      this.searchForm.compCode = "";
      this.searchForm.compName = "";
      // this.searchForm.receivablesBankNum = "";
    },
    select_compCode(data) {
      if (data) {
        this.searchForm.compCode = data.compCode;
        this.searchForm.compName = data.compName;
        // this.searchForm.receivablesBankNum = data.bankAccountNum;
      } else {
        this.clear_compCode();
      }
    },

    clear_receivablesBankNum() {
      this.searchForm.receivablesBankNum = "";
    },
    select_receivablesBankNum(data) {
      if (data) {
        this.searchForm.receivablesBankNum = data.bankAccountNum;
      } else {
        this.clear_receivablesBankNum();
      }
    },
    hasOwnProperty(value) {
      return this.elItem.hasOwnProperty(value);
    },
    //重置
    reset() {
      this.$refs["searchForm"].resetFields();
    },
    //收款金额范围
    getAmount(data) {
      this.searchForm.receivablesStartAmount = data.start;
      this.searchForm.receivablesEndAmount = data.end;
    },
    //认领金额金额范围
    getClaimedAmount(data) {
      this.searchForm.claimedStatusAmount = data.start;
      this.searchForm.claimedEndAmount = data.end;
    },
    //选择的收款日期
    input_date(data) {
      console.info(data);
      this.searchForm.receivablesStartDate = data[0];
      this.searchForm.receivablesEndDate = data[1];
    },
    clear_vendor() {
      this.searchForm.vendorCode = "";
      this.searchForm.vendorSiteCode = "";
      this.searchForm.vendorName = "";
      this.searchForm.vendorSiteName = "";
    },
    //选择供应商名字和地点
    select_vendor(data) {
      this.searchForm.vendorCode = data.vendorCode;
      this.searchForm.vendorSiteCode = data.vendorSiteId;
      this.searchForm.vendorName = data.vendorName;
      this.searchForm.vendorSiteName = data.vendorSiteName;
    }
  }
};
</script>

