<template>
  <div class="wrapper">
    <header-nav :index_num="index_num"></header-nav>
    <div id="box">
      <!-- 搜索框 -->
      <div class="search">
        <input
          type="text"
          placeholder="请输入组织名称"
          v-model.trim="searchVal"
          @keyup.enter="getData()"
        />
        <label @click="getData()">搜索</label>
      </div>
      <!-- 分类搜索 -->
      <div class="select-box">
        <select name="type" v-model="type_value" @change="scree()">
          <option value="组织类型">组织类型</option>
          <template v-for="(type, index) in types">
            <option :key="index" :value="index">{{ type }}</option>
          </template>
        </select>

        <select name="year" v-model="year_value" @change="scree()">
          <option value="年检时间">年检时间</option>
          <template v-for="(year, index) in years">
            <option :key="index" :value="index">{{ year }}</option>
          </template>
        </select>

        <select name="condition" v-model="year_status" @change="scree()">
          <option value="年检结果">年检结果</option>
          <option value="0">不合格</option>
          <option value="1">合格</option>
        </select>
      </div>
      <!-- 搜索记录 -->
      <!-- <div class="record">
        <template v-for="(item,index) in record">
          <div class="list" :key="index" @click="searchRecord(item.nameOf)">
            <span>{{item.category + '：' + item.nameOf}}</span>
            <span class="iconfont icon-cuowu" @click="del(index)"></span>
          </div>
        </template>
      </div>-->
      <!-- 表格 -->
      <div class="box-table">
        <div class="caption">
          <span
            v-for="(list, index) in text"
            :class="sub == index ? 'color' : ''"
            :key="index"
            @click="btn(index)"
            >{{ list }}</span
          >
        </div>
        <table>
          <tr>
            <th>序号</th>
            <th>社会组织名称</th>
            <th>统一社会信用代码</th>
            <th>社会组织类型</th>
            <th>法定代表人</th>
            <th>成立登记日期</th>
            <th>状态</th>
          </tr>
          <template v-if="searchValue.length == 0">
            <tr
              v-for="(info, index) in conversion"
              :key="index"
              :class="index % 2 == 0 ? 'bgcbz' : 'bgcz'"
              class="tr"
            >
              <td>{{ info.name }}</td>
              <td>{{ info.unicode }}</td>
              <td>{{ info.society_type }}</td>
              <td>{{ info.legal_person }}</td>
              <td>{{ info.reg_time }}</td>
              <td v-if="info.status == '白名单'" style="color:#2fd63f">
                信用良好
              </td>
              <td v-if="info.status == '黑名单'" style="color:#e13232">
                活动异常
              </td>
            </tr>
          </template>
          <template v-if="searchValue.length > 0">
            <tr
              class="tr"
              v-for="(info, index) in searchValue"
              :key="index"
              :class="index % 2 == 0 ? 'bgcbz' : 'bgcz'"
            >
              <td>{{ info.name }}</td>
              <td>{{ info.unicode }}</td>
              <td>{{ info.society_type }}</td>
              <td>{{ info.legal_person }}</td>
              <td>{{ info.reg_time }}</td>
              <td v-if="info.status == '白名单'" style="color:#2fd63f">
                信用良好
              </td>
              <td v-if="info.status == '黑名单'" style="color:#e13232">
                活动异常
              </td>
            </tr>
          </template>
        </table>
      </div>
      <!-- 分页按钮 -->
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :pager-count="5"
          background
          layout="prev, pager, next"
          :total="totalCount"
        ></el-pagination>
      </div>
    </div>
    <footer-nav class="footer"></footer-nav>
  </div>
</template>

<script>
import HeaderNav from '../components/HeaderNav'
import FooterNav from '../components/FooterNav'

