<!--
 * @Descripttion: 
 * @version: 
 * @Author: 王三华
 * @Date: 2023-10-09 15:37:13
-->
<template>
  <view class="content">
    <view class="header_a">
      <view class="header">
        <img @click="isTop = true" src="@/assets/images/search.png" alt="" />
        <view class="sendSign" v-hasButtons="['DailyZxqc']" @click="sendSign"
          >发起签呈</view
        >
      </view>
    </view>
    <view class="zhan"></view>
    <view class="kuang">
      <view class="kuang_i" v-for="(item, index) in tableData" :key="index">
        <view class="tit1">签呈标题:{{ item.approvalBusinessVal }}</view>
        <view class="tit1">情况说明:{{ item.remark }}</view>

        <u-steps :current="item.approvalIndex" dot class="xian">
          <u-steps-item
            v-for="(ctem, cndex) in item.detailList"
            :key="cndex"
            :title="ctem.nickName"
            :desc="ctem.deptName"
          >
          </u-steps-item>
        </u-steps>
        <view class="kuang_if">
          <view class="tit1">签呈状态</view>
          <view :class="item.approveStatus == 0 ? 'tit3' : 'tit2'">{{
            item.approveStatusVal
          }}</view>
        </view>
        <view class="timeCss">
          <view>
            <view class="tit3">创建日期:{{ item.creationTime }}</view>
            <view class="tit3">终审时间:{{ item.endTime }}</view>
          </view>
          <view class="timeCss_r">
            <u-button
              size="mini"
              class="kung_b"
              type="primary"
              v-hasButtons="['DailySee']"
              @click="openSign(item.approvalCode)"
              :plain="true"
              text="查看签呈"
            ></u-button>
          </view>
        </view>
      </view>
    </view>
    <!-- 顶部搜索 -->
    <u-popup :show="isTop" mode="top" @close="isTop = false">
      <view class="tt">
        <u--form
          labelPosition="left"
          labelWidth="auto"
          :model="select"
          ref="uForm"
        >
          <u-row gutter="10">
            <u-col span="6">
              <u-form-item label="签呈标题">
                <u--input
                  fontSize="12"
                  v-model="select.approvalBusinessVal"
                ></u--input>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item :label="'签呈状态'">
                <picker
                  :range="approveStatusList"
                  range-key="label"
                  @change="bindPickerChange1"
                >
                  <u--input
                    disabled
                    fontSize="12"
                    disabledColor="#ffffff"
                    v-model="select.approveStatusVal"
                    suffixIcon="arrow-down"
                    suffixIconStyle="font-size: 12px;"
                  ></u--input>
                </picker>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="12">
              <u-form-item
                :label="'创建日期'"
                @click="(isData = true), (setTime = 0)"
              >
                <u--input
                  disabled
                  fontSize="12"
                  disabledColor="#ffffff"
                  v-model="select.creationTimeVal"
                  suffixIcon="arrow-down"
                  suffixIconStyle="font-size: 12px;"
                ></u--input>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="12">
              <u-form-item
                :label="'终审日期'"
                @click="(isData = true), (setTime = 1)"
              >
                <u--input
                  disabled
                  fontSize="12"
                  disabledColor="#ffffff"
                  v-model="select.endTimeVal"
                  suffixIcon="arrow-down"
                  suffixIconStyle="font-size: 12px;"
                ></u--input>
              </u-form-item>
            </u-col>
          </u-row>
        </u--form>
        <view class="footer">
          <u-button
            @click="getList1"
            color="#C8161D"
            text="搜索"
            class="btnn"
          ></u-button>
          <u-button @click="reset" text="重置"></u-button>
        </view>
      </view>
    </u-popup>
    <u-calendar
      @close="isData = false"
      :closeOnClickOverlay="true"
      :show="isData"
      :allowSameDay="true"
      mode="range"
      :maxDate="calendar.maxDate"
      :minDate="calendar.minDate"
      :monthNum="calendar.monthNum"
      @confirm="confirm"
    ></u-calendar>
    <u-datetime-picker
      :show="isDataTime"
      @confirm="getBirth"
      @cancel="isDataTime = false"
      :minDate="minDate"
      :maxDate="todayData"
      v-model="birthDate"
      mode="date"
    ></u-datetime-picker>
    <!-- 悬浮球 -->
    <drag-button />
    <export-ball
      ref="exportBall"
      v-hasButtons="['DailyExport']"
      @handleExport="handleExport"
    />
  </view>
</template>

