<template>
  <el-dialog
    append-to-body
    custom-class="center-dialog"
    :title="title"
    top="0vh"
    :visible.sync="dialogFormVisible"
    width="1000px"
    @close="close"
  >
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item>
            <el-input
              v-model="queryForm.item_id"
              clearable
              :placeholder="__('请输入标题')"
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="queryData">
              {{ __('查询') }}
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-left-panel>
    </vab-query-form>

    <el-table
      v-loading="listLoading"
      border
      :data="list"
      height="500"
      width="60%"
    >
      <el-table-column
        align="center"
        :label="__('订单编号')"
        prop="order_id"
        show-overflow-tooltip
      />

      <el-table-column
        align="center"
        :formatter="formatId"
        :label="__('订单状态')"
        prop="order_state_id"
        show-overflow-tooltip
      />

      <el-table-column
        align="center"
        :label="__('货品编码')"
        prop="item_id"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="__('商品名称')"
        prop="item_name"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="__('商品数量')"
        prop="order_item_quantity"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="__('地址')"
        prop="da_address"
        show-overflow-tooltip
      />
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.pageNum"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <Table ref="Table" @fetch-data="fetchData" />
  </el-dialog>
</template>
<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import { listOrderByItemId } from '@/api/order/item'

  export default {
    name: 'AnalyticsTable ',
    components: {},
    data() {
      return {
        list: [],
        listLoading: true,
        dialogFormVisible: false,
        title: '',
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        queryForm: {
          pageNum: 1,
          pageSize: 20,
          item_id: '',
        },
      }
    },
    created() {},
    methods: {
      getDistrictIds(queryArea) {
        if (!queryArea) return ''
        const province = queryArea.province
        const city = queryArea.city
        const district = queryArea.district
        if (
          province.code != undefined &&
          city.code != undefined &&
          district.code != undefined
        ) {
          return province.code + ',' + city.code + ',' + district.code
        } else if (
          province.code != undefined &&
          city.code == undefined &&
          district.code == undefined
        ) {
          return province.code
        } else if (
          province.code != undefined &&
          city.code != undefined &&
          district.code == undefined
        ) {
          return province.code + ',' + city.code
        } else {
          return ''
        }
      },
      __,

      formatId(row) {
        return row.order_state_id === 2011
          ? this.__('待订单审核')
          : row.order_state_id === 2013
          ? this.__('待财务审核')
          : row.order_state_id === 2020
          ? this.__('待配货/待出库审核')
          : row.order_state_id === 2030
          ? this.__('待发货')
          : row.order_state_id === 2040
          ? this.__('已发货/待收货确认')
          : row.order_state_id === 2060
          ? this.__('已完成/已签收')
          : this.__('已取消/已作废')
      },
      showTable(row, intraday_id, query) {
        this.queryForm.item_id = row.item_id
        this.queryForm.intraday_id = intraday_id
        let district_id_str = this.getDistrictIds(query.queryArea)
        if (district_id_str) {
          this.queryForm.district_id_str = district_id_str
        }
        let product_name = query.product_name
        if (product_name) {
          this.queryForm.product_name = product_name
        }

        let product_id = query.product_id
        if (product_id) {
          this.queryForm.product_id = product_id
        }

        let order_st_time = query.order_st_time
        if (order_st_time) {
          this.queryForm.order_st_time = order_st_time
        }

        let order_ed_time = query.order_ed_time
        if (order_ed_time) {
          this.queryForm.order_ed_time = order_ed_time
        }

        let category_id = query.category_id
        if (category_id) {
          this.queryForm.category_id = category_id
        }

        let da_address = query.da_address
        if (da_address) {
          this.queryForm.da_address = da_address
        }

        this.dialogFormVisible = true
        this.fetchData()
      },
      close() {
        this.queryForm = this.$options.data().queryForm
        this.dialogFormVisible = false
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNum = val
        this.fetchData()
      },
      queryData() {
        this.queryForm.pageNum = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        const { data } = await listOrderByItemId(this.queryForm)
        this.list = data.items
        this.total = data.records
        this.listLoading = false
      },
    },
  }
</script>
