<template>
  <div class="app-container">
    <div class="content container">
      <!-- 搜索表单 -->
      <el-form :model="queryParams"
        inline
        v-show="showSearch"
        label-width="68px">
        <el-form-item label="店铺名字"
          prop="storeName">
          <el-input v-model="queryParams.storeName"
            placeholder="请输入店铺名字"
            clearable
            @input="handleQuery" />
        </el-form-item>
        <el-form-item label="所属平台">
          <el-select v-model="queryParams.platformId"
            placeholder="请选择平台"
            clearable
            @change="handleQuery">
            <el-option v-for="dict in sale_platform"
              :key="dict.value"
              :value="dict.value"
              :label="dict.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="店铺状态">
          <el-select v-model="queryParams.status"
            placeholder="店铺状态"
            clearable
            @change="handleQuery">
            <el-option v-for="dict in sys_normal_disable"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 操作栏 -->
      <el-row :gutter="10"
        class="mb8">
        <el-col :span="1.5">
          <el-button type="primary"
            plain
            icon="Plus"
            @click="handleAdd"
            v-hasPermi="['gen:store:add']">新增</el-button>
        </el-col>
        <right-toolbar v-model:showSearch="showSearch"
          @queryTable="getList"
          :columns="columns"></right-toolbar>
      </el-row>
      <!-- 表格数据 -->
      <el-table v-loading="loading"
        :data="storeList">
        <el-table-column label="店铺编码"
          prop="storeCode"
          width="80px"
          v-if="columns[0].visible" />
        <el-table-column label="店铺名称"
          prop="storeName"
          width="360px"
          v-if="columns[1].visible" />
        <el-table-column label="渠道"
          prop="channelId"
          v-if="columns[2].visible">
          <template v-slot="scope">
            <dict-tag :options="sale_channel"
              :value="scope.row.channelId" />
          </template>
        </el-table-column>
        <el-table-column label="所属平台"
          prop="platformId"
          v-if="columns[3].visible">
          <template v-slot="scope">
            <dict-tag :options="sale_platform"
              :value="scope.row.platformId" />
          </template>
        </el-table-column>
        <el-table-column label="店铺状态"
          prop="status"
          v-if="columns[4].visible">
          <template v-slot="scope">
            <el-switch v-model="scope.row.status"
              active-value="0"
              inactive-value="1"
              @change="handleDelete(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作"
          class-name="small-padding fixed-width"
          v-if="columns[5].visible">
          <template v-slot="scope">
            <el-button text
              type="primary"
              icon="Edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['gen:store:edit']">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList" />
    </div>
    <!-- 添加或修改对话框 -->
    <el-dialog :title="title"
      v-model="open"
      draggable overflow>
      <el-form ref="formRef"
        :model="form"
        :rules="rules"
        label-width="80px">
        <el-form-item label="店铺编码"
          prop="storeCode">
          <el-input v-model="form.storeCode"
            placeholder="请输入店铺编码" />
        </el-form-item>
        <el-form-item label="店铺名字"
          prop="storeName">
          <el-input v-model="form.storeName"
            placeholder="请输入店铺名字" />
        </el-form-item>
        <el-form-item label="渠道"
          prop="channelId">
          <el-radio-group v-model="form.channelId">
            <el-radio v-for="dict in sale_channel"
              :value="dict.value">
              {{ dict.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="所属平台"
          prop="platformId">
          <el-radio-group v-model="form.platformId">
            <el-radio v-for="dict in sale_platform"
              :value="dict.value">
              {{ dict.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary"
          @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { listStore, addStore, updateStore } from "@/api";
import { debounce, resetObjValue } from '@/utils'

const { proxy } = getCurrentInstance();

const { sale_channel, sale_platform, sys_normal_disable } = proxy.useDict('sale_channel', 'sale_platform', 'sys_normal_disable'); // 渠道，平台，状态字典

const loading = ref(true) // 遮罩层
const formRef = ref(null)
const showSearch = ref(true) // 显示搜索条件
const total = ref(0) // 总条数
const storeList = ref([]) // 电商-店铺表格数据
const title = ref("") // 弹出层标题
const open = ref(false) // 是否显示弹出层
const queryParams = reactive({ // 查询参数
  pageNum: 1,
  pageSize: 10
})
let form = reactive({ // 增/改表单参数
  channelId: '1', // 默认渠道："电商"
  platformId: '1', // 默认平台："天猫"
})
const rules = reactive({ // 增/改表单校验
  storeCode: [
    { required: true, message: "店铺编码不能为空", trigger: "blur" }
  ],
  storeName: [
    { required: true, message: "店铺名称不能为空", trigger: "blur" }
  ],
  channelId: [
    { required: true, message: "店铺渠道不能为空", trigger: "blur" }
  ],
  platformId: [
    { required: true, message: "店铺所属平台不能为空", trigger: "blur" }
  ]
})
const columns = reactive([ // 列信息
  { key: 0, label: `店铺编码`, visible: true },
  { key: 1, label: `店铺名称`, visible: true },
  { key: 2, label: `渠道`, visible: true },
  { key: 3, label: `所属平台`, visible: true },
  { key: 4, label: `店铺状态`, visible: true },
  { key: 5, label: `操作`, visible: true }
])

/** 查询电商-店铺列表 */
const getList = () => {
  loading.value = true;
  listStore(queryParams).then(response => {
    response.data.rows.forEach(row => {
      // 字典下拉菜单是字符串，后台返回的是数字，前端统一用字符串
      row.status = row.status + ''
      row.channelId = row.channelId + ''
      row.platformId = row.platformId + ''
    })
    storeList.value = response.data.rows;
    total.value = response.data.total;
    loading.value = false;
  });
}
// 取消按钮
const cancel = () => {
  open.value = false;
}
// 表单重置
const reset = () => {
  resetObjValue(form)
  form.channelId = '1'
  form.platformId = '1'
  formRef.value.resetFields();
}
/** 搜索按钮操作 */
const handleQuery = debounce(function () {
  queryParams.pageNum = 1;
  getList();
})
/** 新增按钮操作 */
const handleAdd = () => {
  form.storeId && reset();
  open.value = true;
  title.value = "添加-电商店铺";
}
/** 修改按钮操作 */
const handleUpdate = (row) => {
  reset();
  form = { ...row };
  open.value = true
  title.value = "修改-电商店铺"
}
/** 提交按钮 */
const submitForm = () => {
  formRef.value.validate(valid => {
    if (valid) {
      if (form.storeId != null) {
        updateStore(form).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
          reset();
        });
      } else {
        // 携带平台和渠道中文字符
        form.channel = sale_channel.value.find(item => item.value === form.channelId).label
        form.platform = sale_platform.value.find(item => item.value === form.platformId).label
        addStore(form).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
          reset();
        });
      }
    }
  });
}
/** 停用/启用按钮操作 */
const handleDelete = (row) => {
  updateStore({
    ...row,
    status: row.status
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess(row.status === '0' ? "启用成功" : "停用成功");
  });
}
/** 导出按钮操作 */
// handleExport() {
//   this.download('gen/store/export', {
//     ...this.queryParams
//   }, `store_${new Date().getTime()}.xlsx`)
// }

getList()

</script>
<style scoped
  lang="scss">
  .content {
    .el-radio-group {
      .el-radio {
        margin-bottom: 10px;
      }
    }
  }
</style>