<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.companyOptions[0].companyName}}</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.companyOptions[0].companyName}}</el-col>
                <el-col :span="7"> 法人：{{this.companyOptions[0].companyLegalPerson}}</el-col>
                <el-col :span="7"> 电话：{{this.companyOptions[0].companyPhone}}</el-col>
            </el-row>
            <el-row style="padding:8px">
                <el-col :span="7"> 统一社会信用识别码：{{this.companyOptions[0].companyId}}</el-col>
                <el-col :span="7"> 地址：{{this.companyOptions[0].companyaddress}}</el-col>
                <el-col :span="7"> 所属网格：{{this.companyOptions[0].owningGrid}}</el-col>
            </el-row>
            <el-row style="padding:8px">
                <el-col :span="7"> 网格管理员：{{this.companyOptions[0].gridManager}}</el-col>
                <el-col :span="7"> 全年流水：{{this.companyOptions[0].companyIncome}}</el-col>
                <el-col :span="7"> 是否存贷款意向：{{this.companyOptions[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.companyOptions[0].recording[0].manager+'在'+this.companyOptions[0].recording[0].recordTime}}</p>
                    <p style="margin-left:10px">{{'结束了'+this.companyOptions[0].recording[0].active+'客户反馈：'+this.companyOptions[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>
                    <p>线下经营</p>
                    <div v-if="companyUnderTags.length > 0" class="tag-list">
                        <el-tag
                          v-for="tag in companyUnderTags"
                          :key="tag"
                          closable
                          @close="removeUnderTag(tag)">{{tag}}</el-tag>
                    </div>
                    <el-button @click="addUnderMark = true">编辑</el-button>
                    <p>线上经营</p>
                    <div v-if="companyOnlineTags.length > 0" class="tag-list">
                        <el-tag
                          v-for="tag in companyOnlineTags"
                          :key="tag"
                          closable
                          @close="removeOnlineTag(tag)">{{tag}}</el-tag>
                    </div>
                    <el-button @click="addOnlineMark = true">编辑</el-button>
                    <p>店铺状态</p>
                    <div v-if="companyStatuTags.length > 0" class="tag-list">
                        <el-tag
                          v-for="tag in companyStatuTags"
                          :key="tag"
                          closable
                          @close="removeStatuTag(tag)">{{tag}}</el-tag>
                    </div>
                    <el-button @click="addStatuMark = true">编辑</el-button>
                 </el-col>
            </el-row>
        </el-form>
        <!-- 客户标签弹窗 -->
        <el-dialog
          title="编辑商户线下标签"
          :visible.sync="addUnderMark"
          width="30%"
          @close="resetUnderFrom">
          <el-form :model="tagUnderForm">
            <el-form-item label="商户线下标签">
                <el-input v-model="tagUnderForm.companyUnderTags" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addUnderMark">取消</el-button>
            <el-button type="primary" @click="saveUnderTag">确定</el-button>
          </span>
        </el-dialog>

        <el-dialog
          title="编辑商户线上标签"
          :visible.sync="addOnlineMark"
          width="30%"
          @close="resetOnlineFrom">
          <el-form :model="tagOnlineForm">
            <el-form-item label="商户线上标签">
                <el-input v-model="tagOnlineForm.companyOnlineTags" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addOnlineMark">取消</el-button>
            <el-button type="primary" @click="saveOnlineTag">确定</el-button>
          </span>
        </el-dialog>

        <el-dialog
          title="编辑店铺状态标签"
          :visible.sync="addStatuMark"
          width="30%"
          @close="resetStatuFrom">
          <el-form :model="tagStatuForm">
            <el-form-item label="店铺状态标签">
                <el-input v-model="tagStatuForm.companyStatuTag" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addStatuMark">取消</el-button>
            <el-button type="primary" @click="saveStatuTag">确定</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,
      //添加用户标签
      addUnderMark:false,
      addOnlineMark:false,
      addStatuMark:false,
      tagUnderForm:{
        companyUnderTag:''
      },
      tagOnlineForm:{
        companyOnlineTag:''
      },
      tagStatuForm:{
        companyStatuTag:''
      },
      companyUnderTags:[],
      companyOnlineTags:[],
      companyStatuTags:[],

      companyOptions:[
        {companyName:'CM乒乓球训练中心',companyLegalPerson:'陈梦',companyPhone:'0571-109xxx',companyId:'3002023G',companyaddress:'浙江省杭州市萧山区',owningGrid:'盈丰街道',gridManager:'马龙',companyIncome:1000000,intention:'否',
         recording:[{manager:"马龙",recordTime:"2024-08-10 13:45",active:"综合营销活动",backInformation:"无反馈"},
                    {manager:"赵云",recordTime:"2024-07-20 15:25",active:"客户回馈活动",backInformation:"无反馈"}]}
      ],
    };
  },
  methods: {
    handleUpdate(){},
    //编辑客户标签
    saveUnderTag(){
        if(this.tagUnderForm.companyUnderTag.trim() !== ''){
            this.companyUnderTags.push(this.tagUnderForm.companyUnderTag.trim());
            this.addUnderMark = false;
            this.resetUnderFrom();
        }else {
            this.$message.error('标签内容不能为空')
        }
    },
    removeUnderTag(tag){
        const index = this.companyUnderTags.indexOf(tag);
        if(index !== -1){
            this.companyUnderTags.splice(index, 1)
        }
    },
    saveOnlineTag(){
        if(this.tagOnlineForm.companyOnlineTag.trim() !== ''){
            this.companyOnlineTags.push(this.tagOnlineForm.companyOnlineTag.trim());
            this.addOnlineMark = false;
            this.resetOnlineFrom();
        }else {
            this.$message.error('标签内容不能为空')
        }
    },
    saveStatuTag(){
        if(this.tagStatuForm.companyStatuTag.trim() !== ''){
            this.companyStatuTags.push(this.tagStatuForm.companyStatuTag.trim());
            this.addStatuMark = false;
            this.resetStatuFrom();
        }else {
            this.$message.error('标签内容不能为空')
        }
    },
    
    removeOnlineTag(tag){
        const index = this.companyOnlineTags.indexOf(tag);
        if(index !== -1){
            this.companyOnlineTags.splice(index, 1)
        }
    },
    removeStatuTag(tag){
        const index = this.companyStatuTags.indexOf(tag);
        if(index !== -1){
            this.companyStatuTags.splice(index, 1)
        }
    },
    resetUnderFrom(){
        this.tagUnderForm.companyUnderTag = "";
    },
    resetOnlineFrom(){
        this.tagOnlineForm.companyOnlineTag = "";
    },
    resetStatuFrom(){
        this.tagStatuForm.companyStatuTag = "";
    },
    // 取消按钮
    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; */
}
.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;
}
</style>
