<template>
  <div v-loading="loading">
    <el-form
      ref="form"
      :rules="formRules"
      :model="formData"
      class="form"
      label-width="100px"
    >
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="姓名" prop="customerName">
            <el-input
              disabled
              v-model="formData.customerName"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号" prop="customerTel">
            <el-input
              disabled
              v-model="formData.customerTel"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司名称" prop="customerCompany">
            <el-input
              disabled
              v-model="formData.customerCompany"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司邮箱" prop="customerEmail">
            <el-input
              disabled
              v-model="formData.customerEmail"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职位" prop="customerPosition">
            <el-input
              disabled
              v-model="formData.customerPosition"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否订阅资讯" prop="subscribe">
            <el-switch
              disabled
              v-model="formData.subscribe"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="0"
              inactive-value="1"
            >
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="需求/痛点" prop="customerNeed">
            <el-input
              disabled
              v-model="formData.customerNeed"
              type="textarea"
              :rows="4"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="沟通内容" prop="content">
            <el-input
              :disabled="type === '1'"
              v-model="formData.content"
              type="textarea"
              placeholder="请输入沟通内容"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" style="text-align: right">
          <div v-if="type !== '1'">
            <el-button type="primary" @click="handleConfirm">确 定</el-button>
            <el-button @click="handleCancel">取 消</el-button>
          </div>
          <el-button @click="handleCancel" v-else>关 闭</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  dicts: [],
  props: {
    infoData: {
      type: Object,
      default: () => {},
    },
    loading: {
      type: Boolean,
      default: false,
    },
    type: {
      // 弹窗类型    1 --- 详情     2 --- 编辑
      type: String,
      default: "",
    },
  },
  data() {
    return {
      formData: {
        customerName: "",
        customerTel: "",
        customerCompany: "",
        customerEmail: "",
        customerPosition: "",
        subscribe: "",
        customerNeed: "",
        content: "",
      },
      rules: {
        content: [
          { required: true, message: "请输入沟通内容", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    formRules() {
      return this.type === "1" ? {} : this.rules;
    },
  },
  watch: {
    infoData: {
      handler(newVal) {
        if (newVal) {
          this.formData = {
            customerId: newVal.customerId || "",
            customerName: newVal.customerName || "",
            customerTel: newVal.customerTel || "",
            customerCompany: newVal.customerCompany || "",
            customerEmail: newVal.customerEmail || "",
            customerPosition: newVal.customerPosition || "",
            subscribe: newVal.subscribe || "",
            customerNeed: newVal.customerNeed || "",
            content: newVal.content || "",
          };
          this.$nextTick(() => {
            this.$refs.form && this.$refs.form.clearValidate();
          });
        }
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    handleConfirm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.$emit("save", this.formData);
        } else {
          this.$message.warning("表单校验不通过，请检查");
        }
      });
    },
    handleCancel() {
      this.formData = {
        customerName: "",
        customerTel: "",
        customerCompany: "",
        customerEmail: "",
        customerPosition: "",
        subscribe: "",
        customerNeed: "",
        content: "",
      };
      this.$refs.form.clearValidate();
      this.$emit("cancel");
    },
  },
};
</script>
