<template>
    <div class="list-wrap">
        <div class="list-header">
            <el-input class="search" v-model="input" placeholder="搜索">
                <template #prefix>
                    <el-icon><search /></el-icon>
                </template>
            </el-input>
            <div class="button" @click="handlePerson('add')">
                <img src="@/assets/images/foster-home/firend-icon.png" alt="" />
                新增客户
            </div>
        </div>
        <div class="list-content" :class="{'max-height':!isManage}">
            <collapse v-model="activeNames">
                <collapse-item :name="index" v-for="(item, index) in list" :key="index" :is-link="false">
                    <template #title>
                        <el-icon class="icon"><CaretRight /></el-icon>
                        {{ item.name }}
                        <span class="span">{{ item.children.length }}</span>
                    </template>
                    <template #value>
                        <div @click.stop="hadnleManage(item,index)" class="text">{{isManage?'管理':'取消管理'}}</div>
                    </template>
                    <div class="list-item" :class="{active:ele.checked}" v-for="(ele, idx) in item.children" :key="idx + ele.id">
                      <checkbox class="checkbox" @change="changeCheck" v-show="setingShow" v-model="ele.checked"></checkbox>
                        <div class="item-flex">
                            <img class="photo" src="@/assets/images/foster-home/image.png" alt="" />
                            <div class="item-text">
                                <div class="name">
                                    <span>{{ ele.name }}</span>
                                    <el-icon class="icon" @click.stop="handlePerson('edit')" color="#FFD489" size="16" ><Edit /></el-icon>
                                </div>
                                <div>电话：19875236548</div>
                                <div>地址：湖北省武汉市富里唱鑫园5023</div>
                            </div>
                        </div>
                    </div>
                </collapse-item>
            </collapse>
        </div>
        <div class="list-footer">
          <div class="settings" v-show="!isSetting && isManage" @click="handleGroup">新增分组</div>
          <div class="settings" v-show="!isSetting && !isManage" @click="handleSetting">批量设置</div>
          <div class="operation flex" v-show="isSetting && !setingShow">
            <div class="delete" @click="handleDelete">删除分组</div>
            <div class="btn-group flex">
              <div class="add" @click="handleAdd">添加</div>
              <div class="remove" @click="handleRemove">移除</div>
            </div>
          </div>
          <div class="controls flex" v-show="isSetting && setingShow">
            <div class="personnel flex">
              <div class="circle flex" v-show="filterList.length"><el-icon color="#000" size="11"><ArrowUpBold /></el-icon></div>
              <div class="text van-ellipsis">
                <template v-for="(item,index) in filterList" :key="index">
                  {{item.name}}<span v-show="filterList.length - 1 !== index">/</span>
                </template>
              </div>
            </div>
            <div class="delete" @click="handleGroup" v-show="listType==='other'">设置分组</div>
            <div class="delete" @click="handleOperation" v-show="listType!=='other'">{{operationType==='add'?'添加':'移出'}}({{filterList.length}})</div>
          </div>
        </div>
    </div>
  <!-- 添加分组 -->
  <popup v-model:show="showGroup" closeable round class="popup-custom" :close-on-click-overlay="false">
    <div class="popup-title">添加分组</div>
    <div class="popup-content">
      <el-input class="input" v-model="inputVal" size="large" placeholder="请输入名称" />
    </div>
    <div class="popup-footer">
      <div class="cancel" @click="handleCancel">取消</div>
      <div @click="handleAddGroup">添加</div>
    </div>
  </popup>
  <!-- 新增客户、编辑客户 -->
  <popup v-model:show="showClient" closeable round class="popup-custom" :close-on-click-overlay="false">
    <div class="popup-title">{{typePopup==='add'?'新增客户':'编辑客户'}}</div>
    <div class="popup-content">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="rule-form"
        size="large"
      >
        <el-form-item label="姓名" prop="name">
          <el-input class="input" v-model="ruleForm.name" size="large" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="电话" prop="tel">
          <el-input class="input" v-model="ruleForm.tel" size="large" placeholder="请输入电话号码" />
        </el-form-item>
        <el-form-item label="地址" prop="adress">
          <el-input class="input" v-model="ruleForm.adress" size="large" placeholder="请输入地址" />
        </el-form-item>
        <el-form-item label="头像" prop="photo">
          <!-- <upload></upload> -->
        </el-form-item>
      </el-form>
    </div>
    <div class="popup-footer">
      <div class="cancel" @click="resetForm">取消</div>
      <div @click="submitForm">添加</div>
    </div>
  </popup>
</template>

<script setup>
import { ref,reactive } from "vue";
import { Collapse, CollapseItem,Checkbox,Popup,showConfirmDialog } from "vant";
import { useRouter } from "vue-router";
import { ElMessage } from 'element-plus'
import { deepClone } from "@/common/commonFun";
import upload from "@/components/common/upload.vue";
const router = useRouter();

