<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :show-close="false"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      append-to-body
      custom-class="dialog-boxed"
      width="85%"
    >
      <div class="dialog-slot">
        <div class="closeClick">
          <div class="newplan">
            <div class="line"></div>
            <div class="span">新增计划</div>
          </div>
          <img src="@/assets/images/close.png" alt="" @click="closeDialog" />
        </div>
        <div class="content">
          <!-- tabs -->
          <div class="module">
            <!-- <div
              class="select"
              :class="{ nextStepSelect: activeTab == 0 }"
              @click="selectTab(0)"
            >
              <span class="span-one">Ⅰ</span>
              <span>选择省重点</span>
            </div> -->
            <div
              class="issue"
              :class="{ nextStepIssue: activeTab == 1 }"
              @click="selectTab(1)"
            >
              <!-- <span class="span-one">Ⅱ</span> -->
              <span class="span-one">Ⅰ</span>
              <span>选择企业</span>
            </div>
            <div
              class="issue"
              :class="{ nextStepIssue: activeTab == 2 }"
              @click="selectTab(2)"
            >
              <!-- <span class="span-one">Ⅲ</span> -->
              <span class="span-one">Ⅱ</span>
              <span>草稿箱</span>
            </div>
          </div>

          <!-- tabs-content -->
          <!-- <div v-show="activeTab == 0">
            <tab1 ref="tabs1" @nextTab="selectTab" />
          </div> -->
          <div v-show="activeTab == 1">
            <tab2 ref="tabs2" @nextTab="selectTab" />
          </div>
          <div v-show="activeTab == 2">
            <tab3 ref="tabs" @closeDialogtabs="closeDialog" />
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
//tab
// import tab1 from "./tab1.vue";
import tab2 from "./tab2.vue";
import tab3 from "./tab3.vue";

