ams-backend/front/admin-front/src/views/autoplay/index.vue

<template>
  <div class="app-container">
    <div class="top">
      <div class="title">
        任务列表
      </div>
      <div class="add">
        <div class="button" @click="addTaskDetails">
          <img src="../../assets/airdrop/add.svg" alt="add">
          添加任务
        </div>
      </div>
    </div>
    <div class="app-container-table-screening">
      <div class="app-container-table-screening-item">
        账号类型
        <img src="../../assets/address/unfold_more.svg" alt="unfold_more">
      </div>
      <div class="app-container-table-screening-item">
        余额
        <img src="../../assets/address/unfold_more.svg" alt="unfold_more">
      </div>
    </div>
    <div class="app-container-table-main">
      <div class="app-container-table-main-item" v-for="(item,index) in missionData">
        <div class="head">
          <div class="avatar">
            <img class="avatar" :src="url + 'disk/file/' + item.projectLogo" alt="avatar">
          </div>
          <div class="name" @click="viewTaskDetails(item)">
            <div class="missionName">
              {{ item.taskName }}
              <img src="../../assets/autoplay/arrow_forward.svg" alt="arrow_forward">
            </div>
            <div class="projectName">
              {{ item.projectName }}
            </div>
          </div>
        </div>
        <div class="jump" @click="viewExecutionHistory(item)">
          执行记录
          <img src="../../assets/autoplay/arrow_forward.svg" alt="arrow_forward">
        </div>
        <div class="implementationStrategy">
          <!--           <div class="item" v-if="item.implementationStrategy.length > 0" v-for="(item1,index) in item.implementationStrategy">-->
          <!--             {{item1}}-->
          <!--           </div>-->
          <div class="item-no">
            暂无
          </div>
        </div>
        <div class="implementationStrategyText">
          执行策略
        </div>
        <div class="underImplementation" v-if="item.executeStatus === 0">
          <div class="numberOfExecutions">
            <div class="text">
              当前执行/计划执行次数
            </div>
            <div class="number">
              {{ item.executeTimes }}/{{ item.planTimes }}
            </div>
          </div>
          <div class="progressBar" @click="progressBarDetails(item)">
            <div class="progressBar-blue">
              <img src="../../assets/autoplay/airplanemode_active.svg" alt="airplanemode_active">
              进行中
            </div>
            <div class="details">
              详情
              <img src="../../assets/autoplay/arrow_forward.svg" alt="arrow_forward">
            </div>
          </div>
        </div>
        <div class="batchExecution" v-if="item.executeStatus !== 0">
          <div class="left">
            <div class="number">
              {{ item.executeTimes }}/{{ item.planTimes }}
            </div>
            <div class="text">
              当前执行/计划执行次数
            </div>
          </div>
          <div class="right" @click="batchExecution(item)">
            <img src="../../assets/autoplay/autoplay.svg" alt="autoplay">
            批量执行
          </div>
        </div>
        <div class="horizontalLine"/>
        <div class="time">
          上次执行时间: {{ item.lastExecuteTime }}
        </div>
      </div>
    </div>
    <el-drawer
      :visible.sync="drawerDetails"
      :with-header="false">
      <div class="drawerAddress-container">
        <div class="drawerAddress-container-head">
          <div class="drawerAddress-container-head-left">
            <div class="avatar">
              <img class="avatar" :src="url + 'disk/file/' + currentTaskInfo.projectLogo" alt="avatar">
            </div>
            <div class="info">
              <div class="projectName">
                {{ currentTaskInfo.projectName }}
              </div>
              <div class="id">
                {{ currentTaskInfo.amsTaskId }}
              </div>
            </div>
          </div>
          <div class="drawerAddress-container-head-right">
            <div class="complete" @click="modifyTask">
              <img src="../../assets/address/done_all.svg" alt="done_all">
              完成
            </div>
          </div>
        </div>
        <div class="drawerAddress-container-main">
          <div class="title">
            任务详情
          </div>
          <div class="input">
            任务名称
            <el-input v-model="currentTaskInfo.taskName" placeholder="任务名称"></el-input>
          </div>
          <div class="select">
            <div class="input">
              选择类型
              <el-select style="width: 140px" v-model="currentTaskInfo.taskType" placeholder="选择类型">
                <el-option
                  v-for="item in optionsTaskType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="input">
              任务code
              <el-input v-model="currentTaskInfo.taskCode" placeholder="任务code"></el-input>
            </div>
          </div>
          <div class="input">
            计划任务执行次数
            <el-input v-model="currentTaskInfo.planTimes" placeholder="计划任务执行次数"></el-input>
          </div>
          <div class="input">
            预估GAS
            <el-input v-model="currentTaskInfo.estimatedGas" placeholder="预估GAS"></el-input>
          </div>
        </div>
      </div>
    </el-drawer>
    <el-drawer
      :visible.sync="drawerRecord"
      :with-header="false"
      @closed="drawerRecordClosed">
      <div class="drawerRecord-container" v-if="drawerRecordStatus === 0">
        <div class="drawerAddress-container-head">
          <div class="drawerAddress-container-head-left">
            <div class="missionName">
              <div class="name">
                任务名称
              </div>
            </div>
            <div class="text">
              查看历史交互记录
            </div>
          </div>
        </div>
        <div class="drawerAddress-container-main">
          <div class="drawerAddress-container-head-left">
            <div class="avatar">
              <img class="avatar" :src="url + 'disk/file/' + currentTaskInfo.projectLogo" alt="avatar">
            </div>
            <div class="info">
              <div class="projectName">
                {{ currentTaskInfo.projectName }}
              </div>
              <div class="webLink">
                <img src="../../assets/autoplay/language.svg" alt="language">
                <!--                {{currentTaskInfo.projectUrl}}-->
                <a :href="currentTaskInfo.projectUrl" target="_blank">{{ currentTaskInfo.projectUrl }}</a>
              </div>
            </div>
          </div>
          <div class="horizontalLine"/>
          <div class="recordTitle">
            <div class="left">
              <div class="text">
                执行记录
              </div>
              <div class="number">
                累计执行: {{ recordData.length }}
              </div>
            </div>
            <div class="right">
              <!--              <el-date-picker-->
              <!--                v-model="value1"-->
              <!--                type="daterange"-->
              <!--                range-separator="至"-->
              <!--                start-placeholder="开始日期"-->
              <!--                end-placeholder="结束日期">-->
              <!--              </el-date-picker>-->
            </div>
          </div>
          <div class="table">
            <el-table
              :data="recordData"
              style="width: 100%">
              <el-table-column
                prop="executeId"
                label="执行ID">
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="时间">
              </el-table-column>
              <el-table-column
                prop="groupName"
                label="钱包名称">
              </el-table-column>
              <el-table-column
                prop="totalGas"
                label="总GAS">
              </el-table-column>
              <el-table-column
                prop="executeStatus"
                label="状态"
                width="120"
                align="center">
                <template v-slot="scope">
                  <div class="status" v-if="scope.row.executeStatus === 0" @click="viewRecordDetails(scope.row,1)">
                    <div class="text" style="color: #2980FF;">
                      <img src="../../assets/autoplay/clock_loader_60.svg" alt="clock_loader_60">
                      进行中
                    </div>
                    <img src="../../assets/autoplay/chevron_right.svg" alt="chevron_right">
                  </div>
                  <div class="status" v-if="scope.row.executeStatus === 1" @click="viewRecordDetails(scope.row,2)">
                    <div class="text">
                      <img src="../../assets/autoplay/check.svg" alt="check">
                      已完成
                    </div>
                    <img src="../../assets/autoplay/chevron_right.svg" alt="chevron_right">
                  </div>
                  <div class="status" v-if="scope.row.executeStatus === 2" @click="viewRecordDetails(scope.row,3)">
                    <div class="text" style="color: #EB5757">
                      <img src="../../assets/autoplay/cancel.svg" alt="cancel">
                      未完成
                    </div>
                    <img src="../../assets/autoplay/chevron_right.svg" alt="chevron_right">
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="drawerView-container-footer">
          <div class="pagination">
            <el-pagination
              small
              layout="prev, pager, next"
              :page-size="10"
              :total="3">
            </el-pagination>
          </div>
        </div>
      </div>
      <div class="drawerRecord-container" v-if="drawerRecordStatus === 1">
        <div class="drawerAddress-container-head">
          <div class="drawerAddress-container-head-left">
            <div class="back" style="cursor: pointer;" @click="drawerRecordStatus = 0">
              <img src="../../assets/autoplay/arrow_left_alt.svg" alt="arrow_left_alt">
              返回
            </div>
            <div class="missionName">
              <div class="id">
                {{ currentTaskInfo.amsTaskId }}
              </div>
              <div class="name">
                {{ currentTaskInfo.taskName }}
              </div>
            </div>
            <div class="text" style="color: #2980FF">
              任务交互类型: {{ currentTaskInfo.taskType }}
            </div>
          </div>
        </div>
        <div class="drawerAddress-container-main">
          <div class="interactionStrategy">
            <div class="item">
              <div class="title">
                <img src="../../assets/autoplay/account_balance_wallet.svg" alt="account_balance_wallet">
                交互钱包
              </div>
              <div class="info">
                {{ currentRecordData.groupName }}
              </div>
            </div>
            <div class="item">
              <div class="title">
                <img src="../../assets/autoplay/avg_pace.svg" alt="avg_pace">
                最小间隔时间
              </div>
              <div class="info">
                {{ currentRecordData.intervalMin }}/分
              </div>
            </div>
            <div class="item">
              <div class="title">
                <img src="../../assets/autoplay/avg_pace.svg" alt="avg_pace">
                最大间隔时间
              </div>
              <div class="info">
                {{ currentRecordData.intervalMax }}/分
              </div>
            </div>
            <div class="item">
              <div class="title">
                <img src="../../assets/autoplay/gas_meter.svg" alt="gas_meter">
                最大 Gas fee
              </div>
              <div class="info">
                {{ currentRecordData.maxGas }}
              </div>
            </div>
            <div class="item" v-for="item in currentRecordData.airdropParams">
              <div class="title">
                {{ item.note }}
              </div>
              <div class="info">
                {{ item.value }}
              </div>
            </div>
          </div>
          <div class="recordTitle">
            <div class="left">
              <div class="text">
                正在进行中
              </div>
              <div class="number">
                总计交互地址: {{ ongoingDataTotal }}
              </div>
            </div>
            <!--            <div class="right" style="cursor: pointer" @click="refresh">-->
            <!--              <img src="../../assets/autoplay/Frame.svg" alt="Frame">-->
            <!--            </div>-->
            <div class="button" @click="refresh">
              <img src="../../assets/autoplay/Frame.svg" alt="Frame">
              刷新
            </div>
          </div>
          <div class="table">
            <el-table
              :data="ongoingData"
              style="width: 100%">
              <el-table-column
                prop="address"
                label="地址"
                width="150">
              </el-table-column>
              <el-table-column
                label="金额"
                prop="amount">
              </el-table-column>
              <el-table-column
                label="Gas"
                prop="gas">
              </el-table-column>
              <el-table-column
                label="TX ID"
                prop="txId">
              </el-table-column>
              <el-table-column
                label="状态"
                prop="status">
                <template v-slot="scope">
                  <div class="status" style="cursor: auto">
                    <div class="text" v-if="scope.row.status === 0" style="color: #EB5757;">
                      <img src="../../assets/autoplay/cancel.svg" alt="cancel">
                      未完成
                    </div>
                    <div class="text" v-if="scope.row.status === 1">
                      <img src="../../assets/autoplay/check.svg" alt="check">
                      已完成
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="drawerView-container-footer">
          <div class="pagination">
            <el-pagination
              small
              layout="prev, pager, next"
              :page-size="10"
              :total="3">
            </el-pagination>
          </div>
        </div>
        <div class="progressBarBox">
          <div class="progressBar">
            <div class="progressBar-two">
              <img src="../../assets/autoplay/motion_photos_paused.svg" alt="motion_photos_paused">
              当前执行进度
            </div>
            <div class="number">
              {{ currentTaskInfo.executeTimes }}/{{ currentTaskInfo.planTimes }}
            </div>
          </div>
        </div>
      </div>
      <div class="drawerRecord-container" v-if="drawerRecordStatus === 2">
        <div class="drawerAddress-container-head">
          <div class="drawerAddress-container-head-left">
            <div class="back" style="cursor: pointer;" @click="drawerRecordStatus = 0">
              <img src="../../assets/autoplay/arrow_left_alt.svg" alt="arrow_left_alt">
              返回
            </div>
            <div class="missionName">
              <div class="id">
                {{ currentTaskInfo.amsTaskId }}
              </div>
              <div class="name">
                {{ currentTaskInfo.taskName }}
              </div>
            </div>
            <div class="text" style="color: #2980FF">
              任务交互类型: {{ currentTaskInfo.taskType }}
            </div>
          </div>
        </div>
        <div class="drawerAddress-container-main">
          <div class="interactionStrategy">
            <div class="item">
              <div class="title">
                <img src="../../assets/autoplay/account_balance_wallet.svg" alt="account_balance_wallet">
                交互钱包
              </div>
              <div class="info">
                {{ currentRecordData.groupName }}
              </div>
            </div>
            <div class="item">
              <div class="title">
                <img src="../../assets/autoplay/avg_pace.svg" alt="avg_pace">
                最小间隔时间
              </div>
              <div class="info">
                {{ currentRecordData.intervalMin }}/分
              </div>
            </div>
            <div class="item">
              <div class="title">
                <img src="../../assets/autoplay/avg_pace.svg" alt="avg_pace">
                最大间隔时间
              </div>
              <div class="info">
                {{ currentRecordData.intervalMax }}/分
              </div>
            </div>
            <div class="item" v-for="item in currentRecordData.airdropParams">
              <div class="title">
                {{ item.note }}
              </div>
              <div class="info">
                {{ item.value }}
              </div>
            </div>
          </div>
          <div class="recordTitle">
            <div class="left">
              <div class="text">
                已完成
              </div>
              <div class="number">
                总计交互地址: {{ ongoingDataTotal }}
              </div>
            </div>
          </div>
          <div class="table">
            <el-table
              :data="ongoingData"
              style="width: 100%">
              <el-table-column
                prop="address"
                label="地址"
                width="150">
              </el-table-column>
              <el-table-column
                label="金额"
                prop="amount">
              </el-table-column>
              <el-table-column
                label="Gas"
                prop="gas">
              </el-table-column>
              <el-table-column
                label="TX ID"
                prop="txId">
              </el-table-column>
              <el-table-column
                label="状态"
                prop="status">
                <template v-slot="scope">
                  <div class="status" style="cursor: auto">
                    <div class="text">
                      <img src="../../assets/autoplay/check.svg" alt="check">
                      已完成
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="drawerView-container-footer">
          <div class="pagination">
            <el-pagination
              small
              layout="prev, pager, next"
              :page-size="10"
              :total="3">
            </el-pagination>
          </div>
        </div>
        <div class="progressBarBox">
          <div class="progressBar" style="background: black">
            <div class="progressBar-two" style="background: black">
              <img src="../../assets/autoplay/done_all.svg" alt="done_all">
              执行进度已完成
            </div>
            <!--            <div class="number">-->
            <!--              {{ currentTaskInfo.executeTimes }}/{{ currentTaskInfo.planTimes }}-->
            <!--            </div>-->
          </div>
        </div>
      </div>
      <div class="drawerRecord-container" v-if="drawerRecordStatus === 3">
        <div class="drawerAddress-container-head">
          <div class="drawerAddress-container-head-left">
            <div class="back" style="cursor: pointer;" @click="drawerRecordStatus = 0">
              <img src="../../assets/autoplay/arrow_left_alt.svg" alt="arrow_left_alt">
              返回
            </div>
            <div class="missionName">
              <div class="id">
                {{ currentTaskInfo.amsTaskId }}
              </div>
              <div class="name">
                {{ currentTaskInfo.taskName }}
              </div>
            </div>
            <div class="text" style="color: #2980FF">
              任务交互类型: {{ currentTaskInfo.taskType }}
            </div>
          </div>
        </div>
        <div class="drawerAddress-container-main">
          <div class="interactionStrategy">
            <div class="item">
              <div class="title">
                <img src="../../assets/autoplay/account_balance_wallet.svg" alt="account_balance_wallet">
                交互钱包
              </div>
              <div class="info">
                {{ currentRecordData.groupName }}
              </div>
            </div>
            <div class="item">
              <div class="title">
                <img src="../../assets/autoplay/avg_pace.svg" alt="avg_pace">
                最小间隔时间
              </div>
              <div class="info">
                {{ currentRecordData.intervalMin }}/分
              </div>
            </div>
            <div class="item">
              <div class="title">
                <img src="../../assets/autoplay/avg_pace.svg" alt="avg_pace">
                最大间隔时间
              </div>
              <div class="info">
                {{ currentRecordData.intervalMax }}/分
              </div>
            </div>
            <div class="item">
              <div class="title">
                <img src="../../assets/autoplay/gas_meter.svg" alt="gas_meter">
                最大 Gas fee
              </div>
              <div class="info">
                {{ currentRecordData.maxGas }}
              </div>
            </div>
            <div class="item" v-for="item in currentRecordData.airdropParams">
              <div class="title">
                {{ item.note }}
              </div>
              <div class="info">
                {{ item.value }}
              </div>
            </div>
          </div>
          <div class="recordTitle">
            <div class="left">
              <div class="text">
                正在进行中
              </div>
              <div class="number">
                总计交互地址: {{ ongoingDataTotal }}
              </div>
            </div>
            <div style="display: flex;align-items: center;gap:32px">
              <div class="button" style="color: #EB5757" @click="retryPassword = true">
                <img src="../../assets/autoplay/retry.svg" alt="retry">
                重试失败
              </div>
              <div class="button" @click="refresh">
                <img src="../../assets/autoplay/Frame.svg" alt="Frame">
                刷新
              </div>
            </div>

          </div>
          <div class="table">
            <el-table
              :data="ongoingData"
              style="width: 100%">
              <el-table-column
                prop="address"
                label="地址"
                width="150">
              </el-table-column>
              <el-table-column
                label="金额"
                prop="amount">
              </el-table-column>
              <el-table-column
                label="Gas"
                prop="gas">
              </el-table-column>
              <el-table-column
                label="TX ID"
                prop="txId">
              </el-table-column>
              <el-table-column
                label="状态"
                prop="status">
                <template v-slot="scope">
                  <div class="status" style="cursor: auto">
                    <div class="text" v-if="scope.row.status === 0" style="color: #EB5757;">
                      <img src="../../assets/autoplay/cancel.svg" alt="cancel">
                      未完成
                    </div>
                    <div class="text" v-if="scope.row.status === 1">
                      <img src="../../assets/autoplay/check.svg" alt="check">
                      已完成
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="drawerView-container-footer">
          <div class="pagination">
            <el-pagination
              small
              layout="prev, pager, next"
              :page-size="10"
              :total="3">
            </el-pagination>
          </div>
        </div>
        <div class="progressBarBox">
          <div class="progressBar" style="background: #EB5757">
            <div class="progressBar-two" style="background: #EB5757">
              <img src="../../assets/autoplay/done_all.svg" alt="done_all">
              执行进度已完成,部分失败
            </div>
            <!--            <div class="number">-->
            <!--              {{ currentTaskInfo.executeTimes }}/{{ currentTaskInfo.planTimes }}-->
            <!--            </div>-->
          </div>
        </div>
        <div class="accountPassword" v-if="retryPassword">
          <div class="title">
            输入钱包密码
          </div>
          <div class="inputTitle">
            钱包密码
          </div>
          <el-input type="password" :show-password="true" v-model="retryParams.password"
                    placeholder="输入钱包密码"></el-input>
          <div class="confirm" @click="retry">
            <img src="../../assets/autoplay/check1.svg" alt="check1">
            确认
          </div>
          <div class="tip">
            <div class="title">
              <img src="../../assets/address/tips_and_updates.svg" alt="tips_and_updates">
              提示
            </div>
            <div class="description">
              此密码为您账户钱包的 Keystore 密码，请妥善保管，
              系统无法为您找回。
            </div>
          </div>
        </div>

      </div>

    </el-drawer>
    <el-drawer
      :visible.sync="drawerStrategy"
      :with-header="false"
      @closed="accountPassword = false">
      <div class="drawerStrategy-container">
        <div class="drawerAddress-container-head">
          <div class="drawerAddress-container-head-left">
            <div class="info">
              <div class="projectName">
                执行策略
              </div>
              <div class="id">
                {{ currentTaskInfo.taskType }} | {{ currentTaskInfo.taskName }}
              </div>
            </div>
          </div>
          <div class="drawerAddress-container-head-right">
            <div class="complete" @click="accountPassword = true">
              <img src="../../assets/address/done_all.svg" alt="done_all">
              下一步
            </div>
          </div>
        </div>
        <div class="drawerAddress-container-main">
          <div class="item">
            <div class="title">
              交互钱包
            </div>
            <el-select v-model="batchExecutionParams.groupName" placeholder="选择交互钱包">
              <el-option
                v-for="item in optionsAddress"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <!--          <div class="item">-->
          <!--            <div class="title">-->
          <!--              目标资产（From）-->
          <!--            </div>-->
          <!--            <el-select v-model="chainId" placeholder="选择交互资产">-->
          <!--              <el-option-->
          <!--                v-for="item in options"-->
          <!--                :key="item.value"-->
          <!--                :label="item.label"-->
          <!--                :value="item.value">-->
          <!--              </el-option>-->
          <!--            </el-select>-->
          <!--          </div>-->
          <!--          <div class="item">-->
          <!--            <div class="title">-->
          <!--              目标资产（To）-->
          <!--            </div>-->
          <!--            <el-select v-model="chainId" placeholder="选择交互资产">-->
          <!--              <el-option-->
          <!--                v-for="item in options"-->
          <!--                :key="item.value"-->
          <!--                :label="item.label"-->
          <!--                :value="item.value">-->
          <!--              </el-option>-->
          <!--            </el-select>-->
          <!--          </div>-->
          <div class="item">
            <div class="title">
              间隔时间
            </div>
            <div style="display: flex;gap:24px">
              <el-input v-model="batchExecutionParams.intervalMin" placeholder="输入最小间隔时间/分"></el-input>
              <el-input v-model="batchExecutionParams.intervalMax" placeholder="输入最大间隔时间/分"></el-input>
            </div>
          </div>
          <!--          <div class="item">-->
          <!--            <div class="title">-->
          <!--              交互金额-->
          <!--            </div>-->
          <!--            <el-input v-model="batchExecutionParams.amount" placeholder="输入最大交互金额"></el-input>-->
          <!--          </div>-->
          <!--          <div class="item">-->
          <!--            <div class="title">-->
          <!--              最大 Gas fee-->
          <!--            </div>-->
          <!--            <el-input v-model="batchExecutionParams.maxGas" placeholder="输入最大 Gas fee"></el-input>-->
          <!--          </div>-->
          <div class="item" v-for="item in paramsData">
            <div class="title">
              {{ item.note }}
            </div>
            <el-input v-model="item.value"></el-input>
          </div>
        </div>
        <div class="accountPassword" v-if="accountPassword">
          <div class="title">
            输入钱包密码
          </div>
          <div class="inputTitle">
            钱包密码
          </div>
          <el-input type="password" :show-password="true" v-model="password"
                    placeholder="输入钱包密码"></el-input>
          <div class="confirm" @click="batchExecutionTask">
            <img v-if="!confirmLoading" src="../../assets/autoplay/check1.svg" alt="check1">
            <div v-if="confirmLoading" style="width: 20px;height: 20px;margin-top: -2px">
              <Loading/>
            </div>
            确认
          </div>
          <div class="tip">
            <div class="title">
              <img src="../../assets/address/tips_and_updates.svg" alt="tips_and_updates">
              提示
            </div>
            <div class="description">
              此密码为您账户钱包的 Keystore 密码，请妥善保管，
              系统无法为您找回。
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    <el-drawer
      :visible.sync="drawerAdd"
      :with-header="false">
      <div class="drawerAddress-container">
        <div class="drawerAddress-container-head">
          <div class="drawerAddress-container-head-left" style="align-items: center">
            <!--            <div class="avatar">-->
            <!--              <img v-if="currentAddTaskInfo.projectLogo" class="avatar" :src="url + 'disk/file/' + currentAddTaskInfo.projectLogo" alt="avatar">-->
            <!--            </div>-->
            <!--            <div class="info">-->
            <!--              <div class="projectName">-->
            <!--                {{currentAddTaskInfo.projectName || '项目名称'}}-->
            <!--              </div>-->
            <!--              <div class="id">-->
            <!--                {{currentAddTaskInfo.amsTaskId}}-->
            <!--              </div>-->
            <!--            </div>-->
          </div>
          <div class="drawerAddress-container-head-right">
            <div class="complete" @click="addTask">
              <img src="../../assets/address/done_all.svg" alt="done_all">
              完成
            </div>
          </div>
        </div>
        <div class="drawerAddress-container-main">
          <div class="title">
            任务详情
          </div>
          <div class="input">
            任务名称
            <el-input v-model="currentAddTaskInfo.taskName" placeholder="任务名称"></el-input>
          </div>
          <div class="input">
            选择项目
            <el-select v-model="currentAddTaskInfo.airdropProjectId" placeholder="选择项目">
              <el-option
                v-for="item in addTaskProjectData"
                :key="item.amsProjectId"
                :label="item.projectName"
                :value="item.amsProjectId">
              </el-option>
            </el-select>
          </div>

          <div class="select">
            <div class="input">
              选择类型
              <el-select style="width: 140px" v-model="currentAddTaskInfo.taskType" placeholder="选择类型">
                <el-option
                  v-for="item in optionsTaskType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="input">
              输入合约code
              <el-input v-model="currentAddTaskInfo.taskCode" placeholder="输入合约code"></el-input>
            </div>
          </div>
          <div class="input">
            计划任务执行次数
            <el-input v-model="currentAddTaskInfo.planTimes" placeholder="计划任务执行次数"></el-input>
          </div>
          <div class="input">
            预估GAS
            <el-input v-model="currentAddTaskInfo.estimatedGas" placeholder="预估GAS"></el-input>
          </div>
        </div>
      </div>
    </el-drawer>

  </div>

