<template>
  <div class="in_box">
    <el-row>
      <el-col :span="19">
        <div class="in_left">
          <div class="toReviewed">
            <div class="rev_title">
              待审核项目
            </div>
            <el-table v-loading="loading" :data="infoList">
              <el-table-column label="项目名称" align="center" prop="name" />
              <el-table-column label="当前状态" align="center" prop="totAmt" />
              <el-table-column label="时间" align="center" prop="deptName" />
              <el-table-column label="操作" width="280" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" style="background: #F5A40C;color: #FFF;padding: 7px;" v-hasPermi="['projectInfo:info:edit']">查看详情</el-button>
                  <el-button size="mini" type="text" style="background: #DE1939;color: #FFF;padding: 7px;" v-hasPermi="['projectInfo:info:edit']"
                    @click="infoBtn(scope.row)">确认审核</el-button>
                  <el-button size="mini" type="text" style="background: #1C84C6;color: #FFF;padding: 7px;" v-hasPermi="['projectInfo:info:edit']">驳回</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="exl_box">
            <div class="exl_title">
              <span>招资引资项目到资金额</span>
              <el-select width="80" v-model="lb_value" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <echarts></echarts>
          </div>
        </div>
      </el-col>
      <el-col :span="5" style="padding: 24px 12px 24px 0 ;">
        <div class="in_right">
          <div class="rig_title">
            单位榜单
          </div>
          <div class="rig_tab_top">
            <div class="rig_tab_item">
              单位名称
            </div>
            <div class="rig_tab_item">
              目标任务
            </div>
            <div class="rig_tab_item">
              已完成任务
            </div>
          </div>
          <div class="rig_cont">
            <div class="rig_items">
              <span>招商局</span>
              <span>2个</span>
              <span>1个</span>
            </div>
          </div>
          <div class="rig_tab_top" style="background-color: #1C84C6;">
            <div class="rig_tab_item">
              单位名称
            </div>
            <div class="rig_tab_item">
              目标任务
            </div>
            <div class="rig_tab_item">
              已完成任务
            </div>
          </div>
          <div class="rig_cont">
            <div class="rig_items">
              <span>招商局</span>
              <span>2个</span>
              <span>1个</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import echarts from '@/components/Echarts/index.vue'
  export default {
    data() {
      return {
        infoList: [1],
        loading: false,
        options: [{
            value: '2020'
          },
          {
            value: '2021'
          },
        ],
        lb_value: '2021', // 柱状图类别
      }
    },
    components: {
      echarts
    },
    methods: {
      infoBtn() {

      },
    }
  }
</script>
<style lang="scss" scoped>
  .rig_tab_top{
    display: flex;
    background: #6DCEF6;
    line-height: 36px;
    color: #fff;
    .rig_tab_item{
      font-size: 14px;
      flex: 1;
      text-align: center;
    }
  }
  .rig_cont{
    border: 1px solid #CDCDCD;
    box-sizing: border-box;
    margin-bottom: 31px;
    .rig_items{
      line-height: 36px;
      color: #343434;
      font-size: 12px;
      display: flex;
      span{
        flex: 1;
        text-align: center;
      }
    }
  }
  .in_right{
    padding: 15px 15px 0;
    border: 1px solid #DADADA;
    box-shadow: 0px 7px 9px 2px rgba(201, 201, 201, 0.36);
    .rig_title{
      color: #1C84C6;
      font-size: 18px;
      line-height: 36px;
      margin-bottom: 15px;
    }
  }
  .in_left {
    padding: 24px 20px 40px;

    .toReviewed {
      padding: 19px 16px;
      border: 1px solid #DADADA;
      box-shadow: 0px 7px 9px 2px rgba(201, 201, 201, 0.36);
      margin-bottom: 38px;

      .rev_title {
        margin-bottom: 23px;
      }
    }

    .exl_box {
      border: 1px solid #DADADA;
      box-shadow: 0px 7px 9px 2px rgba(201, 201, 201, 0.36);
      padding: 20px;
      box-sizing: border-box;

      .exl_title {
        display: flex;
        justify-content: space-between;

        span {
          color: #1C84C6;
          font-size: 18px;
          line-height: 36px;
        }

      }
    }
  }
</style>