export default {
  components: {
    HeaderNav,
    FooterNav
  },
  props: {},
  data () {
    return {
      index_num: 1,
      text: ['全部', '异常名录', '信用良好名录'],
      sub: 0,
      imgUrl: {
        xa: require('../../static/img/xa.png')
      },
      searchVal: '',
      searchValue: [],
      record: [],
      types: [],
      years: '',
      year_status: '年检结果',
      type_value: '组织类型',
      year_value: '年检时间',
      bgData: [],
      arr1: [],
      arr0: [],
      conversion: [],
      pageSize: 1,
      currentPage: 1,
      totalCount: 1,
      status: ''
    }
  },
  computed: {},
  watch: {
    // record(newVal, oldVal) { }
  },
  methods: {
    /** 筛选函数 */
    scree () {
      this.currentPage = 1
      if (this.sub === 0) {
        this.sub = ''
      } else if (this.sub === 1) {
        this.sub = 0
      } else {
        this.sub = 1
      }
      this.getData(
        this.searchVal,
        this.type_value,
        this.years[this.year_value],
        this.year_status,
        this.sub,
        this.currentPage
      )
      if (this.sub === '') {
        this.sub = 0
      } else if (this.sub === 0) {
        this.sub = 1
      } else {
        this.sub = 2
      }
    },
    /** 删除单条数据 */
    // del(index) {
    //   let delArr = this.record.splice(index, 1)
    // },
    /** 调用搜索函数 */
    // searchRecord(str) {
    //   this.getSearch(str)
    // },
    /** 名单切换 */
    btn (index) {
      let s = this.sub
      s = index
      this.sub = s
      this.currentPage = 1
      switch (this.sub) {
        case 0:
          this.getData(
            this.searchVal,
            this.type_value,
            this.years[this.year_value],
            this.year_status,
            (this.status = '')
          )
          break
        case 1:
          this.getData(
            this.searchVal,
            this.type_value,
            this.years[this.year_value],
            this.year_status,
            (this.status = 0)
          )
          break
        case 2:
          this.getData(
            this.searchVal,
            this.type_value,
            this.years[this.year_value],
            this.year_status,
            (this.status = 1)
          )
          break
      }
    },
    /** 获取后台数据 */
    getData (
      name = this.searchVal,
      type = this.type_value,
      year = this.years[this.year_value],
      yearStatus = this.year_status,
      status = this.status,
      page = this.currentPage
    ) {
      if (type === '组织类型') {
        type = ''
        // this.type_value = ''
      }

      if (year === '年检时间') {
        year = ''
        // this.years[this.year_value] = ''
      }

      if (yearStatus === '年检结果') {
        yearStatus = ''
        // this.year_status = ''
      }
      let _this = this

      this.$http({
        method: 'post',
        url: 'v1/society/society',
        data: {
          name: name,
          type: type,
          year: year,
          yearStatus: yearStatus,
          status: status,
          page: page
        }
      })
        .then(res => {
          if (res.data.data.code !== 200) {
            return
          }
          // if (this.page == 1) {
          if (res.data.data.data.info.length === 0) {
            alert('您所查询的数据暂时没有！')
            return
          } else {
            _this.conversion = res.data.data.data.info
            _this.totalCount = res.data.data.data.allPage
            // console.log(_this.conversion);
          }
          _this.page++
        })
        .catch(err => {
          console.log(err)
        })

      // console.log(this.type_value);

      if (this.type_value === '') {
        this.type_value = '组织类型'
      }

      if (this.years[this.year_value] === '') {
        this.year_value = '年检时间'
      }

      if (this.year_status === '') {
        this.year_status = '年检结果'
      }
    },
    /** 获取类型 */
    getDataG () {
      let _this = this
      this.$http({
        method: 'get',
        url: 'v1/society/get-type',
        params: {}
      })
        .then(res => {
          if (res.data.code !== 200) {
            return
          }
          _this.types = res.data.data.type
          _this.years = res.data.data.year
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getPackData()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.getData()
      this.getPackData()
    },
    getPackData () {}
  },
  created () {
    this.getDataG()
    this.getData()
  },
  mounted () {}
}
</script>

<style lang="scss" scoped>
.wrapper {
  min-width: 1280px;
  box-sizing: border-box;
  position: relative;

  #box {
    width: 1200px;
    background-color: #ffffff;
    margin: 40px auto 80px;
    box-sizing: border-box;
    padding: 35px 30px 86px;

    .page {
      margin-top: 60px;
      height: 36px;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      /deep/ .el-pagination.is-background .el-pager li {
        color: #333 !important;
      }

      /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #e60012;
        color: #fff !important;
      }

      /deep/ .el-icon.el-icon-arrow-left::before {
        content: "上一页";
        font-family: "MicrosoftYaHei";
        font-size: 12px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 1px;
        color: #666;
      }

      /deep/ .el-pagination .btn-prev {
        width: 80px;
      }

      /deep/ .el-pagination .btn-next {
        width: 80px;
      }

      /deep/ .el-icon.el-icon-arrow-right::before {
        content: "下一页";
        font-family: "MicrosoftYaHei";
        font-size: 12px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 1px;
        color: #666;
      }
    }

    .box-table {
      width: 100%;
      margin-top: -25px;

      table {
        width: 1130px;
        counter-reset: items 0; /* 0 可以省略 */
        counter-increment: counter-name integer;
        box-sizing: border-box;

        .tr {
          counter-increment: items 1; /* 1 同样可以省略 */
          &:before {
            content: counter(items);
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #595959;
            width: 86px;
            height: 40px;
            display: inline-block;
            text-align: center;
            line-height: 40px;
            box-sizing: border-box;
          }
        }

        th {
          line-height: 40px;
          text-align: center;
          height: 40px;
          font-family: "MicrosoftYaHei";
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #666666;
          background-color: #f6fafd;
          box-sizing: border-box;

          &:nth-of-type(1) {
            width: 86px;
          }
          &:nth-of-type(2) {
            width: 160px;
            border-left: 1px solid #dcebf6 !important;
          }
          &:nth-of-type(3) {
            width: 240px;
            border-left: 1px solid #dcebf6 !important;
          }
          &:nth-of-type(4) {
            width: 160px;
            border-left: 1px solid #dcebf6 !important;
          }
          &:nth-of-type(5) {
            width: 160px;
            border-left: 1px solid #dcebf6 !important;
          }
          &:nth-of-type(6) {
            width: 160px;
            border-left: 1px solid #dcebf6 !important;
          }
          &:nth-of-type(7) {
            width: 140px;
            border-left: 1px solid #dcebf6 !important;
          }
        }

        .bgcz {
          background-color: #f6fafd;
        }
        .bgcbz {
          background-color: #fff;
        }

        td {
          border: none !important;
          line-height: 40px;
          text-align: center;
          height: 40px;
          font-family: "MicrosoftYaHei";
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          box-sizing: border-box;
          color: #595959;

          &:nth-of-type(1) {
            width: 160px;
            border-left: 1px solid #dcebf6 !important;
          }
          &:nth-of-type(2) {
            width: 240px;
            border-left: 1px solid #dcebf6 !important;
          }
          &:nth-of-type(3) {
            width: 160px;
            border-left: 1px solid #dcebf6 !important;
          }
          &:nth-of-type(4) {
            width: 160px;
            border-left: 1px solid #dcebf6 !important;
          }
          &:nth-of-type(5) {
            width: 160px;
            border-left: 1px solid #dcebf6 !important;
          }
          &:nth-of-type(6) {
            width: 140px;
            border-left: 1px solid #dcebf6 !important;
          }
          /*
          &:nth-of-type(7) {
            width: 144px;
          }
          */
        }
      }

      .caption {
        width: 1140px;
        height: 38px;
        border-bottom: 1px solid #dedede;
        margin-top: 76px;
        margin-bottom: 30px;
        padding-left: 30px;
        box-sizing: border-box;

        span {
          display: inline-block;
          height: 38px;
          text-align: center;
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
          margin-right: 49px;

          &:nth-of-type(1) {
            width: 60px;
          }
          &:nth-of-type(2) {
            width: 110px;
          }
          &:nth-of-type(3) {
            width: 121px;
          }
        }

        .color {
          color: #e60012;
          position: relative;

          &::after {
            content: "";
            width: 100%;
            height: 2px;
            background-image: linear-gradient(#e60012, #e60012),
              linear-gradient(#ff7f7f, #ff7f7f);
            background-blend-mode: normal, normal;
            position: absolute;
            left: 0%;
            bottom: 0%;
          }
        }
      }
    }

    .record {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;

      .list {
        margin-right: 25px;
        border-radius: 4px;
        border: solid 1px #c7c7c7;
        padding: 10px 24px;
        font-family: "MicrosoftYaHei";
        font-size: 18px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #666666;
        margin-bottom: 25px;

        .iconfont {
          margin-left: 10px;
        }
      }
    }

    .select-box {
      display: flex;
      align-items: center;

      select {
        color: #666 !important;
        font-size: 18px;
        &:nth-of-type(1) {
          /* 清除默认的箭头样式 */
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
          /* 右侧添加小箭头的背景图 */
          background: url("../../static/img/xa.png") 90% center no-repeat;
          background-size: 14px 8px;
          // width: 170px;
          padding: 0 30px;
          height: 38px;
          background-color: #f9f8f8;
          border-radius: 4px;
          border: solid 1px #c7c7c7;
        }
        /* 清除默认的箭头样式 */
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        /* 右侧添加小箭头的背景图 */
        background: url("../../static/img/xa.png") 126px center no-repeat;
        background-size: 14px 8px;
        width: 170px;
        height: 38px;
        background-color: #f9f8f8;
        border-radius: 4px;
        border: solid 1px #c7c7c7;
        margin-right: 55px;
        padding-left: 30px;
        box-sizing: border-box;
        outline: none;
        margin-bottom: 30px;
      }
    }

    .search {
      width: 100%;
      height: 50px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;

      input {
        font-family: "MicrosoftYaHei";
        font-size: 18px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 2px;
        color: #666666;
        padding: 0 18px;
        box-sizing: border-box;
        width: 1025px;
        height: 50px;
        border: solid 1px #c7c7c7;
        outline: none;
      }

      label {
        width: 96px;
        height: 50px;
        background-color: #e60012;
        font-family: "MicrosoftYaHei";
        font-size: 18px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 50px;
        letter-spacing: 0px;
        color: #ffffff;
        text-align: center;
      }
    }
  }
}
</style>
