<template>
  <view>
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="客户授信"></uni-nav-bar>
    <qn-form-item type="title" label="授信客户"></qn-form-item>
    <qn-form-item label="选择客户" required>
      <qn-easyinput
        :maxlength="20"
        @blur="showCompany"
        @confirm="confirmCompany"
        v-model="form.name"
        :inputBorder="false"
        text="right"
        placeholder="请选择授信的客户"
      ></qn-easyinput>
    </qn-form-item>
    <qn-form-item required label="选择账号盘商">
      <qn-data-picker
        v-model="form.supplierId"
        text="right"
        :border="false"
        placeholder="请选择账号下的盘商"
        popup-title="请选择盘商"
        :map="{ text: 'name', value: 'id' }"
        :clear-icon="false"
        :localdata="supplierList"
      ></qn-data-picker>
    </qn-form-item>
    <qn-form-item type="title" label="选择授信方式"></qn-form-item>

    <view class="card_area">
      <view
        class="card_area-item"
        :class="{ selected: creditType == 'month', hasSelected: hasCreditList.includes('month') }"
        @click="selectCreditType('month')"
      >
        <image class="selected-icon" v-if="creditType == 'month'" src="/static/imgs/client-credit/selected-icon.png"></image>
        <image class="hasSelected-icon" v-if="hasCreditList.includes('month')" src="/static/imgs/client-credit/has-selected-icon.png"></image>
        <image class="card_area-item-icon" src="/static/imgs/client-credit/month-credit-icon.png"></image>
        <text class="card_area-item-text">月结授信</text>
      </view>
      <view class="card_area-item" :class="{ selected: creditType == 'fs' }" @click="selectCreditType('fs')">
        <image class="selected-icon" v-if="creditType == 'fs'" src="/static/imgs/client-credit/selected-icon.png"></image>
        <image class="hasSelected-icon" v-if="hasCreditList.includes('fs')" src="/static/imgs/client-credit/has-selected-icon.png"></image>
        <image class="card_area-item-icon" src="/static/imgs/client-credit/fs-credit-icon.png"></image>
        <text class="card_area-item-text">飞算授信</text>
      </view>
    </view>
    <uni-popup ref="popup" type="bottom">
      <view class="popup_modal">
        <slot name="title">
          <view class="popup_modal-title">请选择以下公司</view>
        </slot>
        <scroll-view scroll-y="true" class="popup_modal-scroll">
          <view
            @click="selectCompany(item.enterpriseId, item.enterpriseName)"
            class="popup_modal-scroll-item"
            v-for="item in searchList"
            :key="item.enterpriseId"
          >
            {{ item.enterpriseName }}
          </view>
        </scroll-view>
      </view>
    </uni-popup>
    <qn-footer fixed height="120rpx">
      <view class="button_area">
        <view :class="{ button__submit: true, 'button__submit--disabled': !canSubmit }" @click="canSubmit && next()">
          <text class="text">下一步</text>
        </view>
      </view>
    </qn-footer>
  </view>
</template>

