<template>
  <div class="baggageStory">
    <div class="table">
      <el-table height="400" :data="storyTable" border style="width: 100%">
        <el-table-column prop="luggageDescribe" label="行李服务记录">
        </el-table-column>
        <el-table-column prop="createtime" label="行李创建时间">
        </el-table-column>
      </el-table>
    </div>
    <div class="content t30">
      <el-form ref="form" :model="form" label-width="70px">
        <el-form-item label="输入备注">
          <el-input type="textarea" clearable v-model="form.desc"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="right t30">
      <el-button size="medium" class="r24" type="primary" @click="onStoryCheck">确定</el-button>
      <el-button size="medium" @click="storyFlag = false">取消</el-button>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import { getToken } from '@/utils/auth'
import { Query, newData } from '@/api/webApi'
export default {
  name: 'BaggageStory',
  props: {
    bagID: {
      type: Number || String,
      default: 0
    }
  },
  data () {
    return {
      storyFlag: false,
      storyTable: [],
      form: {
        desc: ''
      },
      storyId: ''
    }
  },
  mounted () {
    this.storyId = this.bagID || ''
    if (this.storyId) {
      this.queryStoryCheck()
    }
  },
  methods: {
    async onStoryCheck () {
      if (!this.storyId) return
      const params = {
        serviceId: SERVICE_ID.advancedStoryId,
        dataContent: {
          luggageID: this.storyId,
          luggageDescribe: this.form.desc,
          user_id: getToken('userid')
        },
        event: '1'
      }
      const { code } = await newData(params)
      if (code == 0) {
        const item = {
          luggageDescribe: this.form.desc,
          createtime: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
        }
        this.storyTable.push(item)
        this.$message.success('操作成功')
        this.form.desc = ''
      }
      else this.$message.success('操作失败')
    },
    async queryStoryCheck () {
      this.storyTable = []
      const params = {
        serviceId: SERVICE_ID.advancedStoryId,
        dataContent: {
          luggageID: this.storyId,
        },
        event: '0'
      }
      const { code, returnData } = await Query(params)
      if (code == 0 && returnData?.length) {
        const ndatas = [...returnData]
        ndatas.forEach(item => item.createtime = parseTime(item.createtime.replace('T', ' '), '{y}-{m}-{d} {h}:{i}:{s}'))
        this.storyTable = ndatas
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.baggageStory {
  padding: 20px;
}
</style>