<template>
  <page-header-wrapper
    v-if="!loading"
    :tab-active-key="tabActiveKey"
    :tab-change="handleTabChange"
  >
    <!-- 订单详情 -->
    <template v-slot:content>
      <a-descriptions size="small">
        <a-descriptions-item label="注">请认真核对添加记录!   删除记录仅能删除今日新增记录！</a-descriptions-item>
      </a-descriptions>
    </template>
    <!-- <template v-slot:extra>
      <a-button type="primary" @click="addOperation"> <a-icon type="plus" />新增记录</a-button>
    </template> -->
    <div class="contentB">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-card :bordered="true" title="客户展示记录">
            <div v-if="list.length" class="demo-infinite-container">
              <a-list item-layout="horizontal" v-for="(item) in list" :key="item.log_id" :data-source="[item]">
                <a-list-item slot="renderItem" v-if="item.type.status == 'user'">
                  <a-list-item-meta>
                    <div slot="title">
                      <div>{{ `${item.description || '--'}` }}</div>
                      <div style="font-size:13px;color:#999;font-weight:normal;">{{ `${item.operate.name}( ${item.operate.type} )    ` }}{{ `        ${item.do_at}` }}</div>
                    </div>
                    <a-avatar
                      slot="avatar"
                      src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                    />
                  </a-list-item-meta>
                  <div class="delete" >
                    <a-popconfirm v-if="item.is_delete" title="是否确认删除该记录?" ok-text="确认" cancel-text="取消" @confirm="popoverAction(item)">
                      <a> <a-icon type="delete" :style="{ fontSize: '12px', color: '#1890ff', padding: '6px 2px 6px 0' }" />删除</a>
                    </a-popconfirm>
                  </div>
                </a-list-item>
              </a-list>
            </div>
            <a-result v-else status="404" title="抱歉！" sub-title="未查询到任何客户记录.." />
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card :bordered="true" title="系统展示记录">
            <div v-if="list.length" class="demo-infinite-container">
              <a-list item-layout="horizontal" v-for="(item) in list" :key="item.log_id" :data-source="[item]">
                <a-list-item slot="renderItem" v-if="item.type.status == 'system'">
                  <a-list-item-meta>
                    <div slot="title">
                      <div>{{ `${item.description || '--'}` }}</div>
                      <div style="font-size:13px;color:#999;font-weight:normal;">{{ `${item.operate.name}( ${item.operate.type} )    ` }}{{ `        ${item.do_at}` }}</div>
                    </div>
                    <a-avatar
                      slot="avatar"
                      src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                    />
                  </a-list-item-meta>
                  <div class="delete" >
                    <a-popconfirm v-if="item.is_delete" title="是否确认删除该记录?" ok-text="确认" cancel-text="取消" @confirm="popoverAction(item)">
                      <a> <a-icon type="delete" :style="{ fontSize: '12px', color: '#1890ff', padding: '6px 2px 6px 0' }" />删除</a>
                    </a-popconfirm>
                  </div>
                </a-list-item>
              </a-list>
            </div>
            <a-result v-else status="404" title="抱歉！" sub-title="未查询到任何系统记录.." />
          </a-card>
        </a-col>
      </a-row>
      <div style="height:10px;"></div>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-textarea placeholder="请输入客户展示记录" v-model="form.input1" :rows="4" />
          <a-button style="margin-top:10px;" type="primary" @click="addUserSystemLog('user')"> 新增客户记录</a-button>
        </a-col>
        <a-col :span="12">
          <a-textarea placeholder="请输入系统展示记录" v-model="form.input2" :rows="4" />
          <a-button style="margin-top:10px;" type="primary" @click="addUserSystemLog('system')"> 新增系统记录</a-button>
        </a-col>
      </a-row>
    </div>
  </page-header-wrapper>
</template>

<script>
import {
  doLogsList,
  delLog,
  doLogs
} from '@/api/order'
import { STable } from '@/components'
// import OperationAdd from '@/components/OrderDetailInfo/modules/OperationAdd.vue'

export default {
  name: 'Operation',
  components: {
    STable
  },
  data () {
    return {
      tabList: [
        { key: '', tab: '全部记录' },
        { key: 'system', tab: '系统展示记录' },
        { key: 'user', tab: '客户展示记录' }
      ],
      tabActiveKey: '',
      pageTitle: '全部记录',
      bankInfo: {},
      list: [],
      orderId: '',
      itemId: '',
      loading: true,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        input1: '',
        input2: ''
      }
    }
  },
  activated () {
    this.itemId = this.$route.params.itemId
    this.orderId = this.$route.params.orderId
    this.getInfo()
  },
  methods: {
    // 获取logs 信息
    getInfo () {
      doLogsList(this.orderId, { item_id: this.itemId, type: this.tabActiveKey }).then(
        res => {
          this.list = res
          this.loading = false
        }).catch(
        err => {
          this.$notification.error(err)
        }
      )
    },
    // 确认删除记录
    popoverAction (item) {
      delLog(this.orderId, item.log_id).then(
        res => {
          this.getInfo()
        }).catch(
        err => {
          this.$notification.error(err)
        }
      )
    },
    getDate () {
      var date = new Date() // 获取时间
      var year = date.getFullYear() // 获取年
      var month = date.getMonth() + 1 // 获取月
      var strDate = date.getDate() // 获取日
      var hour = date.getHours() // 获取小时
      var minute = date.getMinutes() // 获取分钟
      var second = date.getSeconds() // 获取秒
      return year + '-' + this.getNum(month) + '-' + this.getNum(strDate) + ' ' + hour + ':' + minute + ':' + second
    },
    getNum (i) {
      return i < 10 ? '0' + i : i
    },
    // 添加记录
    addUserSystemLog (type) {
      const order = {
        item_id: this.itemId,
        order: this.orderId,
        description: type === 'user' ? this.form.input1 : this.form.input2,
        do_at: this.getDate(),
        type: type
      }
      if (type === 'user' && this.form.input1 === '') {
        this.$notification.error({
          message: '提醒',
          description: '请添加记录内容！'
        })
        return
      }
      if (type === 'system' && this.form.input2 === '') {
        this.$notification.error({
          message: '提醒',
          description: '请添加记录内容！'
        })
        return
      }
      doLogs(this.orderId, order).then((res) => {
        this.$notification.success({
          message: '成功',
          description: '添加记录成功'
        })
        this.form.input1 = ''
        this.form.input2 = ''
        this.getInfo()
      }).catch((err) => {
        this.$notification.error({
          message: '失败',
          description: err.message
        })
      })
    },
    // 点击添加记录
    addOperation () {
      this.$notification.success({
        message: '成功',
        description: '请在底部增加记录'
      })
    },
    // 切换类型
    handleTabChange (key) {
      this.tabActiveKey = key
      this.getInfo()
      this.pageTitle = this.tabList.find((item) => item.key === key).tab
    }
  }
}
</script>

<style lang="less" scoped>
.status{
  font-size: 17px;
  font-weight: bold;
  padding-left: 6px;
}
.time{
  padding-left: 8px;
  color:#666;
}
.delete{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
  font-size: 10px;
}
.demo-infinite-container {
  border-radius: 4px;
  overflow: auto;
  height:50vh;

}
.demo-infinite-container::-webkit-scrollbar {
  display: none;
}
.contentB{
  min-height: 76vh;
  padding: 16px;
  background: white;
}
.input-title{
  .title{
    width: 120px;
    font-weight: bold;
  }
}
</style>
