<template>
  <div class="chat-outer">
    <div class="chat-inner">
      <div id="chat-detail">
        <audio
          controls="controls"
          ref="audioRef"
          style="display: none;"
          :src="audioChat"
          autoplay="autoplay"
        ></audio>
        <chat-search
          v-if="showSearch"
          :showBack="false"
          :chatDetailObj="chatDetailObj"
          :current_cursor="current_cursor"
          @closeSearch="
            (item) => {
              closeSearch(item);
            }
          "
        ></chat-search>
        <template v-if="!showSearch">
          <slot name="header">
            <!-- <WlNavbar
              v-if="showChatDetailNavBar"
              :showback="!showClose"
              :showclose="showClose"
              :title="''"
              :titleRight="title"
              @click-left="clickLeft"
            ></WlNavbar> -->
          </slot>
          <div
            class="head"
            v-if="
              !$route.query.progress_id &&
                chatDetailObj &&
                !chatDetailObj.chat_remark &&
                $route.query.history_type != `KF_DIALOGUE`
            "
            :class="[{ 'no-left': !search.type, 'no-right': search.date }]"
          >
            <div class="left" v-show="search.type">
              <van-popover
                placement="bottom-start"
                v-model="showPopover"
                :actions="allChatType"
                :overlay="true"
                @select="onSelect"
                trigger="click"
              >
                <template #reference>
                  <div class="chat_type">
                    <div>{{ chat_type }}</div>
                    <img :src="require('@packages/assets/images/common/select_plat.png')" alt="" />
                  </div>
                </template>
              </van-popover>
            </div>
            <div class="right">
              <form action="/">
                <van-search
                  v-model="value"
                  class="common_search"
                  placeholder="搜索"
                  @click="showSearchMethods()"
                >
                  <template #left-icon>
                    <img
                      class="left_icon"
                      :src="require('@packages/assets/images/common/search_inp.png')"
                      alt=""
                    />
                  </template>
                </van-search>
              </form>
            </div>
            <calendar :chatTime="chatTime" @onSelectTime="onSelectTime"></calendar>
          </div>
          <div class="chat-container">
            <chat-scroll
              v-if="chatDetailListFilter.length != 0"
              :show-scroll="
                !$route.query.progress_id && chatDetailObj && !chatDetailObj.chat_remark
              "
              ref="loadMore"
              :top-method="loadTop"
              :bottom-method="loadBottom"
              :top-finished="topFinished"
              :bottom-finished="bottomFinished"
            >
              <div class="default">
                <van-checkbox-group @change="chatArrChange" v-model="chatArr">
                  <template v-for="(item, index) in chatDetailListFilter">
                    <div
                      @click="checkboxToggle(item.id)"
                      :key="item.id"
                      class="chat"
                      v-if="[`text`, `image`, `voice`, `emotion`].indexOf(item.msg_type) != -1"
                    >
                      <div class="checkbox-div">
                        <div class="checkbox-head">
                          <van-checkbox :name="item.id"></van-checkbox>
                        </div>
                      </div>
                      <div class="saying" :class="{ my: item.is_self_chat }">
                        <div class="avatar">
                          <img
                            class="img1"
                            :src="format(item, `from_user`, `head_img_url`)"
                            alt=""
                          />
                        </div>
                        <div class="saying-main">
                          <div class="name-time">
                            <span class="name">{{ format(item, `from_user`, `nick_name`) }}</span>
                            <!--<span class="company" v-if="item.contact_type == 3"
                              >@{{ item.from_user.corp_name }}</span
                            >-->
                            <span class="time">{{
                              item.create_time | chatFormatMillisecond(`YYYY年MM月DD日`)
                            }}</span>
                          </div>
                          <div class="saying-content" @click.stop="audioPlayPause(item, index)">
                            <template v-if="item.msg_type != `image`">
                              <div class="triangle"></div>
                              <div class="tips">
                                <div class="character">
                                  <span v-if="item.msg_type == `text` && item.action != `recall`">
                                    {{ item.msg_detail.text.content }}
                                  </span>

                                  <span
                                    v-if="item.msg_type == `text` && item.action == `recall`"
                                    style="text-decoration: line-through;"
                                  >
                                    {{ item.msg_detail.text.content }}
                                  </span>

                                  <span v-if="item.msg_type == `emotion`">
                                    <img
                                      ref="img"
                                      @click.stop="previewImage(item.msg_detail.emotion.url)"
                                      :src="
                                        `${item.msg_detail.emotion.url}?imageView2/2/w/140/q/300`
                                      "
                                      :alt="`表情`"
                                    />
                                  </span>

                                  <span v-if="item.msg_type == `voice`" class="voice">
                                    <img
                                      v-if="!item.is_play"
                                      style="width: 21px;margin-right: j(2)"
                                      :src="require('@packages/assets/images/chat/play.png')"
                                    />
                                    <img
                                      v-if="item.is_play"
                                      style="width: 21px"
                                      :src="require('@packages/assets/images/chat/pause.png')"
                                    />
                                    <span style="font-size: 16px"
                                      >{{ item.msg_detail.voice.play_length }}"</span
                                    >
                                  </span>
                                </div>
                              </div>
                            </template>

                            <template v-if="item.msg_type == `image`">
                              <img
                                ref="img"
                                class="msg-img"
                                @click.stop="previewImage(item.msg_detail.image.url)"
                                data-v-53c61200=""
                                :src="`${item.msg_detail.image.url}?imageView2/2/w/140/q/300`"
                                :alt="`图片`"
                              />
                            </template>

                            <div class="tag" v-if="item.action == `recall`">
                              已撤回
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                </van-checkbox-group>
              </div>
            </chat-scroll>
            <div class="nodata" v-if="chatDetailListFilter.length == 0">
              <img :src="pic_no_data" alt="" />
              <div class="text">没有相关聊天记录</div>
              <van-button
                class="button"
                plain
                type="info"
                @click="reset"
                v-if="chat_type_id || chatTime.start"
                >重置筛选条件</van-button
              >
            </div>
          </div>

          <slot name="footer">
            <div class="chat-footer">
              <van-button
                :disabled="chatArr.length == 0"
                type="info"
                class="to-chat"
                v-if="showAdd"
                @click="addRecord()"
              >
                <img
                  class="edit-icon"
                  :src="require('@packages/assets/images/chat/draft-fill.png')"
                />
                添加为问答库</van-button
              >
            </div>
          </slot>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import Http from "./http";
