<template>
  <div class="page">
    <div class="header">
      <h1><i class="el-icon-tickets" />数据对账列表</h1>
      <p>查看所有企业信用数据迁移对账记录及状态</p>
    </div>
    <div class="search-head">
      <div class="title">
        筛选条件
      </div>
      <el-button v-if="false" type="text" icon="el-icon-search" @click="isExpand = !isExpand">
        {{ isExpand?'简化搜索' : '高级搜索' }}
      </el-button>
    </div>
    <edit-table
      ref="editTable"
      v-model="tableData"
      style="width: 100%"
      :fields="fields"
      :table-prop="tableProp"
      :search-form-prop="formProp"
      :show-search-form="true"
      :search-loader="searchLoader"
      @update:selected="(val)=>{
        selected = val
      }"
    >
      <template #table-top>
        <div class="table-top">
          <div class="statistics">
            <div class="stat-item">
              <div class="stat-value">{{ statistics.total }}</div>
              <div class="stat-label">总记录数</div>
            </div>
            <div class="stat-item">
              <div class="stat-value" style="color: #67c23a">{{ statistics.consistent }}</div>
              <div class="stat-label">数据一致</div>
            </div>
            <div class="stat-item">
              <div class="stat-value" style="color: #f56c6c">{{ statistics.inconsistent }}</div>
              <div class="stat-label">数据不一致</div>
            </div>
          </div>
          <div class="last-updated">
            最后更新: {{ lastUpdated }}
          </div>
        </div>
        <div class="search-head">
          <div class="title">
            对账记录列表
          </div>
          <el-button
            type="text"
            icon="el-icon-refresh"
            @click="()=>{
              $refs.editTable.search()
            }"
          >
            刷新
          </el-button>
        </div>
      </template>
      <template #reconciliationStatus="scope">
        <div class="status-badge">
          <span
            class="status-dot"
            :class="`status-${scope.row.isyn}`"
          />
          <span>{{ scope.formatter(scope.row[scope.field.prop]) }}</span>
        </div>
      </template>
    </edit-table>
  </div>
</template>

