<template>
  <div class="enterpriseReporting">
    <div class="addEnterprise">
      <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> -->
            <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>
            <input
              type="text"
              placeholder="请选择"
              v-model="infoFrom.requireFinishTime"
              readonly
            />
          </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]"
              readonly
              placeholder="请填写"
            />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import auth from "@/service/auth";
import { getByStag } from "@/service/api_fillController";
export default {
  name: "EnterpriseReporting",
  data() {
    return {
      qyName: auth.currUser().qymc,
      optionList: [],
      contentList: [],
      infoFrom: {},
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      if (this.$route.query.id) {
        this.itemShow(this.$route.query.id);
      }
    },

    itemShow(val) {
      const reqData = {
        id: val,
      };
      getByStag(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(",");
          }
        }
      });
    },
  },
};
</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;
      }
    }
  }
  .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>
