<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import {
    Form,
    FormItem,
    Input,
    Button,
    Select,
    SelectOption,
    Row,
    Col,
    message,
  } from 'ant-design-vue';
  import { UploadOutlined } from '@ant-design/icons-vue';
  import { useRouter } from 'vue-router';
  import { getAuthCache } from '/@/utils/auth';
  import {
    regionalSpotManageBrandListApi,
    regionalSpotManageGroupListApi,
    regionalSpotManageListApi,
    regionalSpotManageGetAreaListApi,
    regionalSpotManageGetGhsAreaListApi,
    regionalSpotManageOpsDeleteProductApi,
    regionalSpotManageOpsEditProductApi,
    regionalSpotManageUploadOpsProductApi,
  } from '/@/api/regionalSpotManage';
  import addProductModal from './addProduct.vue';
  const config = import.meta.env;
  const userInfo: any = getAuthCache('USER__INFO__');
  const ghsCode = userInfo.supplier.ghsCode;
  const ghsName = userInfo.supplier.ghsName;
  const router = useRouter();
  const list = ref<any[]>([]);
  onMounted(async () => {
    getList();
    getAllAreaList();
    getGroupOption();
  });
  const searchForm = ref<{
    brands: any;
    goodsNo: any;
    areaIds: any;
    types: any;
  }>({
    brands: [],
    goodsNo: '',
    areaIds: [],
    types: [],
  });
  interface AreaIds {
    city?: string;
    cityId?: number;
    creationTime?: string;
    creator?: string;
    id?: number;
    province?: string;
    provinceId?: number;
  }
  const areaIdsOption = ref<AreaIds[]>([]);
  const typesOption = ref([]);
  const searchBrandList = ref<any[]>([]);
  const handleSearch = async (value) => {
    const res = await regionalSpotManageBrandListApi({ brand: value });
    if (res.success) {
      searchBrandList.value = res.data;
    } else {
      searchBrandList.value = [];
    }
  };
  const listLoading = ref(false);
  const pagination = ref({
    pageSize: 10,
    current: 1,
    total: 0,
    showTotal: (total) => `共 ${total} 条`,
    hideOnSinglePage: false,
    showQuickJumper: true,
    showSizeChanger: true,
    pageSizeOptions: ['10', '20', '30', '50', '100'],
    onChange: (current) => {
      pagination.value.current = current;
      getList();
    },
    onShowSizeChange: (size) => {
      pagination.value.pageSize = size;
      getList();
    },
  });
  const getList = async () => {
    const pager = ref({
      pageIndex: 1,
      pageSize: 10,
    });
    const param = ref({
      ...searchForm.value,
      ...pager.value,
    });
    param.value.areaIds = param.value.areaIds ? param.value.areaIds : [];
    param.value.types = param.value.types ? param.value.types : [];
    listLoading.value = true;
    const res = await regionalSpotManageListApi(param.value);
    if (res.success) {
      list.value = res.data;
      pagination.value.total = res.data[0].total;
    } else {
      list.value = [];
      pagination.value.total = 0;
    }
    listLoading.value = false;
  };
  const onRset = () => {
    searchForm.value.brands = [];
    searchForm.value.goodsNo = '';
    searchForm.value.areaIds = [];
    searchForm.value.types = [];
    getList();
  };
  const onSearch = () => {
    pagination.value.current = 1;
    getList();
  };

  const showModal = ref(false);
  const addProduct = () => {
    showModal.value = true;
  };
  // 关闭新增商品弹窗
  const closeVisible = (val, action) => {
    showModal.value = val;
    if (action) {
      onSearch();
    }
  };

  const curItem = ref<{ [key: string]: any }>({});

  // =========查看区域现货 statr ===========
  const loading1 = ref(false);
  const visible = ref(false);
  const regionalSpotGoods = ref([]);
  const viewCurrent = async (val) => {
    curItem.value = val;
    visible.value = true;
    const param = ref<{ [key: string]: any }>({
      products: [
        {
          goodsNo: val.goodsNo,
          brand: val.brand,
          spec: val.spec,
          ghscode: ghsCode,
        },
      ],
    });
    loading1.value = true;
    const result = await getAreaList(param.value);
    regionalSpotGoods.value = result;
    loading1.value = false;
  };
  const getAreaList = async (param) => {
    const res = await regionalSpotManageGetGhsAreaListApi(param);
    if (res.success) {
      return res.data;
    } else {
      return [];
    }
  };
  // ==========查看区域现货 end =============

  const selectedRowKeys = ref([]);
  const selectedRows = ref<any[]>([]);
  const onSelectChange = (Keys, Rows) => {
    selectedRowKeys.value = Keys;
    selectedRows.value = Rows;
  };
  // ===============增加区域 start=======================
  const addVisible = ref(false);
  const addAreaLoading = ref(false);
  const addCheckboxValue = ref<number[]>([]);
  const addArea = async (row) => {
    curItem.value = row;
    addVisible.value = true;
    addAreaLoading.value = true;
    const param = ref<{ [key: string]: any }>({
      products: [
        {
          goodsNo: row.goodsNo,
          brand: row.brand,
          spec: row.spec,
          ghscode: ghsCode,
        },
      ],
    });
    const result = await getAreaList(param.value);
    delAreaList.value = result;
    const curArr = delAreaList.value.map((it) => it.cityCode);
    for (const k of allAreaList.value) {
      if (curArr.includes(k.cityId)) {
        addCheckboxValue.value.push(k.cityId);
        k.disabled = true;
      }
    }
    addAreaLoading.value = false;
  };
  const addVisibleCancel = () => {
    addVisible.value = false;
    addCheckboxValue.value = [];
  };
  const confirmAddLoading = ref(false);
  const confirmAddArea = async () => {
    const param = ref<{ [key: string]: any }>({
      products: [
        {
          goodsNo: curItem.value.goodsNo,
          brand: curItem.value.brand,
          spec: curItem.value.spec,
          ghscode: ghsCode,
        },
      ],
      areas: addCheckboxValue.value,
    });
    confirmAddLoading.value = true;
    const res = await regionalSpotManageOpsEditProductApi(param.value);
    if (res.success) {
      message.success('添加区域成功');
      addVisibleCancel();
    } else {
      message.error(res.message);
    }
    confirmAddLoading.value = false;
  };
  // ===============增加区域 end=======================

  // ================区域现货商品删除 start=====================
  const delVisible = ref(false);
  const delLoading = ref(false);
  const deleteNum = ref(0);
  const radioValue = ref(1);
  const delAreaList = ref<any[]>([]); //已添加的区域
  const delCheckboxValue = ref([]);
  const del = async (val) => {
    curItem.value = val;
    deleteNum.value = 1;
    delVisible.value = true;
    const param = ref<{ [key: string]: any }>({
      products: [
        {
          goodsNo: val.goodsNo,
          brand: val.brand,
          spec: val.spec,
          ghscode: ghsCode,
        },
      ],
    });
    delLoading.value = true;
    const res = await getAreaList(param.value);
    if (res) {
      delAreaList.value = res;
    }
    delLoading.value = false;
  };
  const delVisibleCancel = () => {
    delVisible.value = false;
    deleteNum.value = 0;
    radioValue.value = 1;
    delCheckboxValue.value = [];
    isBatchDel.value = false;
  };
  const delConfirLoading = ref(false);
  const confirmDel = async () => {
    if (!delAreaList.value.length) return message.error('暂无可删除区域');
    if (radioValue.value === 2 && !delCheckboxValue.value.length)
      return message.error('请选择需要删除的现货区域');
    const param = ref<{ [key: string]: any }>({
      products: [],
      areas: '',
      isAll: false,
    });
    if (isBatchDel.value) {
      param.value.products = selectedRows.value.map((v) => {
        return {
          goodsNo: v.goodsNo,
          brand: v.brand,
          spec: v.spec,
          ghscode: ghsCode,
        };
      });
    } else {
      param.value.products = [
        {
          goodsNo: curItem.value.goodsNo,
          brand: curItem.value.brand,
          spec: curItem.value.spec,
          ghscode: ghsCode,
        },
      ];
    }
    if (radioValue.value === 1) {
      param.value.isAll = true;
      param.value.areas = delAreaList.value.map((v) => v.cityCode);
    } else if (radioValue.value === 2) {
      param.value.areas = delCheckboxValue.value;
    }
    delConfirLoading.value = true;
    const res = await regionalSpotManageOpsDeleteProductApi(param.value);
    if (res.success) {
      message.success('删除成功');
    } else {
      message.success(res.message);
    }
    delConfirLoading.value = false;
  };
  // 批量删除
  const isBatchDel = ref(false);
  const batchDel = async () => {
    if (!selectedRowKeys.value.length) return message.error('请勾选商品');
    isBatchDel.value = true;
    deleteNum.value = selectedRows.value.length;
    delVisible.value = true;
    const param = ref<{ [key: string]: any }>({
      products: [],
    });
    param.value.products = selectedRows.value.map((v) => {
      return {
        goodsNo: v.goodsNo,
        brand: v.brand,
        spec: v.spec,
        ghscode: ghsCode,
      };
    });
    delLoading.value = true;
    const res = await getAreaList(param.value);
    if (res.success) {
      delAreaList.value = res.data;
    }
    delLoading.value = false;
  };
  // ================区域现货商品删除 end=====================

  const allAreaList = ref<any[]>([]);
  const getAllAreaList = async () => {
    const res = await regionalSpotManageGetAreaListApi({});
    if (res.success) {
      allAreaList.value = res.data;
      areaIdsOption.value = JSON.parse(JSON.stringify(res.data));
    } else {
      allAreaList.value = [];
    }
  };
  const getGroupOption = async () => {
    const res = await regionalSpotManageGroupListApi({});
    if (res.success) {
      typesOption.value = res.data;
    } else {
      typesOption.value = [];
    }
  };
  // =====================批量导入 start=======================
  const productExcelList = ref<any[]>([]);
  const importVisible = ref(false);
  const impotrCheckboxValue = ref<any[]>([]);
  const batchImport = () => {
    importVisible.value = true;
    allAreaList.value.forEach((v) => {
      v.disabled = false;
    });
  };
  const productExcelBeforeUpload = (file, fileList) => {
    const isLt8M = file.size / 1024 / 1024 <= 8;
    const extension = file.name.substring(file.name.lastIndexOf('.') + 1);
    if (!isLt8M) {
      message.error('上传文件大小不能超过 8MB!');
      return false;
    }
    if (extension !== 'xls' && extension !== 'xlsx') {
      message.error('只能上传excel的文件');
      return false;
    }
    let curFileList = [...fileList];
    curFileList = curFileList.slice(-1);
    productExcelList.value = curFileList;
    return false;
  };
  const productExcelRemove = () => {
    productExcelList.value = [];
  };
  const downLoad = () => {
    window.open(
      config.VITE_GLOB_TMALLAB_URL + '/system/resources/区域现货商品上传模板.xlsx',
      '_blank',
    );
  };
  let importLoading = ref(false);
  const confirmImport = async () => {
    if (!productExcelList.value.length) return message.error('请上传文件');
    if (!impotrCheckboxValue.value.length) return message.error('请选择现货区域');
    // const param: FormData = new FormData();
    // param.append('ghsCode', ghsCode);
    // param.append('ghsName', ghsName);
    // param.append('file', productExcelList.value[0]);
    // param.append('areaIds', impotrCheckboxValue.value.join(',') as any);
    importLoading.value = true;
    const res: any = await regionalSpotManageUploadOpsProductApi(
      {
        ghsCode: ghsCode,
        ghsName: ghsName,
        areaIds: impotrCheckboxValue.value,
      },
      productExcelList.value[0],
    );
    if (res.data.success) {
      message.success('批量导入成功');
      importCancel();
    } else {
      message.error(res.data.message);
    }
    importLoading.value = false;
  };
  const importCancel = () => {
    importVisible.value = false;
    impotrCheckboxValue.value = [];
    productExcelList.value = [];
  };
  // =====================批量导入 end=======================
  const goTaskCenter = () => {
    router.push({
      path: '/product/taskCenter',
    });
  };
