<template>
  <u-popup v-model="show" mode="bottom" border-radius="20">
    <view class="">
      <view class="h-90rpx w-full flex justify-between items-center px-20rpx">
        <slot name="head" :data="data">
          <view class="text-hex-fa3534 text-base">
            <text @click="handleDel" v-if="isDel">删除</text>
          </view>
          <view class="text-hex-2979ff text-base" v-if="isEdit">
            <text @click="handleEdit">编辑</text>
          </view>
        </slot>
      </view>
      <scroll-view scroll-y="true" class="max-h-1200rpx">
        <view v-if="colums.length && data && Object.keys(data).length">
          <view
            class="flex items-center"
            v-for="(item, i) in columsList"
            :key="i"
          >
            <slot :name="item.dataIndex" :data="item">
              <u-cell-item
                :title="item.title"
                :value="item.value.toString()"
                :arrow="false"
              ></u-cell-item>
            </slot>
          </view>
        </view>
      </scroll-view>
    </view>
  </u-popup>
</template>
<script>
import checkPermission from '@/utils/permission.js'
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => {},
    },
    colums: {
      type: Array,
      default: () => [],
    },
    editAuth: {
      type: Array,
      default: () => [],
    },
    delAuth: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    show: {
      get() {
        return this.value
      },
      set(e) {
        this.$emit('input', e)
      },
    },
    isEdit() {
      return !!this.$listeners.onEdit && checkPermission(this.editAuth)
    },
    isDel() {
      return !!this.$listeners.onDel && checkPermission(this.delAuth)
    },
    columsList() {
      const arr = []
      this.colums.forEach((e) => {
        const { dataIndex, format } = e
        let str = this.data[dataIndex]
        if (this.isFunction(format)) {
          str = format(str)
        }
        arr.push({
          ...e,
          value: str,
        })
      })
      return arr
    },
  },
  methods: {
    isFunction(fn) {
      return typeof fn === 'function'
    },
    handleEdit() {
      this.$emit('onEdit', this.data)
    },
    handleDel() {
      this.$emit('onDel', this.data)
    },
  },
}
</script>
