<template>
    <div style="background-color:rgba(128,128,128,0.2)">
        <el-form>
            <el-row>
              <el-col :span="2" style="padding-left:10px">
                  <h2 style="font-weight:bold">{{this.clientOptions[0].clientName}}</h2>
              </el-col>
              <el-col :span="2" style="padding-top:10px">
                  <el-button @click="handleUpdate">编辑资料</el-button>
              </el-col>
              <el-col>
                <el-button @click="handleBack" type="text" icon="el-icon-arrow-left" class="back">返回</el-button>
              </el-col>
          </el-row>
        </el-form>
        <el-form style="padding-left:20px">
            <el-row style="padding:8px">
                <el-col :span="7"> 客户号：{{this.clientOptions[0].clientnum}}</el-col>
                <el-col :span="7"> 所属行业：{{this.clientOptions[0].clientJobIn}}</el-col>
                <el-col :span="7"> 客户经理：{{this.clientOptions[0].clientManager}}</el-col>
            </el-row>
            <el-row style="padding:8px">
                <el-col :span="7"> 手机号：{{this.clientOptions[0].clientPhone}}</el-col>
                <el-col :span="7"> 年收入：{{this.clientOptions[0].clientIncome}}</el-col>
                <el-col :span="7"> 客户标识：{{this.clientOptions[0].clientMark}}</el-col>
            </el-row>
            <el-row style="padding:8px">
                <el-col :span="7"> 出生日期：{{this.clientOptions[0].clientBrith}}</el-col>
                <el-col :span="7"> 风险评估：{{this.clientOptions[0].clientRisk}}</el-col>
                <el-col :span="7"> 开户银行：{{this.clientOptions[0].accountOpen}}</el-col>
            </el-row>
        </el-form>
        <el-form>
            <el-row class="border-row">
                <el-col :span="8" class="border-col">
                    <p class="title">理财产品</p>
                    <p class="product" v-for="pro in this.clientOptions[0].product" :key="pro.id">{{pro.name}}</p>
                </el-col>
                <el-col :span="8" class="border-col">
                    <p class="title">走访记录</p>
                    <p style="margin-left:10px">{{this.clientOptions[0].recording[0].manager+'在'+this.clientOptions[0].recording[0].recordTime}}</p>
                    <p style="margin-left:10px">{{'结束了'+this.clientOptions[0].recording[0].active+'客户反馈：'+this.clientOptions[0].recording[0].backInformation}}</p>
                    <a href="" style="margin-left:10px">查看详情</a>
                    <br><br>
                    <a href="">查看全部走访详情</a>
                 </el-col>
                 <el-col :span="8" class="border-col">
                    <p class="title">登记信息</p>
                    <p>客户标签：</p>
                    <div v-if="customerTags.length > 0" class="tag-list">
                        <el-tag
                          v-for="tag in customerTags"
                          :key="tag"
                          closable
                          @close="removeTag(tag)">{{tag}}</el-tag>
                    </div>
                    <el-button @click="addMark = true">编辑</el-button>
                 </el-col>
            </el-row>
        </el-form>
        <el-form>
            <h3 style="font-weight:bold">关系图谱</h3>
        </el-form>
        <!-- 客户标签弹窗 -->
        <el-dialog
          title="编辑客户标签"
          :visible.sync="addMark"
          width="30%"
          @close="resetFrom">
          <el-form :model="tagForm">
            <el-form-item label="客户标签">
                <el-input v-model="tagForm.customerTag" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addMark">取消</el-button>
            <el-button type="primary" @click="saveTag">确定</el-button>
          </span>
        </el-dialog>
    </div>

</template>

<script>
// import axios from 'axios'
// axios.get('/api/users').then(reponse=>{
//     console.log(response.data.data.users)
// })
export default {
  name: "individual",
  dicts: ['sys_normal_disable'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否展开，默认全部展开
      isExpandAll: true,
      // 重新渲染表格状态
      refreshTable: true,
      //添加用户标签
      addMark:false,
      tagForm:{
        customerTag:''
      },
      customerTags:[],
      // 查询参数
      queryParams: {
        clientName: undefined,
        clientId: undefined,
        clientPhone:undefined
      },
      clientOptions:[
        {clientId:123456,clientName:'陈梦',clientPhone:'13588888888',clientManager:'马龙',clientnum:20240810,clientJobIn:'体育',clientIncome:100000,
         clientMark:null,clientBrith:'1994-01-15',clientRisk:"积极型",accountOpen:"萧山农商行",
         product:[{id:1,name:"定期存单"},{id:2,name:"存贷款"}],
         recording:[{manager:"马龙",recordTime:"2024-08-10 13:45",active:"综合营销活动",backInformation:"无反馈"},
                    {manager:"赵云",recordTime:"2024-07-20 15:25",active:"客户回馈活动",backInformation:"无反馈"}]}
      ],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        clientName: [
          { required: true, message: "姓名不能为空", trigger: "blur" }
        ],
        clientId: [
          { required: true, message: "身份证号不能为空", trigger: "blur" }
        ],
        clientPhone: [
          { required: true, message: "手机号不能为空", trigger: "blur" }
        ],
        clientManager:[
          { required: true, message: "客户经理不能为空", trigger: "blur" }
        ],
        accountOpen:[
          { required: true, message: "开户银行不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询部门列表 */
    getList() {
      this.loading = true;
      listClient(this.queryParams).then(response => {
        this.clientList = this.handleTree(response.data, "clientId");
        this.loading = false;
      });
    },
    //编辑客户标签
    saveTag(){
        if(this.tagForm.customerTag.trim() !== ''){
            this.customerTags.push(this.tagForm.customerTag.trim());
            this.addMark = false;
            this.resetFrom();
        }else {
            this.$message.error('标签内容不能为空')
        }
    },
    removeTag(tag){
        const index = this.customerTags.indexOf(tag);
        if(index !== -1){
            this.customerTags.splice(index, 1)
        }
    },
    resetFrom(){
        this.tagForm.customerTag = "";
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.reset();
      if (row != undefined) {
        this.form.parentId = row.clientId;
      }
      this.open = true;
      this.title = "添加部门";
      listClient().then(response => {
        this.clientOptions = this.handleTree(response.data, "clientId");
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      getClient(row.clientId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "编辑资料";
        listClientExcludeChild(row.clientId).then(response => {
          this.clientOptions = this.handleTree(response.data, "clientId");
          if (this.clientOptions.length == 0) {
            const noResultsOptions = { clientId: this.form.clientId, clientName: this.form.clientName, children: [] };
            this.clientOptions.push(noResultsOptions);
          }
        });
      });
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.clientId != undefined) {
            updateClient(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addClient(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    handleBack(){
        this.$router.go(-1)
    }
  }
};
</script>

<style scoped>
.title{
    color:rgb(25, 118, 155);
    font-weight:bold;
    background-color: rgb(161, 215, 236);
    height: 30px;
    margin-top: 0;
    text-align: center;
    align-items: center;
    /* border: 1px solid gray; */
}
.back{
    position:absolute;
    top:5px;
    right: 5px;
}
.product{
    background-color: brown;
    margin: 5px 5px;
    width: 80px;
    height: 50px;
    align-items: center;
    border: 1px solid gray;
}
a {
    text-decoration: underline;
    color:blue;
}
.tag-list {
    margin-top:20px;
}
.border-row {
  padding: 8px;
  margin-top: 20px;
}
.border-col {
  border: 1px solid gray;
  height: 300px;
  padding: 10px;
  box-sizing: border-box;
}
</style>
