<template>
  <div class="app-container">
    <div class="container">
      <!-- 搜索表单 -->
      <el-form :model="queryParams"
        label-position="right"
        label-width="68px"
        inline>
        <el-form-item label="直播间">
          <el-select v-model="queryParams.brand"
            multiple
            clearable
            collapse-tags
            collapse-tags-tooltip
            @change="getList">
            <el-option v-for="str in brandList"
              :label="str"
              :value="str">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="口味">
          <el-select v-model="queryParams.taste"
            multiple
            clearable
            collapse-tags
            collapse-tags-tooltip
            @change="getList">
            <el-option v-for="str in tasteList"
              :label="str"
              :value="str">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规格">
          <el-select v-model="queryParams.spec"
            multiple
            clearable
            collapse-tags
            collapse-tags-tooltip
            @change="getList">
            <el-option v-for="str in specList"
              :label="str"
              :value="str">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="系列">
          <el-select v-model="queryParams.series"
            multiple
            clearable
            collapse-tags
            collapse-tags-tooltip
            @change="getList">
            <el-option v-for="str in seriesList"
              :label="str"
              :value="str">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品">
          <el-select v-model="queryParams.goods"
            multiple
            clearable
            collapse-tags
            collapse-tags-tooltip
            @change="getList">
            <el-option v-for="str in goodsList"
              :label="str"
              :value="str">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期选择">
          <el-date-picker v-model="queryParams.date"
            type="daterange"
            :clearable="false"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="pickerOptions"
            @change="queryChangeFn()">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <!-- 数据 -->
      <div>
        <el-table :data="tableData"
          border>
          <el-table-column v-for="item in columns"
            :key="item.prop"
            :label="item.label"
            :prop="item.prop"
            :formatter="formatter">
          </el-table-column>
        </el-table>
      </div>
      <!-- 订单详情 -->
      <el-dialog v-model="detailVisible"
        title="Shipping address"
        width="80%">
        <el-table :data="detailTableData">
          <el-table-column property="date"
            label="Date"
            width="150" />
          <el-table-column property="name"
            label="Name"
            width="200" />
          <el-table-column property="address"
            label="Address" />
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { getFinanceListAPI } from '@/api'
import { useDatePickerOptions } from '@/hooks'
import { formatNumberWithUnit } from '@/utils'

const { pickerOptions } = useDatePickerOptions()
const detailVisible = ref(false) // 详情
const brandList = ref(["虎皮01", "IP礼盒直播间", "礼盒直播间", "去骨直播间"]) // 直播间
const tasteList = ref(["香辣", "原味", "椒麻", "混合"]) // 口味
const specList = ref([]) // 规则
const seriesList = ref([]) // 系列
const goodsList = ref([]) // 商品

const data = reactive({
  queryParams: {
    brand: ["虎皮01", "IP礼盒直播间", "礼盒直播间", "去骨直播间"], // 直播间
    taste: ["香辣", "原味", "椒麻", "混合"], // 口味
    spec: [], // 规格
    series: [], // 系列
    goods: [], // 商品
    date: [] // 日期
  }
})

const { queryParams } = toRefs(data)

const queryChange = () => {

}

// 表格数据
const columns = ref([
  {
    label: '直播间',
    prop: 'zbjQdType'
  },
  {
    label: '口味',
    prop: 'flavorErp'
  },
  {
    label: '规格',
    prop: 'specNameErp'
  },
  {
    label: '系列',
    prop: ''
  },
  {
    label: '商品',
    prop: 'goodsName'
  },
  {
    label: '分摊后总价',
    prop: 'shareAmountSum'
  },
  {
    label: '实际成本',
    prop: 'actualCostSum'
  },
  {
    label: '实际成本毛利',
    prop: 'actualCostGrossProfitSum'
  },
  {
    label: '标准成本',
    prop: 'standardCostSum'
  },
  {
    label: '标准成本毛利',
    prop: 'standardCostGrossProfitSum'
  }
])
const tableData = ref([
])
const getList = async () => {
  const res = await getFinanceListAPI(queryParams.value)
  tableData.value = res.data.list
}
getList()

const formatter = (row, column, value) => {
  if (['shareAmountSum', 'actualCostSum', 'actualCostGrossProfitSum', 'standardCostSum', 'standardCostGrossProfitSum'].includes(column.property)) {
    console.log(value)
    return formatNumberWithUnit({ value, carry: false, fixed: 4, round: false, post: false, comma: true, des: '' })
  } else {
    return value
  }
}

// 详情数据
const detailTableData = ref([])
const detailColumns = ref([
  {
    label: '订单编号',
    prop: 'id'
  }, {
    label: '店铺名称',
    prop: 'name'
  },
  {
    label: '原始单号',
    prop: ''
  }, {
    label: '原始子单号',
    prop: ''
  }, {
    label: '订单状态',
    prop: ''
  }, {
    label: '交易时间',
    prop: ''
  }, {
    label: '付款时间',
    prop: ''
  }, {
    label: '发货时间',
    prop: ''
  }, {
    label: '省市县',
    prop: ''
  }, {
    label: '备注',
    prop: ''
  }, {
    label: '应收金额',
    prop: ''
  }, {
    label: '货品编号',
    prop: ''
  }, {
    label: '货品名称',
    prop: ''
  }, {
    label: '规格名称',
    prop: ''
  }, {
    label: '分类',
    prop: ''
  }, {
    label: '数量',
    prop: ''
  }, {
    label: '优惠',
    prop: ''
  }, {
    label: '分摊后总价',
    prop: ''
  }, {
    label: '拆自组合装',
    prop: ''
  }, {
    label: '组合装编码',
    prop: ''
  }, {
    label: '组合装数量',
    prop: ''
  }, {
    label: '赠品方式',
    prop: ''
  }, {
    label: '分销商名称',
    prop: ''
  }, {
    label: '分销商编号',
    prop: ''
  }, {
    label: '平台货品名称',
    prop: ''
  }
])
</script>

<style scoped
  lang="scss">
  ::v-deep(.el-form-item) {
    width: 250px;

    &:last-of-type {
      width: 350px;
    }
  }
</style>