<template>
  <div class="good-page">
    <div class="good-search" v-if="!isShowGoods">
      <div>
        <a-radio-group v-model:value="status">
          <a-radio-button value="0" class="status" @click="onSearch"
            >全部</a-radio-button
          >
          <a-radio-button value="1" class="status" @click="onSearch"
            >正常</a-radio-button
          >
          <a-radio-button value="2" class="status" @click="onSearch"
            >已下架</a-radio-button
          >
        </a-radio-group>
        <a-input-search
          v-model:value="value"
          placeholder="请输入商品名称"
          style="width: 200px; margin-left: 10px"
          @search="onSearch"
        />
      </div>
      <div class="good-cad">
        <a-button type="primary" class="mr10" @click="onGoods(0)"
          >新建商品</a-button
        >
        <a-button type="primary" @click="onGoods(1)">新建商品包</a-button>
      </div>
    </div>
    <div class="goods-list" v-if="!isShowGoods">
      <a-table :columns="columns" :data-source="list">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'tags'">
            <a-button type="primary" @click="onEdit(record)">编辑</a-button>
            <a-button type="primary" style="margin-left: 20px">统计</a-button>
            <a-button type="primary" style="margin-left: 20px">下架</a-button>
            <a-popconfirm
              title="确定删除这条数据"
              ok-text="确定"
              cancel-text="取消"
              @confirm="onDel(record)"
            >
              <a-button type="primary" style="margin-left: 20px">删除</a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </div>
    <div v-if="isShowGoods">
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
        v-if="isShowGoods"
      >
        <a-button class="small left" @click="onBack">
          <template #icon>
            <LeftOutlined />
          </template>
        </a-button>
      </div>
      <GoodsBags
        :props="{ propsData }"
        v-if="propsData.isCad == 0"
        @onBack="onBack"
      ></GoodsBags>
      <GoodsBagSubs :props="{ propsData }" v-else @onBack="onBack">
      </GoodsBagSubs>
    </div>
    <a-modal
      v-model:visible="visible"
      title="编辑"
      :confirm-loading="confirmLoading"
      :width="1200"
      @ok="handleOk"
    >
      <a-form style="margin-top: 30px" :model="visible" name="basic" :label-col="{ span: 1 }" :wrapper-col="{ span: 8 }"
      autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
      <a-form-item label="商品名称" name="subject"  labelAlign="left" :label-col="{ span: 1 }">
        <a-input value="visible.subject" />
      </a-form-item>

      <a-form-item label="商品简介" name="shortname" :rules="rulesRef.shortname" labelAlign="left" :label-col="{ span: 1 }">
        <a-input v-model:value="visible.shortname" />
      </a-form-item>

      <a-form-item label=" 商品示图" name="picurl" 
        :wrapper-col="{ offset: 0, span: 8 }" class="Up" labelAlign="left" :label-col="{ span: 1 }">
        <div class="clearfix">
          <a-upload class="clearfix-up" v-model:file-list="fileList" action="/api/file/upload" list-type="picture-card"
            @preview="handlePreview" @change="handleChange" :before-upload="beforeUpload">
            <div v-if="fileList.length < 8">
              <plus-outlined />
              <div style="margin-top: 8px">Upload</div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage" />
          </a-modal>
          <div>
            <p class="warin">
              建议图片比例为4:3,大小不超过200M,图片仅支持JPG、JPEG、PNG格式
            </p>
          </div>
        </div>
      </a-form-item>
      <a-form-item label="商品详情" name="body" :rules="rulesRef.body"  labelAlign="left" :label-col="{ span: 1 }">
        <!-- <div style="display: none">
          <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :multiple="true" :file-list="fileList"
            @change="handleChange">
            <a-button>
              <upload-outlined></upload-outlined>
              Upload
            </a-button>
          </a-upload>

        <QuillEditor id="editorId" ref="myQuillEditor" v-model:content="content" theme="snow" contentType="html"
          :options="options"  @blur="onEditorChange($event)" />
        </div> -->
        <a-textarea v-model:value="visible.body" placeholder="请输入商品详情" :rows="4"  />

        <div class="editor-text">
          <p>1、商品描述需符合《中华人民共和国广告法》</p>
          <p>
            2、详情图片宽度750,高度不超过5000,每张图片最大不超过1M,图片仅支持JPG、JPEG、PNG格式。
          </p>
        </div>
      </a-form-item>
      <a-form-item name="price" :wrapper-col="{ offset: 0, span: 2 }" label="商品售价"
        labelAlign="left" :label-col="{ span: 1 }">
        <div>
          <a-radio-group v-model:value="value" @change="onSelectPlain">
            <a-radio :value="1">免费</a-radio>
            <a-radio :value="2">收费</a-radio>
          </a-radio-group>
        </div>
      </a-form-item>

      <a-form-item :wrapper-col="{ offset:2, span: 7 }" v-if="value === 2">
        <div style="display:flex;">
          <div style="margin-right:20px">划线价</div>
          <a-input-number v-model:value="visible.markingprice" style="width: 200px" :min="0" :max="10" :step="0.01"
            string-mode />
        </div>
      </a-form-item>
      <a-form-item name="price" :wrapper-col="{ offset: 2, span: 7 }" v-if="value === 2" >
        <div style="display:flex;">
          <div style="margin-right:20px">售卖价</div>
          <a-input-number v-model:value="visible.price" style="width: 200px" :min="0" :max="10" :step="0.01"
            string-mode />
        </div>
      </a-form-item>
    </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, defineExpose, onMounted } from "vue";
