<template>
  <el-drawer
    title="新增走访记录"
    :visible.sync="showDetail"
    :size="850"
    direction="rtl"
    :append-to-body="true"
    :show-close="false"
    @close="close"
  >
    <template #title="{ close, titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass">新增走访记录</h4>
      <el-button type="primary" @click="submit('save')">保 存</el-button>
      <el-button type="primary" @click="submit('submit')">提 交</el-button>
    </template>
    <div class="main">
      <el-form
        ref="detailForm"
        :model="detailForm"
        :rules="rules"
        label-position="left"
        label-width="120px"
      >
        <div class="titlebox">客户信息</div>
        <el-form-item label="客户姓名" prop="custName">
          <el-input
            v-model="detailForm.custName"
            clearabled
            placeholder="请输入"
            style="width: 85%"
          />
          <el-button type="primary" @click="getSearch" style="margin-left: 10px"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item label="客户内码" prop="custIdn">
          <el-select
            v-model="detailForm.custIdn"
            clearabled
            placeholder="请输入"
            @change="selectChange"
            style="width: 100%"
          >
            <el-option
              v-for="item in custList"
              :key="item.custIdn"
              :value="item.custIdn"
              :label="`${item.custName}-${item.custIdn}`"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input
            v-model="detailForm.mobile"
            clearabled
            placeholder="请输入"
          />
        </el-form-item>
        <div class="titlebox">电访</div>
        <el-form-item label="计划电访日期" prop="telPlanDate">
          <el-date-picker
            type="datetime"
            v-model="detailForm.telPlanDate"
            clearabled
            placeholder="请选择"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="计划电访内容" prop="telPlanRemark">
          <el-input
            v-model="detailForm.telPlanRemark"
            clearabled
            type="textarea"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="电访总结日期" prop="telSummaryDate">
          <el-date-picker
            type="datetime"
            v-model="detailForm.telSummaryDate"
            clearabled
            placeholder="请选择"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="电访总结内容" prop="telSummaryRemark">
          <el-input
            v-model="detailForm.telSummaryRemark"
            clearabled
            type="textarea"
            placeholder="请输入"
          />
        </el-form-item>
        <div class="titlebox">面访</div>
        <el-form-item label="计划面访日期" prop="visitPlanDate">
          <el-date-picker
            type="datetime"
            v-model="detailForm.visitPlanDate"
            clearabled
            placeholder="请选择"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="计划面访内容" prop="visitPlanRemark">
          <el-input
            v-model="detailForm.visitPlanRemark"
            clearabled
            type="textarea"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="面访总结日期" prop="visitSummaryDate">
          <el-date-picker
            type="datetime"
            v-model="detailForm.visitSummaryDate"
            clearabled
            placeholder="请选择"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="面访总结内容" prop="visitSummaryRemark">
          <el-input
            v-model="detailForm.visitSummaryRemark"
            clearabled
            type="textarea"
            placeholder="请输入"
          />
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import { taskListDetail, saveAPI } from "@/api/task/custContactRecord.js";
import dayjs from "dayjs";
export default {
  data() {
    return {
      showDetail: false,
      detailForm: {},
      rules: {
        custName: [
          { required: true, message: "请输入客户名", trigger: "blur" },
        ],
        custIdn: [
          { required: true, message: "请选择客户信息", trigger: "blur" },
        ],
      },
      custList: [],
      custRow: {},
      submitFlag: false, // false是保存 true是提交
    };
  },
  methods: {
    openDrawer(val) {
      this.showDetail = true;
      if (val) {
        this.detailForm = val
      }
    },
    getSearch() {
      this.$refs.detailForm.validateField(["custName"], (valid) => {
        if (!valid) {
          taskListDetail({
            custName: this.detailForm.custName,
          }).then((res) => {
            if (res.code === 200) {
              this.custList = res.data;
            }
          });
        }
      });
    },
    selectChange(e) {
      const index = this.custList.findIndex((v) => v.custIdn === e);
      if (index > -1) {
        this.custRow = this.custList[index];
        this.detailForm = {
          ...this.detailForm,
          mobile: this.custRow.mobile,
          telPlanDate: this.custRow.telPlanDate,
          telPlanRemark: this.custRow.telPlanRemark,
          telSummaryDate: this.custRow.telSummaryDate,
          telSummaryRemark: this.custRow.telSummaryRemark,
          visitPlanDate: this.custRow.visitPlanDate,
          visitPlanRemark: this.custRow.visitPlanRemark,
          visitSummaryDate: this.custRow.visitSummaryDate,
          visitSummaryRemark: this.custRow.visitSummaryRemark,
        };
      }
    },
    submit(type) {
      this.submitFlag = type == "submit";
      this.$refs.detailForm.validate((valid) => {
        if (valid) {
          const {
            telPlanDate,
            telSummaryDate,
            visitPlanDate,
            visitSummaryDate,
          } = this.detailForm;
          saveAPI({
            ...this.custRow,
            ...this.detailForm,
            telPlanDate: telPlanDate
              ? dayjs(telPlanDate).format("YYYY-MM-DD HH:mm:ss")
              : "",
            telSummaryDate: telSummaryDate
              ? dayjs(telSummaryDate).format("YYYY-MM-DD HH:mm:ss")
              : "",
            visitPlanDate: visitPlanDate
              ? dayjs(visitPlanDate).format("YYYY-MM-DD HH:mm:ss")
              : "",
            visitSummaryDate: visitSummaryDate
              ? dayjs(visitSummaryDate).format("YYYY-MM-DD HH:mm:ss")
              : "",
            submitFlag: this.submitFlag,
          }).then((res) => {
            if (res.code === 200) {
              this.showDetail = false;
              this.detailForm = {};
              this.$emit("update");
            }
          });
        }
      });
    },
    close () {
      this.showDetail = false;
      this.detailForm = {};
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-drawer__body {
  .main {
    padding: 0 32px;

    .titlebox {
      color: #666;
      font-size: 16px;
      line-height: 18px;
      padding-left: 10px;
      position: relative;
      margin-bottom: 20px;
      font-weight: bold;
    }
    .titlebox::before {
      content: "";
      width: 4px;
      height: 18px;
      background-color: #2094ff;
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 2px;
    }
  }
}
</style>
