<template>
  <view :style="vuex_theme">
    <view style="padding-bottom: 160rpx; width: 100%; height: 100%">
      <view class="wrap_box" style="display: flex">
        <u-image
          style=""
          width="120rpx"
          height="120rpx"
          shape="circle"
          :src="image_path"
        />
        <view
          class=""
          style="width: 100%; margin: auto 0; margin-left: 20rpx"
          @click="link(0, 'userinfo')"
        >
          <view class="">
            <text class="name">{{
              detailObj.name ? detailObj.name : "姓名"
            }}</text>
            <image
              src="/static/img/home/icon_edit.png"
              style="width: 48rpx; height: 48rpx; float: right"
            ></image>
          </view>
          <text style="font-size: 26rpx; color: #000;white-space: inherit;"
            >{{
              detailObj.gender == 0
                ? "性别"
                : detailObj.gender == 1
                ? "男"
                : "女"
            }}
            · {{ detailObj.age <= 0 ? "年龄" : `${detailObj.age || "-"}岁` }} ·
            {{ getDegree() }} ·
            {{
              detailObj.experience == "-1" || detailObj.experience == ""
                ? "工作经验"
                : detailObj.experience == "0"
                ? "无经验/应届生"
                : `${detailObj.experience || "-"}年`
            }}{{ detailObj.mobile ? ` · ${detailObj.mobile}` : "" }}</text
          >
        </view>
      </view>

      <view class="wrap_box">
        <view style="margin-bottom: 16rpx">
          <text class="title">求职意向</text>
          <image
            v-if="
              !detailObj.expect_job ||
              !detailObj.expect_workplaces ||
              detailObj.expect_workplaces.length == 0
            "
            src="/static/img/home/icon_add.png"
            style="width: 48rpx; height: 48rpx; float: right"
            @click="link(0, 'add_target')"
          ></image>
        </view>
        <view
          v-if="
            detailObj.expect_job &&
            detailObj.expect_workplaces &&
            detailObj.expect_workplaces.length > 0
          "
          style="margin: 20rpx 0"
        >
          <view
            style="display: flex; align-items: center"
            @click="link(0, 'edit_target')"
          >
            <view style="">
              <text class="text_black_28" style="margin-top: 20rpx">{{
                expectJob_category
              }}</text>
              <view style="margin-top: 20rpx">
                <text class="text_gray_26">{{
                  `${detailObj.expect_lower_salary} - ${detailObj.expect_upper_salary}`
                }}</text>
                <text class="text_gray_26" style="margin-left: 50rpx">{{
                  getWorkAddress()
                }}</text>
              </view>
            </view>
            <view style="flex: 1; text-align: right">
              <image
                src="/static/img/common/arrow_right.png"
                style="width: 20rpx; height: 32rpx"
              >
              </image>
            </view>
          </view>
        </view>
        <view v-else class="text_gray_28">暂未填写求职意向</view>
      </view>
      <view class="wrap_box">
        <view style="margin-bottom: 16rpx">
          <text class="title">我的优势</text>
          <image
            src="/static/img/home/icon_edit.png"
            style="width: 48rpx; height: 48rpx; float: right"
            @click="link(0, 'my-special')"
          ></image>
        </view>
        <view v-if="detailObj.personal_ability" class="content">{{
          detailObj.personal_ability
        }}</view>
        <view v-else class="text_gray_28">暂未填写我的优势</view>
      </view>
      <view class="wrap_box">
        <view style="margin-bottom: 16rpx">
          <text class="title">工作经历</text>
          <image
            src="/static/img/home/icon_add.png"
            style="width: 48rpx; height: 48rpx; float: right"
            @click="link(0, 'add_experience')"
          ></image>
        </view>
        <view
          v-if="detailObj.work_exps && detailObj.work_exps.length > 0"
          style="margin: 20rpx 0"
        >
          <view
            v-for="(item, index) in detailObj.work_exps"
            :key="index"
            style="margin: 20rpx 0; display: grid"
          >
            <view
              style="display: flex; align-items: center"
              @click="link(index, 'edit_experience')"
            >
              <view style="">
                <text class="text_black_28">{{ item.company }}</text>
                <view style="margin-top: 18rpx">
                  <text class="text_gray_26">{{ item.job }}</text>
                  <text class="text_gray_26" style="margin-left: 18rpx"
                    >{{ timeFormat(item.job_start_time) }} -
                    {{
                      item.job_end_time == 0
                        ? "至今"
                        : timeFormat(item.job_end_time)
                    }}</text
                  >
                </view>
              </view>
              <view style="flex: 1; text-align: right">
                <image
                  src="/static/img/common/arrow_right.png"
                  style="width: 20rpx; height: 32rpx"
                >
                </image>
              </view>
            </view>
            <view
              style="
                font-size: 26rpx;
                color: #000;
                font-weight: 300;
                margin-top: 18rpx;
              "
              >{{ item.job_content }}</view
            >
          </view>
        </view>
        <view v-else class="text_gray_28">暂未填写工作经历</view>
      </view>
      <view class="wrap_box">
        <view style="margin-bottom: 16rpx">
          <text class="title">教育背景</text>
          <image
            src="/static/img/home/icon_add.png"
            style="width: 48rpx; height: 48rpx; float: right"
            @click="link(0, 'add_education')"
          ></image>
        </view>
        <view v-if="detailObj.edu_exps && detailObj.edu_exps.length > 0">
          <view v-for="(item, index) in detailObj.edu_exps" :key="index">
            <view
              style="display: flex; align-items: center"
              @click="link(index, 'edit_education')"
            >
              <view style="margin: 20rpx 0">
                <text class="text_black_28" style="margin-top: 20rpx">{{
                  item.school
                }}</text>
                <view style="margin-top: 10rpx">
                  <text class="text_gray_26">{{ item.speciality }}</text>
                  <text class="text_gray_26" style="margin: 0 20rpx">|</text>
                  <text class="text_gray_26"
                    >{{ timeFormat(item.edu_start_time) }} -
                    {{ timeFormat(item.edu_end_time) }}</text
                  >
                </view>
              </view>
              <view style="flex: 1; text-align: right">
                <image
                  src="/static/img/common/arrow_right.png"
                  style="width: 20rpx; height: 32rpx"
                >
                </image>
              </view>
            </view>
          </view>
        </view>
        <view v-else class="text_gray_28">暂未填写教育背景</view>
      </view>
      <view class="wrap_box">
        <view style="margin-bottom: 16rpx">
          <text class="title">兴趣爱好</text>
          <image
            src="/static/img/home/icon_edit.png"
            style="width: 48rpx; height: 48rpx; float: right"
            @click="link(0, 'habbit')"
          ></image>
        </view>
        <view class="content">{{
          detailObj.hobbies ? detailObj.hobbies : "暂未填写兴趣爱好"
        }}</view>
      </view>
      <view class="wrap_box" style="margin-bottom: 60rpx">
        <view style="margin-bottom: 16rpx">
          <text class="title">附件简历</text>
        </view>

        <view v-if="fileList.length > 0">
          <view class="" v-for="(item, index) in fileList" :key="index">
            <view class="green_bg" @click="link(index, 'openFile')">
              <image
                v-if="true"
                lazy-load="true"
                :src="vuex_baseImgUrl && `${vuex_baseImgUrl}icon_file.png`"
                style="
                  width: 60rpx;
                  height: 60rpx;
                  display: inline-table;
                  margin: auto;
                "
              >
              </image>
              <image
                v-else
                lazy-load="true"
                :src="vuex_baseImgUrl && `${vuex_baseImgUrl}icon_img.png`"
                style="width: 60rpx; height: 60rpx"
              ></image>
              <view
                class="text_black_28"
                style="align-self: center; margin-left: 16rpx"
                >{{ item.name }}</view
              >
              <view style="flex: 1; text-align: right; align-self: center">
                <image
                  lazy-load="true"
                  :src="vuex_baseImgUrl && `${vuex_baseImgUrl}icon_del.png`"
                  style="width: 30rpx; height: 30rpx"
                  @click.stop="link(index, 'del_profile')"
                ></image>
              </view>
            </view>
          </view>
        </view>

        <view class="gray_bg" @click="selectorConfirm">
          <image
            lazy-load="true"
            :src="vuex_baseImgUrl && `${vuex_baseImgUrl}icon_upload.png`"
            style="width: 60rpx; height: 60rpx; align-self: center"
          >
          </image>
          <view style="margin-left: 16rpx; display: grid">
            <text class="text_black_28">上传简历</text>
            <text class="text_gray_24">仅支持pdf、jpg、png格式，不超过5M</text>
          </view>
        </view>
      </view>
    </view>
    <view class="footer" v-if="type == '1'">
      <view
        style="width: 100%; height: 1rpx; border: 1rpx solid #f7f7f7"
      ></view>
      <view style="padding: 20rpx 40rpx 70rpx 40rpx">
        <view class="confirm" @click="confirm">保存</view>
      </view>
    </view>
    <view class="bottom" v-if="type == '2'">
      <view style="width: 100%; display: flex; top: 30rpx; position: absolute">
        <view class="chat1" @click="confirm"> 仅保存 </view>
        <view class="chat2" @click="confirmpost"> 确认并投递 </view>
      </view>
    </view>
    <u-picker
      mode="selector"
      v-model="showPicker"
      :range="selector"
      @confirm="selectorConfirm"
      confirm-color="var(--primary-color)"
    ></u-picker>
  </view>