//新建分组
const showGroupPopup = ref(false);
const showPopup = () => {
  showGroupPopup.value = true;
};
const input = ref("");
const distributionShow = ref(false);

// 果树选中的监听事件
const checkedList = ref([])
const changeActive = (arr) =>{
  checkedList.value = arr
}

const isManage = ref(true)
// const curIndex = ref(0)
const listType = ref('')
// 管理
const hadnleManage = (value,index) => {
  // console.log('val',value);
  listType.value = 'often'
  isSetting.value = true
  if(value.name==='未分组列表'){
    listType.value = 'other'
    isSetting.value = false
  }
  // curIndex.value = index
  isManage.value = !isManage.value
  if(!isManage.value){
    list.value = deepClone([defalutList.value[index]])
  }else{
    resetList()
  }
};

const resetList = () =>{
  
  list.value = deepClone(defalutList.value)
  setingShow.value = false
  isSetting.value = false
  isManage.value = true
}

const isSetting = ref(false)
//设置
const handleSetting = () =>{
  isSetting.value = true
  if(listType.value==='other'){
    setingShow.value = true
  }
}

const operationType = ref('')
//添加
const handleAdd = () =>{
  operationType.value = 'add'
  setingShow.value = true
}

//移除
const setingShow = ref(false)
const handleRemove = () =>{
  operationType.value = 'remove'
  setingShow.value = true
}

const filterList = ref([]);
const changeCheck = () =>{
  filterList.value = list.value[0].children.filter((item) => item.checked);
}

//设置分组
const showGroup = ref(false)
const inputVal = ref('')
const handleGroup = () =>{
  // if(filterList.value.length<1) return ElMessage.warning('请选择用户')
  showGroup.value = true
}

//添加分组
const handleAddGroup = () =>{
  if(inputVal.value.length<1) return ElMessage.warning('请输入名称')
  handleCancel()
  ElMessage.success('添加成功')
}
const handleCancel = () =>{
  showGroup.value = false
  inputVal.value = ''
}

//删除分组
const handleDelete = () =>{
  showConfirmDialog({
    title: '提示',
    message:'是否删除该分组！',
  })
  .then(() => {
    // on confirm
  })
  .catch(() => {
    // on cancel
  });
}

//新增客户
const typePopup = ref('')
const handlePerson = (type) =>{
  typePopup.value = type
  showClient.value = true
}

//移出、添加
const handleOperation = () =>{
  if(filterList.value.length<1) return ElMessage.warning('请选择用户')
  if(operationType.value === 'add'){
    ElMessage.success('添加成功')
  }else{
    ElMessage.success('移出成功')
  }
  resetList()
}

const showClient = ref(false)
const ruleForm = reactive({
  name:'',
  tel:'',
  adress:''
})
const rules = reactive({
  name: { required: true, message: '请输入用户名称', trigger: ['blur','change'] },
  tel: { required: true, message: '请输入电话号码', trigger: ['blur','change'] },
})

const ruleFormRef = ref(null)
const submitForm = async () =>{
  if (!ruleFormRef.value) return
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      ElMessage.success('添加成功')
      showClient.value = false
    } else {
      console.log('error submit!')
    }
  })
}

const resetForm = () =>{
  if (!ruleFormRef.value) return
  ruleFormRef.value.resetFields()
  showClient.value = false
}

const defalutList = ref([
    {
        name: "常用列表",
        id: "1",
        isGroup: 0,
        children: [
            {
                id: "3",
                name: "周浩",
                checked: false,
            },
            {
                id: "4",
                name: "王丽丽",
                checked: false,
            },
        ],
    },
    {
        name: "未分组列表",
        id: "2",
        isGroup: 1,
        children: [
            {
                id: "5",
                name: "李莉",
                checked: false,
            },
            {
                id: "6",
                name: "陈林",
                checked: false,
            },
        ],
    },
])
const list = ref(deepClone(defalutList.value));

const activeNames = ref([0]);

</script>

