<template>

  <div class="body-layer">
    <div class="body-head">
      <h3>品牌信息</h3>
      <div class="table-ctrl-right">
        <!-- <el-input placeholder="關鍵詞" suffix-icon="el-icon-search" class="search-scene" v-model="search.state.searchKey" style="width: auto" /> -->
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="UpdateBrand"
          >更新品牌信息</el-button
        >
      </div>
    </div>
    <el-table
      ref="multipleTable"
      :data="dataList.state"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column width="100" label="品牌ID" prop="cdfBrandId"></el-table-column>
      <el-table-column label="中文名称" prop="zhName"></el-table-column>
      <el-table-column label="英文名称" prop="enName"></el-table-column>
      <el-table-column label="繁体名称" prop="ftName"></el-table-column>
      <el-table-column
            label="品牌logo"
            prop="brandLogo"
            v-slot:default="{ row }"
            >
            <div class="table-img">
                <img :src="`${row.brandLogo}?time=${Date.now()}`" />
            </div>
            </el-table-column>
      <el-table-column label="更新时间" prop="updateTime"></el-table-column>
    </el-table>

    <com-pagination
      @size-change="pag.sizeChange"
      @current-change="pag.currentChange"
      :current-page="pag.state.currPage"
      :page-size="pag.state.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pag.state.total"/>
  </div>
  
  <com-dialog
    :title="(oper.state.id ? '修改' : '添加') + '分類'"
    v-model:show="oper.state.show"
    @submit="submit"
  >
    <el-form ref="form" :model="oper.state" label-width="100px" class="shop-from">
     
      <el-form-item label="分類名稱：" class="mandatory">
        <el-input  maxlength="50" show-word-limit :modelValue="oper.state.categoryName" @update:modelValue="val => oper.state.categoryName = val.trim()"></el-input>
      </el-form-item>
  
    </el-form>
  </com-dialog>

</template>

<script>
import { ref, watch } from "vue";
import getTableState from "@/state/tableRef";
import auth from "@/state/viewAuth";
import comDialog from "@/components/dialog";
import comPagination from "@/components/pagination";
import axios from 'axios'
import { dateFormat } from '@/util'
import {
  getBrandList,
  insertCategory,
  updateCategory,
  deleteCategory,
  getBrandupdateBrandInfo,
} from '@/request/config'



export default {
  name: 'shop',
  setup() {
    const state = getTableState({
      updateUrl: updateCategory,
      insertUrl: insertCategory,
      getUrl: getBrandList,
      delUrl: deleteCategory,
      searchAttr: {  },
      operAttr: {
        categoryName: ''
      },
      throttleTime: 0,
      pagAttr: {totalNum: 'total',fixBooStatus: 'showStatus'}
    });
    const headList = ref([{ name: "分類管理", value: '0' }]);
    const time = ref(null)
    const loading = ref(false)
    

    watch(time, () => {
      if (time.value) {
        state.search.value.state.startTime = dateFormat(new Date(time.value[0]), 'yyyy-MM-dd hh:mm:ss')
        state.search.value.state.endTime = dateFormat(new Date(time.value[1]), 'yyyy-MM-dd 23:59:59')
      } else {
        state.search.value.state.startTime = state.search.value.state.endTime = ''
      }
    })
    watch(
      [() => state.search.value.state.startTime, () => state.search.value.state.endTime],
      () => {
        if (!state.search.value.state.startTime || !state.search.value.state.endTime) {
          time.value = null
        }
      }
    )
    
    watch(
      () => state.pag.value.state.total,
      () => {
        headList.value[0].name = '分類列表' + state.pag.value.state.total +'）'
      }
    )


    console.log( {...state});

    return { ...state, loading, headList, time, auth};
  },
  methods: {
    async UpdateBrand(){
      await axios.get(getBrandupdateBrandInfo, {})
      this.$message({
        type: 'success',
        message: '更新成功，正在同步第三方数据请五分钟后刷新列表'
      });
    },
    submit() {
      if (!this.oper.state.categoryName.trim()) {
        return this.$alert('分類名稱不能為空！', '提示')
      }

      this.oper.state.id ? this.oper.update() : this.oper.insert()

      this.$message({
        type: 'success',
        message: '操作成功'
      });
    }
  },
  components: {
    "com-dialog": comDialog,
    "com-pagination": comPagination,
  },
};
</script>

<style lang="scss" scoped>
.table-ctrl-right {
  .search-scene {
    margin: 0 20px 0 26px;
  }
  i {
    margin-left: 20px;
    font-size: 1.7rem;
    vertical-align: middle;
    cursor: pointer;

    &.active {
      color: var(--primaryColor);
    }
  }
}

.shop-from {
  width: 320px;
  margin: 0 auto;
}
.table-img {
  width: 50px;
  img {
    width: 100%;
  }

  div {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
}
</style>
