<template>

  <div class="in_box" style="background-color: #eef0ff;">

    <div >
      <el-row :gutter="10" style="padding: 0 20px; height: 100px;">
        <el-col :xs="12" :sm="12"  :lg="6" :xl="1"><div class="headerone heser" style="background-color: #fff; position: relative;">
        <img src="../assets/images/icon_hp_ztxs.png" style="width: 68px; height: 68px;" alt="">
        <p>
          <span>{{nhgewo.zt}} <i style="font-style:normal;">项</i> </span>
          <span>在谈线索数</span>
        </p>
        <p>
          <span>在谈线索</span>

        </p>
         <img src="../assets/images/icon_ztsj_blue.png" style="width: 12px; height: 19px;position: absolute; right: 0; top:15px" alt="" >
         <img src="../assets/images/pic_hthp_ztbg.png" style="width: 100%; position: absolute; right: 0; bottom: 0;" alt="" >
        </div></el-col>
        <el-col :xs="12" :sm="12"  :lg="6" :xl="11"><div class="headertwo heser" style="background-color: #fff; position: relative;">
        <img src="../assets/images/icon_hp_qyxm.png" style="width: 68px; height: 68px;" alt="">
        <p>
          <span>{{nhgewo.qy}} <i style="font-style:normal;">项</i> </span>
          <span>签约项目数</span>
        </p>
        <p>
          <span>签约项目</span>

        </p>
         <img src="../assets/images/icon_ztsj_pink.png" style="width: 12px; height: 19px;position: absolute; right: 0; top:15px" alt="" >
         <img src="../assets/images/pic_hthp_qybg.png" style="width: 100%; position: absolute; right: 0; bottom: 0;" alt="" >
        </div></el-col>
        <el-col :xs="12" :sm="12"  :lg="6" :xl="11"><div class="headerther heser" style="background-color: #fff; position: relative;">
        <img src="../assets/images/icon_hp_zjxm.png" style="width: 68px; height: 68px;" alt="">
        <p>
          <span>{{nhgewo.zj}} <i style="font-style:normal;">项</i> </span>
          <span>在建项目数</span>
        </p>
        <p>
          <span>在建项目</span>

        </p>
         <img src="../assets/images/icon_ztsj_green.png" style="width: 12px; height: 19px;position: absolute; right: 0; top:15px" alt="" >
         <img src="../assets/images/pic_hthp_zjbg.png" style="width: 100%; position: absolute; right: 0; bottom: 0;" alt="" >
        </div></el-col>
        <el-col :xs="12" :sm="12"  :lg="6" :xl="1"><div class="headerfour heser" style="background-color: #fff; position: relative;">
        <img src="../assets/images/icon_hp_tcxm.png" style="width: 68px; height: 68px;" alt="">
        <p>
          <span>{{nhgewo.tc}} <i style="font-style:normal;">项</i> </span>
          <span>投产项目数</span>
        </p>
        <p>
          <span>投产项目</span>

        </p>
         <img src="../assets/images/icon_ztsj_yellow.png" style="width: 12px; height: 19px;position: absolute; right: 0; top:15px" alt="" >
         <img src="../assets/images/pic_hthp_tcbg.png" style="width: 100%; position: absolute; right: 0; bottom: 0;" alt="" >
        </div></el-col>
      </el-row>

      <el-row>
        <el-col :span="18">
          <div class="in_left">
            <div class="exl_box" style="background-color: #fff;">
              <div class="exl_title" style="display: flex; align-items: center; position: relative;">
                <img src="../assets/images/icon_ztsj_blueright.png" alt="" style="width: 12px;height: 19px; position: absolute;top: 50%;left: -20px; transform: translateY(-50%);">
                <span>招资引资项目到资金额</span>
                <el-date-picker
                      v-model="lb_value"
                      style="width: 100px;"
                      type="year"
                      value-format="yyyy"
                      @change="picher_fn"
                      placeholder="选择年">
                    </el-date-picker>
              </div>
              <echarts :echartData="echartData" :ehaersList="ehaersList" v-if="flags"></echarts>
            </div>
          </div>
        </el-col>
        <el-col :span="6" style="padding: 0 12px 24px 0 ;">
          <div class="in_right" style="background-color: #fff;">
            <div class="rig_title" style="display: flex; align-items: center; position: relative;">
              <img src="../assets/images/icon_ztsj_blueright.png" alt="" style="width: 12px;height: 19px; position: absolute;top: 50%;left: -20px; transform: translateY(-50%);">
              "两区"及乡镇
            </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 class="rig_tab_item">
                入省项目个数
              </div>
            </div>
            <div class="rig_cont">
              <div class="rig_items" v-for="(item,index) in unitList" :key="index">
                <span>{{item.deptName}}</span>
                <span>{{item.projectMillionNum?item.projectMillionNum:0}}个</span>
                <span>{{item.projectCityMoney?item.projectCityMoney:0}}亿元</span>
                <span>{{item.projectProNum?item.projectProNum:0}}个</span>
              </div>
            </div>
            <div class="rig_title" style="display: flex; align-items: center; position: relative;">
              <img src="../assets/images/icon_ztsj_blueright.png" alt="" style="width: 12px;height: 19px; position: absolute;top: 50%;left: -20px; transform: translateY(-50%);">
              市直榜单
            </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" v-for="(item,index) in zjList" :key="index">
                <span>{{item.deptName}}</span>
                <span>{{item.targetArrivalAmount?item.targetArrivalAmount:0}}万元</span>
                <span>{{item.targetcAontractAmount?item.targetcAontractAmount:0}}万元</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import echarts from '@/components/Echarts/index.vue'
