<template>
  <div class="enterpriseReporting">
    <div class="mtitle">
      <div :class="select === 1 ? 'selected' : ''" @click="newTb">最新填报</div>
      <div :class="select === 2 ? 'selected' : ''" @click="tbTask">
        填报任务
      </div>
    </div>
    <div class="enterpriseList" v-show="select === 2">
      <van-pull-refresh
        v-model="isDownLoading"
        @refresh="onDownRefresh"
        success-text="加载成功"
      >
        <van-list
          ref="vanList"
          v-model="isUpLoading"
          :finished="upFinished"
          :immediate-check="false"
          :offset="10"
          finished-text="加载完成"
          @load="onLoadList"
        >
          <!-- <div class="enterpriseListItem" v-for="item in 4">dataList -->
          <div
            class="enterpriseListItem"
            :key="item.id"
            v-for="item in dataList"
            @click="itemClick(item)"
          >
            <div class="enterpriseTit">
              <span>{{ item.temName }}</span>
              <div :class="item.saveType == 0 ? 'ytb' : 'wtb'">
                {{ item.saveType == 0 ? "已填报" : "未填报" }}
              </div>
            </div>
            <div style="display: flex">
              <div class="enterpriseTime">
                <span>数据归属时间：</span>
                <span>要求完成日期：</span>
              </div>
              <div class="enterpriseTime">
                <span>{{ item.belongDate }}</span>
                <span>{{ item.requireFinishTime }}</span>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <div class="addEnterprise" v-show="select === 1">
      <div class="addEnterpriseTit">
        <div>
          尊敬的<span style="color: #1d18bc"> {{ qyName }} </span
          >企业用户，你好！
        </div>
        <div class="line"></div>
        <div>
          为了更好地为企业提供相关服务，请协助完成相关数据的填报，感谢配合！
        </div>
      </div>
      <div class="addEnterpriseBody">
        <ul>
          <li class="bodyLi">
            <div class="bodyLiTit">任务编号：</div>
            <input
              type="text"
              readonly
              v-model="infoFrom.temName"
              placeholder="规上企业每月固定填报"
            />
          </li>
          <li class="bodyLi">
            <div class="bodyLiTit">归属时间：</div>
            <input
              type="text"
              placeholder="请选择"
              v-model="infoFrom.belongDate"
              readonly
            />
          </li>
          <li class="bodyLi">
            <div class="bodyLiTit">要求完成日期：</div>
            <!-- @click="dateShow=true" -->
            <input
              type="text"
              placeholder="请选择"
              v-model="infoFrom.requireFinishTime"
              readonly
            />
            <!-- <van-popup v-model="dateShow" position="bottom" :style="{ height: '50%' }" >
                            <van-datetime-picker
                                v-model="currentDate"
                                type="date"
                                title="选择完成日期"
                                :min-date="minDate"
                                :max-date="maxDate"
                                @confirm="selectFinishDate"
                                @cancel="dateShow=false"
                            />
                        </van-popup> -->
          </li>
          <li class="bodyLi">
            <div class="bodyLiTit">上报日期：</div>
            <input
              type="text"
              v-model="infoFrom.fillTime"
              placeholder="自动生成"
              readonly
            />
          </li>

          <li class="bodyLi" :key="item" v-for="(item, index) in optionList">
            <div class="bodyLiTit">
              <span style="color: red">*</span> {{ item }}：
            </div>
            <input
              type="text"
              v-model="contentList[index]"
              placeholder="请填写"
            />
          </li>
        </ul>
      </div>
      <div class="buttonBox">
        <button @click="commit('2')">暂存</button>
        <button @click="commit('0')">提交</button>
      </div>
    </div>
  </div>