</template>

<script>
import { genderOptions, salaryOptions, degreeOptions } from "@/common/util.js";
export default {
  data() {
    return {
      genderOptions,
      salaryOptions,
      degreeOptions,
      detailObj: {},
      selector: ["从微信上传", "从手机本地上传"],
      image_path: "", //用户头像
      confirmText: "确认并提交",
      fileList: [],
      attachments: [],
      ossInit: {},
      maxCount: 9,
      work_exps: [],
      edu_exps: [],
      expect_job: [],
      schoolList: [{}, {}],
      workOptions: [],
      mFileDir: "yxly",
      mFileType: ".doc",
      showPicker: false,
      type: "1",
      confirmtype: "",
      position_category: "",
      sub_category: "",
      expectJob_category: "",
    };
  },

  onLoad(e) {
    this.type = e.type ? e.type : "1";
    this.initOss();
    this.getResumeDetail();
    this.newExpericenceOptions();
  },

  onShow() {
    console.log("onshow--", this.detailObj);
  },

  methods: {
    initOss() {
      this.$u.api
        .getHroOssInitApi({
          access_type: "web_upload",
          object_type: "tenant_logo",
        })
        .then((res) => {
          console.log("ossinit...", res);
          this.ossInit = res;
        });
    },

    timeFormat(value, format = "yyyy-mm-dd") {
      return this.$u.timeFormat(value, format);
    },

    getResumeDetail() {
      this.$u.api.getResumeDetailApi().then((res) => {
        console.log("detailObj--", res);
        this.detailObj = res;
        // if (!this.detailObj.id) {
        // 	return
        // }
        this.work_exps = this.detailObj.work_exps
          ? this.detailObj.work_exps
          : [];
        this.edu_exps = this.detailObj.edu_exps ? this.detailObj.edu_exps : [];
        this.detailObj.experience = this.detailObj.experience + "";
        // this.detailObj.salary = this.detailObj.salary + ""
        this.attachments = this.detailObj.resume_path;
        this.image_path = this.reversedAvatarUrl();
        this.position_category =
          this.detailObj.expect_job.length > 0
            ? this.detailObj.expect_job[0].first_category
            : "";
        this.sub_category =
          this.detailObj.expect_job.length > 0
            ? this.detailObj.expect_job[0].second_category
            : "";
        this.expectJob_category =
          this.detailObj.expect_job.length > 0
            ? this.detailObj.expect_job[0].expect_job
            : "";
        if (this.attachments && this.attachments.length > 0) {
          let fileList = [];
          for (var i = 0; i < this.attachments.length; i++) {
            this.fileList.push({
              type: this.attachments[i].mime_type,
              path: "",
              name: this.attachments[i].name,
            });
            this.handleFiles(i, this.attachments[i]);
            console.log("fileList", this.fileList);
          }
        }
      });
    },

    handleFiles(index, item) {
      console.log(item);
      this.$u.api
        .getHroObjectRedirectApi1({
          bucket: item.bucket,
          object: item.object,
        })
        .then((res) => {
          console.log("download_url", res);
          this.fileList[index].path = res.download_url;
        });
    },

    getDegree() {
      for (var i = 0; i < this.degreeOptions.length; i++) {
        if (this.detailObj.degree == this.degreeOptions[i].value) {
          return this.degreeOptions[i].label;
        }
      }
      return "学历";
    },

    newExpericenceOptions() {
      let list = [
        {
          label: "无经验/应届生",
          value: "0",
        },
      ];
      for (var i = 1; i < 31; i++) {
        // list.add(i+"")
        list.push({
          label: i,
          value: i + "",
        });
      }
      this.workOptions = list;
    },

    getSalary() {
      console.log("salary--", this.salaryOptions);
      for (var i = 0; i < this.salaryOptions.length; i++) {
        if (this.detailObj.salary == this.salaryOptions[i].value) {
          return this.salaryOptions[i].label;
        }
      }
    },

    getWorkAddress() {
      if (
        this.detailObj.expect_workplaces &&
        this.detailObj.expect_workplaces.length > 0
      ) {
        return (
          this.detailObj.expect_workplaces[0].province +
          "/" +
          this.detailObj.expect_workplaces[0].city +
          "/" +
          this.detailObj.expect_workplaces[0].district
        );
      } else {
        return "全国";
      }
    },

    reversedAvatarUrl() {
      if (this.detailObj.image_path) {
        return this.detailObj.image_path + "?" + Date.now();
      }
      return "/static/img/my/default_avatar.png";
      // console.log("reversedAvatarUrl。。", this.detailObj.image_path, this.vuex_weixinUserInfo)
      // if (this.detailObj.image_path && this.detailObj.image_path.length > 5) {
      // return this.detailObj.image_path
      // } else {
      // 	if (this.userBasicInfo && this.userBasicInfo.avatarUrl) {
      // 		return this.vuex_ossUrlPubilc + '/' + this.userBasicInfo.avatarUrl
      // 	}
      // 	return (this.vuex_weixinUserInfo && this.vuex_weixinUserInfo.avatarUrl) ? this.vuex_weixinUserInfo
      // 		.avatarUrl : '/static/img/my/default_avatar.png';
      // }
    },

    openFile(e) {
      uni.showLoading({
        title: "正在加载中~",
        mask: true,
      });
      var type = this.fileList[e].type;
      var path = this.fileList[e].path;
      var name = this.fileList[e].name;
      var _this = this;
      console.log("openFile", this.fileList[e]);
      this.mFileDir = name.substring(0, name.lastIndexOf("."));
      this.mFileType = name.substring(name.lastIndexOf("."), name.length);

      if (type.indexOf("image") != -1) {
        _this.openImage(path);
      } else {
        uni.showLoading({
          title: "努力加载中~",
          mask: true,
        });
        uni.downloadFile({
          url: path,
          success: function (res) {
            var filePath = res.tempFilePath;
            uni.openDocument({
              filePath: filePath,
              showMenu: true,
              success: function (res) {
                console.log("打开文档成功");
                uni.hideLoading();
              },
            });
          },
        });
      }
    },

    openImage(imgPath) {
      let array = new Array(1).fill(imgPath);
      uni.previewImage({
        urls: array,
        success(res) {
          uni.hideLoading();
          console.log("openImage success");
        },
        fail(res) {
          uni.hideLoading();
          console.log("openImage fail:", res);
        },
      });
    },

    link(index, type) {
      console.log("link", type);
      const { dispatch } = this.$store;

      switch (type) {
        case "userinfo":
          this.$u.route({
            url: "/pages/student/my/resume-userinfo/resume-userinfo",
            params: {
              name: this.detailObj.name,
              gender: this.detailObj.gender,
              mobile: this.detailObj.mobile,
              birth: this.detailObj.birth,
              degree: this.detailObj.degree,
              experience: this.detailObj.experience,
              age: this.detailObj.age,
              image_path: this.detailObj.image_path,

              height: this.detailObj.height > 0 ? this.detailObj.height : "",
              weight: this.detailObj.weight > 0 ? this.detailObj.weight : "",
              email: this.detailObj.email,
              // id_card_no: this.detailObj.id_card_no,
              current_address: this.detailObj.current_address,
              hukou_place: this.detailObj.hukou_place,
            },
          });
          break;
        case "baseinfo": //基础信息
          this.$u.route({
            url: "/pages/student/my/update-baseinfo/update-baseinfo",
            params: {
              height: this.detailObj.height > 0 ? this.detailObj.height : "",
              weight: this.detailObj.weight > 0 ? this.detailObj.weight : "",
              email: this.detailObj.email,
              // id_card_no: this.detailObj.id_card_no,
              current_address: this.detailObj.current_address,
              hukou_place: this.detailObj.hukou_place,
            },
          });
          break;
        case "add_target": //求职意向
          this.$u.route({
            url: "/pages/student/my/choose-my-job/choose-my-job",
            params: {
              type: "from_edit",
            },
          });
          break;
        case "edit_target":
          this.$u.route({
            url: "/pages/student/my/choose-my-job/choose-my-job",
            params: {
              type: "from_edit",
              // expect_job: JSON.stringify(this.detailObj.expect_job),
              position_category: this.position_category,
              sub_category: this.sub_category,
              expectJob_category: this.expectJob_category,
              expect_lower_salary: this.detailObj.expect_lower_salary,
              expect_upper_salary: this.detailObj.expect_upper_salary,
              expect_workplaces: JSON.stringify(
                this.detailObj.expect_workplaces
              ),
            },
          });
          break;
        case "my-special": //我的优势
          this.$u.route({
            url: "/pages/student/my/update-textarea/update-textarea",
            params: {
              type: "my-special",
              value: this.detailObj.personal_ability,
            },
          });
          break;
        case "add_experience": //工作经历
          this.$u.route({
            url: "/pages/student/my/update-experience/update-experience",
            params: {},
          });
          break;
        case "edit_experience":
          this.$u.route({
            url: "/pages/student/my/update-experience/update-experience",
            params: {
              experienceObj: JSON.stringify(this.detailObj.work_exps[index]),
              index: index,
            },
          });
          break;
        case "add_education": //教育背景
          this.$u.route({
            url: "/pages/student/my/update-education/update-education",
            params: {},
          });
          break;
        case "edit_education":
          this.$u.route({
            url: "/pages/student/my/update-education/update-education",
            params: {
              eduObj: JSON.stringify(this.detailObj.edu_exps[index]),
              index: index,
            },
          });
          break;
        case "habbit": //兴趣爱好
          this.$u.route({
            url: "/pages/student/my/update-textarea/update-textarea",
            params: {
              type: "my-hobbies",
              value: this.detailObj.hobbies,
            },
          });
          break;
        case "openFile": //查看文件
          this.openFile(index);
          break;
        case "del_profile": //删除简历附件
          var _this = this;
          uni.showModal({
            content: "确定要删除该文件吗？",
            success: function (res) {
              if (res.confirm) {
                console.log("confirm", _this.fileList);
                _this.fileList.splice(index, 1);
                _this.attachments.splice(index, 1);
              } else if (res.cancel) {
                console.log("cancel");
              }
            },
          });
          break;
        case "add_profile": //添加简历附件
          this.showPicker = true;
          break;
      }
    },

    selectorConfirm(e) {
      this.showPicker = false;
      var _this = this;
      if (_this.fileList.length < _this.maxCount) {
        // if (e == 0) {
        //   //从微信上传
        //   my.chooseMessageFile({
        //     count: this.maxCount - this.fileList.length,
        //     extension: ["pdf", "png", "jpg"],
        //     success(res) {
        //       console.log("selectorConfirm--", res.tempFiles);
        //       // tempFilePath可以作为img标签的src属性显示图片
        //       _this.fileList.push(...res.tempFiles);
        //       // _this.attachments = []
        //     },
        //   });
        // } else if (e == 1) {
        //   //从手机本地上传

        // }
        uni.chooseImage({
          count: this.maxCount - this.fileList.length,
          mediaType: ["image"],
          sourceType: ["album", "camera"],
          camera: "back",
          success: (res) => {
            if (res.tempFiles && res.tempFiles.length > 0) {
              res.tempFiles.map((val, index) => {
                console.log(val,'val');
                val.name =
                  `${new Date().getTime()}_` +
                  val.path.substring(val.path.length - 15);
              });
            }
            console.log(res.tempFiles,'res.tempFiles');
            // tempFilePath可以作为img标签的src属性显示图片
            _this.fileList.push(...res.tempFiles);
          },
        });
      } else {
        this.showToast("已达到上传文件上限");
      }
    },

    confirm() {
      (this.confirmtype = "1"), console.log("confirm--", this.detailObj);
      this.uploadFiles();
    },

    confirmpost() {
      (this.confirmtype = "2"), console.log("confirm--", this.detailObj);
      this.uploadFiles();
    },

    uploadFiles() {
      //上传文件
      var _this = this;
      if (this.fileList.length == this.attachments.length) {
        //是否有新增图片
        _this.uploadInfos();
      } else {
        console.log("uploadImages...", this.fileList, this.attachments);
        var gapLength = this.fileList.length - this.attachments.length;
        for (var i = 0; i < gapLength; i++) {
          uni.uploadFile({
            url: `https://oss.workai.com.cn/`,
            filePath:
              _this.fileList[_this.fileList.length - gapLength + i].path,
            name: "file",
            formData: {
              "x:name":
                _this.fileList[_this.fileList.length - gapLength + i].name,
              key:
                `${_this.ossInit.dir}${new Date().getTime()}/` + "${filename}",
              OSSAccessKeyId: _this.ossInit.access_key_id,
              policy: _this.ossInit.policy,
              signature: _this.ossInit.signature,
              callback: _this.ossInit.callback_body,
              "x:access_token": _this.ossInit.callback_token,
              success_action_status: "200",
            },
            success: (uploadFileRes) => {
              console.log("--", _this.attachments, uploadFileRes);
              _this.attachments.push(JSON.parse(uploadFileRes.data));
              if (_this.attachments.length == _this.fileList.length) {
                _this.detailObj.resume_path = _this.attachments;
                _this.uploadInfos();
              }
            },
            complete: (res) => {
              console.log("res...", res);
            },
          });
        }
      }
    },

    uploadInfos() {
      if (
        !this.detailObj.name &&
        !this.detailObj.gender &&
        !this.detailObj.mobile &&
        !this.detailObj.birth &&
        !this.detailObj.degree &&
        !this.detailObj.experience
      ) {
        this.showToast("请完善基本信息");
        return;
      }

      let _this = this;
      this.$u.api.updateResumeApi(this.detailObj).then((res) => {
        console.log("uploadInfos...", res);
        if (res.name) {
          if (res.expect_job && res.expect_job.length > 0) {
            uni.$u.vuex("vuex_expect_job", res.expect_job[0].expect_job);
          }
          if (this.confirmtype == "1") {
            _this.showToast("简历修改成功");
            setTimeout(
              () =>
                uni.navigateBack({
                  delta: 1,
                }),
              1000
            );
          } else {
            let pages = getCurrentPages();
            let prevPage = pages[pages.length - 2];
            prevPage.$vm.applyResume();
            // _this.showToast("提交完成")
            setTimeout(
              () =>
                uni.navigateBack({
                  delta: 1,
                }),
              1000
            );
          }
        } else {
          _this.showToast(res.msg);
        }
      });
    },

    showToast(msg) {
      uni.showToast({
        title: msg,
        icon: "none",
      });
    },

    goDetail(data) {},
  },
};
</script>

