<template>
  <div class="order-state-log-container">
    <el-table
      v-loading="listLoading"
      border
      :data="items"
      @selection-change="setSelectRows"
    >
      <el-table-column align="center" type="index" width="60"/>
      <el-table-column align="center" :label="$t('用户编号')" prop="user_id" width="100">
        <template #default="{ row }">
          {{row.user_id == 0 ? __("系统") : row.user_id}}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('操作人')" prop="user_nickname" width="100">
        <template #default="{ row }">
          {{row.user_id == 0 ? __("系统") : row.user_nickname}}
        </template>
      </el-table-column>
      <el-table-column align="center"  :label="$t('时间')" prop="order_state_time" width="160"/>
      <el-table-column align="center" :label="$t('操作前')" prop="order_state_type" width="160">
        <template #default="{ row }">
          <el-button v-if="row.order_state_pre_id === 2010" plain size="mini">{{ formatStatePreId(row) }}</el-button>
          <el-button v-else-if="row.order_state_pre_id === 2011" plain size="mini">{{  formatStatePreId(row) }}</el-button>
          <el-button v-else-if="row.order_state_pre_id === 2013" plain size="mini">{{  formatStatePreId(row) }}</el-button>
          <el-button v-else-if="row.order_state_pre_id === 2020" plain size="mini" type="warning">{{  formatStatePreId(row) }}</el-button>
          <el-button v-else-if="row.order_state_pre_id === 2030" plain size="mini" type="danger">{{  formatStatePreId(row) }}</el-button>
          <el-button v-else-if="row.order_state_pre_id === 2040" plain size="mini" type="info">{{  formatStatePreId(row) }}</el-button>
          <el-button v-else-if="row.order_state_pre_id === 2060" plain size="mini" type="success">{{  formatStatePreId(row) }}</el-button>
          <el-button v-else-if="row.order_state_pre_id === 2070" plain size="mini" type="plain">{{  formatStatePreId(row) }}</el-button>
          <el-button v-else>
            {{ __('未知') }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('操作后')" prop="order_state_type" width="160">
        <template #default="{ row }">
          <el-button v-if="row.order_state_id === 2010" plain size="mini">{{ formatStateId(row) }}</el-button>
          <el-button v-else-if="row.order_state_id === 2011" plain size="mini">{{  formatStateId(row) }}</el-button>
          <el-button v-else-if="row.order_state_id === 2013" plain size="mini">{{  formatStateId(row) }}</el-button>
          <el-button v-else-if="row.order_state_id === 2020" plain size="mini" type="warning">{{  formatStateId(row) }}</el-button>
          <el-button v-else-if="row.order_state_id === 2030" plain size="mini" type="danger">{{  formatStateId(row) }}</el-button>
          <el-button v-else-if="row.order_state_id === 2040" plain size="mini" type="info">{{  formatStateId(row) }}</el-button>
          <el-button v-else-if="row.order_state_id === 2060" plain size="mini" type="success">{{  formatStateId(row) }}</el-button>
          <el-button v-else-if="row.order_state_id === 2070" plain size="mini" type="plain">{{  formatStateId(row) }}</el-button>
          <el-button v-else>
            {{ __('未知') }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('操作日志')" prop="order_state_note"/>
      <template #empty>
        <el-empty class="ms-data-empty" :description="$t('暂无数据')"/>
      </template>
    </el-table>
  </div>
</template>

<script>
import { translateTitle as t } from '@/utils/i18n'
import { listStateLog } from '@/api/order/base'
import {renderTime} from "@/utils/date";

export default {
  name: 'OrderStateLog',
  components: {  },
  props: {
    orderId: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      editRef: null,
      items: [],
      listLoading: true,
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      selectRows: '',
      dialogFormVisible: false,
      title: '',
      queryForm: {
        page: 1,
        size: 100,
        title: '',
        order_id: this.orderId,
      },
    }
  },
  mounted() {
    //this.fetchData();
  },
  computed: {
  },
  watch: {
    orderId: {
      immediate: true,
      handler(orderId) {
        this.queryForm.order_id = orderId;
        if (this.queryForm.order_id) {
          this.fetchData();
        }
      },
    },
  },

  methods: {
    __: t,
    $t: t,

    formatDateTime(row) {
      const points_log_date = row.points_log_date
      return points_log_date ? renderTime(points_log_date) : ''
    },
    formatStatePreId(row) {
      return row.order_state_pre_id === 2011
        ? this.__('待审核')
        : row.order_state_pre_id === 2013
          ? this.__('待财务审核')
          : row.order_state_pre_id === 2020
            ? this.__('待配货')
            : row.order_state_pre_id === 2030
              ? this.__('待发货')
              : row.order_state_pre_id === 2040
                ? this.__('待签收')
                : row.order_state_pre_id === 2060
                  ? this.__('已完成')
                  : row.order_state_pre_id === 2010
                    ? this.__('待付款')
                    : this.__('已关闭')
    },
    formatStateId(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.__('已完成')
                  : row.order_state_id === 2010
                    ? this.__('待付款')
                    : this.__('已关闭')
    },
    setSelectRows(val) {
      this.selectRows = val;
    },
    handleSizeChange(val) {
      this.queryForm.size = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.queryForm.page = val;
      this.fetchData();
    },
    queryData() {
      this.queryForm.page = 1;
      this.fetchData();
    },
    async fetchData() {
      this.listLoading = true;
      try {
        const {
          data: { items, records },
        } = await listStateLog(this.queryForm);
        this.items = items;
        this.total = records;
      } finally {
        this.listLoading = false;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.order-state-log-container {
  .el-table {
    .el-button.is-text {
      width: 36px;
    }
  }
}
</style>
