<template>
  <a-drawer
    title="字典详情"
    placement="right"
    :width="isMobile ? screenWidth : screenWidth * 0.85"
    :visible="visible"
    @close="onClose"
  >
    <a-spin :spinning="loadDetails">
      <a-page-header
        :title="'字典名称：' + details.f_name"
      >
        <div class="row">
          <div class="content">
            <a-descriptions size="small" :column="isMobile ? 1 : 2">
              <a-descriptions-item label="字典编号">{{ details.id }}</a-descriptions-item>
              <a-descriptions-item label="字典键">{{ details.f_key }}</a-descriptions-item>
              <a-descriptions-item label="备注">{{ details.f_remark }}</a-descriptions-item>
              <a-descriptions-item label="创建时间">{{ format(details.f_input_date) }}</a-descriptions-item>
            </a-descriptions>
          </div>
          <div class="extra">
            <a-row class="status-list">
              <a-col :xs="12" :sm="24">
              </a-col>
            </a-row>
          </div>
        </div>
        <!-- actions -->
        <template #extra>
          <a-button-group style="margin-right: 4px;">
            <a-button type="dashed" @click="initView" :loading="loadDetails">刷新</a-button>
          </a-button-group>
        </template>
        <template slot="footer">
          <a-tabs :default-active-key="tabActiveKey" :activeKey="tabActiveKey" @change="handleTabChange" style="margin-bottom: 23px;">
            <template v-for="value in tabList">
              <a-tab-pane :key="value.key" :tab="value.tab"/>
            </template>
          </a-tabs>
          <div v-if="!loadDetails">
            <template v-if="tabActiveKey === '1'">
              <x-form-table
                title="字典数据配置"
                :fixed-add-form="fixedAddForm"
                :fixed-query-form="fixedQueryForm"
                serviceName="af-system"
                queryParamsName="crud_dictionary_value_manage"
                @afterSubmit="afterSubmit"
              >
              </x-form-table>
            </template>
          </div>
        </template>
      </a-page-header>
    </a-spin>
  </a-drawer>
</template>

<script>
import { DictionaryDetailsViewApi, post } from '@vue2-client/services/api'
import { mapState } from 'vuex'
import { formatDate } from '@vue2-client/utils/util'
import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'

export default {
  name: 'DictionaryDetailsView',
  components: {
    XFormTable
  },
  data () {
    return {
      // 页面宽度
      screenWidth: document.documentElement.clientWidth,
      // Tab页签
      tabActiveKey: '1',
      // 字典详情
      details: {
        id: 0,
        f_name: '',
        f_key: '',
        f_remark: '',
        f_input_date: '',
        f_state: 0
      },
      tabList: [
        { key: '1', tab: '字典数据' }
      ],
      // 固定新增数据
      fixedAddForm: {},
      // 固定查询数据
      fixedQueryForm: {},
      // 详情加载
      loadDetails: true
    }
  },
  mounted () {
    this.initView()
  },
  computed: {
    ...mapState('account', { currUser: 'user' }),
    ...mapState('setting', ['isMobile'])
  },
  props: {
    id: {
      type: String,
      required: true
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 初始化组件
    initView () {
      this.tabActiveKey = '1'
      this.fixedQueryForm.v_f_dictionary_id = this.id
      this.fixedAddForm.v_f_dictionary_id = this.id
      this.getDetails(this.id)
    },
    onClose () {
      this.$emit('update:visible', false)
    },
    // 获取详情信息
    getDetails (userId) {
      this.loadDetails = true
      return post(DictionaryDetailsViewApi.getDictionaryDetails, {
        id: userId
      })
        .then(res => {
          this.details = res
          this.loadDetails = false
        }, err => {
          this.loadDetails = false
          console.error(err)
        })
    },
    // Tab切换
    handleTabChange (key) {
      this.tabActiveKey = key
    },
    // 日期格式化
    format (date, format) {
      return formatDate(date, format)
    },
    afterSubmit () {
      this.$appdata.load()
    }
  },
  watch: {
    'visible' (val) {
      if (val) {
        this.initView()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.business {
  color: #ffffff;
}
.business:enabled:hover {
  background-color: #85CE61 !important;
  border-color: #85CE61 !important;
}
.business:enabled {
  background-color: #67c23a;
  border-color: #67c23a;
}
.business:disabled {
  color: rgba(0, 0, 0, 0.25);
}
.detail-layout {
  margin-left: 44px;
}
.text {
  color: rgba(0, 0, 0, .45);
}

.heading {
  color: rgba(0, 0, 0, .85);
  font-size: 20px;
}

.no-data {
  color: rgba(0, 0, 0, .25);
  text-align: center;
  line-height: 64px;
  font-size: 16px;

  i {
    font-size: 24px;
    margin-right: 16px;
    position: relative;
    top: 3px;
  }
}

.mobile {
  .detail-layout {
    margin-left: unset;
  }
  .text {

  }
  .status-list {
    text-align: left;
  }
}

.row {
  display: flex;

  .content {
    -webkit-box-flex: 1;
    flex: auto;
    -ms-flex: auto;
  }

  .extra {
    flex: 0 1 auto;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    min-width: 242px;
    margin-left: 88px;
    text-align: right;
  }
}
</style>
