<script lang="ts" setup>
/**
 * @Name: SkuBuilder.vue
 * @Description: 商品列表-行编辑
 * @Author: Cheney
 */

import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { Close, Finished } from '@element-plus/icons-vue';
import * as api from '../api';
import { useResponse } from '/@/utils/useResponse';
import { hasPermission } from '/@/utils/hasPermission';


const shopOptions = <Ref>inject('shopOptions');
const groupOptions = <Ref>inject('groupOptions');

const btnLoading = ref(false);

const editOpen = defineModel({ default: false });

const editDrawer = <Ref>useTemplateRef('editDrawer');

const props: any = defineProps({
  rowData: Object
});
const { rowData } = props;

const emit = defineEmits([ 'refresh' ]);

interface RuleForm {
  sku: any,
  shop_name: any,
  shop_id: any,
  tag: any,
  // show_price: any,
  // activity_price: any,
  minimum_price: any,
}

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  sku: rowData?.sku,
  shop_name: rowData?.shop_name,
  shop_id: rowData?.shop_id,
  tag: rowData?.tag,
  // show_price: rowData?.show_price,
  // activity_price: rowData?.activity_price,
  minimum_price: rowData?.minimum_price
});

const rules = reactive<FormRules<RuleForm>>({});

// 构造sku数据格式
ruleForm.sku = [ rowData.sku, rowData.sku2, rowData.sku3 ]
    .filter(Boolean)
    .join(',');

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;

  const skuCount = ruleForm.sku.split(',').length;

  if (skuCount > 3) {
    ElMessage.warning('SKU 输入不能超过三个，请检查 SKU');
    return;
  }

  await formEl.validate(async (valid, fields) => {
    if (valid) {
      try {
        const res = await useResponse(api.updateRow, { id: rowData?.id, ...ruleForm }, btnLoading);
        if (res && res.code == 2000) {
          editOpen.value = false;
          ElMessage.success({ message: '编辑成功', plain: true, icon: 'Operation' });
          emit('refresh');
        }
      } catch (error) {
        console.error('Error==>', error);
      }
    } else {
      console.log('error submit!', fields);
    }
  });
};

function closeDrawer() {
  editDrawer.value.handleClose();
}

function mappingShopId(val: any) {
  ruleForm.shop_id = val;
}
</script>

<template>
  <div class="drawer-container">
    <el-drawer
        ref="editDrawer"
        v-model="editOpen"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        size="30%"
        title="商品列表 - 编辑">
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          class="mx-2.5 mt-7"
          label-position="top"
          label-width="auto"
          status-icon>
        <el-form-item class="font-medium" label="SKU：" prop="sku">
          <template #label>
            SKU
            <span class="ml-4" style="color: #909399">
            <i class="bi bi-info-circle"></i>
            多个SKU用逗号","连接
            <span class="italic ml-3">
              e.g. sku1,sku2,sku3
            </span>
            </span>
          </template>
          <el-input v-model="ruleForm.sku" placeholder="请输入SKU" />
        </el-form-item>
        <el-form-item class="font-medium" label="店 铺：" prop="shop_name">
          <el-select v-model="ruleForm.shop_name" @change="mappingShopId">
            <el-option v-for="item in shopOptions" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item class="font-medium" label="分 组：" prop="tag">
          <el-select v-model="ruleForm.tag" allow-create filterable placeholder="请选择分组">
            <el-option v-for="item in groupOptions" :label="item.tag" :value="item.tag" />
          </el-select>
        </el-form-item>
        <div v-if="hasPermission('PriceEdit')">
          <!--<el-form-item class="font-medium" label="展示价格：" prop="show_price">-->
          <!--  <el-input v-model="ruleForm.show_price" />-->
          <!--</el-form-item>-->
          <!--<el-form-item class="font-medium" label="平时活动售价：" prop="activity_price">-->
          <!--  <el-input v-model="ruleForm.activity_price" />-->
          <!--</el-form-item>-->
          <el-form-item class="font-medium" label="最低活动售价：" prop="minimum_price">
            <el-input v-model="ruleForm.minimum_price" placeholder="请输入最低活动售价" />
          </el-form-item>
        </div>

        <el-form-item>
          <el-divider />
          <div class="flex flex-1 justify-end">
            <el-button :icon="Close" @click="closeDrawer">取 消</el-button>
            <el-button :icon="Finished" :loading="btnLoading" type="primary" @click="submitForm(ruleFormRef)">
              确 定
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>

</template>

<style scoped>
.drawer-container :deep(.el-drawer__header) {
  border-bottom: none;
  font-weight: 500;
}

.drawer-container :deep(.el-drawer__title) {
  font-size: 18px;
}
</style>