</template>

<script>
import {addTaskInfo, batchExecution, getExecutionRecord, modifyTaskInfo, parameterSearch, taskPage} from "@/api/task";
import {getGroupList} from "@/api/adress";
import {getInteractionRecord, retryFailed} from "@/api/record";
import {projectPage} from "@/api/project";
import CryptoJS from "crypto-js";
import Web3 from 'web3'
import Loading from "@/components/Loading";

export default {
  components: {Loading},
  data() {
    return {
      missionData: [],
      drawerDetails: false,
      input: '',
      chainId: '',
      optionsTaskType: [
        {
          value: 'BRIDGE',
          label: 'Bridge'
        },
        {
          value: 'NFT',
          label: 'NFT'
        },
        {
          value: 'SWAP',
          label: 'MuteSwap'
        }
      ],
      optionsAddress: [],
      drawerRecord: false,
      drawerRecordStatus: 0,
      value1: '',
      recordData: [],
      ongoingData: [],//下一层
      ongoingDataTotal: 0,
      drawerStrategy: false,
      accountPassword: false,
      retryPassword: false,
      batchExecutionParams: {
        groupName: '',
        maxGas: '',
        intervalMax: 10,
        intervalMin: 1,
        amount: '',
        password: '',
        projectId: '',
        taskId: ''
      },
      password:'',
      retryParams: {
        executeId: '',
        password: ''
      },
      currentTaskInfo: {
        taskType: '',
        taskName: '',
        amsProjectId: '',
        amsTaskId: '',
        planTimes: '',
        projectName: '',
        taskCode: '',
        estimatedGas: ''
      },
      currentRecordData: {},
      paramsData: [],
      url: process.env.VUE_APP_BASE_API,
      drawerAdd: false,
      currentAddTaskInfo: {
        taskType: '',
        taskName: '',
        airdropProjectId: '',
        planTimes: '',
        projectName: '',
        taskCode: ''
      },
      addTaskProjectData: [],
      confirmLoading:false
    }
  },
  mounted() {
    this.getTaskList()
    this.getWalletAddress()
  },
  methods: {
    progressBarDetails(item) {
      console.log(item);
      this.drawerRecord = true
      this.drawerRecordStatus = 1
      this.currentTaskInfo = JSON.parse(JSON.stringify(item))
      this.currentRecordData.groupName = item.groupName
      this.currentRecordData.intervalMax = item.intervalMax
      this.currentRecordData.intervalMin = item.intervalMin
      this.currentRecordData.maxGas = item.maxGas
      this.currentRecordData.executeId = item.executeId
      let params = {
        page: 1,
        pageSize: 10,
        queryValue: item.executeId
      }
      getInteractionRecord(params).then(res => {
        this.ongoingData = res.records
        this.ongoingDataTotal = res.total
      })
    },
    getTaskList() {
      taskPage().then(res => {
        this.missionData = res
      })
    },
    batchExecution(item) {
      this.drawerStrategy = true
      this.currentTaskInfo.taskName = item.taskName
      this.currentTaskInfo.taskType = item.taskType
      this.batchExecutionParams.projectId = item.amsProjectId
      this.batchExecutionParams.taskId = item.amsTaskId
      if (item.taskCode) {
        this.getParameterSearch(item.taskCode)
      }
    },
    getWalletAddress() {
      getGroupList().then(res => {
        res.forEach((item) => {
          let obj = {
            value: item,
            label: item
          }
          this.optionsAddress.push(obj)
        })
      })
    },
    batchExecutionTask() {
      if (this.confirmLoading){
        return
      }
      this.confirmLoading = true
      // 要加密的数据
      const dataToEncrypt = this.password;
      // console.log('输入的密码:', dataToEncrypt);
      // 获取当前北京时间
      const beijingDate = this.getCurrentBeijingTime();
      // 生成keyByte
      const keyByte = this.generateKeyByteArray(beijingDate);
      // console.log('生成的toHex:', keyByte);
      // 加密数据
      const encryptedData = this.encryptData(dataToEncrypt, keyByte);
      console.log('加密后的数据:', encryptedData);

      this.batchExecutionParams.password = encryptedData
      this.batchExecutionParams.airdropParams = this.paramsData
      batchExecution(this.batchExecutionParams).then(() => {
        this.accountPassword = false
        this.drawerStrategy = false
        this.confirmLoading = false
        this.getTaskList()
      }).catch(()=>{
        this.confirmLoading = false
      })
    },
    // 获取当前北京时间并格式化为 YYYYMMDD
    getCurrentBeijingTime() {
      const localDate = new Date();
      const localTime = localDate.getTime(); // 获取当前本地时间的时间戳
      const localOffset = localDate.getTimezoneOffset() * 60000; // 本地时区偏移的毫秒数
      const utcTime = localTime + localOffset; // 转换为 UTC 时间
      const beijingOffset = 8 * 60 * 60000; // 北京时区偏移的毫秒数
      const beijingTime = utcTime + beijingOffset; // 加上北京时区偏移

      const beijingDate = new Date(beijingTime);
      const year = beijingDate.getFullYear();
      const month = (beijingDate.getMonth() + 1).toString().padStart(2, '0');
      const day = beijingDate.getDate().toString().padStart(2, '0');

      return `${year}${month}${day}${year}${month}${day}`;
    },
    // 生成
    generateKeyByteArray(content) {
      let bytes = [];
      let len, c;
      len = content.length;
      for (let i = 0; i < len; i++) {
        c = content[i];
        bytes.push(parseInt(c))
      }
      // console.log('当前北京时间的数组',bytes);
      return Web3.utils.bytesToHex(bytes).substring(2);
    },
    // 加密函数
    encryptData(word, keyStr) {
      let key = CryptoJS.enc.Hex.parse(keyStr)
      // console.log('CryptoJS生成的key',key);
      let encrypted = CryptoJS.AES.encrypt(word, key, {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7}) // 加密模式为ECB，补码方式为PKCS5Padding（也就是PKCS7）

      return encrypted.toString()

    },
    viewTaskDetails(item) {
      this.currentTaskInfo = JSON.parse(JSON.stringify(item))
      this.drawerDetails = true
    },
    modifyTask() {
      let params = {
        taskType: this.currentTaskInfo.taskType,
        taskName: this.currentTaskInfo.taskName,
        airdropProjectId: this.currentTaskInfo.amsProjectId,
        amsTaskId: this.currentTaskInfo.amsTaskId,
        planTimes: this.currentTaskInfo.planTimes,
        taskCode: this.currentTaskInfo.taskCode,
        estimatedGas: this.currentTaskInfo.estimatedGas
      }
      modifyTaskInfo(params).then(() => {
        this.drawerDetails = false
        this.getTaskList()
      })
    },
    addTaskDetails() {
      this.drawerAdd = true
      this.getProjectPage()
    },
    getProjectPage() {
      let params = {
        page: 1,
        pageSize: 100,
      }
      projectPage(params).then(res => {
        this.addTaskProjectData = res.records
      })
    },
    addTask() {
      let params = {
        taskType: this.currentAddTaskInfo.taskType,
        taskName: this.currentAddTaskInfo.taskName,
        airdropProjectId: this.currentAddTaskInfo.airdropProjectId,
        planTimes: this.currentAddTaskInfo.planTimes,
        taskCode: this.currentAddTaskInfo.taskCode,
        estimatedGas: this.currentAddTaskInfo.estimatedGas
      }
      console.log(params);
      addTaskInfo(params).then(() => {
        this.drawerAdd = false
        this.getTaskList()
      })
    },
    viewExecutionHistory(item) {
      this.currentTaskInfo = JSON.parse(JSON.stringify(item))
      let params = {
        page: 1,
        pageSize: 10,
        queryValue: item.amsTaskId
      }
      getExecutionRecord(params).then((res) => {
        this.drawerRecord = true
        this.recordData = res.records
      })
    },
    viewRecordDetails(item, page) {
      this.drawerRecordStatus = page
      this.currentRecordData = item
      console.log(item);
      let params = {
        page: 1,
        pageSize: 10,
        queryValue: item.executeId
      }
      getInteractionRecord(params).then(res => {
        this.ongoingData = res.records
        this.ongoingDataTotal = res.total
      })
    },
    refresh() {
      let params = {
        page: 1,
        pageSize: 10,
        queryValue: this.currentRecordData.executeId
      }
      getInteractionRecord(params).then(res => {
        this.ongoingData = res.records
      })
    },
    getParameterSearch(taskCode) {
      parameterSearch(taskCode).then(res => {
        this.paramsData = res
      })
    },
    retry() {
      let params = {
        executeId: this.currentRecordData.executeId,
        password: this.retryParams.password
      }
      retryFailed(params).then(res => {
        console.log(res);
        this.refresh()
        this.retryPassword = false
      })
    },
    drawerRecordClosed() {
      this.drawerRecordStatus = 0;
      this.retryPassword = false
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .title {
    font-weight: 700;
    font-size: 21px;
    line-height: 28px;
    color: #181818;
  }

  .input {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .add {
      .button {
        width: 148px;
        height: 52px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 4px;
        background: #4A76FF;
        border-radius: 10px;
        font-weight: 700;
        font-size: 15px;
        line-height: 20px;
        color: #FFFFFF;
        cursor: pointer;
      }
    }
  }

  .app-container-table-screening {
    display: flex;
    align-items: center;
    gap: 100px;
    padding: 20px 0;
    margin: 20px 0;
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;

    .app-container-table-screening-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 400;
      font-size: 15px;
      line-height: 20px;
      color: #4d4d4e;
    }
  }

  .app-container-table-main {
    display: flex;
    //justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    height: 650px;
    overflow: auto;

    .app-container-table-main-item {
      width: 340px;
      height: 315px;
      background: #FFFFFF;
      border: 1px solid #2980FF;
      border-radius: 10px;
      padding: 24px;
      position: relative;

      .head {
        display: flex;
        gap: 8px;

        .avatar {
          width: 46px;
          height: 46px;
          background: black;
          border-radius: 50%;
        }

        .name {
          display: flex;
          flex-direction: column;
          gap: 8px;
          cursor: pointer;

          .projectName {
            font-weight: 700;
            font-size: 12px;
            line-height: 16px;
            color: #919191;
          }

          .missionName {
            font-weight: 700;
            font-size: 17px;
            line-height: 22px;
            color: #222222;
            display: flex;
            align-items: center;
            gap: 8px
          }
        }
      }

      .jump {
        position: absolute;
        bottom: 25px;
        right: 24px;
        display: flex;
        gap: 8px;
        font-weight: 700;
        font-size: 12px;
        line-height: 16px;
        color: #2980FF;
        cursor: pointer;
      }

      .implementationStrategy {
        display: flex;
        gap: 12px;
        margin-top: 32px;

        .item {
          width: 68px;
          height: 24px;
          background: #edf2ff;
          border: 1px solid #2980FF;
          border-radius: 4px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-weight: 500;
          font-size: 12px;
          line-height: 16px;
          color: #222222;
        }

        .item-no {
          width: 44px;
          height: 24px;
          background: #F5F5F5;
          border: 1px solid #E0E0E0;
          border-radius: 4px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-weight: 500;
          font-size: 12px;
          line-height: 16px;
          color: #828282;
        }
      }

      .implementationStrategyText {
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        color: #919191;
        margin-top: 8px;
      }

      .underImplementation {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 24px;
        height: 50px;

        .numberOfExecutions {
          display: flex;
          gap: 4px;

          .text {
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
            color: #919191;
          }

          .number {
            font-weight: 700;
            font-size: 12px;
            line-height: 16px;
            color: #222222;
          }
        }

        .progressBar {
          width: 100%;
          height: 28px;
          background: #F5F5F5;
          border-radius: 21px;
          display: flex;
          justify-content: space-between;
          padding-right: 6px;
          cursor: pointer;

          .progressBar-blue {
            width: 147px;
            height: 28px;
            background: #2980FF;
            border-radius: 26px;
            display: flex;
            align-items: center;
            padding-left: 10px;
            gap: 4px;
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
            color: #FFFFFF;
          }

          .details {
            display: flex;
            align-items: center;
            gap: 4px;
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
            color: #7b7b7b;
          }
        }
      }

      .batchExecution {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        margin-top: 24px;
        height: 50px;

        .left {
          display: flex;
          gap: 8px;
          flex-direction: column;

          .text {
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
            color: #919191;
          }

          .number {
            font-weight: 700;
            font-size: 17px;
            line-height: 22px;
            color: #222222;
          }
        }

        .right {
          display: flex;
          gap: 4px;
          align-items: center;
          font-weight: 700;
          font-size: 15px;
          line-height: 20px;
          color: #FFFFFF;
          width: 132px;
          height: 44px;
          justify-content: center;
          background: #2980FF;
          border: 1px solid #2980FF;
          border-radius: 10px;
          cursor: pointer;
        }
      }

      .horizontalLine {
        width: 343px;
        height: 1px;
        border-bottom: 1px solid #F5F5F5;
        margin-left: -24px;
        margin-top: 28px;
      }

      .time {
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        color: #919191;
        margin-top: 20px;
      }
    }
  }

  .drawerAddress-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: auto;

    .drawerAddress-container-head {
      padding: 56px 40px;
      background: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .drawerAddress-container-head-left {
        display: flex;
        gap: 8px;

        .avatar {
          width: 46px;
          height: 46px;
          border-radius: 50%;
          background: black;
        }

        .info {
          display: flex;
          flex-direction: column;
          gap: 8px;

          .projectName {
            font-weight: 700;
            font-size: 17px;
            line-height: 22px;
            color: #222222;
          }

          .id {
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
            color: #838383;
          }
        }
      }

      .drawerAddress-container-head-right {
        display: flex;
        align-items: center;
        gap: 48px;

        .complete {
          width: 118px;
          height: 52px;
          border: 2px solid #4A76FF;
          border-radius: 10px;
          gap: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 700;
          font-size: 15px;
          line-height: 20px;
          color: #2980FF;
          cursor: pointer;
        }
      }
    }

    .drawerAddress-container-main {
      padding: 36px 40px;
      background: #f9fbff;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap: 20px;

      .select {
        display: flex;
        gap: 24px;
      }
    }
  }

  .drawerRecord-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: auto;
    position: relative;

    .drawerAddress-container-head {
      padding: 56px 40px;
      background: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .drawerAddress-container-head-left {
        display: flex;
        flex-direction: column;
        gap: 8px;

        .back {
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 4px;
        }

        .missionName {
          display: flex;
          gap: 8px;
          align-items: center;

          .id {
            padding: 0 8px;
            height: 24px;
            background: #F5F5F5;
            border: 1px solid #E0E0E0;
            border-radius: 4px;
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
            color: #7b7b7b;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .name {
            font-weight: 700;
            font-size: 21px;
            line-height: 28px;
            color: #181818;
          }
        }

        .text {
          font-weight: 400;
          font-size: 12px;
          line-height: 16px;
          color: #919191;
        }
      }

    }

    .drawerAddress-container-main {
      padding: 36px 40px;
      background: #f9fbff;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap: 20px;

      .drawerAddress-container-head-left {
        display: flex;
        gap: 24px;

        .avatar {
          width: 46px;
          height: 46px;
          border-radius: 50%;
          background: black;
        }

        .info {
          display: flex;
          flex-direction: column;
          gap: 8px;

          .projectName {
            font-weight: 700;
            font-size: 17px;
            line-height: 22px;
            color: #222222;
          }

          .webLink {
            font-weight: 700;
            font-size: 15px;
            line-height: 20px;
            color: #2980FF;
            text-decoration-line: underline;
            display: flex;
            align-items: center;
            gap: 8px
          }
        }
      }

      .horizontalLine {
        width: 100%;
        height: 1px;
        border-bottom: 1px solid #f1f1f1;
        margin-top: 40px;
        margin-bottom: 30px;
      }

      .interactionStrategy {
        width: 100%;
        background: #FFFFFF;
        border: 1px solid #F5F5F5;
        border-radius: 4px;
        padding: 28px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 20px;

        .item {
          display: flex;
          flex-direction: column;
          gap: 12px;

          .title {
            font-weight: 400;
            font-size: 14px;
            line-height: 18px;
            color: #181818;
            display: flex;
            align-items: center;
            gap: 6px;
          }

          .info {
            font-weight: 700;
            font-size: 17px;
            line-height: 22px;
            color: #222222;
          }
        }
      }

      .recordTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
          display: flex;
          flex-direction: column;
          gap: 8px;

          .text {
            font-weight: 700;
            font-size: 21px;
            line-height: 28px;
            color: #181818;
          }

          .number {
            font-weight: 700;
            font-size: 12px;
            line-height: 16px;
            color: #8e8f91;
          }
        }

        .button {
          display: flex;
          align-items: center;
          width: fit-content;
          height: 36px;
          gap: 4px;
          border: 1px solid #E0E0E0;
          border-radius: 40px;
          padding: 0 12px;
          cursor: pointer;
        }
      }

      .table {
        .status {
          display: flex;
          justify-content: space-between;
          cursor: pointer;

          .text {
            display: flex;
            align-items: center;
            gap: 4px;
            font-weight: 400;
            font-size: 15px;
            line-height: 20px;
            color: #222222;
            white-space: nowrap;
          }
        }
      }
    }

    .drawerView-container-footer {
      height: 84px;
      padding: 30px 10px;
      display: flex;
      align-items: center;
      //justify-content: space-around;
      .pagination {
        width: 250px;
      }

      .manageAccount {
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 700;
        font-size: 17px;
        line-height: 22px;
        color: #222222;
      }

      .disassociation {
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 700;
        font-size: 17px;
        line-height: 22px;
        color: #EB5757;
      }
    }

    .progressBarBox {
      display: flex;
      justify-content: center;

      .progressBar {
        position: absolute;
        top: 168px;
        width: 90%;
        height: 50px;
        background: #2980FF;
        box-shadow: 0px 1px 16px rgba(15, 15, 15, 0.16);
        border-radius: 144px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .progressBar-two {
          width: 40%;
          height: 50px;
          background: #3b9ffa;
          border-radius: 144px;
          display: flex;
          align-items: center;
          padding-left: 16px;
          gap: 6px;
          font-weight: 400;
          font-size: 14px;
          line-height: 18px;
          color: #FFFFFF;
        }

        .number {
          font-weight: 700;
          font-size: 17px;
          line-height: 22px;
          color: #FFFFFF;
          padding-right: 16px;
        }
      }
    }

    .accountPassword {
      width: 440px;
      height: 374px;
      background: #fbfdff;
      border-radius: 10px;
      position: fixed;
      margin: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      padding: 36px 40px;

      .title {
        font-weight: 700;
        font-size: 21px;
        line-height: 28px;
        color: #212121;
      }

      .inputTitle {
        font-weight: 500;
        font-size: 14px;
        line-height: 18px;
        color: #383838;
        margin-top: 32px;
        margin-bottom: 12px;
      }

      .confirm {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-weight: 700;
        font-size: 15px;
        line-height: 20px;
        color: #FFFFFF;
        width: 100%;
        height: 52px;
        background: #2980ff;
        border-radius: 6px;
        margin-top: 12px;
        margin-bottom: 20px;
        cursor: pointer;
      }

      .tip {
        display: flex;
        flex-direction: column;
        gap: 9px;
        margin-top: 36px;

        .title {
          display: flex;
          align-items: center;
          gap: 4px;
          font-weight: 700;
          font-size: 17px;
          line-height: 22px;
          color: #EB5757;
        }

        .description {
          font-weight: 400;
          font-size: 14px;
          line-height: 18px;
          color: #EB5757;
        }
      }
    }

  }

  .drawerStrategy-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: auto;

    .drawerAddress-container-head {
      padding: 56px 40px;
      background: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .drawerAddress-container-head-left {
        display: flex;
        gap: 8px;

        .info {
          display: flex;
          flex-direction: column;
          gap: 8px;

          .projectName {
            font-weight: 700;
            font-size: 17px;
            line-height: 22px;
            color: #222222;
          }

          .id {
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
            color: #838383;
          }
        }
      }

      .drawerAddress-container-head-right {
        display: flex;
        align-items: center;
        gap: 48px;

        .complete {
          width: 118px;
          height: 52px;
          border: 2px solid #4A76FF;
          border-radius: 10px;
          gap: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 700;
          font-size: 15px;
          line-height: 20px;
          color: #2980FF;
          cursor: pointer;
        }
      }
    }

    .drawerAddress-container-main {
      padding: 36px 40px;
      background: #f9fbff;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;

      .item {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .title {
          font-weight: 400;
          font-size: 14px;
          line-height: 18px;
          color: #181818;
        }

      }
    }

    .accountPassword {
      width: 440px;
      height: 374px;
      background: #fbfdff;
      border-radius: 10px;
      position: fixed;
      margin: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      padding: 36px 40px;

      .title {
        font-weight: 700;
        font-size: 21px;
        line-height: 28px;
        color: #212121;
      }

      .inputTitle {
        font-weight: 500;
        font-size: 14px;
        line-height: 18px;
        color: #383838;
        margin-top: 32px;
        margin-bottom: 12px;
      }

      .confirm {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-weight: 700;
        font-size: 15px;
        line-height: 20px;
        color: #FFFFFF;
        width: 100%;
        height: 52px;
        background: #2980ff;
        border-radius: 6px;
        margin-top: 12px;
        margin-bottom: 20px;
        cursor: pointer;
      }

      .tip {
        display: flex;
        flex-direction: column;
        gap: 9px;
        margin-top: 36px;

        .title {
          display: flex;
          align-items: center;
          gap: 4px;
          font-weight: 700;
          font-size: 17px;
          line-height: 22px;
          color: #EB5757;
        }

        .description {
          font-weight: 400;
          font-size: 14px;
          line-height: 18px;
          color: #EB5757;
        }
      }
    }
  }
}
</style>