<template>
  <view class="app-container">
    <u-navbar :title="title" safeAreaInsetTop placeholder>
      <view slot="left" class="text-red"></view>
    </u-navbar>
    <view class="">
      <uv-drop-down ref="dropDown" sign="dropDown_1" :customStyle="{'justifyContent':'space-around'}"
        :extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}"
        :extra-active-icon="{name:'arrow-up-fill',color:'#3c9cff',size:'26rpx'}">
        <uv-drop-down-item name="type" type="2" label="项目公司" value="0">
        </uv-drop-down-item>
        <uv-drop-down-item name="type" type="2" label="点火确认" value="0">
        </uv-drop-down-item>
      </uv-drop-down>
    </view>

    <view class="usuallyCard margin padding" v-if="list.length" v-for="(item,index) in list" :key="index">
      <view class="flex flex-direction">
        <view class="flex justify-between">
          <view class="">
            <text class="text-grey margin-right-xs">项目公司:</text>{{item.companyName || '--'}}
          </view>
          <view class="flex">
            <u-tag bgColor="#EFF1FD" borderColor="#fff" color="#5875EE" size="mini" :text="item.statusName"></u-tag>
          </view>
        </view>
        <view class="margin-top-sm">
          <text class="text-grey margin-right-xs">用户编号:</text>{{item.userCode || '--'}}
        </view>
        <view class="margin-top-sm">
          <text class="text-grey margin-right-xs">户名:</text>{{item.userName || '--'}}
        </view>
        <view class="margin-top-sm">
          <text class="text-grey margin-right-xs">地址:</text>{{item.userDetailedAddress || '--'}}
        </view>
        <view class="margin-top-sm">
          <text class="text-grey margin-right-xs">点火时间:</text>{{item.ignTime || '--'}}
        </view>
      </view>
      <view class="flex justify-end margin-top">
        <view class="margin-right" @click="handleDetail(item)">
          <u-button shape="circle">查看详情</u-button>
        </view>
        <view class="" @click="handleOpen(item)">
          <u-button shape="circle" color="#CF000D">点火维护</u-button>
        </view>
      </view>
      <!-- <view class="nodeCss">
				当前审批节点：项目公司_市场负责人
			</view> -->
    </view>
    <u-loadmore :status="status" v-if="list.length > 0" />
    <u-empty text="暂无资讯" icon="/static/images/icon/nodata.png" v-else></u-empty>

    <popUpFillIn :IgnitionID="IgnitionID" type="dhwh" title="点火维护" ref="popUpFillInRef" @getList="initData">
    </popUpFillIn>
    <TabBar :currentPagePath="this.$route.meta.pagePath"></TabBar>
  </view>
</template>

<script>
  import {
    getMcIgnitionList,
    mcIgnitionMaintenance
  } from '@/api/charge.js'
  import popUpFillIn from '@/components/popUpFillIn/popUpFillIn.vue'
  export default {
    components: {
      popUpFillIn
    },
    props: {

    },
    data() {
      return {
        title: "点火维护",
        keyword: "",
        actionStyle: {
          'color': '#fff',
          'background': '#EC1E19',
          'borderRadius': "15px",
          'width': '60px',
          'height': '25px',
          'line-height': '25px',
        },
        params: {
          pageNum: 1,
          pageSize: 10,
          companyCode: "",
          statusCode: "",
          userDetailedAddress: ""
        },
        status: "loadmore",
        list: [],
        total: null,
        IgnitionID: 0,
      }
    },
    computed: {

    },
    onReachBottom() {
      let allTotal = this.params.pageNum * this.params.pageSize
      if (allTotal < this.total) {
        //当前条数小于总条数 则增加请求页数
        this.params.pageNum++;
        this.status = 'loading';
        this.initData() //调用加载数据方法
      } else {
        this.status = "nomore"
        // console.log('已加载全部数据')
      }
    },
    onPullDownRefresh() {
      this.params.pageNum = 1;
      this.keyword = "";
      this.initData();
      setTimeout(() => {
        //结束下拉刷新
        uni.stopPullDownRefresh();
      }, 500);
    },
    onLoad() {
      this.initData()
    },
    methods: {
      async initData() {
        let {
          code,
          rows,
          total
        } = await getMcIgnitionList(this.params);
        if (code === 200) {
          if (this.params.pageNum > 1) {
            this.list = [...this.list, ...rows]
          } else {
            this.list = rows;
          }
          this.total = total;
          console.log('list', JSON.parse(JSON.stringify(this.list)));
        }
      },
      // 查看详情
      handleDetail(item) {
        uni.navigateTo({
          url: '/pages/charge/ignitionMaintenance/detail?objData=' + JSON.stringify(item)
        })
      },
      handleOpen(item) {
        this.IgnitionID = item.id;
        this.$refs.popUpFillInRef.open();
      }
    }
  }
</script>

<style lang="scss" scoped>
  /deep/.u-search__content {
    width: 70vw;
    padding-right: 140rpx;
  }

  /deep/.u-search__action {
    position: absolute;
    left: 50%;
  }

  .nodeCss {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 25rpx auto;
    border-radius: 20rpx;
    width: 95%;
    height: 80rpx;
    background: #EFF1FD;
    color: #5875EB;
    text-align: center;
  }


  .nodeCss::after {
    content: '';
    position: absolute;
    top: 0%;
    right: 25rpx;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #EFF1FD;
    border: 1px solid #EFF1FD;
    border-style: none none solid solid;
  }
</style>