<script>
import { fileUploadRecords, manualMoveOutDownloadDataRecord, manualMoveOutSingle, manualMoveOutSingleMoveIn } from '@/api/信用数据迁移'
export default {
  data() {
    return {
      console,
      isExpand: false,
      statistics: {
        total: 0,
        consistent: 0,
        inconsistent: 0,
        processing: 0
      },
      lastUpdated: '',
      tableData: [],
      selected: [],
      tableProp: {
        emitLoadOnCreate: true,
        tableConfig: {
          handlerWidth: 150,
          selection: false,
          tableProps: {
          }
        },
        buttons: [
          {
            label: '迁入',
            type: 'text',
            loading: false,
            show: (scope, tableScope) => {
              return tableScope.row.migrationType === 2
            },
            handler: (scope, { row }) => {
              return manualMoveOutSingleMoveIn({
                pripid: row.pripid
              }).then((res) => {
                if (res.code === 0) {
                  this.$message.success('迁入成功')
                  this.$refs.editTable.search()
                }
              })
            }
          },
          {
            label: '迁出',
            type: 'text',
            loading: false,
            show: (scope, tableScope) => {
              return tableScope.row.migrationType === 1
            },
            handler: (scope, { row }) => {
              return manualMoveOutSingle({
                pripid: row.pripid
              }).then((res) => {
                if (res.code === 0) {
                  this.$message.success('迁出成功')
                  this.$refs.editTable.search()
                }
              })
            }
          },
          {
            label: '对账详细',
            type: 'text',
            loading: false,
            handler: (scope, { row }) => {
              return manualMoveOutDownloadDataRecord({
                type: row.migrationType,
                moveid: row.id
              }).then((res) => {
                if (res.code === 0) {
                  this.$easyDialog({
                    dialog: {
                      title: '对账详细',
                      class: 'detailDigo'
                    },
                    component: {
                      is: 'easy-table',
                      fields: [
                        {
                          prop: 'uniscid',
                          label: '统一社会信用代码'
                        },
                        {
                          prop: 'entname',
                          label: '企业名称'
                        },
                        {
                          prop: 'moveInProvince',
                          label: '迁入省份'
                        },
                        {
                          prop: 'moveOutProvince',
                          label: '迁出省份'
                        }
                      ],
                      tableConfig: {
                        handlerAutoColWidth: 20,
                        tableProps: {
                          headerCellStyle: { background: '#f0f2f5!important', color: '#333333!important', padding: '0px' },
                          headerRowStyle: { height: '40px' },
                          rowStyle: { height: '64px' },
                          cellStyle: { padding: '16px 0', color: '#333!important' },
                          stripe: true
                        }
                      },
                      value: JSON.parse(res.data).data
                    }
                  })
                }
              })
            }
          }
        ]
      },
      formProp: {
        formConfig: {
          labelPosition: 'left',
          labelWidth: '100px'
        }
      },
      fields: [
        {
          prop: 'migrationType',
          label: '迁移类型',
          type: 'select',
          tableProps: {
            width: 200,
            fixed: 'left'
          },
          showInTable: true,
          showInForm: (scope) => {
            return !scope.meta.isSearchForm
          },
          tableSort: 0,
          span: 8,
          options: [
            {
              label: '迁入',
              value: 2
            },
            {
              label: '迁出',
              value: 1
            }
          ]
        },
        {
          prop: 'uniscid',
          label: '统一社会信用代码',
          type: 'input',
          tableProps: {
            width: 200
          },
          showInTable: true,
          showInForm: true,
          tableSort: 1,
          span: 8
        },
        {
          prop: 'entname',
          label: '企业名称',
          type: 'input',
          tableProps: {
            minWidth: 200
          },
          showInTable: true,
          showInForm: true,
          tableSort: 2,
          span: 8
        },
        {
          prop: 'prOut',
          label: '迁出省份',
          tableProps: {
            width: 150
          },
          showInTable: true,
          showInForm: () => {
            return this.isExpand
          },
          tableSort: 3,
          type: 'cascader',
          span: 8,
          options: () => {
            return this.provinces
          }
        },
        {
          prop: 'prIn',
          label: '迁入省份',
          tableProps: {
            width: 150
          },
          showInTable: true,
          showInForm: () => {
            return this.isExpand
          },
          tableSort: 4,
          type: 'cascader',
          span: 8,
          options: () => {
            return this.provinces
          }
        },
        {
          prop: 'createTime',
          label: '创建时间',
          type: 'date-picker',
          tableProps: {
            width: 180,
            sortable: true
          },
          showInTable: true,
          showInForm: false,
          tableSort: 5,
          span: 8
        },
        {
          prop: 'updateTime',
          label: '更新时间',
          type: 'date-picker',
          tableProps: {
            width: 180,
            sortable: true
          },
          showInTable: true,
          showInForm: false,
          tableSort: 6,
          span: 8
        },
        {
          prop: 'isyn',
          label: '数据一致性',
          tableProps: {
            width: 120,
            align: 'center'
          },
          showInTable: true,
          showInForm: () => {
            return this.isExpand
          },
          tableSort: 7,
          type: (scope) => {
            return scope.meta.isTable ? 'slot' : 'select'
          },
          options: [
            {
              label: '成功',
              value: 'Y'
            },
            {
              label: '失败',
              value: 'N'
            }
          ],
          slotName: 'reconciliationStatus',
          span: 8
        },
        {
          type: 'buttons',
          showInTable: false,
          showInForm: (scope) => {
            return !!scope.meta.isSearchForm
          },
          hiddenLabel: true,
          label: '搜索操作',
          prop: '搜索操作',
          span: 24,
          formItemProp: {
            labelWidth: '0px'
          },
          buttons: [
            {
              label: '查询',
              type: 'primary',
              icon: 'el-icon-search',
              handler: (scope) => {
                const { meta } = scope
                const { _editTable } = meta
                const { editTableInstance } = _editTable
                editTableInstance.search()
              }
            },
            {
              label: '重置',
              type: 'default',
              leftIcon: 'el-icon-refresh',
              handler: (scope) => {
                const { meta } = scope
                const { _editTable } = meta
                const { editTableInstance } = _editTable
                editTableInstance.search({
                  reset: true
                })
              }
            },
            {
              label: '导出数据',
              type: 'success',
              leftIcon: 'el-icon-download',
              handler: (scope) => {
                const { meta } = scope
                const { _editTable } = meta
                const { editTableInstance } = _editTable
                editTableInstance.search({
                  reset: true
                })
              }
            }
          ]
        }
      ],
      provinces: [
        { value: '110000', label: '北京市' },
        { value: '120000', label: '天津市' },
        { value: '130000', label: '河北省' },
        { value: '140000', label: '山西省' },
        { value: '150000', label: '内蒙古自治区' },
        { value: '210000', label: '辽宁省' },
        { value: '220000', label: '吉林省' },
        { value: '230000', label: '黑龙江省' },
        { value: '310000', label: '上海市' },
        { value: '320000', label: '江苏省' },
        { value: '330000', label: '浙江省' },
        { value: '340000', label: '安徽省' },
        { value: '350000', label: '福建省' },
        { value: '360000', label: '江西省' },
        { value: '370000', label: '山东省' },
        { value: '410000', label: '河南省' },
        { value: '420000', label: '湖北省' },
        { value: '430000', label: '湖南省' },
        { value: '440000', label: '广东省' },
        { value: '450000', label: '广西壮族自治区' },
        { value: '460000', label: '海南省' },
        { value: '500000', label: '重庆市' },
        { value: '510000', label: '四川省' },
        { value: '520000', label: '贵州省' },
        { value: '530000', label: '云南省' },
        { value: '540000', label: '西藏自治区' },
        { value: '610000', label: '陕西省' },
        { value: '620000', label: '甘肃省' },
        { value: '630000', label: '青海省' },
        { value: '640000', label: '宁夏回族自治区' },
        { value: '650000', label: '新疆维吾尔自治区' }
      ]
    }
  },
  methods: {
    searchLoader(pageParam, searchParam) {
      return fileUploadRecords(searchParam).then((res) => {
        this.statistics.consistent = res.data.filter((item) => {
          return item.isyn === 'Y'
        }).length
        this.statistics.inconsistent = res.data.filter((item) => {
          return item.isyn === 'N'
        }).length
        this.statistics.total = res.data.length
        this.lastUpdated = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
        return {
          tableData: res.data
        }
      })
    },
    exportData() {

    }
  }
}
</script>

