<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <el-form :model="queryParams"
      ref="formRef"
      size="small"
      :inline="true"
      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="el-icon-plus"
          size="mini"
          @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 size="mini"
            type="text"
            icon="el-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" />

    <!-- 添加或修改对话框 -->
    <el-dialog :title="title"
      v-model:visible="open"
      append-to-body>
      <el-form ref="form"
        :model="form"
        :rules="rules"
        label-width="80px"
        v-a>
        <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 dict.type.sale_channel"
              :key="dict.value"
              :label="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 dict.type.sale_platform"
              :key="dict.value"
              :label="dict.value">
              {{ dict.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer"
        class="dialog-footer">
        <el-button type="primary"
          @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { listStore, addStore, updateStore } from "@/api";
import { debounce } 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
})
const 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 = () => {
  form.value = {
    storeId: null,
    storeCode: null,
    storeName: null,
    channelId: '1', // 默认渠道："电商"
    platformId: '1' // 默认平台："天猫"
  };
  resetForm("form");
}
/** 搜索按钮操作 */
const handleQuery = debounce(function () {
  queryParams.value.pageNum = 1;
  getList();
})
/** 新增按钮操作 */
const handleAdd = () => {
  form.value.storeId && reset();
  open.value = true;
  title.value = "添加-电商店铺";
}
/** 修改按钮操作 */
const handleUpdate = (row) => {
  reset();
  form.value = { ...row };
  open.value = true
  title.value = "修改-电商店铺"
}
/** 提交按钮 */
const submitForm = () => {
  formRef.value.validate(valid => {
    if (valid) {
      if (form.value.storeId != null) {
        updateStore(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
          reset();
        });
      } else {
        // 携带平台和渠道中文字符
        form.value.channel = sale_channel.find(item => item.value === this.form.channelId).label
        form.value.platform = sale_platform.find(item => item.value === this.form.platformId).label
        addStore(form.value).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">
  .el-radio-group {
    .el-radio {
      margin-bottom: 10px;
    }
  }
</style>