<template>
  <q-dialog v-model="persistent" full-height maximized position="right" persistent @hide="closeCutomer"
    transition-show="slide-left">
    <div class="customMain">
      <div class="custom_Top">
        <div class="custom_HLeft">
          <div class="nameplate_avatar">
            <img style="width:100%;height:100%;" :src="data.dataList.WeChatPhoto" alt="" />
          </div>
          <div class="Name_List">
            <div class="F_16">{{data.dataList.CustomerName}}</div>
            <div class="wechat_Name">{{data.dataList.WeChatName}}</div>
          </div>
        </div>
        <div class="custom_HRight">
          <q-btn color="primary" size="sm" label="创建待办" />
        </div>
      </div>
      <div class="custom_Bottom">
        <div class="detail-info">
          <div class="info_title">客户画像</div>
          <div class="info_content" style="margin-bottom:0;">
            <div class="customer_info_component">
              <div class="customer_info_Stage" v-if="!data.isShowEdit" @click="getCustomEdit(1,data.isShowEdit)">
                <div class="stage_label">客户阶段</div>
                <div class="stage_value">{{data.dataList.StageName}}</div>
              </div>
              <div class="customer_info_edit" v-else>
                <div class="edit_bar">
                  <div class="item_label">客户阶段</div>
                  <div>
                    <q-btn color="white" size="sm" text-color="black" label="取消"
                      @click="getCustomEdit(1,data.isShowEdit)" />
                    <q-btn color="primary" style="margin-left:10px;" size="sm" label="确定" @click="saveCustomGate" />
                  </div>
                </div>
                <div class="edit_content">
                  <div class="edit_info_wrap">
                    <q-select filled option-value="Id" size="sm" v-model="cutomMsg.Value" option-label="Name"
                      :options="data.customData" emit-value map-options label="请选择客户阶段" />
                  </div>
                </div>
              </div>
            </div>
            <div class="customer_info_component" v-for="(item,index) in data.FiledDetailList" :key="index">
              <!-- 1单行文本 2多行文本 3单选 4多选 5日期 6日期时间 7数值 -->
              <template v-if="item.Type==1">
                <div class="customer_info_Stage" v-if="!item.isShowEdit" @click="getCustomEdit(2,item)">
                  <div class="stage_label">{{item.Name}}</div>
                  <div class="stage_value">{{item.Value}}</div>
                </div>
                <div class="customer_info_edit" v-else>
                  <div class="edit_bar">
                    <div class="item_label">{{item.Name}}</div>
                    <div>
                      <q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomCancel(item)" />
                      <q-btn color="primary" style="margin-left:10px;" size="sm" label="确定"
                        @click="saveCustomInfo(item)" />
                    </div>
                  </div>
                  <div class="edit_content">
                    <div class="edit_info_wrap">
                      <q-input filled v-model="item.Value" placeholder="请输入要修改的值"></q-input>
                    </div>
                  </div>
                </div>
              </template>
              <template v-if="item.Type==2">
                <div class="customer_info_Stage" v-if="!item.isShowEdit" @click="getCustomEdit(2,item)">
                  <div class="stage_label">{{item.Name}}</div>
                  <div class="stage_value">{{item.Value}}</div>
                </div>
                <div class="customer_info_edit" v-else>
                  <div class="edit_bar">
                    <div class="item_label">{{item.Name}}</div>
                    <div>
                      <q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomCancel(item)" />
                      <q-btn color="primary" style="margin-left:10px;" size="sm" label="确定"
                        @click="saveCustomInfo(item)" />
                    </div>
                  </div>
                  <div class="edit_content">
                    <div class="edit_info_wrap">
                      <q-input filled v-model="item.Value" maxlength="50" placeholder="请输入要修改的值"></q-input>
                    </div>
                  </div>
                </div>
              </template>
              <template v-if="item.Type==3">
                <div class="customer_info_Stage" v-if="!item.isShowEdit" @click="getCustomEdit(2,item)">
                  <div class="stage_label">{{item.Name}}</div>
                  <div class="stage_value">{{getSingle(item)}}</div>
                </div>
                <div class="customer_info_edit" v-else>
                  <div class="edit_bar">
                    <div class="item_label">{{item.Name}}</div>
                    <div>
                      <q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomCancel(item)" />
                      <q-btn color="primary" style="margin-left:10px;" size="sm" label="确定"
                        @click="saveCustomInfo(item)" />
                    </div>
                  </div>
                  <div class="edit_content">
                    <div class="edit_info_wrap">
                      <q-select filled option-value="Id" size="sm" v-model="item.Value" option-label="Name"
                        :options="item.OptionsList" emit-value map-options label="请选择" />
                    </div>
                  </div>
                </div>
              </template>
              <template v-if="item.Type==4">
                <div class="customer_info_Stage" v-if="!item.isShowEdit" @click="getCustomEdit(2,item)">
                  <div class="stage_label">{{item.Name}}</div>
                  <div class="stage_value">{{getMutipleCk(item)}}</div>
                </div>
                <div class="customer_info_edit" v-else>
                  <div class="edit_bar">
                    <div class="item_label">{{item.Name}}</div>
                    <div>
                      <q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomCancel(item)" />
                      <q-btn color="primary" style="margin-left:10px;" size="sm" label="确定"
                        @click="saveCustomInfo(item)" />
                    </div>
                  </div>
                  <div class="edit_content">
                    <div class="edit_info_wrap">
                      <q-select filled multiple use-chips option-value="Id" size="sm" v-model="data.multiArr"
                        option-label="Name" :options="item.OptionsList" emit-value map-options label="请选择" />
                    </div>
                  </div>
                </div>
              </template>
              <template v-if="item.Type==5">
                <div class="customer_info_Stage" v-if="!item.isShowEdit" @click="getCustomEdit(2,item)">
                  <div class="stage_label">{{item.Name}}</div>
                  <div class="stage_value">{{item.Value}}</div>
                </div>
                <div class="customer_info_edit" v-else>
                  <div class="edit_bar">
                    <div class="item_label">{{item.Name}}</div>
                    <div class=""></div>
                    <div>
                      <q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomCancel(item)" />
                      <q-btn color="primary" style="margin-left:10px;" size="sm" label="确定"
                        @click="saveCustomInfo(item)" />
                    </div>
                  </div>
                  <div class="edit_content">
                    <div class="edit_info_wrap">
                      <q-input filled v-model="item.Value" mask="date" :rules="['date']">
                        <template v-slot:append>
                          <q-icon name="event" class="cursor-pointer">
                            <q-popup-proxy ref="qDateProxy" cover transition-show="scale" transition-hide="scale">
                              <q-date v-model="item.Value">
                                <div class="row items-center justify-end">
                                  <q-btn v-close-popup label="Close" color="primary" flat />
                                </div>
                              </q-date>
                            </q-popup-proxy>
                          </q-icon>
                        </template>
                      </q-input>
                    </div>
                  </div>
                </div>
              </template>
              <template v-if="item.Type==6">
                <div class="customer_info_Stage" v-if="!item.isShowEdit" @click="getCustomEdit(2,item)">
                  <div class="stage_label">{{item.Name}}</div>
                  <div class="stage_value">{{item.Value}}</div>
                </div>
                <div class="customer_info_edit" v-else>
                  <div class="edit_bar">
                    <div class="item_label">{{item.Name}}</div>
                    <div>
                      <q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomCancel(item)" />
                      <q-btn color="primary" style="margin-left:10px;" size="sm" label="确定"
                        @click="saveCustomInfo(item)" />
                    </div>
                  </div>
                  <div class="edit_content">
                    <div class="edit_info_wrap">
                      <q-input filled v-model="item.Value" mask="date" :rules="['date']">
                        <template v-slot:append>
                          <q-icon name="event" class="cursor-pointer">
                            <q-popup-proxy ref="qDateProxy" cover transition-show="scale" transition-hide="scale">
                              <q-date v-model="item.Value">
                                <div class="row items-center justify-end">
                                  <q-btn v-close-popup label="Close" color="primary" flat />
                                </div>
                              </q-date>
                            </q-popup-proxy>
                          </q-icon>
                        </template>
                      </q-input>
                    </div>
                  </div>
                </div>
              </template>
              <template v-if="item.Type==7">
                <div class="customer_info_Stage" v-if="!item.isShowEdit" @click="getCustomEdit(2,item)">
                  <div class="stage_label">{{item.Name}}</div>
                  <div class="stage_value">{{item.Value}}</div>
                </div>
                <div class="customer_info_edit" v-else>
                  <div class="edit_bar">
                    <div class="item_label">{{item.Name}}</div>
                    <div>
                      <q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomCancel(item)" />
                      <q-btn color="primary" style="margin-left:10px;" size="sm" label="确定"
                        @click="saveCustomInfo(item)" />
                    </div>
                  </div>
                  <div class="edit_content">
                    <div class="edit_info_wrap">
                      <q-input filled v-model="item.Value" maxlength="20" placeholder="数值"></q-input>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <div class="custom_Line"></div>
          <div class="info_item">
            <div class="item_label">客户标签</div>
          </div>
          <div class="customTag_component">
            <div class="custom_Edit" @click="isshowlabel=true">编辑</div>
            <div v-for="(tItem,tIndex) in data.dataList.LableList" :key="tIndex">
              <q-chip square color="primary" text-color="white">{{tItem.Name}}</q-chip>
            </div>
          </div>
          <div class="info_title">客户跟进</div>
          <div class="info_content">
            <div class="info_item">
              <div class="item_label">上次跟进</div>
              <div class="item_value">{{data.dataList.LastFollowUpTime}}</div>
            </div>
            <div class="info_item">
              <div class="item_label">创建时间</div>
              <div class="item_value">{{data.dataList.CreateTime}}</div>
            </div>
            <div class="info_item">
              <div class="item_label">添加好友</div>
              <div class="item_value">{{data.dataList.FriendTime}}</div>
            </div>
            <div class="info_item">
              <div class="item_label">负责人</div>
              <div class="item_value">{{data.dataList.EmpName}}</div>
            </div>
            <div class="info_item">
              <div class="item_label">客户ID</div>
              <div class="item_value">{{data.dataList.ExternalUserId}}</div>
            </div>
          </div>
        </div>
        <div class="detail-travel">
          <div class="detail_first">
            <q-tabs v-model="data.ckedTab" dense align="left" class="text-teal">
              <q-tab name="1" label="客户旅程" />
              <q-tab name="2" label="商机" />
              <q-tab name="3" label="订单" />
              <q-tab name="4" label="客户文件" />
              <q-tab name="5" label="合同" />
              <q-tab name="6" label="工单" />
            </q-tabs>
            <div style="flex:1;overflow:hidden;">
              <div class="detail_Main">
                <div class="tripTypeContent" style="flex-shrink:0">
                  <div v-for="(qItem,qIndex) in data.tripTypeArr" :key="qIndex"
                    :class="{'ckedClass':qIndex==customTripMsg.Type}" @click="getckedType(qItem)">{{qItem.Name}}</div>
                </div>
                <div class="follow_Component" style="flex-shrink:0">
                  <fileUpload></fileUpload>
                  <!-- <div class="editer_input">
                    <q-input v-model="text" style="50px" maxlength="1000" type="textarea" placeholder="请填写跟进记录" />
                  </div> -->
                </div>
                <div style="display:flex;flex:1;flex-direction: column;overflow:hidden;">
                  <div class="TimeLineDiv">
                    <q-timeline color="primary">
                      <q-timeline-entry v-for="(tItem,tIndex) in data.tripDataList" :key="tIndex">
                        <template v-slot:title>
                          <div style="font-size:14px;">{{tItem.Description}}</div>
                        </template>
                        <template v-slot:subtitle>
                          <div class="customUpdateTime">
                            <div>{{tItem.UpdateTime}}</div>
                            <div>{{tItem.UpdateByName}}</div>
                          </div>
                        </template>
                        <div>
                          {{tItem.Remark}}
                        </div>
                      </q-timeline-entry>
                    </q-timeline>
                  </div>
                </div>
                <div style="margin:20px 0;">
                  <q-pagination class="full-width justify-end" v-model="customTripMsg.pageIndex" color="primary"
                  :max="data.TripPageCount" input @update:model-value="changePage" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="dialog-out-close" @click="closeCutomer">
        <q-icon name="iconfont icon-close" size="15px" />
      </div>
      <labelgroup v-if="isshowlabel" :list="LableList" @close="isshowlabel = false" @submit="getlabel"></labelgroup>
    </div>
  </q-dialog>
