<template>
  <div class="purchaser-index-warp">
    <common current-name="purchaser">
      <template #main>
        <div v-if="showDetail">
          <el-row class="purchaser-top">
            <el-col :span="12">
              <div class="purchaser-top-title">行情动态</div>
              <div class="purchaser-charts">
                <marketCharts :height="'180'"></marketCharts>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="purchaser-top-title">近7天热门产品</div>
              <div class="purchaser-charts">
                <hotGoodsWordClould></hotGoodsWordClould>
              </div>
              <div>
                <el-button type="success" @click.stop="handleClick">一键发布采购信息</el-button>
              </div>
            </el-col>
          </el-row>
          <filtertop :list="treeList"></filtertop>
        </div>
        <div v-else>
          <good-source :id="detailId" @update-status="handleUpdate"></good-source>
        </div>
        <div class="hot-list-warp">
          <el-row :gutter="10">
            <el-col :span="8" align="left">
              <el-cascader :options="typeTree" :props="treeOption" clearable :placeholder="'请选择地区'" />
            </el-col>
            <el-col :span="16" align="left">
              <el-radio-group v-model="filter.time">
                <el-radio v-for="(n, index) in dateList" :key="index" :value="n.value">{{ n.label }}</el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-table :data="tableData" style="width: 100%" height="320" @row-click="rowClick">
                <el-table-column prop="title" label="采购品种" />
                <el-table-column prop="region" label="收货地" />
                <el-table-column prop="buyer" label="采购方" />
                <el-table-column prop="buyNum" label="采购量(kg)" />
                <el-table-column prop="buyer" label="采购时间" />
                <el-table-column fixed="right" label="操作">
                  <template #default>
                    <el-button link type="primary" size="small"> 去报价 </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>
      </template>
    </common>

    <purchaserPopup ref="popupQuote" :list="treeList"></purchaserPopup>
  </div>
</template>
<script setup name="ecommerce">
import common from './components/common.vue';
import filtertop from './components/filtertop.vue';
import hotGoodsWordClould from './components/hotGoodsWordClould.vue';
import marketCharts from './components/marketCharts.vue';
import purchaserPopup from './components/purchaserPopup.vue';
import { ref, reactive, onMounted, watch, computed } from 'vue';
import { getRegion } from '@/apis/index';
import { useRoute, useRouter } from 'vue-router';
import { transaction } from '@/apis/agricultural.js';
import GoodSource from '@/views/ecommerce/components/goodSource.vue';
const route = useRoute();
const router = useRouter();

let treeList = reactive([
  {
    id: '03',
    name: '水果',
    children: [
      {
        parentId: '03',
        id: '0301',
        name: '甘蔗',
        children: [],
      },
    ],
  },
  {
    id: '02',
    name: '中药材',
    children: [
      {
        parentId: '02',
        id: '0201',
        name: '石斛',
        children: [],
      },
    ],
  },
  {
    id: '01',
    name: '蔬菜',
    children: [
      {
        parentId: '01',
        id: '0101',
        name: '豆菜类',
        children: [],
      },
      {
        parentId: '01',
        id: '0102',
        name: '根茎菜类',
        children: [],
      },
      {
        parentId: '01',
        id: '0103',
        name: '叶菜类',
        children: [],
      },
      {
        parentId: '01',
        id: '0104',
        name: '茄果菜类',
        children: [],
      },
      {
        parentId: '01',
        id: '0105',
        name: '葱姜蒜类',
        children: [],
      },
      {
        parentId: '01',
        id: '0106',
        name: '食用菌',
        children: [],
      },
    ],
  },
]);
const showDetail = ref(true);
let popupQuote = ref(null);
const detailId = ref(0);

const typeTree = ref([]);
const treeOption = ref({
  children: 'areaChildVOS',
  label: 'areaName',
});

const getTree = () => {
  console.info('getTree');
  getRegion().then((res) => {
    if (res.code === 200) {
      const { code, data } = res;
      typeTree.value = data;
      console.info('区域信息', typeTree.value);
    }
  });
};

