<template>
  <el-card class="customer-profile">
    <div slot="header" class="clearfix">
      <span>客户资料</span>
      <el-button style="float: right; padding: 3px 0" type="text" @click="saveAll">保存</el-button>
      <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-edit" @click="editProfile">{{ editText }}</el-button>
      <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-arrow-left" @click="goBackToIndex">返回</el-button>
    </div>
    <el-form ref="profileForm" :model="profile" label-width="120px" :rules="rules" v-if="profile">
      <el-form-item label="客户号" prop="custId">
        <span v-if="!isEditing">{{ profile.custId }}</span>
        <el-input v-model="profile.custId" disabled v-if="isEditing"></el-input>
      </el-form-item>
      <el-form-item label="客户名" prop="custName">
        <span v-if="!isEditing">{{ profile.custName }}</span>
        <el-input v-model="profile.custName" v-if="isEditing" maxlength="50"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="custGender">
        <span v-if="!isEditing">{{ profile.custGender }}</span>
        <el-radio-group v-if="isEditing" v-model="profile.custGender">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="手机号" prop="custPhone">
        <span v-if="!isEditing">{{ profile.custPhone }}</span>
        <el-input v-model="profile.custPhone" v-if="isEditing" maxlength="11"></el-input>
      </el-form-item>
      <el-form-item label="出生日期" prop="birthday">
        <!-- <span v-if="!isEditing">{{profile.birthday}}</span> -->
        <el-date-picker
          v-model="profile.birthday"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          v-if="!isEditing"
          disabled
        ></el-date-picker>
        <el-date-picker
          v-model="profile.birthday"
          type="date"
          placeholder="选择日期"
          @change="dateChange"
          value-format="yyyy-MM-dd"
          v-if="isEditing"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="所属行业" prop="belongBusi">
        <span v-if="!isEditing">{{ profile.belongBusi }}</span>
        <el-input v-model="profile.belongBusi" v-if="isEditing" maxlength="100"></el-input>
      </el-form-item>
      <el-form-item label="年收入" prop="custSalary">
        <span v-if="!isEditing">{{ profile.custSalary }}</span>
        <el-input v-model="profile.custSalary" v-if="isEditing"></el-input>
      </el-form-item>
      <el-form-item label="风险评估" prop="risk">
        <span v-if="!isEditing">{{ profile.risk }}</span>
        <el-select v-model="profile.risk" v-if="isEditing">
          <el-option label="保守型" value="conservative"></el-option>
          <el-option label="稳健型" value="moderate"></el-option>
          <el-option label="积极型" value="aggressive"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客户经理" prop="belongUserName">
        <span v-if="!isEditing">{{ profile.belongUserName }}</span>
        <el-input v-model="profile.belongUserName" v-if="isEditing" maxlength="100"></el-input>
      </el-form-item>
      <el-form-item label="客户标记" prop="custType">
        <span v-if="!isEditing">{{ profile.custType }}</span>
        <el-input v-model="profile.custType" v-if="isEditing" maxlength="100"></el-input>
      </el-form-item>
      <el-form-item label="开户银行" prop="activeBranchName">
        <span v-if="!isEditing">{{ profile.activeBranchName }}</span>
        <el-input v-model="profile.activeBranchName" v-if="isEditing" maxlength="100"></el-input>
      </el-form-item>
      <el-form-item label="客户标签" prop="label">
        <div v-for="tag in tags" :key="tag" class="tag-box">{{ tag }}</div>
        <el-input v-if="isEditing" v-model="newTag" placeholder="输入标签并以逗号分隔"></el-input>
        <el-button v-if="isEditing" icon="el-icon-plus" size="mini" @click="addLabel">添加标签</el-button>
      </el-form-item>
    </el-form>
    <!-- <div v-if="isEditing">
      <el-button type="primary" @click="saveProfile">保存</el-button>
      <el-button @click="cancelEdit">取消</el-button>
    </div> -->
    <el-timeline v-if="visitRecords.length > 0">
      <el-timeline-item v-for="(record, index) in visitRecords" :key="index" :timestamp="record.date">
        <el-card>
          <h4>{{ record.product }}</h4>
          <p>走访记录：{{ profile.belongUserName }}{{ record.record }}</p>
          <p>客户反馈：无反馈</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <el-button v-if="!visitRecords.length > 0" type="text">暂无走访记录</el-button>
  </el-card>
</template>