<script>
import * as api from "@/api/manage.js";
import { isLocals, isLocalSymbol } from "@/util/numberToCurrency";
export default {
  data() {
    return {
      select: {},
      isTop: false,
      isData: false,
      isDataTime: false,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
      },
      tableData: [],
      approveStatusList: [],
      calendar: {
        minDate: "",
        maxDate: "",
        monthNum: 25,
      },
      minDate: "",
      todayData: "",
      birthDate: "",
    };
  },
  onLoad(options) {
    // 获取下拉
    this.getData();
    this.chooseTimed();
    this.todayData = Date.now();
    this.minDate = Number(new Date("1950-01-01"));
  },
  onShow() {
    this.queryParams.pageNum = 1;
    this.tableData = []
    this.getDataList();
  },
  methods: {
    isLocalSymbol,
    isLocals,
    // 设置默认日期，最大值为今天，最小值为去年今天
    chooseTimed() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (month <= 9) {
        month = "0" + month;
      }
      if (day <= 9) {
        day = "0" + day;
      }
      let minyear = year - 1;
      let maxyear = year + 1;
      this.calendar.minDate = minyear + "-" + month + "-" + day;
      this.calendar.maxDate = maxyear + "-" + month + "-" + day;
    },
    getDataList() {
      api
        .customList(Object.assign({}, this.queryParams, this.select))
        .then((res) => {
          this.tableData = this.tableData.concat(res.rows);
          this.tableData.forEach((item) => {
            if (item.approveStatus == 4 || item.approveStatus == 5) {
              item.approvalIndex = item.detailList.length - 1;
            }
          });
          this.total = res.total;
        });
    },
    getData() {
      api.approvalStatus().then((res) => {
        this.approveStatusList = res.data;
      });
    },

    getBirth(e) {
      this.select.birthDate = this.$moment(e.value).format("YYYY-MM-DD");
      this.isDataTime = false;
    },
    onReachBottom() {
      this.queryParams.pageNum++;
      this.getDataList();
    },
    getList1() {
      this.tableData = [];
      this.queryParams.pageNum = 1;
      this.isTop = false;
      this.getDataList();
    },
    openSign(id) {
      uni.navigateTo({
        url: "/pages/index/onlineSign?id=" + id + "&index=" + 1,
      });
    },
    sendSign() {
      uni.navigateTo({
        url: "/pages/information/dailyApplication/onlineSign",
      });
    },
    reset() {
      this.select = {};
    },
    handleExport() {
      let url = "/system/manage/approval-business/custom-export";
      let obj = Object.assign({}, this.select, this.queryParams);
      this.$refs.exportBall.handleExport(
        url,
        obj,
        `日常申请${new Date().getTime()}`
      );
    },
    bindPickerChange1(e) {
      this.$set(
        this.select,
        "approveStatusVal",
        this.approveStatusList[e.detail.value].label
      );
      this.$set(
        this.select,
        "approveStatus",
        this.approveStatusList[e.detail.value].value
      );
    },

    confirm(e) {
      if (this.setTime == 0) {
        this.$set(this.select, "creationTime", [e[0], e[e.length - 1]]);
        this.$set(
          this.select,
          "creationTimeVal",
          e[0] + " 至 " + e[e.length - 1]
        );
      } else if (this.setTime == 1) {
        this.$set(this.select, "endTime", [e[0], e[e.length - 1]]);
        this.$set(this.select, "endTimeVal", e[0] + " 至 " + e[e.length - 1]);
      }
      this.isData = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  background: #f9f9f9;
  // padding: 20rpx;
}
.header_a {
  position: fixed;
  width: 100%;
  z-index: 10;
}
.header {
  margin: 20rpx;
  background: #ffffff;
  box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.4);
  border-radius: 10px 10px 10px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 40rpx;
  img {
    width: 24px;
    height: 24px;
  }
}
.sendSign {
  font-size: 14px;
}
.zhan {
  height: 130rpx;
}
.kuang {
  background: #ffffff;
  padding: 14rpx 22rpx;
  box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.4);
  border-radius: 10px 10px 10px 10px;
  margin: 20rpx 24rpx;
  .kuang_t {
    font-size: 12px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 400;
    color: #999;
    display: flex;
    align-items: center;
    view {
      padding-bottom: 4rpx;
    }
    .old {
      margin-right: 20rpx;
    }
    .act {
      margin-right: 20rpx;
      font-size: 14px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      border-bottom: 4rpx solid #1678ff;
    }
  }
  .kuang_i {
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
    padding: 20rpx 0 40rpx 0;
    // border: 1px solid rgba(0,0,0,0.05);
    .xian {
      margin: 20rpx 0;
    }
    .kuang_if {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .tit1 {
      font-size: 12px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      margin-top: 10rpx;
    }
    .tit2 {
      font-size: 12px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #ed1d25;
    }
    .tit3 {
      font-size: 10px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      margin-top: 10rpx;
    }
  }
  .timeCss {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .timeCss_r {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .kung_b {
    margin-left: 10rpx;
    width: 140rpx;
    // margin-top: 10rpx;
  }
}
.tt {
  padding: 20rpx;
  margin-top: 40px;
}
.tftable {
  font-size: 12px;
  border-collapse: collapse;
  border-radius: 10px;
  width: 100%;
  background: #fff;
  border: 1px solid #f9f9f9;
  // margin-top: 20rpx;
  // border-right:1px solid #ccc;border-bottom:1px solid #F00;
  outline: none;
  td {
    font-size: 11px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #999;
    padding: 20rpx 40rpx;
    width: 50%;
    // height: 60px;
    border-left: 1px solid #333;
    border-bottom: 1px solid #333;
  }
  td:nth-child(odd) {
    border-left: 1px solid #f9f9f9;
  }
  tr :nth-child(2) {
    color: #333333;
  }
}
.che {
  padding: 20rpx 40rpx;
}
.tt {
  padding: 20rpx;
  margin-top: 40px;
}
::v-deep .u-transition {
  z-index: 998 !important;
}
.footer {
  display: flex;
  align-items: center;
  padding: 20rpx 60rpx;
  .btnn {
    margin-right: 40rpx;
  }
}
::v-deep .u-input {
  padding: 0 9px !important;
}
::v-deep .u-form-item__body__left__content__label {
  font-size: 12px;
}
::v-deep .u-form-item__body {
  padding: 5px 0;
}
</style>
