<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 @success="getCustomerPage()"></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>
                          <div>{{ tItem.Remark }}</div>
                          <div class="img_box">
                            <img v-for="(e,i) in tItem.ImageList" :key="i" :src="e" class="img" />
                          </div>
                          <div class="file_box">
                            <div v-for="(e,i) in tItem.FileList" :key="i" class="flex items-center file_name">附件：<span style="color:#000">{{ e.FileName }}</span>
                              <div class="del_btn" @click="DownLoadFileByUrl(e.FileUrl,e.FileName)">下载</div>
                            </div>
                          </div>
                        </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,
  provide
} from 'vue'
import { DownLoadFileByUrl } from '@/utils/upload'
import message from '@/utils/message'
import customer from '@/api/customer'
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
    })
    provide('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) => {
      customer.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) => {
      customer.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;
      }
      customer.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;
      customer.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();
      customer.saveCustomLabel(labelMsg).then(res => {
        getCustomInfo(msg);
        message.successMsg(res.data.Message);
      })
    }
    //获取客户旅程类型
    const getCustomerTripType = (param: any) => {
      customer.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 = () => {
      customer.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,
      DownLoadFileByUrl
    }
  }
}

</script>
<style lang="scss" scoped>
.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;
}
.img_box {
  margin-top: 10px;
  .img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    box-shadow: 0px 10px 30px 0px rgba(36, 36, 36, 0.2);
    margin: 5px;
    border-radius: 10px;
  }
}
.file_box{
   margin-top: 10px;
   .file_name{
     font-size: 14px;
     color: #9696A6;
     margin: 3px 0;
     .del_btn {
        margin-left: 10px;
        padding-left: 5px;
        border-left: 1px solid var(--q-primary);
        color: var(--q-primary);
        cursor: pointer;
      }
   }
}
</style>