<script>
import { updateCust } from '@/api/system/listByRetailKeywords.js'
export default {
  data() {
    var validatePhone = (rule, value, callback) => {
      if (!value?.trim()) {
        return callback(new Error('请输入手机号'))
      }
      const regExp = /^1(3|4|5|6|7|8|9)[0-9]{9}$/
      if (!regExp.test(value)) {
        this.showCode = false
        this.canClick = false
        callback(new Error('请输入正确的手机号'))
      } else {
        this.canClick = true
        callback()
      }
    }
    return {
      isEditing: false,
      editText: '编辑资料',
      newTag: '',
      tags: [],
      profile: {},
      visitRecords: [
        {
          date: '2024-08-10',
          product: '定期存单',
          record: '在2024-08-10 13:45进行了走访',
          feedback: '客户标签：待定'
        },
        {
          date: '2024-08-11',
          product: '存货款',
          record: '结束了综合营销活动',
          feedback: '客户反馈：无反馈'
        }
      ],
      rules: {
        custName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        custPhone: [{ required: true, validator: validatePhone, trigger: 'change' }],
        birthday: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
        belongBusi: [{ required: true, message: '请输入所属行业', trigger: 'blur' }],
        custGender: [{ required: true, message: '请输入性别', trigger: 'change' }],
        custSalary: [{ required: true, message: '请输入年收入', trigger: 'blur' }],
        risk: [{ required: true, message: '请选择风险评估', trigger: 'change' }],
        belongUserName: [{ required: true, message: '请输入客户经理', trigger: 'blur' }],
        custType: [
          {
            required: true,
            message: '请输入客户标志',
            trigger: 'blur'
          }
        ],
        activeBranchName: [{ required: true, message: '请输入开户银行', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    const custInfo = JSON.parse(this.$route.query.response)
    console.log(custInfo, '-----')

    this.profile = {
      id: custInfo.id,
      custName: custInfo.custName,
      custId: custInfo.custId,
      custPhone: custInfo.custPhone,
      birthday: new Date(`${custInfo.birthday}`),
      belongBusi: custInfo.belongBusi,
      custSalary: custInfo.custSalary + `w`,
      risk: custInfo.risk,
      belongUserName: custInfo.belongUserName,
      custGender: custInfo.custGender,
      custType: custInfo.custType == 0 ? '营销中' : custInfo.custType == 1 ? '已签约' : '未营销',
      activeBranchName: custInfo.activeBranchName,
      label: custInfo.label
    }
    console.log(custInfo, this.profile)
    this.splitTags()
  },
  methods: {
    dateChange(val) {
      console.log(val)
    },
    goBackToIndex() {
      this.$router.go(-1)
    },
    splitTags() {
      const tagsArray = this.profile.label
        .replace(/,\s*/g, ',')
        .split(/,\s*|\s+/)
        .map((tag) => tag.trim())
      this.tags = tagsArray.filter((tag) => tag)
    },
    editProfile() {
      this.isEditing = !this.isEditing
      if (this.isEditing === true) {
        this.editText = '退出编辑'
      } else {
        this.editText = '编辑资料'
      }
    },
    saveProfile() {
      this.$refs.profileForm.validate((valid) => {
        if (valid) {
          // 在这里添加保存数据的逻辑
          console.log('保存客户资料:', this.profile)
          this.$message.success('客户资料已保存')
          this.isEditing = false
        } else {
          return false
        }
      })
    },
    saveAll() {
      this.profile.label = this.tags.join(',')
      // this.profile.custSalary = this.profile.custSalary.slice(0,-1)
      console.log(this.profile)
      updateCust(this.profile).then((response) => {
        console.log(response)
      })
      this.isEditing = false
      this.editText = '编辑资料'
    },
    cancelEdit() {
      this.isEditing = false
    },
    addLabel() {
      if (this.newTag) {
        const newTags = this.newTag.split(',').map((tag) => tag.trim())
        this.tags = [...this.tags, ...newTags]
        console.log(this.tags)
        this.newTag = ''
      }
    }
  }
}
</script>

<style scoped>
.customer-profile >>> .el-card__header {
  padding: 15px 20px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #ebeef5;
}

.customer-profile >>> .el-timeline {
  margin-top: 20px;
}

.customer-profile >>> .el-timeline-item__timestamp {
  font-size: 16px;
}

.customer-profile >>> .el-button {
  margin-right: 10px;
}

.customer-profile >>> .el-input__inner,
.customer-profile >>> .el-select,
.customer-profile >>> .el-date-editor {
  border-radius: 4px;
}

.customer-profile >>> .el-form-item__label {
  color: #606266;
  font-weight: 500;
}

.customer-profile >>> .el-form-item__content {
  line-height: 40px;
}
</style>