<template>
  <view class="top-level">
    <view class="subsetion">
      <u-subsection
        :list="list"
        mode="button"
        :bgColor="'#fff'"
        :fontSize="14"
        :activeColor="'#ffffff'"
        :current="currentIndex"
        @change="handelrSubSectionChange"
      ></u-subsection>
    </view>
    <view v-if="currentIndex === 0">
      <slot name="main"></slot>
    </view>
    <view v-if="currentIndex === 1" class="approveBox">
      <div class="auditWork" v-if="stepList.length > 0">
        <div
          v-for="(item, index) in stepList"
          :key="index"
          style="margin-bottom: 15px"
        >
          <div style="display: flex">
            <div class="auditWork_left">
              <div
                class="auditWork_left_image"
                :style="{
                  borderColor:
                    item.step < stepnum
                      ? '#5FDA1D'
                      : item.step == stepnum
                      ? '#1478F6'
                      : '#BBBBBB',
                }"
              ></div>
              <div
                class="auditWork_left_line"
                v-if="item.step != stepList.length"
              ></div>
            </div>
            <div class="auditWork_right">
              <div
                class="auditWork_right_title"
                :class="
                  item.step < stepnum
                    ? 'color1'
                    : item.step == stepnum
                    ? 'color2'
                    : 'color3'
                "
              >
                {{ item.nodeName }}
              </div>
              <div class="auditWork_right_content">
                <div
                  v-for="(el, index) in item.list"
                  :key="index"
                  style="
                    display: flex;
                    height: 100%;
                    width: 50%;
                    align-items: center;
                  "
                  :class="
                    el.state != 0 && item.step <= stepnum ? 'color1' : 'color3'
                  "
                >
                  <div style="margin-top: 5px">
                    <div
                      class="text"
                      v-if="el.headImageUrl == null"
                      style="font-size: 24rpx; font-weight: 400"
                    >
                      {{
                        el.auditPersonName
                          ? String(el.auditPersonName).slice(-2)
                          : String(el.name).slice(-2)
                      }}
                    </div>
                    <img
                      class="avatar"
                      v-else
                      :src="
                        configData.baseUrl +
                        `${String(el.headImageUrl).split('/wwwroot')[1]}`
                      "
                      alt=""
                    />
                  </div>
                  <div>
                    <div>
                      <span style="">{{ el.auditPersonName }}</span>

                      <img
                        class="img"
                        alt=""
                        v-if="el.state == 1"
                        :src="require('@/static/images/audit/1.png')"
                      />

                      <img
                        class="img"
                        alt=""
                        v-if="el.state == 2"
                        :src="require('@/static/images/audit/2.png')"
                      />

                      <img
                        style="
                          width: 20px;
                          height: 20px;
                          cursor: pointer;
                          margin-left: 6px;
                        "
                        @click="handlerUrgingClick(el.id)"
                        alt=""
                        v-if="
                          item.step == stepnum && el.state != 2 && el.state != 1
                        "
                        :src="require('@/static/images/audit/催办.png')"
                      />
                    </div>
                    <div>
                      <span>{{ el.auditdate | getDate }}</span>
                      <span>{{ !el.state ? el.name : "" }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else style="text-align: center">
        <u-empty mode="data" :icon="require('@/static/images/empty.png')">
        </u-empty>
      </div>
    </view>
    <view v-if="currentIndex === 2" class="approveBox">
      <div v-if="auditNote.length > 0">
        <div ref="auditNote">
          <div
            class="auditNote"
            v-for="(item, index) in auditNote"
            :key="index"
          >
            <div class="flex">
              <div
                class="text"
                v-if="item.headImageUrl == null"
                style="font-size: 24rpx; font-weight: 400"
              >
                {{ String(item.auditPersonName).slice(-2) }}
              </div>
              <img
                class="avatar"
                v-else
                alt=""
                :src="
                  configData.baseUrl +
                  `${String(item.headImageUrl).split('/wwwroot')[1]}`
                "
              />
              <div class="d-flex-c">
                <span>{{ item.auditPersonName }}</span>
                <span style="margin-top: 5px">{{ item.auditMessage }}</span>
              </div>
            </div>
            <div class="d-flex-c" style="align-items: flex-end">
              <span>{{ item.auditdate }}</span>
              <span
                :style="{
                  color: item.stateName == '同意' ? '#1478F6' : '#F51701',
                  marginTop: '5px',
                }"
              >
                {{ item.stateName }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <div v-else style="text-align: center">
        <u-empty mode="data" :icon="require('@/static/images/empty.png')">
        </u-empty>
      </div>
    </view>
    <view class="bottomPage" v-if="auditData.length > 0">
      <view class="disagreeContent button" v-if="isShowDisagree">
        <u-button
          text="不同意"
          type="error"
          size="normal"
          @click="showBtnGroup"
        ></u-button>
        <u-transition :show="isShowBtnGroup" mode="fade-up">
          <view class="btnDisagreeBox">
            <view @click="handlerDisagreeClickEvent('continue')">继续</view>
            <view @click="handlerDisagreeClickEvent('back')">回退</view>
            <view @click="handlerDisagreeClickEvent('termination')">终止</view>
          </view>
        </u-transition>
      </view>
      <u-button
        v-if="isShowCountersign"
        text="加签"
        type="primary"
        size="normal"
        class="button"
        @click="handlerCountersignClick"
        style="flex: 1"
      ></u-button>
      <u-button
        v-if="isShowAgree"
        text="同意"
        type="primary"
        class="button"
        size="normal"
        @click="handlerAgreeClick"
        style="flex: 1"
      ></u-button>
      <u-button
        v-if="isShowRead"
        text="已读"
        class="button"
        type="primary"
        size="normal"
        @click="handlerReadClick"
        style="flex: 1"
      ></u-button>
      <u-button
        v-if="isShowWithdraw"
        text="撤回"
        type="error"
        class="button"
        size="normal"
        @click="handlerWithdrawClick"
        style="flex: 1"
      ></u-button>
    </view>
    <u-toast ref="uToast"></u-toast>
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog
        :type="msgType"
        cancelText="取消"
        confirmText="同意"
        title="提示"
        content="确认开始催办吗？"
        @confirm="dialogConfirm"
      ></uni-popup-dialog>
    </uni-popup>
    <!-- 加签 -->
    <u-modal
      title="加签审批"
      :show="countersignShow"
      showCancelButton
      :closeOnClickOverlay="false"
      @confirm="auditAddFlow"
      @cancel="countersignShow = false"
      @close="countersignShow = false"
    >
      <u-form :model="counterSignModel" :labelStyle="{ fontSize: '14px' }">
        <u-form-item
          label="审核类型"
          prop="auditType"
          ref="item1"
          :borderBottom="false"
          :labelWidth="'200rpx'"
        >
          <u-radio-group v-model="counterSignModel.auditType">
            <u-radio
              shape="circle"
              name="1"
              label="审核"
              style="margin-right: 20rpx"
            ></u-radio>
            <u-radio shape="circle" name="2" label="抄送"></u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item
          label="加签人员"
          prop="additionalPersonnel"
          ref="item1"
          :borderBottom="false"
          :labelWidth="'200rpx'"
          @click="handlerPeopelClickEvent"
        >
          <u--input
            placeholder="请选择人员"
            suffixIcon="arrow-right"
            :disabled="true"
            :border="'none'"
            disabledColor="#fff"
          ></u--input>
        </u-form-item>
        <view v-if="selectedListBaseinfo.length > 0" style="margin: 10rpx 0"
          >已关联人员：</view
        >
        <view class="flex" style="flex-wrap: wrap">
          <view
            class="select-item"
            v-for="(item, index) in selectedListBaseinfo"
            :key="index"
          >
            <view class="name">
              <text>{{ item.p_PersonName }}</text>
            </view>
            <view class="close" @click.stop="removeSelectedItem(item)">
              <uni-icons type="closeempty" size="16" color="#999"></uni-icons>
            </view>
          </view>
        </view>
      </u-form>
      <u-toast ref="countersignToast"></u-toast>
    </u-modal>
    <!-- 不同意 -->
    <u-modal
      :title="disagreeTitle"
      :show="disagreeModalShow"
      showCancelButton
      closeOnClickOverlay
      @confirm="disagreeConfirm"
      @cancel="disagreeModalShow = false"
      @close="disagreeModalShow = false"
    >
      <view class="reasonBox">
        <text>请输入{{ disagreeTitle }}理由：</text>
        <u--textarea
          v-model="disagreeReason"
          placeholder="请输入..."
        ></u--textarea>
        <u-toast ref="disagreeToast"></u-toast>
      </view>
    </u-modal>
    <!-- 同意 -->
    <u-modal
      title="同意"
      :show="agreeModalShow"
      showCancelButton
      closeOnClickOverlay
      @confirm="agreeAudit"
      @cancel="agreeModalShow = false"
      @close="agreeModalShow = false"
    >
      <view class="reasonBox">
        <text>请输入同意理由：</text>
        <u--textarea
          v-model="agreeTextarea"
          placeholder="请输入..."
        ></u--textarea>
      </view>
    </u-modal>
    <!-- 已读 -->
    <u-modal
      title="已读"
      :show="readShow"
      showCancelButton
      closeOnClickOverlay
      @confirm="readConfirm"
      @cancel="readShow = false"
      @close="readShow = false"
    >
      <view class="reasonBox">
        <text>请输入已读理由：</text>
        <u--textarea
          v-model="readTextarea"
          placeholder="请输入..."
        ></u--textarea>
      </view>
    </u-modal>
    <!-- 撤回 -->
    <u-modal
      title="撤回"
      :show="withdrawShow"
      showCancelButton
      closeOnClickOverlay
      @confirm="withdrawConfirm"
      @cancel="withdrawShow = false"
      @close="withdrawShow = false"
    >
      <view class="reasonBox">
        <text>请输入撤回理由：</text>
        <u--textarea
          v-model="withdrawTextarea"
          placeholder="请输入..."
        ></u--textarea>
      </view>
    </u-modal>
    <u-loading-page
      :loading="maskLoading"
      :loadingText="'正在提交'"
    ></u-loading-page>
  </view>
</template>

<script>
import localStorage from "@/utils/localStorage";
import {
  getAuditList,
  getAuditNote,
  auditUrging,
  audit,
  auditAddFlow,
  getAuditBtn,
  removeAudit,
  read,
} from "@/api/system/audit.js";
import config from "@/config";
export default {
  props: {
    billid: {
      type: String,
      required: "",
    },
    billKindID: {
      type: String,
      required: "",
    },
    auditType: {
      type: String,
      required: "",
    },
  },
  data() {
    return {
      maskLoading: false,
      msgType: "warn",
      currentIndex: 0,
      list: [
        {
          name: "审批详情",
        },
        {
          name: "审批流程",
        },
        {
          name: "审批记录",
        },
      ],
      stepList: [], //审批流程
      stepnum: "",
      configData: {},
      auditNote: [], //审批记录
      urgingBillid: "", //催办ID
      countersignShow: false,
      counterSignModel: {
        auditType: "1",
      },
      isShowBtnGroup: false,
      disagreeModalShow: false,
      disagreeReason: "",
      disagreeTitle: "",
      personIDs: [],
      personNames: [],
      agreeModalShow: false,
      agreeTextarea: "",
      buttonData: [],
      readShow: false,
      readTextarea: "",
      withdrawShow: false,
      withdrawTextarea: "",

      isShowAgree: false,
      isShowDisagree: false,
      isShowRead: false,
      isShowCountersign: false,
      isShowWithdraw: false,
      auditData: [],
    };
  },
  onLoad: function (option) {
    //option为object类型，会序列化上个页面传递的参数
  },
  watch: {
    selectedListBaseinfo: {
      deep: true,
      handler(newVal, oldVal) {
        if (newVal.length > 0) {
          newVal.forEach((item) => {
            this.personIDs.push(item.p_PersonID);
            this.personNames.push(item.p_PersonName);
          });
        }
      },
    },
    // 同意
    agreeModalShow: {
      deep: true,
      handler(newVal, oldVal) {
        if (newVal == false) {
          this.agreeTextarea = "";
        }
      },
    },
    // 已读
    readShow: {
      deep: true,
      handler(newVal, oldVal) {
        if (newVal == false) {
          this.readTextarea = "";
        }
      },
    },
    // 撤回
    withdrawShow: {
      deep: true,
      handler(newVal, oldVal) {
        if (newVal == false) {
          this.withdrawTextarea = "";
        }
      },
    },
    // 不同意
    disagreeModalShow: {
      deep: true,
      handler(newVal, oldVal) {
        if (newVal == false) {
          this.disagreeReason = "";
        }
      },
    },
    // 加签
    countersignShow: {
      deep: true,
      handler(newVal, oldVal) {
        if (newVal == false) {
          this.counterSignModel.auditType = "1";
          this.$store.commit("SET_SELECTSDATA", []);
        }
      },
    },
  },
  computed: {
    selectedListBaseinfo() {
      return this.$store.getters.selectsdata || [];
    },
  },
  filters: {
    getDate(value) {
      if (!value) {
        return "";
      }
      return value.split(".")[0].replace("T", " ");
    },
    getDate1(value) {
      if (!value) {
        return "";
      }
      return value.split("T")[0];
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.isShowAgree = false;
      this.isShowDisagree = false;
      this.isShowRead = false;
      this.isShowCountersign = false;
      this.isShowWithdraw = false;
      this.configData = config;
      if (this.auditType == "audit") {
        this.getAuditBtn();
      }
      if (
        this.billid != "" &&
        this.billid != null &&
        this.billid != undefined &&
        this.billid != "null" &&
        this.billid != "undefined" &&
        this.billKindID != "" &&
        this.billKindID != null &&
        this.billKindID != undefined &&
        this.billKindID != "null" &&
        this.billKindID != "undefined"
      ) {
        this.getAuditList();
        this.getAuditNote();
      }
      this.maskLoading = false;
    },
    //获取审批权限按钮
    async getAuditBtn() {
      let params = {
        billID: this.billid,
        billKindID: this.billKindID,
      };
      const res = await getAuditBtn(params);
      let arr = res.data[0];
      this.auditData = arr;
      arr.forEach((el) => {
        if (el == "3") {
          //同意
          this.isShowAgree = true;
        } else if (el == "4") {
          //不同意
          this.isShowDisagree = true;
        } else if (el == "5") {
          //已读
          this.isShowRead = true;
        } else if (el == "6") {
          //加签
          this.isShowCountersign = true;
        } else if (el == "7") {
          //撤回
          this.isShowWithdraw = true;
        } else {
        }
      });
    },
    resetAudit() {
      this.getAuditList();
      this.getAuditNote();
    },
    showBtnGroup() {
      this.isShowBtnGroup = !this.isShowBtnGroup;
    },
    handlerDisagreeClickEvent(type) {
      // 继续
      if (type == "continue") {
        this.disagreeTitle = "继续";
        this.disagreeModalShow = true;
      } else if (type == "termination") {
        //终止
        this.disagreeTitle = "终止";
        this.disagreeModalShow = true;
      } else if (type == "back") {
        //退回
        this.disagreeTitle = "退回";
        this.disagreeModalShow = true;
      } else {
        //do something
      }
      this.isShowBtnGroup = false;
    },
    disagreeConfirm() {
      if (
        this.disagreeReason == "" ||
        this.disagreeReason == null ||
        this.disagreeReason == undefined
      ) {
        this.$refs.disagreeToast.show({
          type: "warning",
          message: "请输入" + this.disagreeTitle + "理由！",
        });
        return;
      }
      this.disagreeModalShow = false;
      this.maskLoading = true;
      setTimeout(() => {
        this.maskLoading = false;
      }, 5000);
      //审批流程控制（2不同意-继续，3不同意-退回，不同意-终止）
      if (this.disagreeTitle == "继续") {
        this.handleClickAgree("2");
      }
      if (this.disagreeTitle == "终止") {
        this.handleClickAgree("4");
      }
      if (this.disagreeTitle == "退回") {
        this.handleClickAgree("3");
      }
    },
    //审核不同意
    async handleClickAgree(type) {
      const res = await audit({
        billID: this.billid,
        billKindID: this.billKindID,
        auditState: type,
        agree: "0", //审批结果（1同意，0不同意）
        auditMessage: this.disagreeReason,
      });
      this.maskLoading = false;
      if (res.success == true) {
        this.$refs.disagreeToast.show({
          type: "success",
          message: "审核成功！",
        });
        this.init();
        this.disagreeReason = "";
      }
    },
    // 加签选择人员
    handlerPeopelClickEvent() {
      let url = "/components/basePeople/index";
      this.$tab.navigateTo(url);
    },
    // 加签删除
    removeSelectedItem(row) {
      let arrData = this.selectedListBaseinfo.filter(
        (item, index) => item.p_PersonID !== row.p_PersonID
      );
      this.$store.commit("SET_SELECTSDATA", arrData);
    },
    // 确定加签
    async auditAddFlow() {
      this.countersignShow = false;
      this.maskLoading = true;
      setTimeout(() => {
        this.maskLoading = false;
      }, 5000);
      const res = await auditAddFlow({
        billID: this.billid,
        auditType: this.counterSignModel.auditType, //加签节点审核类型（1、审核  2抄送）
        personIDs: this.personIDs.join(), //加签人ID集合，多个人英文逗号隔开
        personNames: this.personNames.join(), //加签人姓名集合，多个人英文逗号隔开
      });
      this.maskLoading = false;
      if (res.success == "true") {
        this.$refs.uToast.show({
          type: "success",
          message: "加签成功",
        });
      }
      this.counterSignModel.auditType = "1";
      this.$store.commit("SET_SELECTSDATA", []);
      this.getAuditList();
    },
    handelrSubSectionChange(index) {
      this.currentIndex = index;
    },
    //获取单据审批流程
    async getAuditList() {
      const res = await getAuditList({
        billID: this.billid,
      });
      this.stepnum = res.data[0];
      let stepList = res.data[1];
      stepList.forEach((el) => {
        if (res.data[2] && res.data[2].length > 0) {
          res.data[2].forEach((item) => {
            if (el.step == item.step) {
              if (!el.list) {
                el.list = [];
              }
              el.list.push(item);
              el.list = Array.from(new Set(el.list));
            }
          });
        }
        if (res.data[3] && res.data[3].length) {
          res.data[3].forEach((item) => {
            if (el.step == item.step) {
              if (!el.list) {
                el.list = [];
              }
              el.list.push(item);
              el.list = Array.from(new Set(el.list));
            }
          });
        }
      });
      this.stepList = stepList;
    },
    //获取单据审批记录
    async getAuditNote() {
      const res = await getAuditNote({
        billID: this.billid,
      });
      this.auditNote = res.data[0];
    },
    //催办
    handlerUrgingClick(id) {
      this.$refs.alertDialog.open();
      this.urgingBillid = id;
    },
    async dialogConfirm(id) {
      auditUrging({ id: id }).then((res) => {
        if (res.code == 1) {
          this.$refs.uToast.show({
            type: "success",
            message: res.message,
          });
        }
      });
    },
    handlerCountersignClick() {
      this.countersignShow = true;
    },
    // 同意
    handlerAgreeClick() {
      this.agreeModalShow = true;
    },
    async agreeAudit() {
      this.agreeModalShow = false;
      this.maskLoading = true;
      setTimeout(() => {
        this.maskLoading = false;
      }, 5000);
      const res = await audit({
        billID: this.billid,
        billKindID: this.billKindID,
        auditState: "1", //审批流程控制（2不同意-继续，3不同意-退回，不同意-终止）
        agree: "1", //审批结果（1同意，0不同意）
        auditMessage: this.agreeTextarea, //审批回复
      });
      this.maskLoading = false;
      if (res.success == "true") {
        this.$refs.uToast.show({
          type: "success",
          message: res.message,
        });
        this.init();
        this.agreeTextarea = "";
      }
    },
    // 已读
    handlerReadClick() {
      this.readShow = true;
    },
    async readConfirm() {
      this.readShow = false;
      this.maskLoading = true;
      setTimeout(() => {
        this.maskLoading = false;
      }, 5000);
      const res = await read({
        billID: this.billid,
        auditMessage: this.readTextarea,
      });
      this.maskLoading = false;
      if (res.code == 1) {
        this.$refs.uToast.show({
          type: "success",
          message: "已读成功",
        });
        this.init();
        this.readTextarea = "";
      }
    },
    // 撤回
    handlerWithdrawClick() {
      this.withdrawShow = true;
    },
    async withdrawConfirm() {
      this.withdrawShow = false;
      this.maskLoading = true;
      setTimeout(() => {
        this.maskLoading = false;
      }, 5000);
      const res = await removeAudit({
        billID: this.billid,
        billKindID: this.billKindID,
        auditMessage: this.withdrawTextarea, //审批回复
      });
      if (res.success == "true") {
        this.maskLoading = false;
        this.$refs.uToast.show({
          type: "success",
          message: "撤回审核成功",
        });
        this.init();
        this.withdrawTextarea = "";
      }
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .u-modal__title {
  font-size: 15px;
  font-weight: bold;
  color: #000000;
  text-align: center;
  padding-top: 10px;
}
.select-item {
  margin: 10rpx 10rpx 10rpx 0;
  padding: 10rpx 20rpx;
  max-width: auto;
  height: auto;
  background-color: #eaeaea;
  border-radius: 10rpx;
  color: #333;
  display: flex;
  align-items: center;
  font-size: 28rpx;

  .name {
    flex: 1;
    padding-right: 10rpx;
    font-size: 13px;
  }

  .close {
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
}
.bottomPage {
  width: 100%;
  position: fixed;
  bottom: 0;
  padding: 20rpx 30rpx 30rpx 30rpx;
  background-color: #fff;
  margin-top: 15rpx;
  display: flex;
  border-top: 8rpx solid #f1f1f1;

  .button:last-child {
    margin-right: 0; /* 默认右间隙 */
  }

  .button:not(:last-child) {
    margin-right: 10px; /* 中间按钮的右间隙 */
  }
}
.plusButton {
  width: 100rpx;
  height: 100rpx;
  background: #3c9cff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 200rpx;
  right: 28rpx;
}
.d-flex-c {
  display: flex;
  flex-direction: column;
}
.disagreeContent {
  position: relative;
  flex: 1;
}
.btnDisagreeBox {
  position: absolute;
  bottom: 44px;
  width: 100%;
  background: #ffffff;
  border: 1px solid #f1f1f1;
  border-radius: 8px 8px 0 0;
  text-align: center;

  view {
    padding: 26rpx 0;
  }

  view:nth-child(2) {
    border-top: 1px solid #f1f1f1;
    border-bottom: 1px solid #f1f1f1;
  }
}
.reasonBox {
  width: 100%;
  text {
    display: inline-block;
    font-size: 14px;
    color: #979797;
    margin-bottom: 15px;
  }
}
.top-level {
  .listContent {
    margin: 20rpx 24rpx 0 24rpx;
  }

  .swipe-action-item {
    margin: 20rpx 0 20rpx 0;
  }

  .listData {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 20rpx 20rpx;

    .head {
      height: 64rpx;
      border-bottom: 1px solid #f7f7f7;
      justify-content: space-between;
    }

    .head {
      display: flex;
      flex-direction: column;
      color: #333;
      margin-bottom: 16rpx;
    }

    .head .itembox {
      font-size: 32rpx;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .levelbox {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 4rpx solid #1e9fff;
        border-radius: 50%;
        width: 40rpx;
        height: 40rpx;
        color: #1e9fff;
        font-weight: 700;
        font-size: 28rpx;
        margin: 0 10rpx;
      }
    }

    .head .itemName {
      font-size: 24rpx;
      color: #999999;
      margin-left: 10px;
      font-weight: 400;

      text {
        color: #fff;
        padding: 4rpx 8rpx;
      }
    }

    .state {
      margin: 25rpx 0;
    }

    .time {
      margin: 24rpx 0 0;
      font-size: 28rpx;
      flex-wrap: wrap;
      line-height: 1.5;

      text {
        display: inline-block;
        font-size: 28rpx;
        color: #979797;
        margin-bottom: 30rpx;
      }

      view {
        height: 60rpx;
        width: 50%;
      }

      view:nth-child(4) {
        text:nth-child(2) {
          font-size: 28rpx;
        }
      }
    }

    .content {
      line-height: 1.5;
      font-size: 28rpx;
      margin-bottom: 20rpx;

      text {
        font-size: 28rpx;
        color: #979797;
      }
    }
  }

  .noData {
    text-align: center;
    margin-top: 10px;
  }

  .Page_change {
    width: 100%;
    background-color: #fff;
    padding: 10rpx 20rpx 20rpx 20rpx;
    position: fixed;
    top: 0;
    z-index: 1;

    .buttom {
      justify-content: space-between;
      padding-top: 30rpx;

      ::v-deep .u-button--circle {
        width: 30%;
      }
    }

    .input_box {
      margin-top: 20rpx;

      ::v-deep .u-input--radius:nth-child(1) {
        margin-right: 20rpx;
      }
    }
  }
}

.approveBox {
  padding: 0 20rpx 160rpx;
}

.auditWork {
  background: #fcfcfc;
  border-radius: 12rpx;
  border: 2rpx solid #f1f1f1;
  padding: 20rpx 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  .auditWork_left {
    margin-top: 8rpx;
    text-align: center;

    .auditWork_left_image {
      width: 16rpx;
      height: 16rpx;
      line-height: 16rpx;
      border-radius: 50%;
      text-align: center;
      z-index: 10;
      border-width: 4rpx;
      border-style: solid;
      border-color: #bbbbbb;
    }

    .auditWork_left_line {
      background-color: #e1e1e1;
      width: 1rpx;
      height: 103%;
      margin: 0 auto;
    }
  }

  .auditWork_right {
    width: 96%;

    .auditWork_right_title {
      margin-left: 20rpx;
      font-weight: 600;
    }

    .auditWork_right_content {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;
      align-items: center;
      padding: 10rpx 20rpx;
      font-size: 24rpx;

      .avatar {
        width: 70rpx;
        height: 70rpx;
        border-radius: 50%;
        margin-right: 24rpx;
      }

      .text {
        width: 70rpx;
        height: 70rpx;
        margin-right: 10rpx;
        line-height: 70rpx;
        color: #fff;
        border-radius: 50%;
        text-align: center;
        background: #00aaff;
      }

      .img {
        margin-top: 12rpx;
        margin-right: 60rpx;
      }
    }
  }

  .left {
    // background: #dcdcdc;
  }

  .right {
    // background: #333333bb;
  }

  .on {
    // background: #2a6aff;
  }

  .color1 {
    width: 100%;
    line-height: 40rpx;
    height: 40rpx;
    // font-family: PingFangSC;
    color: #999999;
  }

  .color2 {
    // font-family: PingFangSC;
    color: #1478f6;
  }

  .color3 {
    width: 100%;
    height: 40rpx;
    line-height: 40rpx;
    // font-family: PingFangSC;
    color: #333333d9;
    font-weight: 600;
  }
}
.auditNote {
  display: flex;
  place-content: space-around space-between;
  margin-bottom: 8px;
  background: #fcfcfc;
  border: 1px solid #f1f1f1;
  font-size: 13px;
  padding: 15px 10px;
  border-radius: 5px;
  justify-content: space-between;
  align-items: center;
  .avatar {
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
    margin-right: 24rpx;
  }

  .text {
    width: 70rpx;
    height: 70rpx;
    margin-right: 10rpx;
    line-height: 70rpx;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    background: #00aaff;
  }
}
::v-deep .subsetion {
  // position: fixed;
  // top: 0;
  // z-index: 1;
  width: 100%;
  padding: 10rpx;
  background: #fff;
}
::v-deep .subsetion .u-subsection--button {
  height: 70rpx;
  margin-top: 10px;
}
::v-deep .u-subsection--button__bar {
  background-color: #3c9cff;
}
</style>