<template>
  <div class="app-container organization-manage">
    <!-- 搜索 -->
    <el-form :model="state.queryParams" ref="queryRef" :inline="true">
      <el-form-item label="商品名称" prop="productname">
        <el-input v-model="state.queryParams['productname.value']" placeholder="账号/公司名称" clearable @keyup.enter="handleQuery({initPageIndex: true})" />
      </el-form-item>

      <!-- 按钮组件 -->
      <all-button
        :buttonType="['add', '', 'query', 'refresh']"
        @addButton="accountEditRef.openDialog()"
        @queryButton="handleQuery({initPageIndex: true})"
        @refreshButton="handleQuery({initPageIndex: true})"
      />
    </el-form>
    <!-- 表格 -->
    <el-table v-loading="state.tableLoading" :data="state.tableData" row-key="id" style="flex: 1" stripe border table-layout="fixed" @cell-dblclick="tableCelldbl">
      <el-table-column align="center" prop="productid" label="产品ID" min-width="150" sortable></el-table-column>
      <el-table-column align="center" prop="productagentsid" label="归属企业" show-overflow-tooltip min-width="250"></el-table-column>
      <el-table-column align="center" prop="productagentsqym" label="归属企业码" show-overflow-tooltip min-width="150"></el-table-column>
      <el-table-column align="center" prop="productname" label="产品名称" min-width="150"></el-table-column>
      <el-table-column align="center" prop="productpic" label="商品图片" min-width="100">
        <template #default="scope">
          <img
            :src="scope.row[scope.column.property]"
            @click="
              () => {
                scope.row.yulan = true
              }
            "
            style="margin: 0 auto; display: block; height: 40px; cursor: pointer"
          />

          <el-dialog v-model="scope.row.yulan" title="预览" width="800px" append-to-body>
            <img :src="scope.row[scope.column.property]" style="display: block; max-width: 100%; max-width: 500px; margin: 0 auto" />
          </el-dialog>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" prop="productclass" label="产品分类" min-width="150">
        <template #default="scope">
          <span>{{ scope.row[scope.column.property] ? scope.row[scope.column.property] : '-' }}</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column align="center" prop="productdkband" label="带宽" min-width="150"></el-table-column> -->
      <!-- <el-table-column align="center" prop="productradiusxxpj" label="下行平均速度" min-width="150"></el-table-column>
      <el-table-column align="center" prop="productradiusxxmax" label="下行最大速度" min-width="150"></el-table-column>
      <el-table-column align="center" prop="productradiussxpj" label="上行平均速度" min-width="150"></el-table-column>
      <el-table-column align="center" prop="productradiussxmax" label="上行最大速度" min-width="150"></el-table-column>  -->
      <el-table-column align="center" prop="productlimit" label="时长（月）" min-width="150"></el-table-column>
      <el-table-column align="center" prop="productprice" label="原始金额" min-width="150"></el-table-column>
      <el-table-column align="center" prop="productprice1" label="实付金额" min-width="150"></el-table-column>
      <el-table-column align="center" prop="productlimit1" label="赠送时长" min-width="150"></el-table-column>
      <el-table-column align="center" prop="productmemo" label="产品介绍" show-overflow-tooltip min-width="150"></el-table-column>
      <el-table-column align="center" prop="productsfky" label="产品是否可用" min-width="150">
        <template #default="scope">
          <el-tag v-if="scope.row[scope.column.property] == 1">可用</el-tag>
          <el-tag v-if="scope.row[scope.column.property] == 0">不可用</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="productcreateuser" label="创建人" min-width="150"></el-table-column>
      <el-table-column align="center" prop="productcreatedate" label="创建时间" min-width="150"></el-table-column>
      <el-table-column align="center" :width="fitWidth" label="操作" class-name="small-padding fixed-width" fixed="right">
        <template #default="scope">
          <div class="operation-box">
            <el-text class="operate-btn-item" type="primary" @click="accountEditRef.openDialog(scope.row)">编辑</el-text>
            <el-text class="operate-btn-item" type="danger" @click="handleDictDel(scope.row)">删除</el-text>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paginaionConfig.query.pageindex"
        :page-sizes="paginaionConfig.sizeOptions"
        :page-size="paginaionConfig.query.rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginaionConfig.total"
      >
      </el-pagination>
    </div>

    <AccountEdit width="50%" ref="accountEditRef" @refresh="handleQuery" />
  </div>
</template>

<script setup name="Account">
import productStoreApi from '@store/modules/productStoreApi'
import useSystemManageStore from '@store/modules/systemManage'
import AccountEdit from '../components/AccountEdit/index.vue'
import _ from 'lodash'
import usePagination from '@/hooks/usePagination'
import useFitColumn from '@/hooks/useFitColumn'
import tableCelldbl from '@/hooks/tableCelldbl'

const {proxy} = getCurrentInstance()
const systemManageStore = useSystemManageStore()
const {paginaionConfig, handleSizeChange, handleCurrentChange} = usePagination(handleQuery)
const {fitWidth} = useFitColumn()
// 接口封装文件
const productManageStore = productStoreApi()

const state = reactive({
  tableLoading: false,
  tableData: [],
  queryParams: {
    'productname.value': ''
  }
})

// components组件
const accountEditRef = ref(null)

// 角色组信息
const roleList = ref([])
provide('roleList', readonly(roleList))

// 重置搜索项
const resetButton = () => {
  state.queryParams = {}
  handleQuery({initPageIndex: true})
}

// 默认信息
const getRoleList = async () => {
  const {Total, Data} = await systemManageStore.sysusergroupLoad({
    pageindex: 1,
    rows: 1000
  })
  roleList.value = Data
}

function handleQuery(config) {
  if (config?.initPageIndex) paginaionConfig.query.pageindex = 1
  getList(Object.assign(_.cloneDeep(paginaionConfig.query), state.queryParams))
}

/** 查询菜单列表 */
const getList = async (query) => {
  state.tableLoading = true
  const {Total, Data} = await productManageStore.list(query)
  paginaionConfig.total = Total
  state.tableData = Data
  state.tableLoading = false
}

/** 删除 */
const handleDictDel = async (query) => {
  try {
    let params = JSON.parse(JSON.stringify(query))
    params['productid.value'] = params.productid
    await proxy.$modal.confirm('请问确认删除吗？')
    await productManageStore.del(params)
    proxy.$modal.msgSuccess('删除成功！')
    handleQuery()
  } catch (error) {
    console.log(error, 'error')
  }
}

onMounted(() => {
  handleQuery({initPageIndex: true})
  // 其他信息
  getRoleList()
})
</script>