<style lang="scss" scoped>
.page{
  min-height: 100vh;
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
  .header{
    background: linear-gradient(135deg, #409EFF 0%, #337ecc 100%);
    color: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    h1 {
      font-size: 24px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      i {
        margin-right: 10px;
      }
      p {
        opacity: 0.9;
        font-size: 14px;
      }
    }
  }
  .search-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid #EBEEF5;
    background: #ffffff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    .title{
      color: #303133;
    }
  }
  .edit-table{
    ::v-deep(){
      .edit-table-search{
        background: #ffffff;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        padding: 20px;
        .easy-form-item-buttons{
          display: flex;
          justify-content: flex-end;
        }
      }
      .easy-table{
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      }
    }
    .table-top{
      .statistics {
        display: flex;
        justify-content: space-around;
        margin: 20px 0;
        padding: 15px;
        background-color: #f9f9f9;
        border-radius: 4px;
        .stat-item {
          text-align: center;
        }
        .stat-value {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 5px;
        }
        .stat-label {
          font-size: 14px;
          color: #909399;
        }
      }
      .last-updated {
        text-align: right;
        font-size: 12px;
        color: #909399;
        margin-bottom: 10px;
      }
    }

    .status-badge {
      display: inline-flex;
      align-items: center;
      .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 6px;
        &.status-Y {
          background-color: #67c23a;
        }
        &.status-N {
          background-color: #f56c6c;
        }
      }
    }
  }
}
</style>
