<template>
  <view class="app-container">
    <HeaderBar title="客服列表" text-align="center" enable-back />

    <view class="custom-list">
      <view
        v-for="item in customList"
        :key="item.id"
        class="custom-item"
      >
        <view class="custom-info" @click="mode === 'user' && makePhoneCall(item.mobile)">
          <view class="name-phone">
            <text class="name">{{ item.name }}</text>
            <text class="phone">{{ item.mobile }}</text>
          </view>
        </view>
        <view class="custom-actions" v-if="mode === 'mch'">
          <view class="action-btn edit" @click="editCustom(item)">
            <u-icon name="edit-pen" size="32" color="#2979ff"></u-icon>
          </view>
          <view class="action-btn delete" @click="deleteCustom(item)">
            <u-icon name="trash" size="32" color="#f56c6c"></u-icon>
          </view>
        </view>
      </view>

      <!-- 添加新客服占位符 -->
      <view class="custom-item add-placeholder" @click="addCustom" v-if="mode === 'mch'">
        <view class="add-content">
          <u-icon name="plus" size="40" color="#2979ff"></u-icon>
          <text class="add-text">添加新客服</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mchListMchCustom, mchDeleteMchCustom } from '@/api/mch/mchCustom'
import HeaderBar from '@/components/HeaderBar.vue'

export default {
  components: {
    HeaderBar
  },
  data() {
    return {
      customList: [],
      mchId: this.$store.state.user.mchId,
      mode: 'mch'
    }
  },
  onLoad(options) {
    if (options.mode) {
      this.mode = options.mode;
    }
    if (options.mchId != null) {
      this.mchId = options.mchId
    }
  },
  onShow() {
    this.getCustomList()
  },
  methods: {
    getCustomList() {
      this.$modal.loading('加载中...')
      mchListMchCustom({mchId: this.mchId}).then(res => {
        this.customList = res.data
      }).finally(() => {
        this.$modal.closeLoading()
      })
    },
    deleteCustom(custom) {
      uni.showModal({
        title: '提示',
        content: '确定要删除该客服吗？',
        success: (res) => {
          if (res.confirm) {
            mchDeleteMchCustom(custom.id).then(() => {
              uni.showToast({ title: '删除成功', icon: 'success' })
              this.getCustomList()
            })
          }
        }
      })
    },
    editCustom(custom) {
      uni.navigateTo({
        url: `/pages/mchCustom/edit?id=${custom.id}`
      })
    },
    addCustom() {
      uni.navigateTo({
        url: '/pages/mchCustom/edit'
      })
    },
    makePhoneCall(phone) {
      uni.makePhoneCall({
        phoneNumber: phone,
        success: () => {
          console.log('拨打电话成功')
        },
        fail: (err) => {
          console.error('拨打电话失败', err)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.custom-list {
  margin-top: 30rpx;
  padding: 0 20rpx;
}

.custom-item {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  &.add-placeholder {
    background: #ffffff71;
    border: 2rpx dashed #fff;
    justify-content: center;
    padding: 40rpx;

    .add-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10rpx;

      .add-text {
        font-size: 28rpx;
        color: #2979ff;
      }
    }
  }

  .custom-info {
    flex: 1;
    margin-right: 20rpx;

    .name-phone {
      margin-bottom: 10rpx;

      .name {
        font-size: 32rpx;
        color: #333;
        margin-right: 20rpx;
      }

      .phone {
        font-size: 28rpx;
        color: #666;
      }
    }
  }

  .custom-actions {
    display: flex;
    gap: 20rpx;

    .action-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #f7f8fa;
    }
  }
}
</style>
