<template>
  <div class="category">
    <div class="col_left">
      <ul class="navigation_box">
        <li @click="checkOne">
          <div class="icon_box">
            <i class="iconfont iconxingzhuang1"></i>
          </div>
          <span
            class="title"
            :class="{ title__check: this.$store.state.selectedStatus === 1 }"
            >存证记录</span
          >
          <span class="num">{{ getGoods }}</span>
        </li>
        <li @click="checkTwo">
          <div class="icon_box icon_box__green">
            <i class="iconfont iconjilu-"></i>
          </div>
          <span
            class="title"
            :class="{ title__check: this.$store.state.selectedStatus === 2 }"
            >模板管理</span
          >
          <span class="num">{{ getTemplate }}</span>
        </li>
        <li @click="checkThree">
          <div class="icon_box icon_box__orange">
            <i class="iconfont iconshanchu2"></i>
          </div>
          <span
            class="title"
            :class="{ title__check: this.$store.state.selectedStatus === 3 }"
            >已删除</span
          >
          <span class="num">{{ deleteds }}</span>
        </li>
      </ul>
    </div>

    <!-- 左侧列 -->
    <div
      class="col_right"
      :class="{ 'col_right--show': this.$store.state.selectedStatus === 1 }"
    >
      <new-productList @update="update"></new-productList>
    </div>

    <!-- 右侧列 -->
    <div
      class="col_right"
      :class="{ 'col_right--show': this.$store.state.selectedStatus === 2 }"
    >
      <!-- 模板 -->
      <template-manage></template-manage>
    </div>
    <div
      class="col_right"
      :class="{ 'col_right--show': this.$store.state.selectedStatus === 3 }"
    >
      <!-- 已删除 -->
      <deleted :ToUpdate="ToUpdate"></deleted>
    </div>
    <!-- 引导页 -->
    <common-dialog showMask2 close class="cdg-boot-page" v-if="showbootPage">
      <boot-page @close="showbootPage = false"></boot-page>
    </common-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
// 模板管理部分
import TemplateManage from "./TemplateManage.vue";
// 右侧存证部分
import newProductList from "@/components/category/ProductList.vue";
//删除页
import deleted from "@/views/category/deleted.vue";
// 引导页
import bootPage from "@/components/bootPage.vue";
import CommonDialog from "@/components/CommonDialog.vue";
@Component({
  components: {
    newProductList,
    TemplateManage,
    deleted,
    bootPage,
    CommonDialog,
  },
})
export default class Template extends Vue {
  [x: string]: any;
  trigger: boolean = false;
  ToUpdate: boolean = false;
  showbootPage: Boolean = false;
  created() {
    this.getGoods;
    this.getTemplate;
    this.SelectedStatus;
  }
  mounted() {
    if (localStorage.getItem("bootPage") === "show") {
      this.showbootPage = true;
    }
  }
  update() {
    this.ToUpdate = !this.ToUpdate;
  }

  // 获取选中状态
  get SelectedStatus() {
    return this.$store.state.selectedStatus;
  }
  get getGoods() {
    return this.$store.state.goodsNum;
  }
  get deleteds() {
    return this.$store.state.deletedNum;
  }
  get getTemplate() {
    return this.$store.state.templateNum;
  }
  // 显示存证
  checkOne() {
    this.$store.commit("setSelectedStatus", 1);
    this.trigger = !this.trigger;
  }
  // 显示模板管理
  checkTwo() {
    this.$store.commit("setSelectedStatus", 2);
  }
  // 已删除
  checkThree() {
    this.$store.commit("setSelectedStatus", 3);
  }
}
</script>
<style scoped lang="less">
.cdg-boot-page {
  /deep/.dialog_content {
    border-radius: 10px !important;
  }
}
.category {
  display: flex;
  height: 100%;
  //解决存证列表下方铺不满的问题
}

.col_left {
  width: 237px;
  background: #fff;
  // 二期开发
  .navigation_box {
    margin: 0;
    padding: 0;
    padding-left: 18px;
    margin-top: 20px;
    li {
      list-style: none;
      height: 38px;
      cursor: pointer;
      line-height: 38px;
    }
    .title {
      font-size: 12px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(53, 53, 53, 1);
    }
    .title__check {
      color: #4a90e2;
    }
    .num {
      font-size: 12px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      float: right;
      margin-right: 21px;
      color: rgba(53, 53, 53, 1);
    }
    .icon_box {
      float: left;
      width: 27px;
      height: 27px;
      // 做点改动
      margin-left: 8px;
      margin-top: 5.5px;
      margin-right: 14px;
      background: linear-gradient(
        180deg,
        rgba(0, 94, 212, 1) 0%,
        rgba(82, 149, 227, 1) 100%
      );
      text-align: center;
      line-height: 27px;
      border-radius: 10px;
      i {
        color: white;
        font-size: 14px;
      }
    }
    .icon_box__green {
      background: linear-gradient(
        180deg,
        rgba(3, 213, 161, 1) 0%,
        rgba(6, 217, 164, 1) 100%
      );
    }
    .icon_box__orange {
      background: linear-gradient(
        180deg,
        rgba(255, 177, 91, 1) 0%,
        rgba(255, 177, 91, 1) 100%
      );
    }
  }
  // end
  .subject {
    margin-top: 15px;
  }
}

.col_right {
  display: none;
  flex: 1;
  background: #f8f8f8;
}
.col_right--show {
  display: block;
  overflow-y: scroll;
}
</style>
