<template>
  <view class="flex-col page">
    <u-navbar :border-bottom="false" title="个人资料"></u-navbar>

    <view v-if="step == 0" class="flex-col group_2">
      <view class="flex-col items-center group_1">
        <u-avatar
          mode="square"
          :src="headerImg"
          @click="chooseAvatar"
          size="260"
        />
        <text class="text_4">请上传头像</text>
      </view>
      <view class="flex-col group_5 input-box">
        <u-input
          type="text"
          :maxlength="8"
          v-model="form.userName"
          placeholder="请输入用户名称"
          class="text-wrapper view"
        />
      </view>
      <view class="flex-col input-box" style="margin-top: 16px">
        <u-input
          type="text"
          :maxlength="8"
          v-model="form.name"
          placeholder="请输入真实的姓名"
          class="text-wrapper view"
        />
      </view>
      <view class="flex-col group_3">
        <text class="text_7" style="margin-bottom: 26px">性别</text>
        <u-radio-group
          v-model="form.sex"
          placement="row"
          name="sexGroup"
          width="50%"
        >
          <u-radio
            v-for="(item, index) in sexOptions"
            :key="index"
            :name="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </u-radio>
        </u-radio-group>
      </view>
      <u-button
        shape="circle"
        class="button text-wrapper_1"
        type="primary"
        @click="next"
        >下一步</u-button
      >
    </view>
    <u-navbar
      :custom-back="back"
      v-if="step == 1"
      :border-bottom="false"
      :background="background"
    >
    </u-navbar>
    <view v-if="step == 1" class="flex-col group_3 userList">
      <h3 class="text_3">填写学校信息</h3>
      <view class="flex-col group_4">
        <view class="justify-between list-item group_5">
          <text class="text_8">学历</text>
          <view class="item-right">
            <u-input
              v-model="form.educationStr"
              placeholder="请选择学历"
              inputAlign="right"
              @click="educationalShow = true"
            />
            <u-action-sheet
              :list="educationalList"
              v-model="educationalShow"
              @click="educationalSelect"
            >
            </u-action-sheet>
            <image
              src="/static/common/img/row_right.png"
              class="right-img"
            ></image>
          </view>
        </view>
        <view class="justify-between list-item">
          <text class="text_8">学校</text>
          <view class="item-right">
            <u-input
              v-model="shoolName"
              placeholder="请选择学校"
              inputAlign="right"
              @click="shoolShow = true"
            />
            <image
              src="/static/common/img/row_right.png"
              class="right-img"
            ></image>
            <u-select
              v-model="shoolShow"
              :default-value="defaultTime"
              mode="single-column"
              title="学校选择"
              :list="shoolList"
              @confirm="shoolSelect"
            >
            </u-select>
          </view>
        </view>
        <view class="justify-between list-item">
          <text class="text_8">学院</text>
          <view class="item-right">
            <u-input
              v-model="form.college"
              placeholder="请选择学院"
              @click="collegeShow = true"
              inputAlign="right"
            />
            <u-select
              v-model="collegeShow"
              mode="single-column"
              :list="CollegeList"
              @confirm="selectCpllege"
            ></u-select>
            <image
              src="/static/common/img/row_right.png"
              class="right-img"
            ></image>
          </view>
        </view>
        <view class="justify-between list-item">
          <text class="text_8">专业</text>
          <view class="item-right">
            <u-input
              v-model="form.major"
              placeholder="请选择专业"
              @click="majorShow = true"
              inputAlign="right"
            />
            <u-select
              v-model="majorShow"
              mode="single-column"
              :list="MajorList"
              @confirm="selectMajor"
            ></u-select>
            <image
              src="/static/common/img/row_right.png"
              class="right-img"
            ></image>
          </view>
        </view>
        <view class="justify-between list-item">
          <text class="text_8">时间</text>
          <view class="item-right">
            <u-input
              v-model="showTime"
              placeholder="请选择时间"
              inputAlign="right"
              @click="timeShow = true"
            />
            <u-select
              v-model="timeShow"
              :default-value="defaultTime"
              mode="mutil-column"
              title="在校时间"
              :list="timeList"
              @confirm="confirm"
            >
            </u-select>
            <image
              src="/static/common/img/row_right.png"
              class="right-img"
            ></image>
          </view>
        </view>
      </view>
      <h3 class="text_3">就业信息</h3>
      <view class="flex-col group_4">
        <view class="justify-between list-item">
          <text class="text_8">行业领域</text>
          <view class="item-right">
            <u-input
              v-model="selectedWorkArea"
              placeholder="请选择行业"
              inputAlign="right"
              @click="workAreaPopupShow = true"
            />
            <u-select
              v-model="workAreaPopupShow"
              mode="single-column"
              title="行业领域"
              :list="WorkAreaList"
              @confirm="workAreaSelect"
            >
            </u-select>
            <image
              src="/static/common/img/row_right.png"
              class="right-img"
            ></image>
          </view>
        </view>
      </view>
      <u-button
        shape="circle"
        class="button text-wrapper_1"
        type="primary"
        @click="complete"
        >完成</u-button
      >
    </view>
    <view v-if="step == 2" class="flex-col preference-page">
      <u-navbar title="推荐偏好" :border-bottom="false" />

      <view class="selected-count">
        已选择（{{ selectedPreferences.length }}/10）
        <text class="desc"
          >您选择的标签将影响系统推荐给你的信息类型，进入系统后可以在我的-常用工具-推荐偏好中修改。</text
        >
      </view>

      <view class="selected-tags">
        <view
          v-for="item in selectedPreferences"
          :key="item"
          class="tag selected"
        >
          {{ item }}
          <image
            class="close-btn"
            src="/static/common/img/handDelete.png"
            @click.stop="removePreference(item)"
          ></image>
        </view>
      </view>
      <view class="line"></view>
      <view class="all-tags">
        <view class="title">行业领域</view>
        <view class="tags-list">
          <view
            v-for="item in industryList"
            :key="item"
            class="industry-tag"
            :class="{ selected: selectedPreferences.includes(item) }"
            @click="togglePreference(item)"
            >{{ item }}</view
          >
        </view>
        <view class="title" style="margin-top: 32rpx">行业方向</view>
        <view class="tags-list">
          <view
            v-for="item in industryDirectionList"
            :key="item"
            class="industry-tag"
            :class="{ selected: selectedPreferences.includes(item) }"
            @click="togglePreference(item)"
            >{{ item }}</view
          >
        </view>
      </view>
      <view class="line-shadow"></view>
      <view class="btn-box">
        <u-button shape="circle" class="button" type="primary" @click="nextStep"
          >下一步</u-button
        >
      </view>
    </view>
    <view v-if="step == 3" class="flex-col preference-page">
      <u-navbar title="推荐偏好" :border-bottom="false" />

      <view class="selected-count">
        已选择（{{ selectedPreferences.length }}/10）
        <text class="desc"
          >您选择的标签将影响系统推荐给你的信息类型，进入系统后可以在我的-常用工具-推荐偏好中修改。</text
        >
      </view>

      <view class="selected-tags">
        <view
          v-for="item in selectedPreferences"
          :key="item"
          class="tag selected"
        >
          {{ item }}
          <image
            class="close-btn"
            src="/static/common/img/handDelete.png"
            @click.stop="removePreference(item)"
          ></image>
        </view>
      </view>
      <view class="line"></view>
      <view class="all-tags">
        <view class="title">兴趣爱好</view>
        <view class="tags-list">
          <view
            v-for="item in preferenceList"
            :key="item"
            class="tag"
            :class="{ selected: selectedPreferences.includes(item) }"
            @click="togglePreference(item)"
            >{{ item }}</view
          >
        </view>
      </view>
      <view class="line-shadow"></view>
      <view class="btn-box">
        <u-button
          shape="circle"
          class="button"
          type="primary"
          @click="finishPreference"
          >完成</u-button
        >
      </view>
    </view>
    <u-top-tips :z-index="999" ref="uTips" :navbar-height="0"></u-top-tips>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import headerImg from "@/static/common/img/headerImg.png";
