<template>
  <div class="data-list">
    <div class="data-search">
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="客户名称:">
          <el-input
            v-model="queryForm.name"
            placeholder="请选择客户名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="状态:">
          <el-select
            v-model="queryForm.status"
            class="m-2"
            placeholder="请选择状态"
            size="large"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">
            <svg-icon icon-class="search" /> 搜索</el-button
          >
          <el-button type="danger" @click="resetQuery">
            <!-- <svg-icon icon-class="reset" />  -->重置</el-button
          >
          <el-button type="primary" @click="onAdd">
            <!-- <svg-icon icon-class="add" /> -->新增客户</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="dataList" style="width: 100%; margin-top: 20px">
      <el-table-column prop="code" label="客户编码" />
      <el-table-column prop="name" label="客户名称" />
      <el-table-column prop="contact" label="联系人" />
      <el-table-column prop="contactPosition" label="联系人职位" />
      <el-table-column prop="mobile" label="手机号码" />
      <el-table-column prop="address" label="地址" />
      <el-table-column prop="other" label="其他信息" />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          {{ scope.row.status === 5 ? "启用" : "停用" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button size="small" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="page-info">
      <el-pagination
        :currentPage="queryForm.page"
        :page-size="queryForm.pageSize"
        :total="recordCount"
        :page-count="pageTotal"
        background
        layout="prev, pager, next"
        @current-change="ChangePage"
      >
      </el-pagination>
    </div>

    <el-dialog title="新增客户" :visible.sync="dialogVisible" width="50%">
      <el-form :model="customerForm" label-width="120px">
        <el-form-item label="客户编码" required>
          <el-input
            v-model="customerForm.code"
            placeholder="请输入客户编码"
            class="w_input"
          />
        </el-form-item>
        <el-form-item label="客户名称" required>
          <el-input
            v-model="customerForm.name"
            placeholder="请输入客户名称"
            class="w_input"
          />
        </el-form-item>
        <el-form-item label="联系人">
          <el-input
            v-model="customerForm.contact"
            placeholder="请输入联系人"
            class="w_input"
          />
        </el-form-item>
        <el-form-item label="联系人职位" required>
          <el-input
            v-model="customerForm.contact_position"
            placeholder="请输入联系人职位"
            class="w_input"
          />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input
            v-model="customerForm.mobile"
            placeholder="请输入手机号码"
            class="w_input"
          />
        </el-form-item>

        <el-form-item label="地址">
          <el-input
            v-model="customerForm.address"
            placeholder="请输入地址"
            class="w_input"
          />
        </el-form-item>
        <el-form-item label="其他信息">
          <el-input
            v-model="customerForm.other"
            placeholder="请输入其他信息"
            class="w_input"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleCreate">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  searchCustomer,
  syncCustomer,
  createCustomer,
  updateCustomer,
  deleteCustomer,
} from "@/api/customer";
/* import dataInfo from "./dataInfo.vue"; */
import elDragDialog from "@/directive/el-drag-dialog";
export default {
  /* components: {
    dataInfo,
  }, */
  directives: { elDragDialog },
  props: {
    queryForm: {
      type: Object,
      default: () => {
        return {
          page: 1,
          pageSize: 10,
          name: "",
          status: "",
        };
      },
    },
  },
  watch: {
    queryForm: {
      handler: function (val) {
        this.search();
      },
      // immediate: true,//立即执行
      deep: true,
    },
  },
  data() {
    return {
      currentDataId: 0,
      recordCount: 0,
      pageTotal: 1,
      dataList: [],
      currentData: {},
      statusOptions: [
        {
          value: "",
          label: "请选择状态",
        },
        {
          value: 5,
          label: "启用",
        },
        {
          value: 6,
          label: "停用",
        },
      ],
      dialogVisible: false,
      customerForm: {
        code: "",
        name: "",
        contact_position: "",
        mobile: "",
        contact: "",
        address: "",
        other: "",
        status:5
      },
      tableData: [], // Add tableData
      isEdit: false, // Add flag for edit mode
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    // 处理创建/更新客户
    handleEdit(row) {
      this.isEdit = true;
      this.customerForm = { ...row, contact_position: row.contactPosition };
      this.dialogVisible = true;
    },

    handleDelete(row) {
      this.$confirm("确认删除该客户?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteCustomer({ id: row.id })
          .then(() => {
            this.$message.success("删除成功");
            this.search();
          })
          .catch(() => {
            this.$message.error("删除失败");
          });
      });
    },

    handleCreate() {
      const request = this.isEdit
        ? updateCustomer(this.customerForm)
        : createCustomer(this.customerForm);
      request
        .then(() => {
          this.$message.success(this.isEdit ? "更新成功" : "创建成功");
          this.dialogVisible = false;
          this.resetForm();
          this.search();
        })
        .catch(() => {
          this.$message.error(this.isEdit ? "更新失败" : "创建失败");
        });
    },

    onAdd() {
      this.isEdit = false;
      this.customerForm = {
        code: "",
        name: "",
        contact_position: "",
        mobile: "",
        contact: "",
        address: "",
        other: "",
        status:5
      };
      this.dialogVisible = true;
    },

    // 重置表单
    resetForm() {
      this.customerForm = {
        code: "",
        name: "",
        contact_position: "",
        mobile: "",
        contact: "",
        address: "",
        other: "",
        status:5
      };
    },
    // 搜索提交
    onSubmit() {
      // 重置页码
      this.queryForm.page = 1;

      // 构建搜索参数
      const searchParams = {
        ...this.queryForm,
        name: this.queryForm.name.trim(),
        status: this.queryForm.status,
      };

      // 移除空值参数
      Object.keys(searchParams).forEach((key) => {
        if (
          searchParams[key] === "" ||
          searchParams[key] === null ||
          searchParams[key] === undefined
        ) {
          delete searchParams[key];
        }
      });

      this.search();
    },

    // 重置搜索条件
    resetQuery() {
      this.queryForm = {
        page: 1,
        pageSize: 10,
        name: "",
        status: "",
      };
      this.onSubmit();
    },
    /* 搜索 */
    onSync(e) {
      let _this = this;
      syncCustomer().then((res) => {
        console.log("res", res);
      });
    },
    onFocusVal(e) {
      let _this = this;
      _this.currentDataId = e.target.dataset.id;
    },

    onChangeVal(e) {
      let _this = this;
      let par = {
        id: _this.currentDataId,
        val: e,
      };
    },

    searchData() {
      let _this = this;
      _this.dialogVisible = false;
      _this.search();
    },

    //编辑
    btnEdit(e) {
      let _this = this;
      _this.currentDataId = e.id;
      _this.dialogVisible = true;
    },

    onClose() {
      let _this = this;
      _this.currentDataId = 0;
      _this.dialogVisible = false;
    },

    //搜索
    search() {
      let _this = this;
      searchCustomer(_this.queryForm).then((res) => {
        // if(!res)return;
        _this.dataList = res.data.dataList;
        _this.recordCount = res.data.totalRecord;
        _this.pageTotal = res.data.totalPage;
      });
    },
    //修改分页
    ChangePage(e) {
      let _this = this;
      _this.queryForm.page = e;
      _this.search();
    },
  },
};
</script>

<style lang="scss">
@import "./dataList.scss";
</style>
