<template>
    <div style="background-color:rgba(128,128,128,0.2)">
        <el-form>
            <el-row>
              <el-col :span="4" style="padding-left:10px">
                  <h2 style="font-weight:bold">{{this.merchantOptions[0].merchantName}}</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.merchantOptions[0].merchantName}}</el-col>
                <el-col :span="7"> 电话：{{this.merchantOptions[0].merchantPhone}}</el-col>
            </el-row>
            <el-row style="padding:8px">
                <el-col :span="7"> 地址：{{this.merchantOptions[0].merchantaddress}}</el-col>
                <el-col :span="7"> 所属网格：{{this.merchantOptions[0].owningGrid}}</el-col>
            </el-row>
            <el-row style="padding:8px">
                <el-col :span="7"> 网格管理员：{{this.merchantOptions[0].gridManager}}</el-col>
                <el-col :span="7"> 全年流水：{{this.merchantOptions[0].merchantIncome}}</el-col>
                <el-col :span="7"> 是否存贷款意向：{{this.merchantOptions[0].intention}}</el-col>
            </el-row>
        </el-form>
        <el-form>
            <el-row class="border-row">
                <el-col :span="12" class="border-col">
                    <p class="title">走访记录</p>
                    <p style="margin-left:10px">{{this.merchantOptions[0].recording[0].manager+'在'+this.merchantOptions[0].recording[0].recordTime}}</p>
                    <p style="margin-left:10px">{{'结束了'+this.merchantOptions[0].recording[0].active+'客户反馈：'+this.merchantOptions[0].recording[0].backInformation}}</p>
                    <a href="" style="margin-left:10px">查看详情</a>
                    <br><br>
                    <a href="">查看全部走访详情</a>
                 </el-col>
                 <el-col :span="12" class="border-col">
                    <p class="title">登记信息</p>
                    <h3>商户标签：</h3>
                    <div class="label">
                      <p style="margin-left:10px">线下经营:</p>
                      <el-tag v-for="(tag,index) in tags1" :key="index" closable @close="removeTag(1,index)">{{tag}}</el-tag>
                      <el-button @click="openDialog(1)">编辑</el-button>
                    </div>
                    <br>
                    <div class="label">
                      <p style="margin-left:10px">线上经营:</p>
                      <el-tag v-for="(tag,index) in tags2" :key="index" closable @close="removeTag(2,index)">{{tag}}</el-tag>
                    <el-button @click="openDialog(2)">编辑</el-button>
                    </div>
                    <br>
                    <div class="label">
                       <p style="margin-left:10px">店铺状态:</p>
                    <el-tag v-for="(tag,index) in tags3" :key="index" closable @close="removeTag(3,index)">{{tag}}</el-tag>
                    <el-button @click="openDialog(3)">编辑</el-button>
                    </div>
                   
                 </el-col>
            </el-row>
        </el-form>

        <div v-if="dialogOpen === 1" class="dialog-overlay">
          <div class="dialog">
            <h2>编辑商户标签</h2>
            <h4>线下经营标签</h4>
            <input v-model="newTag1" type="text" placeholder="输入商户线下经营标签"/>
            <br>
            <div class="foot-button">
              <button @click="addTag(1)">确定</button>
              <button @click="closeDialog"> 取消</button>
            </div>
            
            
          </div>
        </div>
        <div v-if="dialogOpen === 2" class="dialog-overlay">
          <div class="dialog">
            <h2>编辑商户标签</h2>
            <h4>线上经营标签</h4>
            <input v-model="newTag2" type="text" placeholder="输入商户线上经营标签"/>
            <br>
            <div class="foot-button">
              <button @click="addTag(2)">确定</button>
              <button @click="closeDialog"> 取消</button>
            </div>
          </div>
        </div>
        <div v-if="dialogOpen === 3" class="dialog-overlay">
          <div class="dialog">
            <h2>编辑商户标签</h2>
            <h4>店铺状态标签</h4>
            <input v-model="newTag3" type="text" placeholder="输入商户店铺状态标签"/>
            <br>
            <div class="foot-button">
              <button @click="addTag(3)">确定</button>
              <button @click="closeDialog"> 取消</button>
            </div>
          </div>
        </div>
    </div>

</template>

<script>
export default {
  name: "individual",
  dicts: ['sys_normal_disable'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否展开，默认全部展开
      isExpandAll: true,
      // 重新渲染表格状态
      refreshTable: true,
      //添加用户标签
      tags1:[],
      tags2:[],
      tags3:[],
      newTag1:'',
      newTag2:'',
      newTag3:'',
      dialogOpen:null,
      merchantOptions:[
        {merchantName:'CM体育用品专卖店',merchantPhone:'0571-109xxx',merchantaddress:'浙江省杭州市萧山区',owningGrid:'盈丰街道',gridManager:'马龙',merchantIncome:1000000,intention:'否',
         recording:[{manager:"马龙",recordTime:"2024-08-10 13:45",active:"综合营销活动",backInformation:"无反馈"},
                    {manager:"赵云",recordTime:"2024-07-20 15:25",active:"客户回馈活动",backInformation:"无反馈"}]}
      ],
    };
  },
  methods: {
    handleUpdate(){},
    //编辑客户标签
    openDialog(type){
      this.dialogOpen = type;
      if(type === 1){
        this.newTag1 = '';
      }else if(type === 2){
        this.newTag2 = '';
      }else{
        this.newTag3 = '';
      }
    },
    addTag(type){
      if(type === 1 && this.newTag1.trim()){
        this.tags1.push(this.newTag1.trim());
        this.closeDialog();
      }else if(type === 2 && this.newTag2.trim()){
        this.tags2.push(this.newTag2.trim());
        this.closeDialog();
      }else if(type === 3 && this.newTag3.trim()){
        this.tags3.push(this.newTag3.trim());
        this.closeDialog();
      }
    },
    closeDialog(){
      this.dialogOpen = null;
      this.newTag1 = '';
      this.newTag2 = '';
      this.newTag3 = '';
    },
    removeTag(type,index){
      if(type === 1){
        this.tags1.splice(index,1);
      }else if(type === 2){
        this.tags2.splice(index,1);
      }else{
        this.tags3.splice(index,1);
      }
    },
    cancel() {
      this.open = false;
      this.reset();
    },
    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; */
}
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialog {
  margin-top: -20%;
  height: 30%;
  width: 30%;
  background: white;
  padding: 20px;
  border: 5px;
}
.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: 500px;
  padding: 10px;
  box-sizing: border-box;
}
.label {
  display: flex;
  justify-content:left;
  align-items: center;
}
ul{
  display: flex;
  padding: 8px;
}
li{
  list-style-type: none;
  padding: 8px;
}
.foot-button {
  margin-top: 20%;
  margin-left: 80%;
}
</style>
