<!--
 Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

 https://www.mall4j.com/

 未经允许，不可做商业用途！

 版权所有，侵权必究！
-->
<template>
  <el-dialog
    v-model="visible"
    :title="$t('product.chooseABrand')"
    top="50px"
    :close-on-click-modal="false"
    class="brand-selector-component"
  >
    <el-form
      :inline="true"
      :model="dataForm"
      class="demo-form-inline"
      @submit.prevent
    >
      <el-form-item :label="$t('product.brandName')">
        <el-input
          v-model.trim="pageQuery.brandName"
          :placeholder="$t('product.brandName')"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onSearch"
        >
          {{ $t('table.search') }}
        </el-button>
      </el-form-item>
    </el-form>

    <div class="prods-select-body">
      <el-table
        ref="brandTable"
        v-loading="brandListLoading"
        :data="pageVO.list"
        border
        style="width: 100%;"
      >
        <el-table-column
          v-if="isSingle"
          width="50"
          header-align="center"
          align="center"
        >
          <template #default="{row}">
            <div>
              <el-radio
                v-model="singleSelectBrandId"
                :label="row.brandId"
                class="radio-box"
                @change="getSelectBrandRow(row)"
              />
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="brandName"
          header-align="center"
          align="center"
          :label="$t('product.brandName')"
        >
          <template #default="{row}">
            <span
              v-for="(brandLang, index) of row.brandLangList"
              :key="index"
            >{{ brandLang.lang === language ? brandLang.name : '' }}</span>
            {{ row.name }}
          </template>
        </el-table-column>

        <el-table-column
          prop="firstChar"
          align="center"
          :label="$t('multishop.shopInformation.firstLetter')"
        >
          <template #default="{row}">
            {{ row.firstLetter }}
          </template>
        </el-table-column>

        <el-table-column
          prop="status"
          align="center"
          :label="$t('table.status')"
        >
          <template #default="{row}">
            <el-tag size="small">
              {{ row.status===1?$t('multishop.shopInformation.tag'):$t('multishop.shopInformation.redTag') }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          width="140"
          :label="$t('product.brandImg')"
        >
          <template #default="{row}">
            <ImgShow
              :src="row.imgUrl"
              :class-list="['brand-img']"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>

    <template #footer>
      <span>
        <el-button
          plain
          @click="close"
        >{{ $t('table.cancel') }}</el-button>
        <el-button
          type="primary"
          @click="submitBrand()"
        >{{ $t('table.confirm') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { listAvailableByCategoryAndBrandName } from '@/api/product/brand'
import { ElMessage } from 'element-plus'
const prodStore = useProdStore()
// eslint-disable-next-line no-unused-vars
const props = defineProps({
  isSingle: {
    default: false,
    type: Boolean
  }
})

const emit = defineEmits(['refreshSelectBrand', 'close'])

const Data = reactive({
  visible: false,
  brandName: null,
  selectedBrand: [],
  dataForm: {
    brand: ''
  },
  pageQuery: {
    // pageSize: 5,
    // pageNum: 1,
    categoryId: null,
    brandName: null
  },
  // 返回参数
  pageVO: {
    list: [], // 返回的列表
    total: 0, // 一共多少条数据
    pages: 0 // 一共多少页
  },
  brandListLoading: false,

  singleSelectBrandId: 0,
  brandListSelections: []

})

const { dataForm, visible, brandListLoading, pageQuery, singleSelectBrandId, pageVO } = toRefs(Data)

const init = (selectedBrand) => {
  Data.visible = true
  Data.brandListLoading = true
  Data.pageQuery.categoryId = prodStore.platProdCategory.threeCat.id
  Data.pageQuery.brandName = ''
  Data.brandListSelections.push(selectedBrand)
  Data.singleSelectBrandId = selectedBrand ? selectedBrand.brandId : 0
  getBrandList()
}

const onSearch = () => {
  getBrandList()
}

const getBrandList = () => {
  listAvailableByCategoryAndBrandName({ ...Data.pageQuery, ...Data.brandName }).then(pageVO => {
    Data.pageVO.list = pageVO
    Data.brandListLoading = false
  })
}

// 单选
const getSelectBrandRow = (row) => {
  Data.brandListSelections = [row]
}

// 确定事件
const submitBrand = () => {
  const brands = []
  Data.brandListSelections.forEach(item => {
    const brandIndex = brands.findIndex((brand) => brand.brandId === item.brandId)
    if (brandIndex === -1 && item) {
      brands.push(item)
    }
  })
  // 如果有值（有选中选项）
  if (brands && brands[0]) {
    emit('refreshSelectBrand', brands[0])
    Data.visible = false
  } else {
    ElMessage({
      message: $t('multishop.shopInformation.selectBrand'),
      duration: 800
    })
  }
  Data.brandListSelections = []
}

const close = () => {
  Data.visible = false
  emit('close')
}

defineExpose({
  init
})
</script>

<style lang="scss" scoped>
.brand-selector-component {
  .prods-select-body {
    height: 600px;
    overflow: auto;
  }
}
.radio-box {
  :deep(.el-radio__label) {
    display: none;
  }
}
:deep(.el-form-item) {
  margin-bottom: 20px;
}
:deep(.pagination-container) {
  margin-top: 0;
  text-align: right;
  padding: 15px 0;
}
:deep(.brand-img) {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 80px;
}
</style>
