<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model
        ref="form"
        :model="model"
        :rules="validatorRules"
        slot="detail"
      >
        <a-row>
          <a-col :span="24">
            <a-form-model-item
              label="宾客类型"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="customerType"
            >
              <a-select placeholder="宾客类型" v-model="model.customerType">
                <a-select-option :value="1"> 散客 </a-select-option>
                <a-select-option :value="2"> 会员 </a-select-option>
                <a-select-option :value="3"> 协议单位 </a-select-option>
                <a-select-option :value="4"> 中介 </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" v-if="model.customerType === 2">
            <a-card :bordered="true" style="width: 100%; padding: 0 !important">
              <p>
                <a-form-model-item
                  label="会员"
                  :labelCol="{
                    xs: { span: 24 },
                    sm: { span: 2 },
                  }"
                  :wrapperCol="{
                    xs: { span: 24 },
                    sm: { span: 22 },
                  }"
                  prop="vipCustomerId"
                >
                  <a-auto-complete
                    v-model="vipCustomerData.name"
                    @select="(e) => handleSelectVip(e)"
                    @search="handleSearchVip"
                  >
                    <template slot="dataSource">
                      <a-select-option
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                        v-for="(item, index) in busMemberCardList"
                      >
                        {{ item.name }}-{{ item.gradeName }}-{{ item.balance }}
                      </a-select-option>
                    </template>
                  </a-auto-complete>
                </a-form-model-item>
              </p>
              <p>
                <a-row>
                  <a-col :span="8">名称：{{ vipCustomerData.name }}</a-col>
                  <a-col :span="8">电话：{{ vipCustomerData.mobile }}</a-col>
                  <a-col :span="8">级别：{{ vipCustomerData.gradeName }}</a-col>
                </a-row>
                <a-row>
                  <a-col :span="8">余额：{{ vipCustomerData.balance }}</a-col>
                  <a-col :span="8">积分：{{ vipCustomerData.integral }}</a-col>
                  <a-col :span="8">卡号：{{ vipCustomerData.cardNo }}</a-col>
                </a-row>
              </p>
            </a-card>
          </a-col>
          <a-col :span="24" v-if="model.customerType === 3">
            <a-card :bordered="true" style="width: 100%; padding: 0 !important">
              <a-row>
                <a-col :span="12">
                  <a-form-model-item
                    label="协议单位"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="contractTeamId"
                  >
                    <a-auto-complete
                      v-model="agreementUnitData.customerName"
                      @select="(e) => handleSelectAgreementUnit(e)"
                      @search="handleSearchAgreementUnit"
                    >
                      <template slot="dataSource">
                        <a-select-option
                          :key="item.id"
                          :value="item.id"
                          :label="item.customerName"
                          v-for="(item, index) in busMarketAgreementUnitList"
                        >
                          {{ item.customerName }}
                        </a-select-option>
                      </template>
                    </a-auto-complete>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item
                    label="协议合同"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="contractTeamProtocolId"
                  >
                    <span
                      style="color: red; cursor: pointer"
                      @click="showAgreementUnitTable(model.contractTeamId)"
                      >{{ model.contractTeamProtocolName }}</span
                    >
                  </a-form-model-item>
                </a-col>
              </a-row>
              <p>
                <a-row>
                  <a-col :span="12"
                    >名称：{{ agreementUnitData.customerName }}</a-col
                  >
                  <a-col :span="12"
                    >签约开始日期：{{
                      busMarketAgreementCustomer.signTime
                    }}</a-col
                  >
                  <a-col :span="12"
                    >签约结束日期：{{
                      busMarketAgreementCustomer.effective
                    }}</a-col
                  >
                  <a-col :span="12"
                    >可用额度：{{ agreementUnitData.balance || 0 }}</a-col
                  >
                </a-row>
              </p>
            </a-card>
          </a-col>
        </a-row>
      </a-form-model> </j-form-container
    ><agreement-unit-modal-table
      ref="modalAgreementUnitTable"
      @ok="modalAgreementUnitTableOk"
    ></agreement-unit-modal-table>
  </a-spin>
</template>