import { LeftOutlined } from "@ant-design/icons-vue";
import GoodsBags from "./components/goods/index.vue";
import GoodsBagSubs from "./components/goodsubs/index.vue";
import { onSelectGoods, onfindby, onUpdateGoods } from "@/api/index";
import { getUid } from "@/utils/userInfo";
import { Form } from 'ant-design-vue';

const useForm = Form.useForm;
const columns = [
  {
    title: "商品编号",
    dataIndex: "goodsid",
    key: "goodsid",
  },
  {
    title: "商品名称",
    dataIndex: "subject",
    key: "subject",
  },
  {
    title: "商品类型",
    dataIndex: "sellingmodel",
    key: "sellingmodel",
  },
  {
    title: "商品售卖数",
    key: "markingprice",
    dataIndex: "markingprice",
  },
  {
    title: "默认金额售卖数",
    key: "price",
    dataIndex: "price",
  },
  {
    title: "已售金额",
    key: "price",
    dataIndex: "price",
  },
  {
    title: "商品状态",
    key: "status",
    dataIndex: "status",
  },
  {
    title: "操作",
    key: "tags",
    dataIndex: "tags",
  },
];
interface props {
  isCad: Number;
}
const list = ref<Array<Object>>([]);
const value = ref<string>("");
const status = ref<string>("0");
let modelRef = ref({});
const propsData = reactive<props>({
  isCad: 0,
});

const isShowGoods = ref<Boolean>(false);
const modalText = ref<string>("Content of the modal");
const visible = ref<boolean>(false);
const confirmLoading = ref<boolean>(false);

const showModal = () => {
  visible.value = true;
};
const handleOk = () => {
  modalText.value = "The modal will be closed after two seconds";
  confirmLoading.value = true;
  setTimeout(() => {
    visible.value = false;
    confirmLoading.value = false;
  }, 2000);
};
const onSearch = async () => {
  const params = {
    status: status.value,
    name: value.value,
    uid: getUid(),
  };
  const data = await onfindby(params);
  list.value = data.data;
};
const onGoods = (e: Number) => {
  propsData.isCad = e;
  isShowGoods.value = true;
};
const onBack = async (e: Number) => {
  isShowGoods.value = !isShowGoods.value;
  const uid = getUid();
  const data = await onSelectGoods(uid);
  list.value = data.data;
};
const onEdit = (e: any) => {
  console.log(e, "e");
  visible.value = !visible.value;
  modelRef.value = e
  console.log();
  
};
const { resetFields, validate, validateInfos } = useForm(
  modelRef,
  reactive({
    subject: [
      {
        required: true,
        message: "请输入商品名称",
      },
    ],
  })
);
const onSubmit = () => {
  validate()
    .then((res) => {
      console.log(res, toRaw(modelRef));
    })
    .catch((err) => {
      console.log("error", err);
    });
};
const reset = () => {
  resetFields();
};
const onDel = async (e: any) => {
  const uid = getUid();
  e.status = "1";
  e.uid = uid
  const data = await onUpdateGoods(e);
  console.log(data, "data");
  await init();
};
const init = async () => {
  const uid = getUid();
  const data = await onSelectGoods(uid);
  list.value = data.data;
};
onMounted(async () => {
  await init();
});
defineExpose({
  status,
  value,
  columns,
  isShowGoods,
  propsData,
  modalText,
  visible,
  confirmLoading,
  validateInfos,
  modelRef,
  reset,
  onSubmit,
  showModal,
  handleOk,
  onBack,
  onSearch,
  onGoods,
  onEdit,
  onDel,
  init,
});
</script>
<style lang="less" scoped>
.good-page {
  .good-search {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .status {
      margin-right: 20px;
      width: 80px;
      border-radius: 5px;
      border: 1px solid rgba(0, 0, 0, 0.65);
    }
    .status::before {
      display: none;
    }
    .ant-radio-button-wrapper-checked {
      border: 1px solid @primary-color;
    }
    .ood-cad {
      width: 100%;
    }

    .ml10 {
      margin-left: 10px;
    }

    .mr10 {
      margin-right: 10px;
    }
  }

  .goods-list {
    margin-top: 10px;
  }

  .small {
    border: none;
    height: 30px;
    width: 50px;
  }

  .left {
    border-left: 1px solid rgb(236, 236, 236);
    border-top: 1px solid rgb(236, 236, 236);
    border-bottom: 1px solid rgb(236, 236, 236);
    border-right-width: 80%;
    border-right: 1px solid rgb(236, 236, 236);
    border-bottom-left-radius: 25px;
    border-top-left-radius: 25px;
  }
}
</style>
<style lang="less">
.ant-layout-content {
  overflow-y: scroll;
}
</style>
