<template>
  <view class="app-container">
    <u-navbar :title="title" safeAreaInsetTop placeholder>
      <view class="flex justify-between"  slot="left" @click="loginOut">
        <u-icon size="15" name="/static/images/icon/login-out.png"></u-icon>
        <view class="text-red margin-left-xs">
          退出
        </view>
      </view>
    </u-navbar>
    <view class="flex justify-between align-center padding-sm bg-white">
      <view class="w70">
        <u-search v-model="keyword" bgColor="#fff" borderColor="#EC1E19" :clearabled="true" placeholder="请输入工单编号/户名"
          :actionStyle="actionStyle" @custom="onSearch"></u-search>
      </view>
      <view class="w30 margin-left">
        <u-checkbox-group activeColor="#EC1E19" v-model="approvalValue" placement="column" @change="checkboxChange">
          <u-checkbox v-for="(item, index) in approval" :key="index" :label="item.name" :name="item.name">
          </u-checkbox>
        </u-checkbox-group>
      </view>
    </view>
    <view class="">
      <uv-drop-down ref="dropDown" sign="dropDown_1" :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="order" type="2" label="财年" value="all">
        </uv-drop-down-item>
        <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-item name="type" type="2" label="类型" value="0">
        </uv-drop-down-item>
      </uv-drop-down>
    </view>

    <view class="usuallyCard margin padding">
      <view class="flex flex-direction">
        <view class="flex justify-between">
          <view class="">
            2023财年
          </view>
          <view class="flex">
            <u-tag class="margin-right" bgColor="#EFF1FD" borderColor="#fff" color="#5875EE" size="mini"
              text="拜访/收费"></u-tag>
            <u-tag bgColor="#EFF1FD" borderColor="#fff" color="#5875EE" size="mini" text="待审批"></u-tag>
          </view>
        </view>
        <view class="margin-top-sm">
          <text class="text-grey margin-right-xs">工单编号:</text>20240423112758317528770
        </view>
        <view class="margin-top-sm">
          <text class="text-grey margin-right-xs">项目公司:</text>咸宁中燃城镇燃气有限公司
        </view>
        <view class="margin-top-sm">
          <text class="text-grey margin-right-xs">收费人员:</text>张三-18100000081
        </view>
        <view class="margin-top-sm">
          <text class="text-grey margin-right-xs">用户:</text>张三(zhangsan)-全职
        </view>
      </view>
      <view class="flex justify-around margin-top">
        <view class="">
          <u-button shape="circle">更多操作</u-button>
        </view>
        <view class="" @click="handleDetail">
          <u-button shape="circle">查看详情</u-button>
        </view>
        <view class="" @click="handleRefuse">
          <u-button shape="circle">拒绝</u-button>
        </view>
        <view class="" @click="handleAgree">
          <u-button shape="circle" color="#CF000D">同意</u-button>
        </view>
      </view>
      <view class="nodeCss">
        当前审批节点：项目公司_市场负责人
      </view>
    </view>

    <view class="fixBtnCss" @click="createaVisit">
      <u-icon name="plus" color="#fff" size="30"></u-icon>
    </view>
    <popUpComponent :title="titles" ref="popUpComponentRef"></popUpComponent>
    <TabBar :currentPagePath="this.$route.meta.pagePath"></TabBar>
  </view>
</template>

<script>
  import popUpComponent from '@/components/popUpComponent/popUpComponent.vue'
  export default {
    components: {
      popUpComponent
    },
    props: {

    },
    data() {
      return {
        title: "用户拜访/收费",
        keyword: "",
        actionStyle: {
          'color': '#fff',
          'background': '#EC1E19',
          'borderRadius': "15px",
          'width': '60px',
          'height': '25px',
          'line-height': '25px',
        },
        loginOutShow: false,
        approvalValue: [],
        approval: [{
          name: "待我审批"
        }],
        titles: '同意'
      }
    },
    computed: {

    },
    onLoad() {

    },
    methods: {
      onSearch(e) {
        console.log("搜索", e);
      },
      checkboxChange(e) {
        console.log(e);
      },
      handleDetail() {
        uni.navigateTo({
          url: '/pages/charge/visitsAndFees/detail'
        })
      },
      // 拒绝按钮
      handleRefuse() {
        this.titles = "拒绝";
        this.$refs.popUpComponentRef.open();
      },
      // 同意按钮
      handleAgree() {
        this.titles = "同意";
        this.$refs.popUpComponentRef.open();
      },
      //创建拜访/收费
      createaVisit() {
        uni.navigateTo({
          url: '/pages/charge/visitsAndFees/createaVisit'
        })
      },
      loginOut() {
        this.$modal.confirm('您当前确定要退出吗?', '退出登录').then(() => {
          //钉钉直接退出微应用
          if (this.$isDing) {
            dd.biz.navigation.close({
              onSuccess: function(result) {
                console.log(result, 'result')
              },
              onFail: function(err) {
                console.log(err, 'err')
              }
            });
          } else {
            this.$store.dispatch('Logout').then((res) => {
              uni.reLaunch({
                url: '/pages/login/mobile'
              })
            })
          }
        }).catch(() => {
          console.log("取消");
        });
      }
    }
  }
</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;
  }

  .fixBtnCss {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 120rpx;
    height: 120rpx;
    position: fixed;
    background: #5875EB;
    right: 20rpx;
    bottom: 150rpx;
  }
</style>