<script>
import { httpAction, getAction } from "@/api/manage";
import { validateDuplicateValue } from "@/utils/util";
import AgreementUnitModalTable from "./AgreementUnitModalTable";
export default {
  name: "BusMemberCardForm",
  components: { AgreementUnitModalTable },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      model: { payType: 1, livingOrderId: "", certType: 1, gender: 1 },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {
        mobile: [
          {
            required: true,
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入手机号!",
          },
        ],
        customerType: [{ required: true, message: "请选择宾客类型!" }],
        gradeId: [{ required: true, message: "请输入等级类型!" }],
        payType: [{ required: true, message: "请输入付款类型!" }],
        paymentMethod: [{ required: true, message: "请输入付款方式!" }],
        cusName: [{ required: true, message: "请输入会员姓名!" }],
        sex: [{ required: true, message: "请输入性别!" }],
        certificateType: [{ required: true, message: "请输入证件类型!" }],
        validity: [{ required: true, message: "请输入有效期!" }],
      },
      url: {
        add: "/business/busRoomBookingOrders/booking-to-live",
        edit: "/business/busMemberCard/edit",
        queryById: "/business/busMemberCard/queryById",
      },
      gradeList: [],
      paymentMethodList: [],
      staffList: [],
      customerList: [],
      oldcustomerList: [],
      vipCustomerData: {},
      agreementUnitData: { customerName: "" },
      oldBusMemberCardList: [],
      busMemberCardList: [],
      oldBusMarketAgreementUnitList: [],
      busMarketAgreementUnitList: [],
      busMarketAgreementCustomer: {},
    };
  },
  computed: {
    formDisabled() {
      return this.disabled;
    },
  },
  created() {
    var _info = JSON.parse(localStorage.getItem("storeInfo"));
    if (_info) {
      this.model.hotelId = _info.id;
    }
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
    // this.getbusCustomer();
    getAction("/business/busMemberCard/list", {
      pageSize: 99999,
      pageNo: 1,
    }).then((res) => {
      if (res.success) {
        this.busMemberCardList = res.result.records;
        this.oldBusMemberCardList = JSON.parse(
          JSON.stringify(this.busMemberCardList)
        );
        if (this.model.vipCustomerId) {
          this.handleSelectVip(this.model.vipCustomerId);
        }
      }
    });
    getAction("/business/busMarketAgreementUnit/list", {
      pageSize: 99999,
      pageNo: 1,
    }).then((res) => {
      if (res.success) {
        this.busMarketAgreementUnitList = res.result.records;
        this.oldBusMarketAgreementUnitList = JSON.parse(
          JSON.stringify(res.result.records)
        );
        if (this.model.contractTeamId && this.model.contractTeamProtocolId) {
          this.handleSelectAgreementUnit(this.model.contractTeamId);
        }
      }
    });
  },
  methods: {
    modalAgreementUnitTableOk(e) {
      var info = e;
      this.model.contractTeamProtocolName = info.name;
      this.model.contractTeamProtocolId = info.id;
      this.busMarketAgreementCustomer = info;
    },
    showAgreementUnitTable(agreementId) {
      this.$refs.modalAgreementUnitTable.add(agreementId);
      this.$refs.modalAgreementUnitTable.title = "选择协议";
      this.$refs.modalAgreementUnitTable.disableSubmit = true;
    },
    handleSearchAgreementUnit(value) {
      let result;
      if (!value) {
        result = this.oldBusMarketAgreementUnitList;
      } else {
        result = this.oldBusMarketAgreementUnitList.filter((t) =>
          t.customerName.includes(value)
        );
      }
      this.busMarketAgreementUnitList = JSON.parse(JSON.stringify(result));
    },
    handleSelectAgreementUnit(value) {
      let result = this.busMarketAgreementUnitList.find((t) => t.id == value);
      this.model.contractTeamId = value;
      this.agreementUnitData = JSON.parse(JSON.stringify(result));
      this.contractTeamIdChange(value);
    },
    contractTeamIdChange(e) {
      this.model.contractTeamId = e;
      getAction("/business/busMarketAgreementCustomer/list", {
        agreementId: this.model.contractTeamId,
      }).then((res) => {
        if (res.success) {
          var list = res.result.records;
          if (list && list.length > 0) {
            this.model.contractTeamProtocolName = list[0].name;
            this.model.contractTeamProtocolId = list[0].id;
            this.busMarketAgreementCustomer = list[0];
          }
        }
      });
    },
    handleSearchVip(value) {
      let result;
      if (!value) {
        result = this.oldBusMemberCardList;
      } else {
        console.log("this.oldBusMemberCardList", this.oldBusMemberCardList);
        result = this.oldBusMemberCardList.filter((t) => {
          return (
            t.name.includes(value) ||
            (t.cardNo && t.cardNo.includes(value)) ||
            (t.mobile && t.mobile.includes(value))
          );
        });
      }
      this.busMemberCardList = JSON.parse(JSON.stringify(result));
    },
    handleSelectVip(value) {
      console.log(value);
      let result = this.busMemberCardList.find((t) => t.id == value);
      this.model.vipCustomerId = value;
      this.vipCustomerData = JSON.parse(JSON.stringify(result));
      // this.vipCustomerIdChange(result.id);
    },
    handleSearch(value) {
      let result;
      if (!value) {
        result = this.oldcustomerList;
      } else {
        result = this.oldcustomerList.filter((t) => t.name.includes(value));
      }
      this.customerList = result;
    },
    handleSelectMember(e) {
      var find = this.customerList.find((t) => t.id === e);
      this.model.cusPhone = find.phone;
      this.model.cusName = find.name;
      this.model.cusId = find.id;
    },
    getbusCustomer() {
      getAction("/bus/busCustomer/list", {}).then((res) => {
        if (res.success) {
          this.customerList = res.result.records;
          this.oldcustomerList = JSON.parse(JSON.stringify(this.customerList));
        }
      });
    },
    add(livingOrderId, roomId) {
      this.modelDefault.livingOrderId = livingOrderId;
      this.modelDefault.roomId = roomId;
      this.edit(this.modelDefault);
    },
    edit(record) {
      this.model = Object.assign({}, record);
      this.visible = true;
    },
    submitForm() {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true;
          httpAction(
            "/business/busRoomBookingOrders/update-orders?type=2",
            this.model,
            "post"
          )
            .then((res) => {
              if (res.success) {
                that.$message.success("修改成功");
                that.$emit("ok");
              } else {
                that.$message.warning(res.message);
              }
            })
            .finally(() => {
              that.confirmLoading = false;
            });
        }
      });
    },
  },
};
</script>