</template>
<script>
import dayjs from "dayjs";
import { Toast } from "vant";
import {
  list,
  editSave,
  getByRecently,
  getByStag,
} from "@/service/api_fillController";
import auth from "@/service/auth";
export default {
  name: "EnterpriseReporting",
  data() {
    return {
      qyName: auth.currUser().qymc,
      select: 1,
      currentDate: new Date(),
      minDate: new Date(),
      maxDate: new Date(2025, 10, 1),
      selectMonth: "",
      show: false,
      isUpLoading: false,
      isDownLoading: false,
      upFinished: false,
      total: 0,
      FinishDate: "",
      dateShow: false,
      optionList: [],
      contentList: [],
      infoFrom: {},
      dataList: [],
      pages: {
        pageNum: 1,
        pageSize: 10,
        enterId: auth.currUser().id,
        fillUserType: 0,
      },
      enterObj: {
        FillSaveVo: {
          id: "",
          optionList: [],
          saveType: 0,
          userId: auth.currUser().id,
        },
        FillSaveItemVo: {
          name: "",
          value: "",
        },
      },
    };
  },
  mounted() {
    this.getInfoByRecently();
    this.getList();
    // console.log("用户数据——：", auth.currUser())
  },
  methods: {
    newTb() {
      console.log(this.optionList);
      this.getInfoByRecently();
      this.select = 1;
    },
    tbTask() {
      this.select = 2;
    },
    selectPlanDate(e) {
      const dayjs = require("dayjs");
      this.selectMonth = dayjs(e).format("YYYY-MM");
      this.show = false;
    },
    selectFinishDate(e) {
      const dayjs = require("dayjs");
      this.FinishDate = dayjs(e).format("YYYY-MM-DD");
      this.dateShow = false;
    },
    // 获取填报列表
    async getList() {
      await list(this.pages).then((res) => {
        if (res.rows.length) {
          this.isDownLoading = false;
          // this.dataList.push(...res.rows)
          res.rows.forEach((item) => {
            if (item.temYear && null != item.temYear)
              this.$set(
                item,
                "belongDate",
                item.temYear + ("1" == item.temYearType ? "半年" : "全年")
              );
            this.dataList.push(item);
          });
          this.isUpLoading = false;
          if (this.dataList.length >= res.total) {
            this.upFinished = true;
          }
        } else if (res.errno == 426) {
          Toast(res.errmsg);
          this.$router.push("/login");
        } else {
          this.dataList = [];
          this.isDownLoading = false;
          this.isUpLoading = false;
          this.upFinished = true;
        }
      });
    },
    // 获取最新的填报
    getInfoByRecently() {
      const reqData = {
        id: auth.currUser().id,
      };
      this.optionList = [];
      getByRecently(reqData).then((res) => {
        if (res.data) {
          this.infoFrom = res.data;
          if (this.infoFrom.temYear && null != this.infoFrom.temYear)
            this.$set(
              this.infoFrom,
              "belongDate",
              this.infoFrom.temYear +
                ("1" == this.infoFrom.temYearType ? "半年" : "全年")
            );
          this.$set(
            this.infoFrom,
            "fillTime",
            this.$common.formatDate("yyyy-MM-dd hh:mm:ss", new Date())
          );
          if (res.data.options) {
            this.optionList = res.data.options.split(",");
          }
          if (res.data.content) {
            this.contentList = res.data.content.split(",");
          }
        }
      });
    },
    commit(e) {
      if (!this.infoFrom.id) {
        Toast("您暂时没有需要提交的信息！");
        return false;
      }
      let flag = false;
      const optios = [];
      for (let i = 0; i < this.optionList.length; i++) {
        if (!this.contentList[i]) {
          flag = true;
        }
        const item = {
          name: this.optionList[i],
          value: this.contentList[i],
        };
        optios.push(item);
      }
      if (flag) {
        Toast("请先完成必填项的填写！");
        return false;
      }
      const reqData = {
        id: this.infoFrom.id,
        userId: auth.currUser().id,
        saveType: e,
        optionList: optios,
      };
      const enObj = JSON.stringify(reqData);
      editSave(enObj).then((res) => {
        this.pages.pageNum = 1;
        this.dataList = [];

        this.$nextTick(() => {
          this.getList();
        });
        if (e == 2) {
          Toast("暂存成功！");
          return;
        } else {
          this.select = 2;
          this.optionList = [];
          this.contentList = [];
          Toast("提交成功！");
        }
      });
    },
    itemClick(row) {
      if (row.saveType == "0") {
        // Toast('您已填报，无法再次填报')
        // return false
        this.$router.push({
          name: "enterpriseReportingDetail",
          query: {
            id: row.id,
          },
        });
      }
      const reqData = {
        id: row.id,
      };
      getByStag(reqData).then((res) => {
        if (res.data) {
          this.infoFrom = res.data;
          this.$set(
            this.infoFrom,
            "fillTime",
            this.$common.formatDate("yyyy-MM-dd hh:mm:ss", new Date())
          );
          if (res.data.options) {
            this.optionList = res.data.options.split(",");
          }
          if (res.data.content) {
            this.contentList = res.data.content.split(",");
          }
        }
        this.select = 1;
      });
    },
    onDownRefresh: function () {
      this.dataList = [];
      this.pages.pageNum = 1;
      this.isUpLoading = true;
      this.upFinished = false;
      this.getList();
    },
    onLoadList() {
      this.pages.pageNum++;
      this.isDownLoading = true;
      this.getList();
    },
  },
};
</script>