import {toBeReviewedList,setExamine,setReject,getUnitList,getUnitAmountList,getIndexEharts,getUnitListNuber} from '@/api/index.js'
  export default {
    data() {
      return {
        infoList: [],
        echartData: {
          name: '到资金额柱状图',
          numName: '到资金额',
          numNameArr: ['到资金额']
        },
        zjList: [],
        ehaersList: {},
        loading: false,
        unitList: [],
        flags: false,
        lb_value: '2021', // 柱状图类别
        nhgewo:{}
      }
    },
    components: {
      echarts
    },
    mounted() {
      this.getList()
      this.bd_btn()
      this.zj_btn()
      this.eharts_fn()
      this.getListyhte()
    },
    methods: {
      picher_fn() {
        this.eharts_fn()
      },
      eharts_fn(val) {
        getIndexEharts({
          year: this.lb_value
        }).then(res => {
          this.ehaersList = res.data
          this.flags = true
        })
      },
      zj_btn() {
        getUnitAmountList().then(res => {
          if(res.rows == null){
            this.zjList = []
          }else{
            this.zjList = res.rows
          }

        })
      },
      bd_btn() {
        getUnitList().then(res =>{
          console.log(res)
          this.unitList = res.rows
          if(res.rows == null){
            this.unitList = []
          }else{
            this.unitList = res.rows
          }

        })
      },
      dec_btn(row){
        this.$router.push({
          path: '/management/row/index',
          query: {
            setid: row.id,
            setrd: row.projectStatus,
          },
        })
      },
      bh_brn(scope) {
        const _this = this
        this.$confirm('是否确认驳回审核', "提醒", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return setReject({
            code: 2,
            bmProjectId: scrop.id
          });
        }).then(() => {
          _this.getList();
          _this.msgSuccess("提交成功");
        })
      },
      infoBtn(scope) {
        const _this = this
        this.$confirm('是否确认提交审核', "提醒", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return setExamine({
            code: 1,
            bmProjectId: scrop.id
          });
        }).then(() => {
          _this.getList();
          _this.msgSuccess("提交成功");
        })
        },
      getList() {
        toBeReviewedList().then(res => {
          console.log(res)
          this.infoList = res.rows
        })
      },
      getListyhte() {
        getUnitListNuber().then(res => {
          console.log(res)
          this.nhgewo = res.data
        })
      }

    }
  }
</script>
<style lang="scss" scoped>
  .heser{
    background-color: #fff;
    height: 100px;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    box-shadow: 0px 1px 4px 0px rgba(47, 47, 47, 0.35);
    p{
      flex: 1;
    }
    p:nth-child(3){
     height: 100%;
     margin: 0;
     padding-top: 15px;
     box-sizing: border-box;
     font-size: 17px;
     font-family: PingFang SC;
     font-weight: 800;
     color: #343434;
     position: relative;
    }
    p:nth-child(2){
      display: flex;
      flex-direction: column;
      span{
        font-size: 14px;
        color: #666666;
        padding-left: 10px;
      }
      span:nth-child(1){
        font-size: 17px;
        color: #343434;
        font-weight: 700;
        i{
          font-size: 14px;
          color: #666666;
        }
      }
    }


  }
  .rig_tab_top{
    display: flex;
    background: #6DCEF6;
    line-height: 36px;
    color: #fff;
    .rig_tab_item{
      font-size: 14px;
      flex: 1;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .rig_cont{
    border: 1px solid #CDCDCD;
    box-sizing: border-box;
    margin-bottom: 31px;
    max-height: 270px;
    overflow-y: auto;
    scrollbar-width: none;
/* firefox */
    -ms-overflow-style: none;

    /* IE 10+ */
    &::-webkit-scrollbar {
      display: none;
      /* Chrome Safari */
    }
    .rig_items{
      line-height: 36px;
      color: #343434;
      font-size: 12px;
      display: flex;
      span{
        flex: 1;
        text-align: center;
      }
    }
  }
  .in_right{
    padding: 15px 20px 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: 0 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: #343434;
          font-size: 18px;
          line-height: 36px;
        }

      }
    }
  }

</style>