<script>
import { back, go2 } from '@/utils/hook.js'
import { getCompanyList, getCustomerCreditInfo } from '@/apis/clientCreditApi.js'
import { getBaseInfo } from '@/apis/commonApi.js'
// import qnFooter from '@/components/qn-footer/qn-footer.vue'
export default {
  data() {
    return {
      form: {
        enterpriseId: null,
        name: null,
        supplierId: this.$store.state.supplierInfo.supplierId || null
      },
      creditType: null,
      searchList: [],
      supplierList: [],
      hasCreditList: []
    }
  },
  methods: {
    back,
    showCompany(e) {
      let enterpriseName = e.detail.value.trim()
      if (enterpriseName) {
        getCompanyList({ enterpriseName }).then((res) => {
          if (res) {
            this.searchList = res.records
            if (this.searchList.length > 0) {
              this.$refs.popup.open('bottom')
            }
          }
        })
      }
    },
    confirmCompany(enterpriseName) {
      if (enterpriseName) {
        getCompanyList({ enterpriseName }).then((res) => {
          if (res) {
            this.searchList = res.records
            if (this.searchList.length > 0) {
              this.$refs.popup.open('bottom')
            }
          }
        })
      }
    },
    selectCompany(enterpriseId, enterpriseName) {
      this.$refs.popup.close()
      this.form.name = enterpriseName
      this.form.enterpriseId = enterpriseId
    },
    next() {
      // 月结授信直接填表授信即可
      // 通过searchList获取企业信息
      let target = this.searchList.find((item) => item.enterpriseId === this.form.enterpriseId)
      if (this.creditType === 'month') {
        if (!target) {
          uni.showToast({
            title: '请选择客户',
            icon: 'none'
          })
          return
        }
        go2('month-credit', {
          enterpriseId: this.form.enterpriseId,
          enterpriseName: target.enterpriseName,
          legalPersonName: target.legalPerson,
          mallSupplierId: this.form.supplierId
        })
      }
      if (this.creditType === 'fs') {
        go2('guarantee-agreement', {
          enterpriseId: this.form.enterpriseId,
          enterpriseName: target.enterpriseName,
          legalPersonName: target.legalPerson,
          mallSupplierId: this.form.supplierId
        })
      }
    },
    selectCreditType(creditType) {
      if (this.hasCreditList.includes(creditType)) {
        return
      }
      if (!this.form.supplierId) {
        uni.showToast({
          title: '请选择账号下的盘商',
          icon: 'none'
        })
        return
      }
      if (!this.form.enterpriseId) {
        uni.showToast({
          icon: 'none',
          title: '请先选择客户'
        })
        return
      }
      this.creditType = creditType
    },
    getCreditList(data) {
      getCustomerCreditInfo(data).then((res) => {
        if (res) {
          res.hasCredit && this.hasCreditList.push('month')
          res.hasFeisuanCredit && this.hasCreditList.push('fs')
        } else {
          this.hasCreditList = []
        }
      })
    }
  },
  created() {
    getBaseInfo().then((res) => {
      if (res) {
        this.supplierList = res.enterpriseList.map((item) => ({
          id: item.supplier?.id, // 暂时使用企业id
          name: item.name
        }))
      }
    })
  },
  computed: {
    canSubmit() {
      return this.form.enterpriseId != null && this.form.supplierId != null && this.creditType != null
    }
  },
  watch: {
    ['form.name']() {
      if (this.form.id) {
        this.form.id = null
      }
    },
    ['form.enterpriseId']() {
      console.log('form.enterpriseId', this.form)
      if (this.form.enterpriseId && this.form.supplierId) {
        this.getCreditList({ mallSupplierId: this.form.supplierId, customerEnterpriseId: this.form.enterpriseId })
      }
    },
    ['form.supplierId']() {
      if (this.form.enterpriseId && this.form.supplierId) {
        this.getCreditList({ mallSupplierId: this.form.supplierId, customerEnterpriseId: this.form.enterpriseId })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.popup_modal {
  width: 750rpx;
  height: 600rpx;
  background-color: #fff;
  border-radius: 10px 10px 0 0;
  .popup_modal-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 750rpx;
    height: 88rpx;
    font-weight: 600;
    border-bottom: 2rpx solid #d8d8d8;
  }
  .popup_modal-scroll {
    width: 750rpx;
    height: 600rpx;
    .popup_modal-scroll-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      width: 750rpx;
      height: 88rpx;
      padding: 0rpx 32rpx;
      border-bottom: 2rpx solid #d8d8d8;
    }
  }
}
.button_area {
  width: 750rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 32rpx;
  .button__submit {
    flex-grow: 1;
    height: 88rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: #007aff;
    border-radius: 10rpx;
    .text {
      font-size: 30rpx;
      color: #ffffff;
    }
  }
  .button__submit--disabled {
    opacity: 0.5;
  }
}
.card_area {
  width: 750rpx;
  height: 350rpx;
  background-color: #fff;
  padding: 100rpx 32rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .card_area-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 331rpx;
    height: 150rpx;
    background: #ffffff;
    border: 3rpx solid #d8d8d8;
    border-radius: 10rpx;
    .selected-icon {
      width: 40rpx;
      height: 40rpx;
      position: absolute;
      top: 0;
      right: 0;
    }
    .hasSelected-icon {
      width: 159rpx;
      height: 50rpx;
      position: absolute;
      top: 0;
      right: 0;
    }
    .card_area-item-icon {
      width: 48rpx;
      height: 48rpx;
      margin-right: 20rpx;
      flex-grow: 0;
      flex-shrink: 0;
    }
    .card_area-item-text {
      font-size: 36rpx;
      color: #000000;
      letter-spacing: 2rpx;
      font-weight: 600;
    }
  }
  .selected {
    border: 3rpx solid #007aff;
  }
  .hasSelected {
    border: 3rpx solid #86e2df;
  }
}
</style>
