<template>
  <div class="certification-page">
    <div class="certification-tabs">
      <div class="tabs-wrap">
        <el-tabs ref="tabcs" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="企业动态信用良好行为" name="good"></el-tab-pane>
          <el-tab-pane label="企业动态信用不良行为" name="bad"></el-tab-pane>
          <el-tab-pane label="动态信用排名" name="xinyong"></el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="certification-list">
      <div class="list-wrap">
        <div class="xinyong" v-if="activeName === 'xinyong'">
          <el-tabs
            v-model="queryForm.qualificationCategory"
            @tab-click="categoryClick"
          >
            <el-tab-pane
              v-for="item in categoryList"
              :key="item.id"
              :label="item.dictLabel"
              :name="item.dictValue"
            ></el-tab-pane>
          </el-tabs>
        </div>
        <el-form :inline="true" label-width="80px" :model="queryForm">
          <el-form-item label="企业名称">
            <el-input
              class="name-inp-search"
              placeholder="请输入关键字"
              v-model="queryForm.enterpriseName"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业类型" v-if="activeName !== 'xinyong'">
            <el-select
              v-model="queryForm.qualificationCategory"
              clearable
              placeholder="请选择企业类型"
            >
              <el-option
                v-for="item in categoryList"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="所在区域">
            <el-select
              v-model="queryForm.adcd"
              clearable
              placeholder="请选择所在区域"
            >
              <el-option
                v-for="item in areaList"
                :key="item.xzqhdm"
                :label="item.name"
                :value="item.xzqhdm"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="btn-row">
            <el-button type="mini" icon="el-icon-search" @click="getResult()"
              >查询</el-button
            >
            <el-button type="mini" icon="el-icon-refresh" @click="resetForm()"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%" v-loading="loading">
          <el-table-column
            prop="enterpriseName"
            label="企业名称"
            width="400"
            align="center"
          >
            <template slot-scope="scope">
              <span
                style="color: #005EB7;cursor: pointer;font-size: 16px !important;"
                @click="toDetail(scope.row)"
                >{{ scope.row.enterpriseName }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="projectName"
            label="项目名称"
            align="center"
            v-if="activeName !== 'xinyong'"
          >
          </el-table-column>
          <el-table-column
            label="企业资质"
            align="center"
            v-if="activeName !== 'xinyong'"
          >
            <template slot-scope="scope">
              {{ getZizhi(scope.row.qualificationCategory) }}
            </template>
            <!-- <template slot-scope="scope">
              <div
                v-for="(cateTtem, index) in categoryList"
                :key="(cateTtem, index)"
              >
                <div
                  v-if="cateTtem.dictValue == scope.row.qualificationCategory"
                >
                  {{ cateTtem.dictLabel }}
                </div>
              </div>
            </template> -->
          </el-table-column>
          <el-table-column
            label="企业资质"
            align="center"
            v-if="activeName === 'xinyong'"
          >
            <template slot-scope="scope">
              {{ getZizhi(scope.row.enterpriseType) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="adcd"
            label="所在区域"
            align="center"
            v-if="activeName === 'xinyong'"
          >
            <template slot-scope="scope">
              <div>{{ getadcd(scope.row) }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="score"
            label="信用分数"
            align="center"
            v-if="activeName === 'xinyong'"
          >
          </el-table-column>
          <el-table-column
            prop="bonusPoints"
            :label="activeName === 'good' ? '加分值' : '扣分值'"
            align="center"
            v-if="activeName !== 'xinyong'"
          >
          </el-table-column>
          <el-table-column
            prop="publishUnit"
            label="发布单位"
            align="center"
            v-if="activeName !== 'xinyong'"
          >
          </el-table-column>
          <el-table-column
            prop="noticeTime"
            label="公告时间"
            align="center"
            v-if="activeName !== 'xinyong'"
          >
          </el-table-column>
        </el-table>
        <pagination
          :total="total"
          :page.sync="queryForm.pageNum"
          :limit.sync="queryForm.pageSize"
          :pageSizes="pageSizes"
          @pagination="getResult"
        />
      </div>
    </div>
  </div>
</template>
<script>
import {
  creditGetGood,
  creditGetBad,
  getGuangDong
} from "@/api/creditStatistics";

import { listEnterpriseInfo } from "@/api/home";
export default {
  data() {
    return {
      total: 0,
      apidata: {
        pageNum: 1,
        pageSize: 10
      },
      pageSizes: [10, 20, 30, 50],
      queryForm: {
        enterpriseName: "",
        qualificationCategory: "all",
        status:null,
        pageNum: 1,
        pageSize: 10,
        adcd: ""
      },
      tableData: [],
      categoryList: [],
      activeName: "good",
      loading: true,
      category: "all",
      areaList: []
    };
  },
  created() {
    this.getArea();
    if (this.$route.query.type) {
      this.activeName = this.$route.query.type;
    }
    if (this.$route.query.enterpriseName3) {
      this.activeName = "bad";
      this.queryForm.enterpriseName = this.$route.query.enterpriseName3;
    }
  },
  mounted() {
    this.getResult();
    this.getDicts("qualification_type").then(res => {
      this.categoryList = [].concat(
        {
          id: "000",
          dictLabel: "所有资质",
          dictValue: "all"
        },
        res.data.data
      );
    });
  },
  methods: {
    getZizhi(type) {
      let zizhiText = "";
      this.categoryList.forEach(item => {
        if (item.dictValue == type) {
          zizhiText = item.dictLabel;
        }
      });
      return zizhiText;
    },
    getadcd(row) {
      let adcdText = "";
      if (!row.adcd) return "";
      let adcdCode = row.adcd.slice(0, 4) + "00";
      this.areaList.forEach(item => {
        if (item.xzqhdm == adcdCode) {
          adcdText = item.name;
        }
      });
      if (adcdText == "") {
        adcdText = "省外";
      }
      return adcdText;
    },
    getArea() {
      getGuangDong().then(res => {
        this.areaList = res.data.data;
      });
    },
    categoryClick() {
      this.getResult();
    },
    getResult() {
      this.loading = true;
      this.queryForm.status=3
      let queryForm = JSON.parse(JSON.stringify(this.queryForm));
      if (queryForm.qualificationCategory == "all") {
        queryForm.qualificationCategory = "";
      }

      switch (this.activeName) {
        case "good":

          creditGetGood(queryForm).then(res => {
            this.tableData = res.data.records;
            this.total = res.data.total;
            this.loading = false;
          });
          break;
        case "bad":
          creditGetBad(queryForm).then(res => {
            this.tableData = res.data.records;
            this.total = res.data.total;
            this.loading = false;
          });
          break;
        case "xinyong":
          let queryParams = {
            pageNum: queryForm.pageNum,
            pageSize: queryForm.pageSize,
            ids: null,
            data: {
              enterpriseName: queryForm.enterpriseName,
              adcd: queryForm.adcd,
              enterpriseType: queryForm.qualificationCategory
            },
            // 排序方式
            params: {
              // 按哪个字段排序
              orderBy: "score",
              // desc降序，升序asc
              sort: "desc"
            }
          };
          listEnterpriseInfo(queryParams).then(res => {
            // this.tableData = [];
            this.tableData = res.data.records;
            console.log(6666, res);
            this.total = res.data.total;
            this.loading = false;
          });
          break;
      }

      // if (this.activeName === "good") {
      //   creditGetGood(queryForm).then(res => {
      //     this.tableData = res.data.records;
      //     this.total = res.data.total;
      //     this.loading = false;
      //   });
      // } else {
      //   creditGetBad(queryForm).then(res => {
      //     this.tableData = res.data.records;
      //     this.total = res.data.total;
      //     this.loading = false;
      //   });
      // }
    },
    handleClick(tab, event) {
      // console.log(tab, event);
      // this.getResult();
      this.resetForm();
    },
    resetForm() {
      this.queryForm = {
        enterpriseName: "",
        qualificationCategory: "all",
        adcd: "",
        pageNum: 1,
        pageSize: 10
      };
      this.getResult();
    },
    toDetail(row) {
      console.log(111, row);
      if (this.activeName != "xinyong") {
        this.$router.push({
          path: "/enterpriseInDetail",
          query: {
            type: this.activeName,
            enterpriseId: row.enterpriseId
          }
        });
      } else {
        this.$router.push({
          path: "/enterpriseInDetail",
          query: {
            type: this.activeName,
            enterpriseId: row.id
          }
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.certification-page {
  .certification-tabs {
    height: 60px;
    background: #ffffff;
    border: 1px solid transparent;

    .tabs-wrap {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;

      /deep/.el-tabs {
        margin-top: 9px;

        .el-tabs__nav-wrap::after {
          background: #fff;
        }

        .el-tabs__item {
          padding: 0 46px;
          font-size: 16px;
          font-weight: 600;
          font-weight: 600;
          color: #333333;
          height: 48px;
        }

        .el-tabs__item.is-active {
          font-size: 18px;
          color: #005eb7;
        }

        .el-tabs__active-bar {
          width: 0 !important;
          height: 0;
          border: 10px solid transparent;
          border-bottom: 10px solid #005eb7;
          background: none;
          left: 55px;
          // transform: translate(-50%, 0) !important;
        }
      }
    }
  }

  .certification-list {
    background: linear-gradient(180deg, #005eb7 0%, #edf7ff 60% #edf7ff 100%);
    padding: 20px 0;

    .list-wrap {
      width: 1200px;
      min-height: 1098px;
      background: #ffffff;
      border-radius: 8px;
      margin: 0 auto;
      padding: 20px;

      /deep/.el-form {
        display: flex;
        align-items: center;

        .el-form-item {
          margin-right: 20px;
          &.btn-row {
            .el-form-item__content {
              display: flex;
            }
          }
        }

        .el-form-item__label {
          line-height: 50px;
          font-size: 16px;
          color: #333333;
          padding: 0 10px 0 0;
        }

        .el-input__inner {
          width: 220px;
          height: 50px;
          line-height: 50px;
          border-radius: 8px;
          border: 1px solid #aad8fb;
        }

        .el-select {
          .el-input__inner {
            width: 200px;
          }
        }

        .el-button {
          padding: 11px 19px;
          background: linear-gradient(180deg, #005ba6 0%, #0059a5 100%);
          border-radius: 8px;
          color: #ffffff;
          box-sizing: border-box;

          span {
            height: 26px;
            line-height: 26px;
            font-size: 18px;
            font-weight: 600;
          }

          i {
            font-size: 20px;
          }
        }

        .el-button:nth-child(1) {
          // margin-left: 50px;
        }

        .el-button:nth-child(2) {
          background: linear-gradient(180deg, #ffffff 0%, #ecf6ff 100%);
          border: 1px solid #005eb7;
          color: #005eb7;
        }
      }

      /deep/.el-table {
        .el-table__header-wrapper {
          height: 44px;
        }

        th {
          background: #ebf4fe;

          .cell {
            font-size: 16px !important;
            font-weight: 600 !important;
            color: #005eb7;
          }
        }

        tr {
          background-color: #fff !important;

          .cell {
            font-size: 16px;
          }
        }
      }

      .xinyong {
        /deep/ .el-tabs {
          .el-tabs__header {
            margin-bottom: 22px;
          }
          .el-tabs__item {
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>
