<template>
  <div class="app-warp">
    <div class="app-structure">
      <el-page-header content="变更记录" @back="goBack"/>
      <div class="app-container">
        <el-table
          v-loading="listLoading"
          ref="multipleTable"
          :data="varList"
          :header-cell-style="{
            'font-weight': 'bold',
            'color': '#000'
          }"
          tooltip-effect="dark"
          border
          fit
          highlight-current-row>
          <el-table-column type="index" label="序号" width="50" align="center"/>
          <el-table-column show-overflow-tooltip prop="OPERATOR_NAME" label="变更时间"/>
          <el-table-column show-overflow-tooltip prop="OPERATTIME" label="变更操作人"/>
          <el-table-column label="操作" align="center" width="80">
            <template slot-scope="{row}">
              <el-button type="text" @click="fnView(row.ENTERPRISE_LOG_ID)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-btn-group">
          <div>
            <el-button icon="el-icon-arrow-left" @click="goBack">返回</el-button>
          </div>
          <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList"/>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialog.visible" title="变更记录">
      <table>
        <tr>
          <th/>
          <th>变更前</th>
          <th>变更后</th>
        </tr>
        <tr>
          <td>企业名称</td>
          <td>{{ dialog.oldInfo.NAME }}</td>
          <td>{{ dialog.newInfo.NAME }}</td>
        </tr>
        <tr>
          <td>统一社会信用代码</td>
          <td>{{ dialog.oldInfo.NUMBER }}</td>
          <td>{{ dialog.newInfo.NUMBER }}</td>
        </tr>
        <tr>
          <td>属地</td>
          <td>{{ dialog.oldInfo.dependency }}</td>
          <td>{{ dialog.newInfo.dependency }}</td>
        </tr>
        <tr>
          <td>行业类型</td>
          <td>{{ dialog.oldInfo.INDUSTRY_ALL_NAME }}</td>
          <td>{{ dialog.newInfo.INDUSTRY_ALL_NAME }}</td>
        </tr>
        <tr>
          <td>服务机构</td>
          <td>{{ dialog.oldInfo.SERVICES_NAME }}</td>
          <td>{{ dialog.newInfo.SERVICES_NAME }}</td>
        </tr>
        <tr>
          <td>服务有限期</td>
          <td>{{ dialog.oldInfo.DEADLINE_START + '至' + dialog.oldInfo.DEADLINE_END }}</td>
          <td>{{ dialog.newInfo.DEADLINE_START + '至' + dialog.newInfo.DEADLINE_END }}</td>
        </tr>
        <tr>
          <td>企事业单位经营地址</td>
          <td>{{ dialog.oldInfo.ADDRESS }}</td>
          <td>{{ dialog.newInfo.ADDRESS }}</td>
        </tr>
        <tr>
          <td>经度/纬度</td>
          <td>{{ dialog.oldInfo.LATITUDE + '-' + dialog.oldInfo.LONGITUDE }}</td>
          <td>{{ dialog.newInfo.LATITUDE + '-' + dialog.newInfo.LONGITUDE }}</td>
        </tr>
        <tr>
          <td>主要负责人</td>
          <td>{{ dialog.oldInfo.COMMANDER }}</td>
          <td>{{ dialog.newInfo.COMMANDER }}</td>
        </tr>
        <tr>
          <td>主要负责人电话</td>
          <td>{{ dialog.oldInfo.COMMANDER_PHONE }}</td>
          <td>{{ dialog.newInfo.COMMANDER_PHONE }}</td>
        </tr>
        <tr>
          <td>法人</td>
          <td>{{ dialog.oldInfo.JURIDICAL }}</td>
          <td>{{ dialog.newInfo.JURIDICAL }}</td>
        </tr>
        <tr>
          <td>法人手机号</td>
          <td>{{ dialog.oldInfo.JURIDICAL_PHONE }}</td>
          <td>{{ dialog.newInfo.JURIDICAL_PHONE }}</td>
        </tr>
        <tr>
          <td>职工人数(人)</td>
          <td>{{ dialog.oldInfo.EMPLOYEES_NUMBER }}</td>
          <td>{{ dialog.newInfo.EMPLOYEES_NUMBER }}</td>
        </tr>
        <tr>
          <td>成立时间</td>
          <td>{{ dialog.oldInfo.ESTABLISHMENT_TIME }}</td>
          <td>{{ dialog.newInfo.ESTABLISHMENT_TIME }}</td>
        </tr>
        <tr>
          <td>证件照片</td>
          <td>
            <img v-viewer :src="config.fileUrl + dialog.oldInfo.BUSINESS_LICENSE" width="150" height="100" alt="">
          </td>
          <td>
            <img v-viewer :src="config.fileUrl + dialog.newInfo.BUSINESS_LICENSE" width="150" height="100" alt="">
          </td>
        </tr>
      </table>
      <div slot="footer">
        <el-button @click="dialog.visible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive

export default {
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      config,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      },
      total: 0,
      varList: [],
      dialog: {
        visible: false,
        newInfo: {},
        oldInfo: {}
      }
    }
  },
  inject: ['setActiveName', 'parentObj'],
  created() {
    this.listLoading = false
    this.getList()
  },
  methods: {
    getQuery() {
      this.getList()
    },
    getList() {
      requestFN(`/enterprises/getLogs?showCount=${this.listQuery.limit}&currentPage=${this.listQuery.page}`, {
        ENTERPRISE_ID: this.parentObj.ENTERPRISE_ID
      }).then(data => {
        this.varList = data.list
        this.total = data.page.totalResult
        this.listLoading = false
      })
    },
    fnView(ENTERPRISE_LOG_ID) {
      requestFN('/enterprises/getLogInfo', {
        ENTERPRISE_LOG_ID
      }).then(data => {
        this.dialog.newInfo = data.new
        this.dialog.oldInfo = data.old
        this.dialog.visible = true
      })
    },
    goBack() {
      this.setActiveName('List')
    }
  }
}

</script>
<style scoped lang="scss">
table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;

  th, td {
    background-color: #f9f9f9;
    padding: 0.9rem 0.8rem;
    font-size: 14px;
    line-height: 1.6;
    border: 1px solid #eaeaea;

    &:nth-child(2),&:nth-child(3) {
      background-color: #fff;
      color: #000;
    }
  }
}
</style>
