<template>
    <div id="customer-form">
        <div style="text-align: center; margin-bottom: 20px">
            <el-radio-group v-model="customerForm.customerType">
                <el-radio-button
                    v-for="item in customerTypes"
                    :key="item.value"
                    :label="item.value"
                    >{{ item.label }}</el-radio-button
                >
            </el-radio-group>
        </div>
        <el-form
            :model="customerForm"
            :rules="customerFormRules"
            ref="customerForm"
            label-width="120px"
        >
            <el-form-item v-if="customerTypeIsEnt">
                <div style="background-color: gray; padding: 5px 10px">
                    <span style="color: white"
                        >使用提示：使用企业搜索功能，可以更有效的避免企业名称和企业税号输入出现错误！</span
                    >
                    <el-button @click="showYTTSearchEntDialog" type="primary"
                        >去搜索企业</el-button
                    >
                </div>
            </el-form-item>
            <el-form-item label="购方名称" prop="customerName">
                <el-input v-model="customerForm.customerName"></el-input>
            </el-form-item>
            <div style="taxt-align: right"></div>
            <el-form-item
                label="税号"
                prop="customerEntTaxId"
                v-if="customerTypeIsEnt"
            >
                <el-input v-model="customerForm.customerEntTaxId"></el-input>
            </el-form-item>
            <el-row :gutter="20" v-if="customerTypeIsEnt">
                <el-col :span="8">
                    <el-form-item label="电话号码">
                        <el-input
                            v-model="customerForm.contactPhone"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="16">
                    <el-form-item label="公司地址">
                        <el-input v-model="customerForm.address"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20" v-if="customerTypeIsEnt">
                <el-col :span="8">
                    <el-form-item label="开户银行">
                        <el-input v-model="customerForm.bankName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="16">
                    <el-form-item label="开户银行账号" v-if="customerTypeIsEnt">
                        <el-input
                            v-model="customerForm.bankAccountNumber"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="手机号码" prop="customerMobile">
                        <el-input
                            v-model="customerForm.customerMobile"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="16">
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="customerForm.email"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <el-dialog
            title="企业搜索"
            :visible.sync="yttSearchEnt.dialogVisible"
            width="50%"
            center
            append-to-body
        >
            <el-row type="flex" :gutter="20">
                <el-col :span="16">
                    <!-- <el-input
                        v-model="yttSearchEnt.search.entName"
                        clearable
                        prefix-icon="el-icon-search"
                        placeholder="请输入企业名称"
                    ></el-input> -->
                    <el-autocomplete
                        v-model="yttSearchEnt.search.entName"
                        prefix-icon="el-icon-search"
                        placeholder="请输入企业名称"
                        :fetch-suggestions="entAutoSearch"
                        style="width: 100%"
                    >
                        <template slot-scope="{ item }">
                            <div class="name">{{ item }}</div>
                        </template>
                    </el-autocomplete>
                </el-col>
                <el-col :span="8">
                    <el-button @click="handleYTTSearchEnt" type="primary"
                        >搜索</el-button
                    >
                </el-col>
            </el-row>
            <br />
            <el-table
                :data="yttSearchEnt.search.resultList"
                border
                style="width: 100%"
                height="350px"
            >
                <el-table-column prop="entName" label="企业名称" width="150">
                </el-table-column>
                <el-table-column prop="entTaxId" label="企业税号" width="120">
                </el-table-column>
                <el-table-column prop="bankName" label="银行名称" width="120">
                </el-table-column>
                <el-table-column
                    prop="bankAccountNumber"
                    label="银行账号"
                    width="120"
                >
                </el-table-column>
                <el-table-column prop="address" label="地址" width="300">
                </el-table-column>
                <el-table-column prop="entPhone" label="电话" width="120">
                </el-table-column>
                <el-table-column prop="city" label="市" width="120">
                </el-table-column>
                <el-table-column prop="county" label="区" width="120">
                </el-table-column>
                <el-table-column prop="province" label="省" width="120">
                </el-table-column>
                <el-table-column
                    prop="taxAuthorityCode"
                    label="税务机关代码"
                    width="120"
                >
                </el-table-column>
                <el-table-column
                    prop="taxAuthorityName"
                    label="税务机关名称"
                    width="120"
                >
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                            @click="handleYTTSelecteEnt(scope.row)"
                            type="primary"
                            size="small"
                        >
                            选择
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import { yttCompanySearch, getSearchHistory } from "@/api/user_config";