export default {
  dicts: [
    "category",
    "economic_categories",
    "is_point",
    "entpr_color",
    "major_hazard_level",
  ],
  // components: { tab1, tab2, tab3 },
  components: { tab2, tab3 },
  data() {
    return {
      activeTab: 1,
      dialogVisible: false,
    };
  },
  created() {},
  methods: {
    selectTab(index) {
      // console.log(index);
      this.activeTab = index;
      if (index == 0) {
        this.$refs.tabs1.refreshList();
      } else if (index == 1) {
        this.$refs.tabs2.refreshList();
      } else if (index == 2) {
        this.$refs.tabs.reList();
      }
    },
    // 打开
    openDialog() {
      this.activeTab = 1;
      this.dialogVisible = true;
    },
    // 关闭
    closeDialog() {
      this.$emit("closeDialog");
      this.dialogVisible = false;
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.isStyle {
  color: #f71052;
}
.dialog-slot {
  .closeClick {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 20px;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    background: #f8f9fa;
    box-shadow: 0px 1px 0px 0px #dbe0e8;
    background-color: #e0eaf8;
    img {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }
    .newplan {
      display: flex;
      align-items: center;
      .line {
        margin-right: 10px;
        width: 5px;
        height: 16px;
        background-color: #1e70de;
      }
      .span {
        font-size: 16px;
        font-family: "Alibaba PuHuiTi";
        font-weight: bold;
        color: #1e70de;
      }
    }
  }
  .content {
    // padding: 15px 10px;
    .module {
      padding-bottom: 15px;
      display: flex;
      border-bottom: 1px solid #e8ecf0;
      .select,
      .issue {
        width: 150px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #525966;
        span {
          font-size: 15px;
          font-family: "Alibaba PuHuiTi";
          font-weight: 400;
        }
        .span-one {
          margin-right: 10px;
        }
      }
      .select {
        background-image: url("../../../assets/images/select2.png");
        background-size: 100% 100%;
        margin-right: 10px;
      }
      .issue {
        background-image: url("../../../assets/images/issue2.png");
        background-size: 100% 100%;
        margin-right: 10px;
      }
      .nextStepSelect {
        background-image: url("../../../assets/images/select1.png");
        span {
          color: #2378ec;
        }
      }
      .nextStepIssue {
        background-image: url("../../../assets/images/issue1.png");
        span {
          color: #2378ec;
        }
      }
    }
    .filtrate {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      padding-bottom: 10px;
      .select-input {
        margin-right: 0;
        margin-top: 20px;
        display: flex;
        align-items: center;
        .select-span {
          font-size: 13px;
          font-family: "Alibaba PuHuiTi";
          font-weight: 400;
          color: #525966;
          line-height: 40px;
          margin-right: 0;
        }
        ::v-deep .el-select {
          background-color: transparent;
          width: 180px;
          .el-input__inner {
            height: 33px;
          }
          .el-input
            .el-input__suffix
            .el-input__suffix-inner
            .el-icon-arrow-up {
            display: flex;
            align-items: center;
            justify-content: center;
          }
          // border-radius: 2px;
          .el-input
            .el-input__suffix
            .el-input__suffix-inner
            .el-icon-arrow-up::before {
            content: "";
            background: url(../../../assets/images/down2.png) center center
              no-repeat;
            background-size: cover;
            position: absolute;
            width: 10px;
            height: 7px;
            // top: 50%;
            // left: 50%;
            // transform: translate(-50%, -50%);
            transform: rotate(180deg);
          }
        }
        ::v-deep .el-cascader {
          background-color: transparent;
          width: 180px;
          .el-input__inner {
            height: 33px;
          }
          // border-radius: 2px;
          .el-input
            .el-input__suffix
            .el-input__suffix-inner
            .el-icon-arrow-down::before {
            content: "";
            background: url(../../../assets/images/down2.png) center center
              no-repeat;
            background-size: cover;
            position: absolute;
            width: 10px;
            height: 7px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
      // .bottom {
      //   display: flex;
      //   justify-content: space-between;
      //   width: 100%;
      //
      // }
      .input-input {
        margin: 20px 2px 0 0;
        width: 160px;
        ::v-deep .el-input {
          .el-input__inner {
            height: 33px;
          }
        }
      }
      .btns {
        display: flex;
        align-items: center;
      }
      .select-btn {
        margin: 20px 0 0 0;
        width: 80px;
        height: 33px;
        background: #2378ec;
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
        color: #ffffff;
        cursor: pointer;
      }
      .reset {
        background: #fdab5b;
        margin-left: 20px;
      }
      // .select-btn1 {
      //   background: #28b384;
      //   margin-left: 20px;
      // }
    }
    .tables {
      // background-color: #eaf2fd;
      .tabs-btns {
        display: flex;
        align-items: center;
        justify-content: center;
        .look {
          display: flex;
          align-items: center;
          cursor: pointer;
          img {
            width: 20px;
            margin-right: 5px;
          }
          span {
            font-size: 15px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #045ffd;
          }
        }
      }
      ::v-deep .el-table {
        .success-row {
          background-color: rgba(234, 242, 253, 0.25);
        }
        td {
          height: 30px;
          text-align: center;
          font-size: 15px;
          font-family: "Alibaba PuHuiTi";
          font-weight: 400;
          color: #525966;
        }
        th {
          height: 30px;
          background-color: #eaf2fd;
          font-size: 16px;
          font-family: "Alibaba PuHuiTi";
          font-weight: bold;
          color: #525966;
          .el-checkbox {
            display: none;
          }
        }
        .el-table__body-wrapper {
          height: 448px !important;
          overflow-y: auto;
        }
      }
      ::v-deep .el-table::before {
        height: 0;
      }
    }
    .pagination {
      margin-top: 10px;
      .unselectedNumber {
        color: #f71052;
      }
      .selectedNumber {
        color: #48e1bb;
      }
      .sum {
        color: #48e1bb;
      }
    }
    .release-planning {
      padding: 10px 10px 0 0;
      .form-inline {
        ::v-deep .el-select {
          background-color: transparent;
          width: 190px;
          .el-input__inner {
            height: 33px;
            font-size: 15px;
            font-family: "Alibaba PuHuiTi";
            font-weight: 400;
            color: #525966;
          }
          // border-radius: 2px;
        }
        ::v-deep .el-input {
          .el-input__inner {
            font-size: 15px;
            font-family: "Alibaba PuHuiTi";
            font-weight: 400;
            color: #525966;
          }
        }
        .form-textarea {
          ::v-deep .el-textarea {
            height: 180px;
            .el-textarea__inner {
              height: 100%;
              font-size: 15px;
              font-family: "Alibaba PuHuiTi";
              font-weight: 400;
              color: #525966;
            }
          }
        }
      }
      .inputs {
        display: flex;
        margin-top: 20px;
        .inputs-span {
          width: 80px;
          text-align: right;
          margin-right: 10px;
          font-size: 15px;
          font-family: "Alibaba PuHuiTi";
          font-weight: 400;
          color: #525966;
        }
        ::v-deep .el-select {
          background-color: transparent;
          width: 190px;
          .el-input__inner {
            height: 33px;
          }
          // border-radius: 2px;
        }
        .input {
          flex: 1;
          ::v-deep .el-textarea {
            height: 180px;
            .el-textarea__inner {
              height: 100%;
            }
          }
        }
      }
      .centered {
        align-items: center;
        // position: relative;
        // .data_icon {
        //   width: 10px;
        //   height: 7px;
        //   position: absolute;
        //   top: 50%;
        //   left: 280px;
        //   z-index: 9;
        //   color: #c0c4cc;
        //   font-size: 14px;
        //   transform: translateY(-50%);
        // }
        // ::v-deep .el-input__prefix {
        //   display: none;
        // }
      }
    }
    .next {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
      .selected {
        display: flex;
        align-items: center;
        font-size: 15px;
        font-family: "Alibaba PuHuiTi";
        font-weight: 400;
        color: #525966;
        margin-right: 15px;
        span {
          color: #2378ec;
        }
      }
      .btn {
        width: 150px;
        height: 30px;
        border: 1px solid #2378ec;
        border-radius: 2px;
        background-color: #eff6ff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        font-family: "Alibaba PuHuiTi";
        font-weight: 400;
        color: #2378ec;
        cursor: pointer;
      }
      .selectBtn {
        background-color: #2378ec;
        color: #ffffff;
      }
    }
  }
}
::v-deep .el-dialog__body {
  padding: 30px 15px;
}
</style>
