<template>
  <view>
    <custom-nav-bar position="fixed" color="black" left-text="关联企业" left-arrow />

    <view class="enterprise" v-if="List.length !== 0">
      <van-swipe-cell :right-width="80" async-close v-for="(item, index) in List" :key="index">
        <view class="flex flex-v-center border" @tap="relationDetails" :data-item="item">
          <image class="enterprise-icon" src="/static/packages/enterprise/image/my-appeal.png" mode="aspectFill">
          </image>
          <view>
            <view class="enterprise-title">{{ item.enterpriseName }}</view>
            <view class="mt-24 enterprise-block">
              <text class="">法人姓名：</text>
              <text class="red">{{ item.legalName }}</text>
            </view>
          </view>
        </view>

        <template #right>
          <view :data-item="item" :data-index="index" @tap="swipeCell" class="enterprise-right">
            <view class="enterprise-circle">
              <van-icon name="delete-o" size="28px" color="#fff" />
            </view>
          </view>
        </template>

      </van-swipe-cell>
    </view>

    <view class="custom-image" v-if="List.length === 0">
      <view style="width: 100%">
        <image class="image" src="/static/packages/enterprise/image/enterprise-none.png" mode="aspectFill"></image>
        <view class="custom-image-title">您还未关联任何企业</view>
        <van-button @tap.native="createEnterprise" custom-style="width:300rpx;height: 80rpx;" type="primary"
          color="#E0383E">新增关联企业</van-button>
      </view>
    </view>

    <view class="enterprise-button" v-if="List.length !== 0">
      <van-button @tap.native="createEnterprise" custom-style="height: 80rpx;" color="#E0383E" block>新增关联企业</van-button>
    </view>
  </view>
</template>

<script>
  // const app = getApp();
  // const { enterprise } = app.globalData.api;
  // import * as publicApi from '@/api/publicApi';
  import * as enterprise from '@/api/enterprise';
  export default {
    components: {},
    data() {
      return {
        List: []
      };
    },
    async onLoad() {
      const res = uni.getSystemInfoSync();
      this.getEnterpriseList();
    },
    methods: {
      // 返回上一步
      onClickLeft() {
        uni.navigateTo({
          url: '/packages/enterprise/pages/issue-appeal/issue-appeal'
        });
      },

      // 清楚对应的企业列表
      async swipeCell(event) {
        const {
          item,
          index
        } = event.currentTarget.dataset;
        const res = await enterprise.DeleteEnterpriseIdApi(item.id);
        if (res.code !== 0) {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
          return false;
        }
        uni.showToast({
          title: '移除成功',
          icon: 'none'
        });
        const {
          List
        } = this;
        List.splice(index, 1);
       this.List = List
      },

      // 跳转-添加企业
      createEnterprise() {
        uni.navigateTo({
          url: '/packages/enterprise/pages/create-enterprise/create-enterprise'
        });
      },

      // 获取企业列表
      async getEnterpriseList() {
        const res = await enterprise.getEnterpriseListApi({
          pageNo: 1,
          pageSize: 15,
          userId: uni.getStorageSync('userInfoData').id
        });
        if (res.data) {
          this.List = res.data.list
        }
      },

      // 跳转我的诉求列表
      relationDetails(event) {
        const {
          item
        } = event.currentTarget.dataset;
        uni.redirectTo({
          url: `/packages/enterprise/pages/issue-appeal/issue-appeal?id=${item.id}`
        });
      }
    }
  };
</script>
<style lang="less">
  .mt-78 {
    margin-top: 78rpx;
  }

  .enterprise {
    padding: 36rpx 36rpx 0rpx 36rpx;
    padding-bottom: 140rpx;
  }

  .border {
    padding: 23rpx 0;
    border-bottom: 1px solid #efefef;
  }

  .mt-24 {
    margin-top: 24rpx;
  }

  .enterprise-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
  }

  .enterprise-block {
    font-size: 28rpx;
    font-weight: 400;
    color: #666666;
  }

  .enterprise-icon {
    width: 122rpx;
    height: 122rpx;
    margin-right: 23rpx;
    border-radius: 10rpx;
  }

  .enterprise-right {
    width: 160rpx;
    height: 100%;
    background: #f2f2f2;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .enterprise-circle {
    width: 90rpx;
    height: 90rpx;
    background-color: #e0383f;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .enterprise-button {
    padding: 25rpx 36rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
  }

  .custom-image {
    padding: 122rpx 25rpx 0 25rpx;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

    .image {
      width: 100%;
      height: 241rpx;
    }

    .custom-image-title {
      margin: 78rpx 0 60rpx 0;
      font-size: 32rpx;
      font-weight: 400;
      color: #333333;
    }
  }
</style>