const getTreeList = () => {
  transaction().then((res) => {
    if (res.code === 200) {
      let a = res.data.sort((a, b) => Number(b.id) - Number(a.id));
      treeList.splice(0, treeList.length, ...a);
    }
  });
};

const handleClick = () => {
  popupQuote.value && popupQuote.value.doShow();
};
const dateList = reactive([
  { label: '近7天发布', value: 7 },
  { label: '近30天发布', value: 30 },
]);
let filter = ref({
  region: '',
  time: 7,
});

let tableData = reactive([
  { id: '01', title: '西红柿', region: '耿马镇', buyer: '盛源农业', buyNum: 870, time: '2025-04-02 12:25:36' },
  { id: '02', title: '大米', region: '孟定镇', buyer: '天辰大米', buyNum: 1000, time: '2025-04-01 12:25:36' },
  { id: '03', title: '黄瓜', region: '孟勇镇', buyer: '盛源农业', buyNum: 2000, time: '2025-04-02 13:25:36' },
  { id: '04', title: '苹果', region: '勐简乡', buyer: '桂香浓云加工', buyNum: 1800, time: '2025-04-02 12:25:36' },
  { id: '05', title: '小葱', region: '四排山乡', buyer: '横鲜农工', buyNum: 380, time: '2025-03-31 12:25:36' },
  { id: '06', title: '豇豆', region: '大兴乡', buyer: '绿康农产', buyNum: 1570, time: '2025-04-02 12:25:36' },
  { id: '07', title: '大蒜', region: '贺派乡', buyer: '丰瑞农产加工', buyNum: 875, time: '2025-04-02 12:25:36' },
  { id: '08', title: '毛荔枝', region: '勐撒镇', buyer: '绿康农业', buyNum: 1570, time: '2025-04-02 12:25:36' },
  { id: '09', title: '毛荔枝', region: '大兴乡', buyer: '丰瑞农产加工', buyNum: 875, time: '2025-04-02 12:25:36' },
]);

const rowClick = (data) => {
  // router.push('/sub-operation-service/ecommerce-purchaserDetail?id=' + data.id);
  detailId.value = data.id;
  showDetail.value = false;
};

const handleUpdate = (data) => {
  // console.log(data);
  showDetail.value = !showDetail.value;
};

onMounted(() => {
  console.info('onMounted');
  getTree();
  getTreeList();
});
</script>
<style lang="scss" scoped>
/* 确保 ElementUI 弹出层有更高的 z-index */
.el-dialog {
  z-index: 2000 !important;
}

/* 降低 ECharts tooltip 的 z-index */
div[class^='zr-element'],
.echarts-tooltip {
  z-index: 1000 !important;
}
.purchaser-index-warp {
  width: 100%;
  .purchaser-top {
    overflow: hidden;
    margin-bottom: 16px;
    padding: 10px;
    width: 100%;
    border-radius: 16px;
    background: $color-fff;
    .purchaser-top-title {
      width: 100%;
      font-size: 18px;
      text-align: left;
    }
    .purchaser-charts {
      width: 100%;
    }
  }
  .hot-list-warp {
    margin: 16px 0;
    padding: 16px;
    border-radius: 16px;
    background: $color-fff;
    ::v-deep() {
      thead {
        overflow: hidden;
        border-radius: 16px;
      }
      thead th {
        padding: 16px 0;
        border: none !important;
        color: $color-999 !important;
        background: $color-main-table-header;
      }
      thead th:first-child {
        border-top-left-radius: 16px;
        border-bottom-left-radius: 16px;
      }
      thead th:last-child {
        border-top-right-radius: 16px;
        border-bottom-right-radius: 16px;
      }
      table {
        margin-top: 16px !important;
      }
      tbody td {
        border: none !important;
      }
      .el-table__inner-wrapper::before {
        display: none !important;
      }
    }
  }
}
</style>