import API from "./http/api";
import Store from "@packages/store/index.js";
import { proxy_api } from "@packages/utils/env.js";
// import SmartCode from "../smartCode/index.vue";
import calendar from "./components/calendar.vue";
import chatScroll from "./components/chat-scroll.vue";
import chatSearch from "./components/chat-search.vue";
import { chatFormatMillisecond } from "@packages/utils/moment";
import { ImagePreview } from "vant";
import { pic_no_data } from "@packages/utils/cdn";
const format = (obj, ...rest) => {
  let tmp = obj;
  for (let key in rest) {
    let name = rest[key];
    tmp = tmp?.[name];
  }
  return tmp || "";
};
export default {
  name: "WlChat",
  components: { calendar, chatScroll, chatSearch },
  props: {
    showAdd: {
      type: Boolean,
      default: false,
    },
    chatInfo: {
      type: Object,
      default: () => ({}),
    },
    chatItem: {
      type: Object,
      default: () => ({}),
    },
    showChatDetailNavBar: {
      type: Boolean,
      default: true,
    },
    showClose: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "从聊天记录中选择",
    },
    search: {
      type: Object,
      default: () => ({}),
    },
    external_userid: {
      type: String,
      default: "",
    },
    chat_id: {
      type: String,
      default: "",
    },
    filterFunction: {
      type: Function,
      default: (data) => data,
    },
  },
  filters: {
    chatFormatMillisecond,
  },
  data() {
    return {
      current_cursor: ``,
      showSearch: false,
      chatDetailObj: {},
      chatDetailList: [],
      chatArr: [],
      topFinished: false,
      bottomFinished: false,
      audioRef: {},
      audioChat: ``,
      listBottom: [],
      loadMore: {},
      list: [],
      audio: {},
      value: ``,
      checked: false,
      allChatType: [
        { text: "全部", id: `` },
        // { text: "链接", id: `` },
        { text: "文字", id: `text` },
        { text: "图片", id: `image` },
        // { text: "表情", id: `emotion` },
        { text: "语音", id: `voice` },
        { text: "撤回", id: `recall` },
      ],
      chat_type: "全部",
      chat_type_id: ``,
      chat_typeData: [],
      showPopover: false,
      chatTime: {},
      chat_typeDataList: [],
      showMaterialVisible: false,
      isLoading: true,
      managerInfo: {},
      img: [],
      topLoading: false,
      bottomLoading: false,
      pic_no_data
    };
  },
  watch: {
    chatInfo: {
      handler() {
        this.getInfo(``, ``, "first");
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    format,
    async getInfo(direction, id, type = "") {
      if (this.chatInfo && this.chatInfo.chat_remark) {
        this.chatDetailObj = this.chatInfo;
        this.chatDetailList = this.chatDetailObj.msg_list;
        this.topFinished = true;
        this.bottomFinished = true;
        return;
      }
      let { progress_id, corp_id = "" } = this.$route.query;
      if (progress_id) {
        let param = JSON.stringify({ progress_id, corp_id });
        API.getChatDetailProgress(param).then((res) => {
          this.chatDetailObj = res.data;
          if (!direction) {
            this.chatDetailList = res.data.msg_list;
          }
          this.topFinished = true;
          this.bottomFinished = true;
        });
      } else {
        // let last_msg = this.chatItem && this.chatItem.last_msg && this.chatItem.last_msg.id
        if (type === `first`) {
          let { external_userid, chat_id } = this;
          let res = await API.getCurrentCursor({ external_userid, chat_id });
          this.current_cursor = res && res.data && res.data.current_cursor;
        }
        const cursor = this.current_cursor === 0 ? 0 : this.current_cursor || this.$route.query.id;
        let param = {
          // cursor: this.current_cursor || last_msg || this.$route.query.id,
          // cursor: "1480513910050902018",
          cursor: cursor,
          cursor_direction: 0,
          msg_type: this.chat_type_id,
          start_time: this.chatTime.start,
          end_time: this.chatTime.end,
          kf_card_id: this.$route.query.material_id,
        };
        if (direction == `top`) {
          param.cursor_direction = 0;
          param.cursor = this.chatDetailObj.pre_cursor;
        }
        if (direction == `bottom`) {
          param.cursor_direction = 1;
          param.cursor = this.chatDetailObj.next_cursor;
        }
        let urlChat = ``;
        if (this.$route.query.history_type != `KF_DIALOGUE`) {
          urlChat = `${proxy_api[Store.node_env]}/dialogue/user/chat/detail`;
        } else {
          urlChat = `${proxy_api[Store.node_env]}/dialogue/kf/chat/detail`;
          param.cursor_direction = 1;
        }
        Http.post(urlChat, param).then((res) => {
          this.chatDetailObj = res.data;
          if (!direction) {
            this.chatDetailList = res.data.msg_list || [];
            try {
              if (this.chatDetailList.length != 0 && this.$refs.loadMore.scrollEventTarget) {
                this.$nextTick(() => {
                  this.$refs.loadMore.scrollEventTarget.scrollTop = this.$refs.loadMore.scrollEventTarget.scrollHeight;
                  for (let i = 0; i < this.img.length; i++) {
                    this.img[i].onload = () => {
                      this.$refs.loadMore.scrollEventTarget.scrollTop = this.$refs.loadMore.scrollEventTarget.scrollHeight;
                    };
                  }
                });
              }
            } catch (error) {
              console.log(error);
            }
            // 数据全部加载完成
            if (res.data.pre_cursor == 0) {
              this.topFinished = true;
            } else {
              this.topFinished = false;
            }
            // 数据全部加载完成
            if (res.data.next_cursor == 0) {
              this.bottomFinished = true;
            } else {
              this.bottomFinished = false;
            }
          }
          if (direction == `top`) {
            this.topLoading = false;
            if (!this.$refs.loadMore.$el) return;
            const old = this.$refs.loadMore.$el.offsetHeight;
            this.chatDetailList = [...res.data.msg_list, ...this.chatDetailList];
            for (let i = 0; i < 10; i++) {
              this.list.unshift(0 - this.list.length - 1);
            }
            this.$refs.loadMore.onTopLoaded(id);
            this.$nextTick(() => {
              this.$refs.loadMore.scrollEventTarget.scrollTop =
                this.$refs.loadMore.$el.offsetHeight - old;
            });
            // 数据全部加载完成
            if (res.data.pre_cursor == 0) {
              this.topFinished = true;
            } else {
              this.topFinished = false;
            }
          }
          if (direction == `bottom`) {
            this.bottomLoading = false;
            this.chatDetailList = [...this.chatDetailList, ...res.data.msg_list];
            this.$refs.loadMore && this.$refs.loadMore.onBottomLoaded(id);
            // 数据全部加载完成
            if (res.data.next_cursor == 0) {
              this.bottomFinished = true;
            } else {
              this.bottomFinished = false;
            }
          }
        });
      }
    },
    checkboxToggle(id) {
      if (this.chatArr.indexOf(id) == -1) {
        this.chatArr.push(id);
      } else {
        this.chatArr.splice(this.chatArr.indexOf(id), 1);
      }
    },
    reset() {
      this.chatDetailList = [];
      this.chatTime = {};
      this.chat_type = `全部`;
      this.chat_type_id = ``;
      // this.current_cursor = 0;
      this.getInfo(``, ``);
    },
    closeSearch(item) {
      this.showSearch = false;
      if (item) {
        this.chatTime = {};
        this.chat_type = `全部`;
        this.chat_type_id = ``;
        this.current_cursor = item.id;
        this.getInfo(``, ``);
      }
    },
    showSearchMethods() {
      this.showSearch = true;
    },
    chatArrChange() {
      // let checkedArr = [];
      // let list = this.chatDetailList;
      // if(names && names.length) {
      //   for(let c = 0; c < list.length; c++) {
      //     for(let n = 0; n < names.length; n++) {
      //       if(names[n] === list[c].id) {
      //         checkedArr.push(list[c]);
      //       }
      //     }
      //   }
      // }
      // this.$emit("checkedList", { ids: names, list: checkedArr});
    },
    clickLeft() {
      if (!this.showClose && this.$route.name == `chat-detail`) {
        this.$router.back();
      }
      this.$emit(`close`);
    },
    audioPlayPause(item, index) {
      if (item.msg_type != `voice`) {
        return;
      }
      const src = item.msg_detail.voice.url;
      if (!item.is_play) {
        for (let i = 0; i < this.chatDetailList.length; i++) {
          this.chatDetailList[i].is_play = false;
        }
        this.chatDetailList.splice(index, 1, {
          ...this.chatDetailList[index],
          is_play: true,
        });
        if (src == this.audioChat) {
          this.audioRef.play();
        }
        this.audioChat = src;
      } else {
        this.chatDetailList.splice(index, 1, {
          ...this.chatDetailList[index],
          is_play: false,
        });
        this.audioRef.pause();
      }
    },
    loadTop(id) {
      if (this.topLoading) {
        return;
      }
      this.topLoading = true;
      this.getInfo(`top`, id);
    },
    loadBottom(id) {
      if (this.bottomLoading) {
        return;
      }
      this.bottomLoading = true;
      this.getInfo(`bottom`, id);
    },
    previewImage(i) {
      ImagePreview({
        images: [i],
        showIndex: false,
        // startPosition: i,
        loop: false,
        closeable: true,
      });
    },
    onSelectTime(val) {
      // this.current_cursor = 0;
      this.chatTime = val;
      this.getInfo(``, ``);
    },
    onSelect(val) {
      this.chat_type = val.text;
      this.chat_type_id = val.id;
      // this.current_cursor = 0;
      this.getInfo(``, ``);
    },
    addRecord() {
      this.$emit(`addRecordChat`, {
        msg_list: this.chatDetailList.filter((item) => {
          return this.chatArr.indexOf(item.id) != -1;
        }),
      });
    },
  },
  computed: {
    chatDetailListFilter() {
      return this.filterFunction(this.chatDetailList);
    },
  },
};
</script>

<style scoped lang="scss">
.chat-outer {
  height: 100%;
  .chat-inner {
    height: 100%;
    #chat-detail {
      background-color: #f6f6f6;
      height: 100%;
      display: flex;
      flex-direction: column;
      .chat-footer {
        display: flex;
        justify-content: center;
        align-items: center;
        background: white;
        height: j(64);
        .to-chat {
          width: j(345);
          border-radius: j(10);
          background: #1c9fff;
          .edit-icon {
            width: j(15);
            height: j(15);
            position: relative;
            top: j(2);
          }
        }
      }
      .head {
        background-color: #fff;
        height: j(49);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 j(17);
        .left {
          /*width: j(110);*/
          display: flex;
          align-items: center;
          justify-content: space-between;
          img {
            width: j(18);
            height: j(18);
            flex-shrink: 0;
          }
          .chat_type {
            display: flex;
            // justify-content: space-between;
            align-items: center;
            /*width: j(104);*/
            div {
              // width: j(70);
              display: flex;
              // justify-content: center;
              display: block;
              padding: j(0) j(7);
              font-size: j(17);
              color: black;
            }
            img {
              width: j(16);
              height: j(16);
            }
          }
        }
        .right {
          flex: 1;
          font-size: j(18);
        }
      }
      .no-left {
        padding-left: 0;
      }
      .no-right {
        padding-right: 0;
      }
      .chat-container {
        background: #f6f6f6;
        flex: 1;
        overflow-y: scroll;
        overflow-x: auto;
      }
      main,
      .default {
        .checkbox-div {
          margin-top: j(13);
        }
        .checkbox-head {
          height: j(42);
          display: flex;
          align-items: center;
        }
        background-color: #f6f6f6;
        .staticCountView {
          background-color: #ffffff;
        }
        .chartControl1,
        .chartControl2 {
          padding-top: j(4);
          height: j(40);
          background-color: #ffffff;
          border-bottom-right-radius: j(15);
          border-bottom-left-radius: j(15);
          .control {
            position: relative;
            &:before {
              content: "";
              position: absolute;
              background-color: #eee;
              top: 0;
              left: 0;
              right: 0;
              height: j(1);
              transform: scaleY(0.5);
            }

            height: j(36);
            display: flex;
            justify-content: center;
            align-items: center;
            span {
              color: #979797;
              font-size: j(14);
            }
            img {
              width: j(16);
              height: j(16);
            }
          }
        }
        .chartControl2 {
          padding-top: j(16);
          height: j(52);
        }
        .chat {
          display: flex;
          margin-left: j(12);
        }
        .saying {
          display: flex;
          flex: 1;
          margin: j(13);
          margin-left: j(10);
          justify-content: flex-start;
          .avatar {
            position: relative;
            width: j(42);
            height: j(42);
            .img1 {
              border-radius: 50%;
              width: 100%;
            }
            .img2 {
              position: absolute;
              right: 0;
              bottom: 0;
              width: j(18);
              height: j(18);
            }
          }
          .saying-main {
            margin-left: j(8);
            .name-time {
              display: flex;
              margin-bottom: j(3);
              .name {
                font-size: j(12);
                color: #989898;
              }
              .company {
                margin-left: j(5);
                font-size: j(12);
                color: #ff9444;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .time {
                flex-shrink: 1;
                margin-left: j(5);
                font-size: j(12);
                color: #c1c1c1;
              }
            }
            .saying-content {
              display: flex;
              position: relative;
              max-width: j(250);
              .msg-img {
                max-width: j(140);
                max-height: j(140);
                border-radius: j(10);
                /*height: 100%;*/
              }
              .tag {
                padding: j(1) j(6);
                margin-left: j(4);
                background-color: rgba(98, 54, 255, 0.1);
                border-radius: j(5);
                display: block;
                font-size: j(12);
                color: #6236ff;
                height: j(18);
                background: rgba(255, 69, 69, 0.1);
                color: #ff4545;
                flex-shrink: 0;
              }
              .triangle {
                // background-color: #FFF;
                position: absolute;
                z-index: 1;
                width: 0;
                height: 0;
                border-top: j(13) solid transparent;
                border-right: j(17) solid #fff;
                border-bottom: j(13) solid transparent;
                left: j(-7);
                top: j(5);
              }
              .tips {
                position: relative;
                z-index: 2;
                padding: j(10) j(12);
                z-index: 2;
                width: fit-content;
                max-width: j(250);
                background-color: #fff;
                border-radius: j(10);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-around;
                min-height: j(35);
                .character {
                  max-width: j(250);
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  .voice {
                    width: j(112);
                    display: flex;
                    align-items: center;
                  }
                  span {
                    word-break: break-all;
                    img {
                      width: j(100);
                    }
                    font-size: j(14);
                    color: #1f1f1f;
                    p {
                      padding: j(2) 0;
                      em {
                        font-weight: 700;
                      }
                    }
                  }
                }
                .config {
                  margin: 0 j(11);
                  background-color: rgba(28, 159, 255, 0.1);
                  border: j(1) solid #1c9fff;
                  height: j(42);
                  width: j(148);
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  align-self: flex-start;
                  border-radius: 10px;
                  overflow: hidden;
                  font-size: 0;
                  .managerInfo {
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    width: j(106);
                    img {
                      border: 1px solid #ffffff;
                      border-radius: 50%;
                      height: j(26);
                      width: j(26);
                    }
                    span {
                      margin-right: j(6);
                      color: #1c9fff;
                      font-size: j(17);
                      height: j(24);
                      max-width: j(80);
                      display: block;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    }
                  }
                  .talking {
                    background: #1c9fff;
                    width: j(44);
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    align-self: flex-end;
                    // border: j(1) solid #1c9fff;
                    img {
                      width: j(20);
                      height: j(20);
                    }
                  }
                }
                // .config:active {
                //   background-color: #1c9fff;
                //   color: #ffffff;
                // }
              }
            }
          }
        }
        .my {
          flex-direction: row-reverse;
          .saying-main {
            margin-left: 0;
            /*margin-right: j(8);*/
            .name-time {
              flex-direction: row-reverse;
              .name {
                margin-left: 0;
                margin-right: j(5);
              }
              .company {
                margin-left: 0;
                margin-right: j(5);
              }
              .time {
                margin-left: 0;
                margin-right: j(5);
              }
            }
            .saying-content {
              flex-direction: row-reverse;
              margin-left: j(0);
              margin-right: j(10);
              .tag {
                margin-left: 0;
                margin-right: j(3);
              }
              .triangle {
                border-right: j(25) solid transparent;
                border-left: j(17) solid #d2ecff;
                left: auto;
                right: j(-32);
              }
              .tips {
                background-color: #d2ecff;
                min-height: j(35);
                .character {
                  span {
                    color: #003660;
                  }
                  .voice {
                    display: flex;
                    flex-direction: row-reverse;
                    img {
                      transform: rotateY(180deg);
                    }
                  }
                }
                .config {
                  margin: 0 j(11);
                  background-color: rgba(28, 159, 255, 0.1);
                  border: j(1) solid #1c9fff;
                  height: j(42);
                  width: j(148);
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  align-self: flex-start;
                  border-radius: 10px;
                  overflow: hidden;
                  font-size: 0;
                  .managerInfo {
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    width: j(106);
                    img {
                      border: 1px solid #ffffff;
                      border-radius: 50%;
                      height: j(26);
                      width: j(26);
                    }
                    span {
                      margin-right: j(6);
                      color: #1c9fff;
                      font-size: j(17);
                      height: j(24);
                      max-width: j(80);
                      display: block;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    }
                  }
                  .talking {
                    background: #1c9fff;
                    width: j(44);
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    align-self: flex-end;
                    // border: j(1) solid #1c9fff;
                    img {
                      width: j(20);
                      height: j(20);
                    }
                  }
                }
                // .config:active {
                //   background-color: #1c9fff;
                //   color: #ffffff;
                // }
              }
            }
          }
        }
      }
      .default {
        overflow-y: hidden;
        background: #f7f7f7;
        // background-image: url('/src/assets/images/record_gray.png');
      }
      .nodata {
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        img {
          // height: j(275);
          width: 100%;
        }
        .text {
          font-size: 18px;
          color: #c1c1c1;
        }
        .button {
          margin-top: j(10);
          border-radius: j(24);
          width: j(134);
          height: j(32);
          color: #1c9fff;
          border-color: #1c9fff;
        }
      }
    }
  }
}

.common_search {
  border-radius: j(10);
  overflow: hidden;
  .van-search__content {
    border-radius: j(10);
    background-color: #f7f7f7;
  }
  .van-field__left-icon {
    display: flex;
    align-items: center;
    .left_icon {
      width: j(17);
      height: j(17);
      vertical-align: middle;
    }
  }
}
</style>