</template>
<script lang="ts">
  import {
    ref,
    reactive,
    onMounted
  } from 'vue'
  import message from '@/utils/message'
  import customer2 from '@/api/customer2'
  import labelgroup from '@/components/customer/label-group.vue'
  import fileUpload from '@/components/common/fileUpload.vue'
  export default {
    props: {
      //样式字符串
      CustomerId: {
        type: Number,
        default: 0
      },
    },
    components: {
      labelgroup,
      fileUpload
    },
    setup(props, ctx) {
      let isshowlabel = ref(false) //标签弹出显示
      let LableList = ref < Array < any > | string > ([]) //标签的数组

      interface msgParam {
        CustomerId: number
      }
      interface dataParam {
        [key: string]: any
      }
      const msg = reactive < msgParam > ({
        CustomerId: props.CustomerId
      })
      //客户信息保存数据
      const cutomMsg = reactive < dataParam > ({
        CustomerId: 0,
        Type: 2,
        CustomId: 0, //自定义字段Id
        Value: ''
      })
      //客户旅程分页列表
      const customTripMsg = reactive < dataParam > ({
        pageIndex: 1,
        pageSize: 10,
        CustomerId: 0,
        Type: 0
      })
      const persistent = ref(true)
      const closeCutomer = () => {
        ctx.emit('close');
      }
      const data = reactive < dataParam > ({
        dataList: {},
        customData: [],
        FiledDetailList: [],
        isShowEdit: false,
        multiArr: [],
        ckedTab: '1',
        First: 1,
        tripTypeArr: [],
        tripDataList: [],
        TripPageCount: 0
      })
      //获取详情数据
      const getCustomInfo = (param: msgParam) => {
        customer2.getCustomInfo(param).then(res => {
          data.dataList = res.data.Data;
          data.FiledDetailList = res.data.Data.FiledDetailList;
          data.FiledDetailList.forEach(x => {
            x.isShowEdit = false;
            if (x.Type == 4) {
              data.multiArr = x.Value.split(',')
              data.multiArr = data.multiArr.map(item => {
                return +item;
              })
            }
            if (x.Type == 3) {
              x.Value = parseInt(x.Value);
            }
          });
          cutomMsg.Value = data.dataList.StageId;
        })
      }
      //获取客户阶段下拉
      const getCustomStage = (param) => {
        customer2.getCustomStageList(param).then(res => {
          data.customData = res.data.Data;
        })
      }
      //点击切换编辑和查看
      const getCustomEdit = (type, e) => {
        data.isShowEdit = false;
        data.FiledDetailList.forEach(x => {
          x.isShowEdit = false;
        });
        if (type == 1) {
          data.isShowEdit = !e;
        }
        if (type == 2) {
          e.isShowEdit = !e.isShowEdit;
        }
      }
      //点击单个保存自定义客户信息
      const saveCustomInfo = (e) => {
        cutomMsg.CustomerId = msg.CustomerId;
        cutomMsg.CustomId = e.Id;
        cutomMsg.Type = 2;
        if (e.Type == 4) {
          cutomMsg.Value = data.multiArr.toString();
        } else {
          cutomMsg.Value = e.Value;
        }
        customer2.saveCustomInfo(cutomMsg).then(res => {
          getCustomInfo(msg);
          message.successMsg(res.data.Message);
        })
      }
      const getCustomCancel = (e) => {
        e.isShowEdit = !e.isShowEdit;
      }
      const saveCustomGate = () => {
        cutomMsg.CustomerId = msg.CustomerId;
        cutomMsg.Type = 1;
        cutomMsg.CustomId = 0;
        customer2.saveCustomInfo(cutomMsg).then(res => {
          getCustomInfo(msg);
          data.isShowEdit = false;
          message.successMsg(res.data.Message);
        })
      }
      //获取单选值
      const getSingle = (e) => {
        if (e.Value && e.OptionsList.length > 0) {
          const ckedObj = e.OptionsList.find((x: any) => {
            return x.Id == e.Value
          })
          if (ckedObj) {
            return ckedObj.Name
          }
        }
      }
      //获取多选
      const getMutipleCk = (e) => {
        if (e.Value && e.OptionsList.length > 0) {
          const ValArr = e.Value.split(',');
          let myArr: any[] = [];
          for (let i = 0; i < ValArr.length; i++) {
            for (let j = 0; j < e.OptionsList.length; j++) {
              if (ValArr[i] == e.OptionsList[j].Id) {
                myArr.push(e.OptionsList[j].Name);
              }
            }
          }
          return myArr.toString();
        }
      }
      const getlabel = (list) => {
        isshowlabel.value = false;
        console.log(list);
        const labelMsg = reactive < dataParam > ({
          CustomerIds: 0,
          LableIds: ''
        })
        labelMsg.CustomerIds = msg.CustomerId;
        let ckedArr: any[] = [];
        list.forEach(x => {
          ckedArr.push(x.Id);
        })
        labelMsg.LableIds = ckedArr.toString();
        customer2.saveCustomLabel(labelMsg).then(res => {
          getCustomInfo(msg);
          message.successMsg(res.data.Message);
        })
      }
      //获取客户旅程类型
      const getCustomerTripType = (param: {}) => {
        customer2.getCustomerTripType(param).then(res => {
          console.log(res, 'trip数据');
          data.tripTypeArr = res.data.Data;
          let Obj = {
            Id: 0,
            Name: '全部'
          }
          data.tripTypeArr.unshift(Obj);
        })
      }
      //点击旅客类型
      const getckedType = (e) => {
        console.log(e, 'eee');
        customTripMsg.CustomerId = msg.CustomerId;
        customTripMsg.Type = e.Id;
        getCustomerPage();
      }
      //获取客户旅程分页列表
      const getCustomerPage = () => {
        customer2.getCustomerTripPage(customTripMsg).then(res => {
          console.log(res, '旅程分页数据');
          data.tripDataList = res.data.Data.PageData;
          data.TripPageCount = res.data.Data.PageCount;
        })
      }
      const changePage = (e) => {
        customTripMsg.pageIndex = e;
        getCustomerPage();
      }
      onMounted(() => {
        getCustomInfo(msg);
        getCustomStage({});
        getCustomerTripType({})
        getCustomerPage();
      })
      return {
        persistent,
        closeCutomer,
        data,
        cutomMsg,
        getCustomEdit,
        saveCustomInfo,
        saveCustomGate,
        getCustomCancel,
        getSingle,
        getMutipleCk,
        isshowlabel,
        LableList,
        getlabel,
        getCustomerTripType,
        customTripMsg,
        getckedType,
        changePage
      }
    }
  }