<style lang="scss" scoped>
.wrap_box {
  padding: 40rpx;
  background-color: #fff;

  .name {
    font-size: 44rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
  }

  .title {
    font-size: 34rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
  }

  .content {
    font-size: 28rpx;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: #000000;
    margin-top: 32rpx;
  }

  .text_black_28 {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
  }

  .text_gray_26 {
    font-size: 26rpx;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.65);
    margin-top: 16rpx;
  }

  .green_bg {
    background-color: var(--primary-color003);
    border-radius: 16rpx;
    width: 100%;
    padding: 40rpx;
    display: flex;
    margin-bottom: 20rpx;
  }

  .gray_bg {
    background-color: #f7f7f7;
    border-radius: 16rpx;
    width: 100%;
    padding: 40rpx;
    display: flex;
    margin-bottom: 20rpx;
  }

  .text_gray_24 {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
  }

  .text_gray_28 {
    font-size: 28rpx;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.65);
    margin: 20rpx 0;
  }
}

.footer {
  width: 100%;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;

  .confirm {
    background: linear-gradient(
      180deg,
      var(--primary-color000) 0%,
      var(--primary-color) 100%
    );
    box-shadow: 0px 2px 20px 0px var(--primary-color03);
    border-radius: 24px;
    padding: 24rpx;
    text-align: center;
    font-size: 34rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
}

.bottom {
  width: 100%;
  height: 180rpx;
  position: fixed;
  background-color: #ffffff;
  bottom: 0;
  padding: 12px 32rpx 0;

  .chat1 {
    width: calc(106 / 375 * 100%);
    height: 44px;
    background: #f7f7f7;
    border-radius: 22px;
    border: 1px solid #e5e5e6;
    font-size: 17px;
    font-weight: 500;
    color: #646464;
    text-align: center;
    line-height: 44px;
  }

  .chat2 {
    width: calc(217 / 375 * 100%);
    height: 44px;
    background: linear-gradient(
      180deg,
      var(--primary-color) 0%,
      var(--primary-color) 100%
    );
    border-radius: 22px;
    font-size: 17px;
    font-weight: 400;
    color: #ffffff;
    line-height: 17px;
    text-align: center;
    line-height: 44px;
    margin-left: calc(20 / 375 * 100%);
  }
}
</style>