// 企业客户为默认客户类型
const customerTypeDefault = 2;

// 客户类型列表
const customerTypes = [
    {
        value: 2,
        label: "企业客户",
    },
    {
        value: 1,
        label: "个人及政府事业单位",
    },
];

// 客户表单的默认值
const customerFormDefault = {
    customerId: "",
    customerType: customerTypeDefault,
    customerName: "",
    customerEntTaxId: "",
    address: "",
    contactPhone: "",
    bankName: "",
    bankAccountNumber: "",
    customerMobile: "",
    email: "",
};

export default {
    name: "CustomerForm",
    props: {
        // 1.输入已经存在的客户信息，用于编辑客户信息
        // 2.用于覆盖已有数据
        inputCustomerInfo: {
            type: Object,
            default: null,
        },
    },
    data() {
        return {
            // customerTypeText: '企业客户', // 默认企业客户
            customerTypes: customerTypes,
            customerForm: { ...customerFormDefault },
            customerFormRules: {
                customerName: [
                    {
                        required: true,
                        message: "请输入购方名称",
                        trigger: "blur",
                    },
                ],
                customerEntTaxId: [
                    { required: true, message: "请输入税号", trigger: "blur" },
                ],
                // customerMobile: [
                //     { required: true, message: '请输入手机号码', trigger: 'blur' }
                // ],
                // email: [
                //     { required: true, message: '请输入邮箱', trigger: 'blur' }
                // ]
            },
            yttSearchEnt: {
                dialogVisible: false,
                search: {
                    entName: "", // 查询企业名称
                    resultList: [], // 查询结果列表
                },
            },
            restaurants: [], // 客户提示列表
        };
    },
    watch: {
        inputCustomerInfo(val) {
            this.updateCustomerForm(val);
        },
    },
    computed: {
        customerTypeIsEnt() {
            console.log(this.customerForm.customerType);
            return this.customerForm.customerType == customerTypeDefault;
        },
    },
    methods: {
        updateCustomerForm(val) {
            if (val == null || JSON.stringify(val) == "{}") {
                this.customerForm = { ...customerFormDefault };
            } else {
                this.customerForm = { ...val };
            }
        },
        showYTTSearchEntDialog() {
            this.yttSearchEnt.dialogVisible = true;
        },
        handleYTTSearchEnt() {
            yttCompanySearch(this.yttSearchEnt.search.entName)
                .then((val) => {
                    this.yttSearchEnt.search.resultList = val.data;
                    this.getSearchHistory();
                })
                .catch((error) => {
                    this.$message.error(error);
                });
        },
        handleYTTSelecteEnt(row) {
            console.log("企业云抬头查询中选中企业 数据：");
            console.log(row);
            this.yttSearchEnt.dialogVisible = false;
            this.customerForm.customerName = row.entName;
            this.customerForm.customerEntTaxId = row.entTaxId;
            this.customerForm.address = row.address;
            this.customerForm.contactPhone = row.entPhone;
            this.customerForm.bankName = row.bankName;
            this.customerForm.bankAccountNumber = row.bankAccountNumber;
        },
        /**
         * 对外暴露获取数据的方法，内部进行表单的校验，父组件中通过refs调用
         */
        getCustomerInfo() {
            return new Promise((resolve, reject) => {
                this.$refs["customerForm"].validate((valid) => {
                    if (valid) {
                        resolve({ ...this.customerForm });
                    } else {
                        reject("输入信息不合法，请检查您的输入信息！");
                    }
                });
            });
        },
        /**
         * 对外暴露取消表单验证提示的方法
         */
        resetFormFields() {
            // 取消验证提示
            this.$refs["customerForm"].resetFields();
        },
        entAutoSearch(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString
                ? restaurants.filter(
                      this.createEntAutoSearchFilter(queryString)
                  )
                : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createEntAutoSearchFilter(queryString) {
            return (restaurant) => {
                return (
                    restaurant
                        .toLowerCase()
                        .indexOf(queryString.toLowerCase()) === 0
                );
            };
        },
        // 获取客户搜索历史
        getSearchHistory() {
            let _this = this;
            getSearchHistory()
                .then((val) => {
                    _this.restaurants = val.data;
                })
                .catch((err) => {})
                .finally(() => {});
        },
    },
    mounted() {
        this.updateCustomerForm(this.inputCustomerInfo);
        this.getSearchHistory();
    },
};
</script>

<style lang='stylus' scoped></style>
