<template>
  <div>
    <Row style="marginTop:10px">
      <Col :span="24">
        <Card>
          <div>
            <Form :model="editForm" ref="editForm" :rules="rules" :label-width="120" inline>
              <Row>
                <Col :span="12">
                  <Form-item prop="paymentCompName" label="付款方">
                    <Input
                      style="width:160px;"
                      v-model="editForm.paymentCompName"
                      type="text"
                      size="small"
                      clearable
                    />
                  </Form-item>
                </Col>
                <Col :span="12">
                  <Form-item prop="customerName" label="客户">
                    <SelectCustomer
                      style="width:160px;"
                      title="请选择客户"
                      v-model="editForm.customerName" 
                      @handleSelect="select_customerName"
                    ></SelectCustomer>
                  </Form-item>
                </Col>
              </Row>
              <Row>
                <Col :span="12">
                  <Form-item prop="remark" label="备注">
                    <Input style="width:160px;" v-model="editForm.remark" type="text" size="small" clearable/>
                  </Form-item>
                </Col>
                <Col :span="12">
                  <Form-item prop="partySiteName" label="客户地点">
                    <Input
                      style="width:160px;"
                      v-model="editForm.partySiteName"
                      type="text"
                      size="small"
                      clearable
                    />
                  </Form-item>
                </Col>
              </Row>
              <Row>
                <Col :span="12">
                  <Form-item prop="isValid" label="是否启用">
                    <Select transfer style="width:160px;" v-model="editForm.isValid" size="small">
                      <Option value="1">启用</Option>
                      <Option value="0">停用</Option>
                    </Select>
                  </Form-item>
                </Col>
                <Col :span="12">
                  <Form-item prop="bankAccount" label="客户账号">
                    <Input
                      style="width:160px;"
                      v-model="editForm.bankAccount"
                      type="text"
                      size="small"
                      clearable
                    />
                  </Form-item>
                </Col>
              </Row>
            </Form>
          </div>
        </Card>
      </Col>
    </Row>
  </div>
</template> 
<script>
import { SelectCustomer } from "ems-receivable@/components/index.js";
import Server from "./server.js";
const server = new Server();
export default {
  name: "CustomerEditForm",
  components: {
    SelectCustomer
  },
  props: {
    title: {
      type: String,
      default: "新增客户关系"
    },
    detail: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      server: server,
      //搜索表单的属性
      editForm: {
        bankAccount: "",
        bankName: "",
        compCode: "",
        compName: "",
        customerCode: "",
        customerId: "",
        customerName: "",
        operatingStatus: "1", //1新增 2修改
        paymentCompName: "",
        remark: "",
        partySiteName: "",
        siteUseCode: "",
        siteUseId: "",
        isValid: "1"

        // "bankAccount": "客户账号",
        // "bankName": "客户账号名称",
        // "compCode": "orgId",
        // "compName": "orgName",
        // "customerCode": "客户编码",
        // "customerId": "客户ID",
        // "customerName": "客户名称",
        // "operatingStatus": "1",//1新增 2修改
        // "paymentCompName": "付款方",
        // "remark": "备注",
        // "siteUseCode": "客户地点编码",
        // "siteUseId": "客户地点id"
      },
      //验证规则
      rules: {
        paymentCompName: [
          {
            required: true,
            message: "请输入付款方!",
            trigger: "blur"
          }
        ],
        customerName: [
          {
            required: true,
            message: "请选择客户名称!",
            trigger: "change"
          }
        ],
        partySiteName: [
          {
            required: true,
            message: "请选择客户地点!",
            trigger: "blur"
          }
        ],
        isValid: [
          {
            required: true,
            message: "请选择是否启用!",
            trigger: "change"
          }
        ]
      }
    };
  },
  created() {
    this.$emit("SetTitle", this.title);
    // this.$emit('SetPageSize', 800);
    this.$emit("SetPageActions", [
      {
        text: "保存",
        theme: "warning",
        icon: "edit",
        action: "save",
        handle: this.save
      },
      {
        text: "关闭",
        theme: "primary",
        handle: () => {
          this.$emit("Close");
        }
      }
    ]);
    if (this.detail) {
      this.editForm = Object.assign({}, this.editForm, this.detail);
      this.editForm["operatingStatus"] = "2"; //修改
    } else {
      this.editForm["operatingStatus"] = "1"; //新增
    }
  },
  mounted() {},
  methods: {
    clear_customerName() {
      this.editForm.bankAccount = "";
      this.editForm.bankName = "";
      this.editForm.compCode = "";
      this.editForm.compName = "";
      this.editForm.customerId = "";
      this.editForm.customerCode = "";
      this.editForm.customerName = "";
      this.editForm.concatenatedAddress = "";
      this.editForm.siteUseCode = "";
      this.editForm.siteUseId = "";
      this.editForm.partySiteName = "";
      this.editForm.partySiteId = "";
    },
    select_customerName(data) {
      if (!data) {
        return this.clear_customerName();
      }
      this.editForm.bankAccount = data.bankAccount;
      this.editForm.bankName = data.bankName;
      this.editForm.compCode = data.orgId;
      this.editForm.compName = data.orgName;
      this.editForm.customerId = data.customerId;
      this.editForm.customerCode = data.customerNumber;
      this.editForm.customerName = data.customerName;
      this.editForm.concatenatedAddress = data.concatenatedAddress;
      this.editForm.partySiteName = data.partySiteName;
      this.editForm.partySiteId = data.partySiteId;
      this.editForm.siteUseCode = data.siteUseCode;
      this.editForm.siteUseId = data.siteUseId;
    },
    save() {
      this.$refs["editForm"].validate(async valid => {
        if (valid) {
          this.$emit("SetActionsState", {
            btn: "save",
            state: true
          });
          let msg = this.detail
            ? "更新客户关系信息成功"
            : "新增客户关系信息成功";
          let result = await this.server.edit(this.editForm);
          if (result.statusCode === "-1") {
            this.$Message.error(result.msg);
            this.$emit("SetActionsState", {
              btn: "save",
              state: false
            });
          } else {
            this.$Message.success(msg);
            this.$emit("Close", true);
          }
        }
      });
    }
  }
};
</script>
