<template>
  <a-collapse
    v-model="activeKey"
    expand-icon-position="right"
    class="collapse-header-divide"
  >
    <a-collapse-panel key="a" :header="$t('TRANSFER_INFO')">
      <div
        v-for="(item, index) in transferList"
        :key="index"
        class="flex flex-col transfer-box"
      >
        <div class="flex">
          <a-descriptions class="pt-2">
            <!--状态-->
            <a-descriptions-item :label="`${$t('STATUS')}`">{{
              item.statusName || "--"
            }}</a-descriptions-item>
            <!--转单人员-->
            <a-descriptions-item :label="`${$t('TRANSFER_ORDER_PERSONNEL')}`">{{
              item.fromUserRealName || "--"
            }}</a-descriptions-item>
            <!--转单时间-->
            <a-descriptions-item :label="`${$t('TRANSFER_TIME')}`">{{
              item.updateTime || "--"
            }}</a-descriptions-item>
            <!--接单人员-->
            <a-descriptions-item :label="`${$t('ORDER_RECEIVE_PERSONNEL')}`">{{
              item.toUserRealName || "--"
            }}</a-descriptions-item>
            <!--转移原因-->
            <a-descriptions-item :label="`${$t('TRANSFER_ORDER_REASON')}`">{{
              item.transferReason || "--"
            }}</a-descriptions-item>
            <!--备注-->
            <a-descriptions-item :label="`${$t('REMARK')}`">{{
              item.remark || "--"
            }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </a-collapse-panel>
  </a-collapse>
</template>
<script>
import { mapState } from "vuex";
import ApiConstant from "@/api/ApiConstant";

export default {
  props: {
    transferList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      activeKey: "a",
    };
  },
};
</script>
<style scoped lang="less">
.transfer-box {
  background: #f5f7fa;
  border-radius: 6px;
  padding: 0 24px;
  position: relative;
  margin-bottom: 15px;
}
</style>
