<template>
  <div id="business-log">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="(item, i) in menuData" :key="i" :to="{ path: item.path }">{{ item.name }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="商户日志" name="first">
          <header>
            <el-button type="primary" @click="openDialog(false)">新建记录</el-button>
          </header>
          <el-table
            :data="tableData1"
            tooltip-effect="dark"
            style="width: 100%">
            <el-table-column
              label="记录标题"
              show-overflow-tooltip>
              <template slot-scope="{row}">
                {{ row.title }}
              </template>
            </el-table-column>
            <el-table-column
              label="创建时间"
              show-overflow-tooltip>
              <template slot-scope="{row}">
                {{ row.createTime | formatDate('ymd') }}<br>{{ row.createTime | formatDate('hms') }}
              </template>
            </el-table-column>
            <el-table-column
              label="更新时间"
              show-overflow-tooltip>
              <template slot-scope="{row}">
                {{ row.updateTime | formatDate('ymd') }}<br>{{ row.updateTime | formatDate('hms') }}
              </template>
            </el-table-column>
            <el-table-column
              label="创建人"
              show-overflow-tooltip>
              <template slot-scope="{row}">
                {{ row.creater || '--' }}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="200">
              <template slot-scope="{row}">
                <el-button
                  @click.native.prevent="openDialog(true, row.id)"
                  type="text">
                  编辑
                </el-button>
                <el-button
                  @click.native.prevent="$router.push({ path: '/business-log', query: { id: row.enterpriseId } })"
                  type="text">
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="接口清单" name="second">配置管理</el-tab-pane>
      </el-tabs>
    </div>
    
    <el-dialog
      :title="isEdit ? '编辑记录' : '新建记录'"
      :visible.sync="argDialog"
      width="600px"
      @closed="closedDialog">
      <el-form label-width="80px" ref="formLog" :model="formLog" :rules="rules">
        <el-form-item label="记录标题" prop="title">
          <el-input v-model="formLog.title" placeholder="请输入记录标题" style="width: 406px;" maxlength="20" :disabled="isEdit"></el-input>
        </el-form-item>
        <el-form-item label="交接人" prop="heir">
          <el-input v-model="formLog.heir" placeholder="请输入交接人" style="width: 406px;"></el-input>
        </el-form-item>
        <el-form-item label="交接对象" prop="obj">
          <el-input v-model="formLog.obj" placeholder="请输入交接对象" style="width: 406px;"></el-input>
        </el-form-item>
        <el-form-item label="详情说明" prop="detail">
          <el-input type="textarea" v-model="formLog.detail" placeholder="请输入详情说明" style="width: 406px;" :rows="4"></el-input>
        </el-form-item>
        <el-form-item label="附件地址" prop="address">
          <div v-for="(item, index) in formLog.address" :key="index" style="margin-bottom:10px">
            <el-input v-model="formLog.address[index]" placeholder="请输入附件地址" style="width: 406px;"></el-input>
            <i class="el-icon-minus" style="margin-left:10px;cursor:pointer" @click="formLog.address.splice(index, 1)" v-if="formLog.address.length > 1"></i>
            <i class="el-icon-plus" style="margin-left:10px;cursor:pointer" @click="formLog.address.push('')"></i>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="argDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmArg">{{ isEdit ? '保存' : '确认新建' }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getRequest, postJson } from '@/api/api';
let origin = window.location.origin.indexOf('gicdev.demogic.com') != -1 ? 'https://www.gicdev.com' : window.location.origin;

export default {
  name: 'business-log',
  data() {
    return {
      menuData: [
        {
          name: '客户资料',
          path: '/business-list'
        },
        {
          name: '商户日志',
          // path: '/api-retry'
        },
      ],
      activeName: 'first',
      search: {
        status: '',
        input: ''
      },
      tableData1: [],
      enterpriseId: undefined,
      argDialog: false,
      logId: undefined,
      isEdit: false,
      formLog: {
        title: '',
        heir: '',
        obj: '',
        detail: '',
        address: [''],
      },
      rules: {
        title: [{ required: true, message: '记录标题不能为空', trigger: 'blur' }],
        detail: [{ required: true, message: '详情说明不能为空', trigger: 'blur' }],
      }
    }
  },
  created() {
    this.enterpriseId = this.$route.query.enterpriseId || '1af58390681811e69d0818c58a146fd2';
    this.getList();
    this.$emit('showTab', 'platform_business_list');
  },
  methods: {
    getList() {
      let params = {
        eid: this.enterpriseId
      }
      getRequest('/gic-platform-operation/enterpriseLog/getList', params).then(res => {
        if(res.data.code == 0) {
          this.tableData1 = res.data.result || [];
        }
      })
    },
    openDialog(bool, id) {
      this.argDialog = true;
      this.isEdit = bool;
      bool && getRequest('/gic-platform-operation/enterpriseLog/getOne', {id}).then(res => {
        if(res.data.code == 0) {
          this.logId = id;
          let result = res.data.result || {};
          let enterpriseLogDTO = result.enterpriseLogDTO || {};
          let enclosureUrlList = result.enclosureUrlList || [''];
          this.formLog = {
            ...this.formLog,
            title: enterpriseLogDTO.title || '',
            heir: enterpriseLogDTO.fromHandover || '',
            obj: enterpriseLogDTO.toHandover || '',
            detail: enterpriseLogDTO.explains || '',
            address: enclosureUrlList.length > 0 ? enclosureUrlList : [''],
          }
        }
      })
    },
    closedDialog() {
      this.$refs.formLog.resetFields();
    },
    confirmArg() {
      this.$refs.formLog.validate(valid => {
        if(valid) {
          const { title, heir, obj, detail, address } = this.formLog;
          let params = {
            enterpriseLogDTO: {
              toHandover: obj,
              fromHandover: heir,
              explains: detail,
              title
            },
            enclosureUrlList: address
          }
          if(this.isEdit) {
            params.enterpriseLogDTO.id = this.logId;
            this.axios.post(`${origin}/gic-platform-operation/enterpriseLog/update`, params).then(res => {
              if(res.data.code == 0) {
                this.argDialog = false;
                this.$message.success('保存成功');
              }
            })
          } else {
            this.axios.post(`${origin}/gic-platform-operation/enterpriseLog/save`, params).then(res => {
              if(res.data.code == 0) {
                this.argDialog = false;
                this.$message.success('新建成功');
              }
            })
          }
        }
      })
    }
  },
  filters: {
    formatDate(val, format) {
      if(!val) return '--';
      val = new Date(val);
      let y = val.getFullYear();
      let m = (val.getMonth() + 1).toString().padStart(2, '0');
      let d = val.getDate().toString().padStart(2, '0');
      let h = val.getHours().toString().padStart(2, '0');
      let mm = val.getMinutes().toString().padStart(2, '0');
      let s = val.getSeconds().toString().padStart(2, '0');
      if(format == 'ymd') {
        return `${y}-${m}-${d}`;
      } else if(format == 'hms') {
        return `${h}:${mm}:${s}`;
      }
      return `${y}-${m}-${d}\xa0\xa0\xa0${h}:${mm}:${s}`
    }
  }
}
</script>
<style lang="scss" scoped>
#business-log {
  .el-breadcrumb {
    padding: 20px;
    border-bottom: 1px solid #DCDFE6;
  }
  .content {
    padding: 20px;
  }
  background-color: #fff;
  header {
    text-align: right;
    margin-bottom: 20px;
  }
}
.el-pagination {
  text-align: right;
  margin-top: 20px;
}
</style>