<!--
 * @Author: your name
 * @Date: 2022-04-11 15:07:47
 * @LastEditTime: 2022-04-14 18:00:06
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
-->
<template>
  <div class="charsCom all-flex-h">
    <div class="title">第三方施工情况</div>
    <div class="two flex">
      <div class="left">未开工</div>
      <div class="middle">已完成</div>
      <div class="right">进行中</div>
    </div>
    <div class="three flex">
      <div class="left zzz">{{ inforList.filter(item => item.fConstructionStatus === "1").length }}</div>
      <div class="middle zzz">{{ inforList.filter(item => item.fConstructionStatus === "3").length }}</div>
      <div class="right zzz">{{ inforList.filter(item => item.fConstructionStatus === "2").length }}</div>
    </div>

    <div class="four all-flex-h">
      <div class="top flex">
        <div>施工单位</div>
        <div>备案时间</div>
        <div>施工描述</div>
      </div>
      <div class="scroll-wrapper">
        <div v-if="loading" class="loading">加载中...</div>
        <Scroll v-else-if="inforList.length > 0" :dataList="inforList">
          <template v-slot="{ dataList }">
            <ScroItem
              v-for="(item, index) in dataList"
              :key="item.fConGasProInforId"
              :data="item"
              :index="index"
            />
          </template>
        </Scroll>
        <div v-else class="no-data">暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script>
import { listInfor } from "@/api/thirdbuild/project";
import Scroll from "./Scroll";
import ScroItem from "./ScroItem";
import {getInfo} from "@/api/login";
export default {
  components: {
    Scroll,
    ScroItem
  },
  data() {
    return {
      notStarted:0,
      completed:0,
      inProgress:0,
      loading: false,
      user:{},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        fProjectCode: null,
        fProjectNo: null,
        fProjectName: null,
        fPipePress: null,
        fCompanyInfoId: null,
        fUploadType:null,
      },
      inforList:[],
      arr: [
        // {
        //   companyName: "中燃祥科",
        //   time: "2022-01-11 07:29",
        //   text: "安装探头",
        // },
        // {
        //   companyName: "河北泽宏",
        //   time: "2022-01-13 07:29",
        //   text: "安装管道",
        // },
        // {
        //   companyName: "河北泽宏科技股份有限公司",
        //   time: "2022-01-14 07:29",
        //   text: "气体报警器",
        // },
        // {
        //   companyName: "政府部门",
        //   time: "2022-01-15 07:29",
        //   text: "安装设备监控",
        // },
        // {
        //   companyName: "中诚然气",
        //   time: "2022-01-17 07:29",
        //   text: "安装管道",
        // },
        // {
        //   companyName: "中诚然气",
        //   time: "2022-02-20 07:29",
        //   text: "轻工路1号施工",
        // },
        // {
        //   companyName: "中燃祥科",
        //   time: "2022-02-21 07:29",
        //   text: "轻工路1号施工",
        // },
        // {
        //   companyName: "河北泽宏",
        //   time: "2022-03-11 07:29",
        //   text: "安装管道",
        // },
        // {
        //   companyName: "河北泽宏",
        //   time: "2022-04-16 07:29",
        //   text: "安装设备监控",
        // },

        // {
        //   companyName: 123,
        //   time: "2022-04-09 07:29",
        //   text: "大师傅阿斯蒂芬阿斯蒂芬Î",
        // },
        // {
        //   companyName: 123,
        //   time: "2022-04-09 07:29",
        //   text: "大师傅阿斯蒂芬阿斯蒂芬Î",
        // },
        // {
        //   companyName: 123,
        //   time: "2022-04-09 07:29",
        //   text: "大师傅阿斯蒂芬阿斯蒂芬Î",
        // },
        // {
        //   companyName: 123,
        //   time: "2022-04-09 07:29",
        //   text: "大师傅阿斯蒂芬阿斯蒂芬Î",
        // },
        // {
        //   companyName: 123,
        //   time: "2022-04-09 07:29",
        //   text: "大师傅阿斯蒂芬阿斯蒂芬Î",
        // },
      ],
    };
  },
  mounted() {},
  created() {
    this.getuserInfo();
  },
  methods: {
    getuserInfo(){
      getInfo().then(response => {
        this.user = response.user.roles[0]
        this.getList();
      });
    },
    getList() {
      this.loading = true;
      // 企业查自己的数据
      if (this.user.roleId == 5) {
        this.queryParams.fCompanyInfoId = this.$store.state.user.enterpriseId
        this.queryParams.entUploadState = this.queryParams.fUploadType;
      }
      // 政府如果按照状态查的话，是查的 govUploadState
      if (this.user.roleId == 3) {
        this.queryParams.govUploadState = this.queryParams.fUploadType;
      }
      listInfor(this.queryParams).then(response => {
        this.inforList = response.rows;
        console.log("inforList",this.inforList)
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.charsCom {
  width: 100%;
  height: 100%;
}
.title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 22px;
}
.two {
  box-shadow: 0px 0px 3px 1px #dddddd;
  height: 28px;
  font-size: 14px;
  margin-bottom: 15px;
  > div {
    line-height: 28px;
    flex: 1;
    text-align: center;
    &.left {
      color: #1f8df3;
    }
    &.middle {
      flex: 1;
      color: #03c4f1;
    }
    &.right {
      color: #ffc337;
    }
  }
}
.three {
  font-size: 16px;
  margin-bottom: 10px;
  > div {
    flex: 1;
    line-height: 24px;
    text-align: center;
  }
}
.four {
  flex: 1;
  font-size: 14px;
  // 这个解决子元素overhidden失效问题
  min-height: 0;
  >.top {
    background: rgba(24, 144, 255, 0.1);
    height: 29px;
    line-height: 29px;
    > div {
      flex: 1;
      text-align: center;
    }
  }
  .scroll-wrapper {
    // font-size: 14px;
    flex: 1;
    // 这个解决子元素overhidden失效问题
    min-height: 0;
    // background: red;
    // overflow: hidden;
    // position:relative;
  }
}

.loading, .no-data {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
}
</style>