</script>
<style lang="scss">
  .custom_RModel {
    width: 500px;
    height: 100%;
  }

  .customMain {
    width: 1000px !important;
    display: flex;
    flex-direction: column;
    height: 100 vh;
    padding: 15px 17px 0 17px;
    background-color: #f4f4f6;
  }

  .custom_Top {
    width: 100%;
    padding: 22px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .custom_HLeft {
    display: flex;
  }

  .nameplate_avatar {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    margin-right: 14px;
    border-radius: 5px;
    overflow: hidden;
  }

  .F_16 {
    font-size: 16px;
  }

  .Name_List {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
  }

  .wechat_Name {
    color: #9999a8;
    display: flex;
    font-size: 14px;
  }

  .custom_Bottom {
    margin-top: 17px;
    flex: 1;
    display: flex;
    margin-top: 17px;
    overflow: hidden;
  }

  .detail-info {
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 350px;
    height: 100%;
    padding: 28px 0;
    margin-right: 13px;
    background: #fff;
    border-radius: 8px 8px 0 0;
    overflow: auto;
  }

  .detail-info::-webkit-scrollbar {
    display: none;
  }

  .detail-travel {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding-top: 28px;
    background: #fff;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
  }

  .info_title {
    padding: 0 22px;
    margin-bottom: 20px;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 700;
    font-family: Microsoft YaHei, Avenir, Helvetica, Arial, sans-serif !important
  }

  .info_content {
    margin-bottom: 30px;
  }

  .customer_info_Stage {
    width: 100%;
    padding: 0 7px;
    cursor: pointer;
    display: flex;
    align-content: center;
    width: 100%;
    padding: 12px 22px;
    justify-content: space-between;
  }

  .stage_label {
    color: #606266;
    flex-shrink: 0;
    margin-right: 10px;
  }

  .stage_value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .customer_info_component {
    width: 100%;
  }

  .edit_bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 22px;
  }

  .item_label {
    color: #606266;
    flex-shrink: 0;
    width: 120px;
    font-size: 14px;
  }

  .edit_info_wrap {
    padding: 0 22px 12px;
  }

  .info_item {
    position: relative;
    display: flex;
    padding: 12px 22px;
  }

  .item_value {
    flex: 1;
    font-size: 14px;
    word-break: break-all;
    overflow: hidden;
  }

  .custom_Line {
    width: calc(100% - 44px);
    margin: 16px 22px;
    border-bottom: 1px solid #d7d7d7;
  }

  .custom_Edit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 78px;
    height: 26px;
    margin-right: 3px;
    border: 1px dashed #858598;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
  }

  .dialog-out-close {
    background-color: #3470ff;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    width: 20px;
    height: 26px;
    color: #fff;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: -20px;
    text-align: center;
  }

  .customTag_component {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px 22px;
  }

  .tripTypeContent {
    display: flex;
    margin-top: 20px;
    overflow-x: auto;
    white-space: nowrap;
  }

  .ckedClass {
    color: #3470ff;
    font-weight: 700;
  }

  .tripTypeContent div {
    margin-right: 20px;
    cursor: pointer;
  }

  .TimeLineDiv {
    margin-top: 20px;
    overflow: auto;
    // height:620px;
    flex: 1;
    height: 100%;
    padding-right: 20px;
  }

  .q-timeline__title {
    margin-bottom: 5px;
  }

  .customUpdateTime {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #9696a6;
  }

  .q-timeline__subtitle {
    opacity: 1;
    font-weight: normal;
  }

  .follow_Component {
    padding: 0 22px;
    margin-top: 10px;
    width: 100%;
    background-color: #f6f6f6;
    border-radius: 5px;
  }
 

  .q-textarea .q-field__native {
    padding-top: 0;
  }

  .editer_input .q-field__native {
    height: 50px;
  }
  .detail_first{
    margin:0 22px;
    display:flex;
    flex-direction:column;
    height:100%;
  }
  .detail_Main{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding-top: 10px;
    overflow: hidden;
  }
</style>