<style lang="scss" scoped>
.list-wrap {
    width: 100%;
    height: 100%;
    .list-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .search {
            width: 90px;
            margin-right: 10px;
            --el-input-placeholder-color: rgba(255, 212, 137, 0.6);
            ::v-deep {
                .el-input__wrapper {
                    box-shadow: none;
                    border: 1px solid rgba(255, 212, 137, 0.6);
                    background: transparent;
                }
                .el-input__prefix,
                .el-input__inner {
                    color: rgba(255, 212, 137, 0.6);
                }
            }
        }
        .button {
            width: calc(100% - 100px);
            color: #FFD489;
            background: rgba(255, 212, 137, 0.06);
            border: 1px solid rgba(255, 212, 137, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px;
            border-radius: 5px;
            cursor: pointer;
            img {
                width: 20px;
                height: 17px;
                margin-right: 6px;
            }
        }
    }
    .list-content {
        width: 100%;
        height: calc(100% - 50px);
        margin-top: 12px;
        &.max-height{
          height: calc(100% - 50px - 55px);
        }
        .text {
            color: #FFD489;
            cursor: pointer;
        }
        ::v-deep {
            .van-cell:after,.van-collapse-item--border:after,.van-hairline--top-bottom:after{
              border: none !important;
            }
            .van-cell {
                border-radius: 5px 5px 0 0;
                justify-content: space-between;
                background: rgba(255, 255, 255, 0.08);
                color: #fff;
                .van-cell__value {
                    flex: none;
                }
                .van-cell__title {
                    display: flex;
                    align-items: center;
                    .icon {
                        margin-right: 3px;
                        color: #bfbfbf;
                        font-size: 16px;
                    }
                    .span {
                        color: rgba(255, 255, 255, 0.4);
                        margin-left: 10px;
                    }
                }
            }
            .van-collapse-item__content{
              background: transparent;
              padding: 10px 0 0 0;
            }
            .van-collapse-item__title--expanded {
                .van-cell__title {
                    .icon {
                        transform: rotate(90deg);
                    }
                }
            }
            .van-collapse-item + .van-collapse-item {
                margin-top: 12px;
            }

            .van-checkbox__icon--checked .van-icon{
              background-color: #F7BE5A;
              border-color: #F7BE5A;
              color: #000;
            }
        }
        .list-item {
            border-radius: 6px;
            position: relative;
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid transparent;
            padding: 8px 10px;
            &.active{
              background: rgba(243, 193, 29, 0.1);
              border-color: #FFD489;
            }
            .checkbox{
              margin-right: 12px;
            }
            .item-flex {
                display: flex;
                align-items: center;
            }
            .photo {
                width: 68px;
                height: 68px;
                border-radius: 8px;
                margin-right: 12px;
            }
            .item-text {
                color: #999999;
                font-size: 12px;
                line-height: 1.6;
                .name {
                    display: flex;
                    align-items: center;
                    span {
                        font-size: 15px;
                        color: #FFFFFF;
                        font-weight: 500;
                        margin-right: 5px;
                    }
                    .icon{
                      cursor: pointer;
                    }
                }
            }
        }
        .list-item + .list-item {
            margin-top: 12px;
        }
    }
    .list-footer{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(255, 255, 255, 0.08);
      display: flex;
      justify-content: center;
      box-sizing: border-box;
      padding: 11px;
      .settings{
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        padding: 8px 36px;
        color: #fff;
        cursor: pointer;
      }
      .flex{
        display: flex;
        align-items: center;
      }
      .delete{
        border: 1px solid #FFD489;
        border-radius: 4px;
        padding: 8px 19px;
        color: #FFD489;
        cursor: pointer;
      }
      .operation{
        width: 100%;
        justify-content: space-between;
        .btn-group{
          div{
            background: rgba(255, 255, 255, 0.1);
            padding: 8px 19px;
            border-radius: 4px;
            cursor: pointer;
          }
          .add{
            margin-right: 10px;
          }
        }
      }
      .controls{
        width: 100%;
        justify-content: space-between;
        .personnel{
          width: calc(100% - 100px);
          .circle{
            width: 16px;
            height: 16px;
            background: #FFD489;
            border-radius: 50%;
            justify-content: center;
            margin-right: 8px;
          }
          .text{
            width: 90%;
          }
        }
        .delete{
          background: #FFD489;
          color: #000;
          width: 85px;
          box-sizing: border-box;
          text-align: center;
          padding: 8px;
        }
      }
    }
}
.popup-custom{
  // width: 24%;
  width: 504px;
  padding: 31px 25px;
  box-sizing: border-box;
  background: #232323;
  ::v-deep{
    .van-popup__close-icon{
      color: #FFFFFF;
    }
  }
  .popup-title{
    text-align: center;
    color: #FFFFFF;
    font-size: 24px;
    margin-bottom: 15px;
  }
  .popup-content{
    width: 100%;
    ::v-deep {
      .el-form-item__label {
        color: rgba(255, 255, 255, 0.4);
      }
      .el-input__wrapper {
        background: transparent;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.46) inset;
      }
    }
    .input{
      height: 46px;
      font-size: 16px;
    }
  }
  .popup-footer{
    width: 100%;
    display: flex;
    border-top: 1px solid rgba(0, 0, 0,0.1);
    margin-top: 30px;
    padding-top: 25px;
    div{
      flex: 1;
      background: linear-gradient(120deg,#FFD887,#ED9E1E);
      border-radius: 6px;
      padding: 13px;
      font-size: 20px;
      color: #fff;
      text-align: center;
      cursor: pointer;
    }
    .cancel{
      color: #000;
      background: #F3F3F3;
      margin-right: 30px;
    }
  }
}
</style>