export default {
  data() {
    return {
      step: 0,
      headerImg: headerImg,
      shoolName: "",
      showTime: "",
      form: {
        userId: "", //用户id
        name: "", //名字
        sex: "男", //性别
        path: "", //头像
        educationStr: "", //学历
        schoolId: "", //学校
        college: "", //学院
        major: "", //专业
        startYear: "", //开始时间
        endYear: "", //结束时间,
        collegeId: "", //学院id
        majorId: "", //专业id
      },
      sexOptions: [
        { label: "男生", value: "男" },
        { label: "女生", value: "女" },
      ],
      background: {
        backgroundColor: "#f6f8fa",
      },
      value: "",
      defaultTime: "",
      show: false,
      educationalShow: false,
      educationalList: [
        //学历选择列表
        {
          text: "大专",
        },
        {
          text: "本科",
        },
        {
          text: "硕士研究生",
        },
        {
          text: "博士研究生",
        },
      ],
      shoolShow: false,
      shoolList: [], //学校选择
      CollegeList: [], //学院选择
      MajorList: [], //专业选择
      timeShow: false,
      timeList: [], //时间选择
      collegeShow: false,
      majorShow: false,
      workAreaPopupShow: false, //就业领域选择
      selectedWorkArea: "",
      WorkAreaList: [],
      preferenceList: [
        "跑步健身",
        "足球",
        "电竞游戏",
        "旅行徒步",
        "摄影摄像",
        "剧本杀",
        "编程极客",
        "看书",
        "唱歌",
        "绘画手作",
        "美食探店",
        "cosplay",
        "篮球",
        "写作创作",
        "咖啡茶艺",
        "玄学星座",
        "实习内推",
        "脱单",
        "活动组队",
        "失物招领",
        "副业兼职",
        "二手交易",
        "游戏陪玩",
        "技能学习",
        "情感洞",
        "宠物生活",
        "面试分享",
        "校园热点",
        "校园问答",
        "公益志愿",
        "跑腿互助",
        "校友人脉",
        "租房合租",
        "留学互助",
        "创业孵化",
        "拼车出行",
        "商业合作",
      ],
      industryList: ["生物", "制药", "化工", "医疗"],
      industryDirectionList: [
        "生物学研究人员",
        "医药研发",
        "生物信息工程师",
        "药品生产",
        "药品注册",
        "医药项目经理",
        "细胞培养员",
        "药理毒理研究院",
        "药物合成",
      ],
      selectedPreferences: [],
    };
  },
  onLoad(e) {
    this.step = 1;
    this.getWorkFile();
    // 监听从裁剪页发布的事件，获得裁剪结果
    uni.$on("uAvatarCropper", (path) => {
      this.headerImg = path;
      let file = this.common.base64toFile(path, new Date().getTime());
      if (file.type.indexOf("image") < 0) {
        // this.$tips("请选择图片", "error");
        this.$refs.uToast.show({
          title: "请选择图片",
          type: "error",
        });
        return false;
      }
      uni.uploadFile({
        url: this.$u.http.config.baseUrl + "/app/User/File",
        file: file,
        fileType: "image",
        header: {
          Authorization: "Bearer " + this.vuex_token,
        },
        complete: (res) => {
          this.form.path = JSON.parse(res.data).data;
        },
      });
    });

    if (this.vuex_user.id) {
      this.form.userId = this.vuex_user.id;
    } else {
      // this.$u.route({
      //   url: "/pages/login/login/login",
      // });
    }
    this.getShool();
    var arr1 = [],
      arr2 = [];
    var isyear = new Date().getFullYear();
    for (var i = 1990; i <= isyear + 10; i++) {
      if (i <= isyear) {
        arr1.push({
          value: i,
          label: i,
        });
      }
      arr2.push({
        value: i,
        label: i,
      });
    }
    this.timeList.push(arr1);
    this.timeList.push(arr2);
    this.defaultTime = [arr1.length - 1, arr2.length - 7];
    this.echoFn();
  },

  methods: {
    getWorkFile() {
      this.$u.apiList.GetWorkFile().then((res) => {
        this.WorkAreaList = res.map((item) => {
          return {
            label: item.workFieldName,
            value: item.id,
          };
        });
      });
    },
    // 回填个人信息  如果已经存在教师身份，学生身份未认证时
    async echoFn() {
      const res = await this.$u.apiList.SelectUserTypeApi();
      console.log(res, "res---");
      const jzgFlag = res.jzgFlag;
      const studentFlag = res.studentFlag;
      if (studentFlag === false && jzgFlag === true) {
        this.form.name = this.vuex_user.userName;
        this.form.sex = this.vuex_user.sex;
        this.headerImg = this.$u.http.config.baseUrl + this.vuex_user.head;
        this.form.path = this.vuex_user.head;
      }
    },
    //完成信息填写
    async complete() {
        console.log("完成----")
      var data = this.form;
      if (data.educationStr == "") {
        // return this.$tips("请选择学历", "error");
        return this.$refs.uToast.show({
          title: "请选择学历",
          type: "error",
        });
      }
      if (data.schoolId == "") {
        // return this.$tips("请选择学校", "error");
        return this.$refs.uToast.show({
          title: "请选择学校",
          type: "error",
        });
      }
      if (data.college == "") {
        // return this.$tips("请填写学院", "error");
        return this.$refs.uToast.show({
          title: "请填写学院",
          type: "error",
        });
      }
      if (data.major == "") {
        // return this.$tips("请填写专业", "error");
        return this.$refs.uToast.show({
          title: "请填写专业",
          type: "error",
        });
      }
      if (data.startYear == "" && data.endYear == "") {
        // return this.$tips("请选择在校时间", "error");
        return this.$refs.uToast.show({
          title: "请选择在校时间",
          type: "error",
        });
      }
      if (new Date(data.startYear) - new Date(data.endYear) > 0) {
        // return this.$tips("请选择正确的在校时间", "error");
        return this.$refs.uToast.show({
          title: "请选择正确的在校时间",
          type: "error",
        });
      }
      if(data.list == "") {
        return this.$refs.uToast.show({
            title:'请选择行业领域',
            type:'error'
        })
      }
      // console.log(data,'data-')
      // return
      data.userType = 2;
      data.userName = this.form.name;
      console.log(data, "data--");
      // return
      const res = await this.$u.api.saveUserInfo(data);
      console.log(res, "res--");
      const req = {
        userId: this.vuex_user.id,
        educationId: res,
      };
      const result = await this.$u.apiList.SelectEducation(req);
      console.log(result, "result--");
      // return
      this.$u.vuex("vuex_token", result.token);
      this.$u.vuex("vuex_glyType", result.glyType);
      this.$u.vuex("vuex_user", result.user);
      // return
      //   this.$u.api.getUser().then(() => {
      //     this.vuex_user.isFill = true;
      //     uni.switchTab({
      //       url: "../../main/index/index",
      //     });
      //   });
      this.step = 2;
    },
    // 获取学校
    getShool() {
      this.$u.api.GetAllSchool().then((res) => {
        for (let i = 0; i < res.length; i++) {
          this.shoolList.push({
            label: res[i].schoolName + "",
            value: res[i].id + "",
          });
        }
      });
    },
    //获取学院
    getColleg(id) {
      const data = {
        schoolid: id,
      };
      this.$u.apiList.GetCollegeList(data).then((res) => {
        this.CollegeList = [];
        for (let i = 0; i < res.length; i++) {
          this.CollegeList.push({
            label: res[i].name + "",
            value: res[i].id + "",
          });
        }
      });
    },
    //获取学院专业
    getMajor(id) {
      const data = {
        schoolid: this.form.schoolId,
        collegeid: id,
      };
      this.$u.apiList.GetMajorList(data).then((res) => {
        this.MajorList = [];
        for (let i = 0; i < res.length; i++) {
          this.MajorList.push({
            label: res[i].name + "",
            value: res[i].id + "",
          });
        }
      });
    },
    // 学历选择
    educationalSelect(index) {
      this.form.educationStr = this.educationalList[index].text;
    },
    // 时间选择
    confirm(e) {
      this.showTime = e[0].value + " - " + e[1].value;
      this.form.startYear = e[0].value + "";
      this.form.endYear = e[1].value + "";
    },
    // 学校选择
    shoolSelect(e) {
      this.form.college = "";
      this.form.collegeId = "";
      this.form.major = "";
      this.form.majorId = "";
      this.shoolName = e[0].label;
      this.form.schoolId = e[0].value;
      this.getColleg(this.form.schoolId);
    },
    //学院选择
    selectCpllege(e) {
      this.form.major = "";
      this.form.majorId = "";
      this.form.college = e[0].label;
      this.form.collegeId = e[0].value;
      this.getMajor(this.form.collegeId);
    },
    //选择专业
    selectMajor(e) {
      this.form.major = e[0].label;
      this.form.majorId = e[0].value;
    },
    workAreaSelect(e) {
      console.log("选择行业领域", e);
      this.form.List=e[0].value
      this.selectedWorkArea=e[0].label
    },
    // 头像裁剪
    chooseAvatar() {
      // 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
      this.$u.route({
        // 关于此路径，请见下方"注意事项"
        url: "/uview-ui/components/u-avatar-cropper/u-avatar-cropper",
        // 内部已设置以下默认参数值，可不传这些参数
        params: {
          // 输出图片宽度，高等于宽，单位px
          destWidth: 200,
          // 裁剪框宽度，高等于宽，单位px
          rectWidth: 200,
          // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
          fileType: "jpg",
        },
      });
    },
    back() {
      this.step = 0;
    },
    next() {
      console.log(this.form, "this.form--");
      var data = this.form;
      if (!data.path) {
        // return this.$tips("请上传头像", "error");
        return this.$refs.uToast.show({
          title: "请上传头像",
          type: "error",
        });
      }
      if (!data.name) {
        // return this.$tips("请填写真实姓名", "error");
        return this.$refs.uToast.show({
          title: "请填写真实姓名",
          type: "error",
        });
      }
      var reg = new RegExp("^[\u4e00-\u9fa5]{0,}$", "g");
      if (!reg.test(data.name)) {
        //  this.$tips("请输入正确的真实姓名", "error");
        this.$refs.uToast.show({
          title: "请输入正确的真实姓名",
          type: "error",
        });
        return;
      }
      if (!data.sex) {
        // return this.$tips("请选择性别", "error");
        return this.$refs.uToast.show({
          title: "请选择性别",
          type: "error",
        });
      }
      this.step = 1;
    },
    togglePreference(item) {
      const idx = this.selectedPreferences.indexOf(item);
      if (idx > -1) {
        this.selectedPreferences.splice(idx, 1);
      } else {
        if (this.selectedPreferences.length >= 10) {
          this.$refs.uToast.show({
            title: "最多选择10个",
            type: "error",
          });
          return;
        }
        this.selectedPreferences.push(item);
      }
    },
    nextStep() {
      this.step = 3;
    },
    finishPreference() {
      // 这里可以保存选择的偏好，或跳转页面
      // 例如：this.$u.api.savePreference(this.selectedPreferences)
      // uni.switchTab({ url: "../../main/index/index" });
      this.$refs.uToast.show({
        title: "已保存偏好",
        type: "success",
      });
    },
    removePreference(item) {
      const idx = this.selectedPreferences.indexOf(item);
      if (idx > -1) {
        this.selectedPreferences.splice(idx, 1);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.page {
  background-color: rgb(255, 255, 255);
  overflow-y: auto;
  width: 100%;
  overflow-x: hidden;
  height: 100%;

  .group_2 {
    padding: 0.49rem 0.29rem 1.15rem;
    overflow-y: auto;
    .text_3 {
      align-self: center;
      color: rgb(51, 51, 51);
      font-size: 0.18rem;
      font-family: PingFang;
      line-height: 0.17rem;
    }
    .group_1 {
      margin-top: 0.15rem;
      .text_4 {
        margin-top: 0.15rem;
        color: rgb(153, 153, 153);
        font-size: 0.14rem;
        font-family: PingFang;
        line-height: 0.13rem;
      }
    }
    .group_5 {
      margin-top: 0.4rem;
      .text_5 {
        align-self: flex-start;
        color: rgb(51, 51, 51);
        font-size: 0.15rem;
        font-family: PingFang;
        line-height: 0.14rem;
      }
      .view {
        // border-bottom: solid 0.005rem rgb(153, 153, 153);
      }
      .text-wrapper {
        // margin-top: 0.16rem;
      }
    }
    .input-box {
      padding: 20rpx 40rpx;
      border-radius: 100rpx;
      background: #f6f8f9;
    }
    .group_3 {
      margin-top: 32rpx;
      // height: 1.35rem;
      position: relative;
      .image_4 {
        filter: drop-shadow(0px 0.015rem 0.03rem rgba(102, 102, 102, 0.23));
        width: 0.68rem;
        height: 0.68rem;
      }
      .text_7 {
        color: rgb(51, 51, 51);
        font-size: 32rpx;
        font-family: PingFang;
        line-height: 32rpx;
        font-weight: bold;
        // position: absolute;
        // left: 0;
        // top: 0;
      }
      .group_4.on,
      .group_6.on {
        image {
          border: 2px solid #5ac0ff;
          border-radius: 50%;
          overflow: hidden;
        }
      }
      .group_6 {
        position: absolute;
        left: 0.4rem;
        top: 0.4rem;
        .text_8 {
          margin-top: 0.15rem;
          color: rgb(51, 51, 51);
          font-size: 0.14rem;
          font-family: PingFang;
          line-height: 0.13rem;
        }
      }
      .group_4 {
        position: absolute;
        right: 0.4rem;
        top: 0.4rem;
        .text_9 {
          margin-top: 0.15rem;
          color: rgb(51, 51, 51);
          font-size: 0.14rem;
          font-family: PingFang;
          line-height: 0.13rem;
        }
      }
    }
    .text-wrapper_1 {
      padding: 0.15rem 0 0.14rem;
      /*  background-image: linear-gradient(90deg,
          rgb(135, 230, 254) 0%,
          rgb(91, 192, 254) 52%,
          rgb(46, 155, 255) 100%);
      box-shadow: 0px 0.03rem 0.09rem rgba(38, 122, 199, 0.34); */
      background: #3cb5fb;
      border-radius: 0.23rem;
    }
    .button {
      margin: 66rpx 0 0;
    }
  }
}

.userList {
  // padding-left: 0.16rem;
  // padding-top: 0.3rem;
  background: #f6f8fa;
  height: 100vh;
  .text-wrapper_1 {
    padding: 0.15rem 0 0.14rem;
    /* background-image: linear-gradient(90deg,
          #87e6fe 0%,
          #5bc0fe 52%,
          #2e9bff 100%);
      box-shadow: 0px 0.03rem 0.09rem rgba(38, 122, 199, 0.34); */
    background: #3cb5fb;
    border-radius: 0.23rem;
  }

  .button {
    margin: 0.6rem 0.15rem 0;
  }

  .text_3 {
    // align-self: center;
    margin-top: 40rpx;
    margin-left: 50rpx;
    color: rgb(51, 51, 51);
    font-size: 0.18rem;
    font-family: PingFang;
    line-height: 0.17rem;
  }

  .group_4 {
    margin: 40rpx auto;
    background: #fff;
    width: calc(100% - 80rpx);
    padding: 20rpx;
    border-radius: 32rpx;

    .list-item {
      padding: 0.05rem 0.1rem 0.05rem;
      border-bottom: 2rpx solid #f6f8f9;
      &:last-child {
        border-bottom: none;
      }

      .text_8 {
        color: #000;
        font-size: 32rpx;
        font-family: PingFang;
        line-height: 0.35rem;
        // margin-right: 0.15rem;
      }
      .item-right {
        display: flex;
        align-items: center;
        width: calc(100% - 150rpx);
      }
      .right-img {
        width: 12rpx;
        height: 24rpx;
        margin-left: 10rpx;
        margin-top: 5rpx;
      }

      .text_26 {
        color: #000;
        font-size: 0.17rem;
        font-family: PingFang;
        line-height: 32rpx;
      }
    }

    .group_5 {
      margin-top: 0;
    }

    ::v-deep .u-input__input {
      font-size: 32rpx;
    }
  }
}
::v-deep .u-navbar-placeholder {
  background: #f6f8fa;
  // display: none;
  height: 40rpx !important;
}
.preference-page {
  background: #fff;
  min-height: 100vh;
  //   padding: 0 24rpx;

  .selected-count {
    padding: 0 24rpx;
    margin: 24rpx 0 30rpx 0;
    font-weight: bold;
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.9);
    .desc {
      display: block;
      font-weight: 400;
      font-size: 24rpx;
      color: rgba(0, 0, 0, 0.6);
      margin-top: 8rpx;
    }
  }
  .selected-tags {
    padding: 0 24rpx;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 24rpx;
    gap: 24rpx 24rpx;

    .tag {
      display: flex;
      align-items: center;
      background: #3cb5fb;
      color: #fff;
      border-radius: 64rpx;
      padding: 20rpx;
      font-size: 28rpx;
      position: relative;
      max-width: 200rpx;
      margin-right: 0;
      margin-bottom: 0;
      box-sizing: border-box;
      justify-content: flex-start;
      gap: 6rpx;
    }

    .close-btn {
      font-size: 28rpx;
      margin-right: 8rpx;
      cursor: pointer;
      color: #fff;
      font-weight: bold;
      line-height: 1;
      display: inline-block;
      width: 32rpx;
      height: 32rpx;
      text-align: center;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.18);
    }
  }
  .line {
    width: 100%;
    height: 2rpx;
    background: #f6f8f9;
  }
  .line-shadow {
    width: 100%;
    height: 2rpx;
    background: #ffffff;
    box-shadow: 0rpx -6rpx 12rpx 0rpx rgba(0, 0, 0, 0.05);
    margin-top: 56rpx;
  }
  .all-tags {
    padding: 0 24rpx;
    margin-top: 48rpx;
    .title {
      font-weight: bold;
      font-size: 32rpx;
      color: rgba(0, 0, 0, 0.9);
      margin-bottom: 16rpx;
    }
    .tags-list {
      display: flex;
      flex-wrap: wrap;
      gap: 24rpx 24rpx;

      .tag {
        background: #f0f4f8;
        color: #333;
        border-radius: 200rpx;
        padding: 20rpx;
        font-size: 28rpx;
        text-align: center;
        max-width: 152rpx;
        // margin-right: 24rpx;
        // margin-bottom: 24rpx;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &.selected {
          background: #3cb5fb;
          color: #fff;
        }
      }

      .industry-tag {
        background: #f0f4f8;
        color: #333;
        border-radius: 200rpx;
        padding: 32rpx;
        font-size: 28rpx;
        text-align: center;
        max-width: 152rpx;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &.selected {
          background: #3cb5fb;
          color: #fff;
        }
      }
    }
  }
  .btn-box {
    padding: 0 24rpx;
  }
  .button {
    margin: 48rpx 0 0 0;
    width: 100%;
  }
}
</style>