</script>

<template>
  <div>
    <div class="body-box">
      <Form
        :model="searchForm"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        class="top-search"
      >
        <Row :gutter="20">
          <Col :xxl="4" :xl="6" :lg="8" :sm="12" :xs="24">
            <FormItem label="品牌名称" name="brandList">
              <!-- <Input v-model:value="searchForm.brands" allow-clear placeholder="请输入品牌名称" /> -->
              <a-select
                v-model:value="searchForm.brands"
                show-search
                mode="multiple"
                placeholder="请输入品牌名称"
                style="width: 100%"
                :default-active-first-option="false"
                :show-arrow="false"
                :filter-option="false"
                :not-found-content="null"
                :maxTagCount="1"
                @search="handleSearch"
              >
                <a-select-option
                  v-for="item in searchBrandList"
                  :key="item.brand"
                  :label="item.brand"
                  :value="item.brand"
                >
                  {{ item.brand }}
                </a-select-option>
              </a-select>
            </FormItem>
          </Col>
          <Col :xxl="4" :xl="6" :lg="8" :sm="12" :xs="24">
            <FormItem label="货号" name="goodsNo">
              <Input v-model:value="searchForm.goodsNo" allow-clear placeholder="请输入货号" />
            </FormItem>
          </Col>
          <Col :xxl="4" :xl="6" :lg="8" :sm="12" :xs="24">
            <FormItem label="现货区域" name="areaIds">
              <Select
                v-model:value="searchForm.areaIds"
                allowClear
                mode="multiple"
                placeholder="请选择现货区域"
                :maxTagCount="1"
                style="width: 100%"
              >
                <SelectOption
                  v-for="(item, index) in areaIdsOption"
                  :key="index"
                  :value="item.cityId"
                  >{{ item.province }}-{{ item.city }}</SelectOption
                >
              </Select>
            </FormItem>
          </Col>
          <Col :xxl="4" :xl="6" :lg="8" :sm="12" :xs="24">
            <FormItem label="商品分组" name="types">
              <Select
                v-model:value="searchForm.types"
                allowClear
                mode="multiple"
                placeholder="请选择商品分组"
                :maxTagCount="1"
                style="width: 100%"
              >
                <SelectOption v-for="(item, index) in typesOption" :key="index" :value="item">{{
                  item
                }}</SelectOption>
              </Select>
            </FormItem>
          </Col>
          <Col :span="24" style="display: flex; justify-content: space-between">
            <div>
              <Button type="primary" style="margin: 0 5px" @click="onSearch">查询</Button>
              <Button style="margin: 0 5px" @click="onRset">重置</Button>
              <Button type="primary" @click="addProduct" style="margin: 0 5px">新增商品</Button>
              <Button type="primary" @click="batchImport" style="margin: 0 5px">批量导入</Button>
              <Button type="primary" @click="batchDel" style="margin: 0 5px">批量删除</Button>
            </div>
            <Button @click="goTaskCenter" style="margin: 0 5px">任务中心日志</Button>
          </Col>
        </Row>
      </Form>
      <a-table
        :data-source="list"
        :loading="listLoading"
        bordered
        :pagination="pagination"
        :rowKey="(record) => record.brand + record.goodsNo + record.spec"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
          columnWidth: 65,
        }"
        style="margin-top: 15px"
      >
        <a-table-column title="商品名称" align="center" :width="100">
          <template #default="{ record }">
            {{ record.productName }}
          </template>
        </a-table-column>
        <a-table-column title="品牌" align="center" :width="100">
          <template #default="{ record }">
            {{ record.brand }}
          </template>
        </a-table-column>
        <a-table-column title="货号" align="center" :width="100">
          <template #default="{ record }">
            {{ record.goodsNo }}
          </template>
        </a-table-column>
        <a-table-column title="规格" align="center" :width="100">
          <template #default="{ record }">
            {{ record.spec }}
          </template>
        </a-table-column>
        <a-table-column title="当前现货区域" align="center" :width="100">
          <template #default="{ record }">
            <Button type="link" @click="viewCurrent(record)">查看区域现货</Button>
          </template>
        </a-table-column>
        <a-table-column title="上架状态" align="center" :width="100">
          <template #default="{ record }">
            {{ record.productStatus }}
          </template>
        </a-table-column>
        <a-table-column title="操作" align="center" :width="200">
          <template #default="{ record }">
            <Button type="link" @click="addArea(record)">增加区域</Button>
            <Button type="link" style="margin-left: 5px" @click="del(record)">删除</Button>
          </template>
        </a-table-column>
      </a-table>
    </div>
    <addProductModal v-if="showModal" @close="closeVisible" />
    <a-modal
      v-model:visible="visible"
      title="商品可提供现货区域查看"
      :width="600"
      @ok="visible = false"
      :footer="null"
      :maskClosable="false"
      okText="提交"
    >
      <div>商品名称：{{ curItem.productName }}</div>
      <div>商品品牌：{{ curItem.brand }}</div>
      <div>商品货号：{{ curItem.goodsNo }}</div>
      <div>商品规格：{{ curItem.spec }}</div>
      <a-table
        :data-source="regionalSpotGoods"
        bordered
        :loading="loading1"
        :pagination="false"
        :rowKey="(record) => record.sysid"
        style="margin-top: 15px"
      >
        <a-table-column title="区域" align="center" :width="100">
          <template #default="{ record }">{{ record.provinceName }}-{{ record.cityName }}</template>
        </a-table-column>
        <a-table-column title="添加时间" align="center" :width="100">
          <template #default="{ record }">
            {{ record.createTime }}
          </template>
        </a-table-column>
        <a-table-column title="添加人" align="center" :width="100">
          <template #default="{ record }">
            {{ record.createName }}
          </template>
        </a-table-column>
      </a-table>
    </a-modal>
    <!-- 删除 -->
    <a-modal
      v-model:visible="delVisible"
      title="区域现货商品删除"
      :width="650"
      :maskClosable="false"
      :keyboard="false"
      @cancel="delVisibleCancel"
      @ok="confirmDel"
      :confirmLoading="delConfirLoading"
      okText="提交"
    >
      <p
        >您已选中 <span style="color: #1684fc">{{ deleteNum }}条</span> 商品</p
      >
      <a-spin v-if="delLoading" style="height: 150px; width: 100%; line-height: 150px" />
      <p v-else
        >选择需要删除的现货区域：
        <a-radio-group v-model:value="radioValue">
          <a-radio :value="1">全部区域</a-radio>
          <a-radio :value="2">部分区域</a-radio>
        </a-radio-group>
        <a-checkbox-group
          v-model:value="delCheckboxValue"
          :disabled="radioValue === 1"
          style="width: 100%; margin-top: 15px"
        >
          <a-row>
            <a-col :span="6" v-for="(item, index) in delAreaList" :key="index">
              <a-checkbox :value="item.cityCode"
                >{{ item.provinceName }}-{{ item.cityName }}</a-checkbox
              >
            </a-col>
          </a-row>
        </a-checkbox-group>
      </p>
    </a-modal>
    <!-- 增加区域 -->
    <a-modal
      v-model:visible="addVisible"
      title="现货商品增加区域"
      :width="700"
      :maskClosable="false"
      @cancel="addVisibleCancel"
      @ok="confirmAddArea"
      okText="提交"
      :confirmLoading="confirmAddLoading"
    >
      <div>商品名称：{{ curItem.productName }}</div>
      <div>商品品牌：{{ curItem.brand }}</div>
      <div>商品货号：{{ curItem.goodsNo }}</div>
      <div>商品规格：{{ curItem.spec }}</div>
      <p style="margin-top: 15px">选择可提供现货的区域：</p>
      <a-checkbox-group v-model:value="addCheckboxValue" style="width: 100%">
        <a-row>
          <a-col :span="6" v-for="(item, index) in allAreaList" :key="index">
            <a-checkbox :value="item.cityId" :disabled="item.disabled"
              >{{ item.province }}-{{ item.city }}</a-checkbox
            >
          </a-col>
        </a-row>
      </a-checkbox-group>
    </a-modal>
    <!-- 批量导入 -->
    <a-modal
      v-model:visible="importVisible"
      title="区域现货商品批量导入"
      :width="700"
      :maskClosable="false"
      okText="提交"
      @ok="confirmImport"
      @cancel="importCancel"
      :confirmLoading="importLoading"
    >
      <a-alert type="warning">
        <template #message>
          <span style="color: red">特别提醒：</span
          >若商品之前已设置现货区域，则本次设置为在之前设置基础上新增。例如，原来商品设置为
          北京市-直辖市；天津市-直辖市。本次设置为，北京市-直辖市；四川省-成都市。提交后，商品现货区域将更新为
          北京市-直辖市；天津市-直辖市；四川省-成都市。
        </template>
      </a-alert>
      <div style="margin-top: 15px; display: flex; align-items: center">
        <span>上传商品文件：</span>
        <a-upload
          accept=".xls,.xlsx"
          :file-list="productExcelList"
          :before-upload="productExcelBeforeUpload"
          @remove="productExcelRemove"
        >
          <a-button><upload-outlined />上传文件</a-button>
        </a-upload>
        <span style="margin-left: 15px">
          下载
          <a @click="downLoad">区域现货商品上传模板</a>
        </span>
      </div>
      <p style="margin-top: 15px">选择现货区域：</p>
      <a-checkbox-group v-model:value="impotrCheckboxValue" style="width: 100%">
        <a-row>
          <a-col :span="6" v-for="(item, index) in allAreaList" :key="index">
            <a-checkbox :value="item.cityId" :disabled="item.disabled"
              >{{ item.province }}-{{ item.city }}</a-checkbox
            >
          </a-col>
        </a-row>
      </a-checkbox-group>
    </a-modal>
  </div>
</template>

<style lang="less" scoped>
  .body-box {
    .top-search {
      margin-top: 15px;
    }
  }
</style>
