<template>
  <div id="category">
    <!--头部-->
    <!-- <Header/> -->
    <div class="header-title">
      <span class="header-title-return" @click="returnClick"><van-icon name="arrow-left" /></span>
      <span class="header-title-name">工商变更详情</span>
    </div>

    <div class="manage-body">
      <div style="margin-top: 15px;font-size: 15px;font-weight: bold;margin-left: 10px;">{{ detailData.companyName }}</div>
      <div><van-tag color="#E9F1FD" text-color="#2372EB" style="margin-top: 10px;margin-left: 10px;">{{ detailData.projectName }}</van-tag></div>
      <div style="font-size: 13px;margin: 10px;border-bottom: 1px solid #F2F3F4;padding-bottom: 10px;">{{ detailData.changeDate }}</div>
      <div class="firm-info">
        <van-grid :column-num="2">
          <van-grid-item style="width: 50%;flex-basis: 50% !important;word-break: break-all;">
            <div class="van-item-style">变更前:</div>
            <div class="fs-14 cl-595959 fw-bold">{{ detailData.beforeContent }}</div>
          </van-grid-item>
          <van-grid-item style="width: 50%;flex-basis: 50% !important;word-break: break-all;">
            <div class="van-item-style">变更后:</div>
            <div class="fs-14 cl-595959 fw-bold">{{ detailData.afterContent }}</div>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>

</template>

<script>
import { Button, Col, Row, Icon, Field, DropdownMenu, DropdownItem, Tag } from 'vant';

// 3. 引入接口
import {
  postQueryChangeInfo,
  postQueryChangeType,
  queryTypeItem,
  postQueryChangeYear,
} from "@/service/api/customerDashboard";


export default {
  name: "BusinessChangeDetail",
  data() {
    return {
      detailData: {},
    }
  },
  components: {
    VanButton: Button,
    VanRow: Row,
    VanCol: Col,
    VanIcon: Icon,
    VanField: Field,
    VanTag: Tag,
    VanDropdownMenu: DropdownMenu,
    VanDropdownItem: DropdownItem,
  },
  created() {
    this.detailData = JSON.parse(sessionStorage.getItem('changeDetail'))
    this.detailData.changeDate = this.detailData.changeDate.substr(0, 10);
  },
  methods: {

    returnClick() {
      sessionStorage.removeItem('changeDetail')
      if (sessionStorage.getItem('jumpType') == 'category') {
        this.$router.push({path: 'Category'})
      } else {
        this.$router.push({path: '/MonitorStation'})
      }
    },

  },
}
</script>

<style lang="less" scoped>

.header-title {
  height: 46px;
  width: 100%;
  background-color: #fff;
  text-align: center;
}
.header-title-name {
  font-weight: bold;
  line-height: 46px;
  align-items: center;
  justify-content: center;
  display: inline-flex;
}
.header-title-return {
  position: absolute;
  top: 13px;
  left: 20px;
  font-size: 15px;
}
.manage-body {
  margin-top: 10px;
  background-color: #fff;
  padding: 5px 10px 0px 10px;
}
/deep/ .van-nav-bar__text {
  color: gray !important;
  font-weight: bold;
}
.icon-mg {
  margin-left: 3px;
}
/deep/ .van-card__thumb {
  width: 60px;
}
/deep/ .van-cell__value {
  bottom: 5px;
}
.firm-info {
  width: 92%;margin-left: 4%;
  padding-bottom: 20px;
}
.firm-info /deep/ .van-grid-item__content--center {
  background-color: #F9F9FA;
}
.firm-info /deep/ .van-grid-item__content {
  padding: 16px 16px;
}
.van-item-style {
  font-size: 14px;
  font-weight: bold;
  color: #595959;
  margin-bottom: 5px;
}
</style>../../service/api/index