<style lang="scss">
.enterpriseReporting {
  .mtitle {
    display: flex;
    background: white;
    color: #333333;
    font-size: 4.3vw;
    div {
      height: 13.5vw;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin: 0 3vw;
    }
    .selected {
      border-bottom: 5px solid #1d18bc;
      color: #1d18bc;
    }
  }
  .enterpriseList {
    margin: 3vw;
    .enterpriseListItem {
      padding: 4vw 4vw 2vw 4vw;
      background: white;
      border-radius: 5px;
      font-size: 3.8vw;
      margin: 3vw 0;
      .enterpriseTit {
        display: flex;
        justify-content: space-between;
        margin: 0 0 2vw 0;
        align-items: center;
      }
      .enterpriseTime {
        color: #777777;
        display: flex;
        flex-direction: column;
        span {
          margin: 1.2vw 0;
        }
      }
      .wtb {
        background: rgba(29, 24, 188, 0.05);
        color: rgba(29, 24, 188, 1);
        padding: 1.5vw 3vw;
        border-radius: 5px;
      }
      .ytb {
        background: rgba(0, 0, 0, 0.05);
        color: rgba(153, 153, 153, 1);
        padding: 1.5vw 3vw;
        border-radius: 5px;
        white-space: nowrap;
      }
      .wtb {
        background: rgba(29, 24, 188, 0.05);
        color: rgba(29, 24, 188, 1);
        padding: 1.5vw 3vw;
        border-radius: 5px;
        white-space: nowrap;
      }
    }
  }
  .addEnterprise {
    .addEnterpriseTit {
      padding: 4vw 3vw;
      background: white;
      margin: 3vw;
      border-radius: 5px;
      color: #333333;
      font-size: 3.8vw;
      .line {
        margin: 2vw 0;
      }
    }
    .addEnterpriseBody {
      background: white;
      padding: 1vw 3vw 5vw 3vw;
      border-radius: 5px;
      margin: 0 3vw;
      .bodyLi {
        display: flex;
        align-items: center;
        border-bottom: 3px solid #cccccc;
        padding: 5vw 0;
        width: 100%;
        font-size: 3.8vw;
        .bodyLiTit {
          width: 35vw;
          //   white-space: nowrap;
        }
      }
      .lastLi {
        border-bottom: none !important;
        padding-bottom: 2vw;
      }
    }
    .buttonBox {
      display: flex;
      margin-top: 10vw;
      justify-content: space-evenly;
      button {
        background: #1d18bc;
        width: 40vw;
        height: 13vw;
        color: #ffffff;
        border-radius: 10px;
      }
    }
  }
}
</style>
