<template>
  <a-drawer title="字典列表" :width="screenWidth" @close="onClose" :visible="visible">
    <!-- 抽屉内容的border -->
    <div
      :style="{
        padding: '10px',
        border: '1px solid #e9e9e9',
        background: '#fff'
      }"
    >
      <div class="table-page-search-wrapper">
        <a-form layout="inline" :form="form" @keyup.enter.native="searchQuery">
          <a-row :gutter="10">
            <a-col :md="8" :sm="12">
              <a-form-item label="名称">
                <a-input style="width: 120px" placeholder="请输入名称" v-model="queryParams.itemText"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="9" :sm="24">
              <a-form-item label="状态" style="width: 170px" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select placeholder="请选择" v-model="queryParams.status">
                  <a-select-option value="1">正常</a-select-option>
                  <a-select-option value="0">禁用</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="7" :sm="24">
              <span style="float: left" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery">搜索</a-button>
                <a-button type="primary" @click="resetQuery" style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
          <a-row>
            <a-col :md="2" :sm="24">
              <a-button
                v-if="isDisabledAuth('dict:addChild')"
                style="margin-bottom: 10px"
                type="primary"
                @click="handleAdd"
                >新增
              </a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div>
        <a-table
          ref="table"
          rowKey="id"
          size="small"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="pagination"
          :loading="tableLoading"
          @change="handlePaginationChange"
        >
          <span slot="action" slot-scope="text, record">
            <a v-if="isDisabledAuth('dict:editChild')" class="mr5" @click="handleEdit(record)">
              <a-icon type="edit" /> 编辑
            </a>
            <a-divider type="vertical" />
            <a-popconfirm
              v-if="isDisabledAuth('dict:delChild')"
              class="mr5"
              placement="left"
              title="确定删除吗?"
              @confirm="() => handleDelete(record.id)"
            >
              <a style="color: #f5222d"><a-icon type="delete" /> 删除</a>
            </a-popconfirm>
          </span>
        </a-table>
      </div>
    </div>

    <DictItemModal ref="modalForm" @ok="handleOk"></DictItemModal>
  </a-drawer>
</template>

<script>
import { pick } from 'lodash'
import DictItemModal from './DictItemModal'
import { PageListMixin } from '@/mixins/PageListMixin'

export default {
  name: 'DictItemListDrawer',
  components: { DictItemModal },
  mixins: [PageListMixin],
  data() {
    return {
      queryParams: {},
      columns: Object.freeze([
        {
          title: '名称',
          align: 'center',
          dataIndex: 'itemText'
        },
        {
          title: '数据值',
          align: 'center',
          dataIndex: 'itemValue'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ]),
      title: '操作',
      visible: false,
      screenWidth: 800,
      model: {},
      dictId: '',
      status: 1,
      labelCol: {
        xs: { span: 5 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 12 },
        sm: { span: 12 }
      },
      form: this.$form.createForm(this),
      validatorRules: {
        itemText: { rules: [{ required: true, message: '请输入名称!' }] },
        itemValue: { rules: [{ required: true, message: '请输入数据值!' }] }
      },
      interface: {
        list: '/sys/dictItem/list',
        delete: '/sys/dictItem/delete',
        deleteBatch: '/sys/dictItem/deleteBatch'
      }
    }
  },
  created() {
    // 当页面初始化时,根据屏幕大小来给抽屉设置宽度
    this.resetScreenSize()
  },
  methods: {
    add(dictId) {
      this.dictId = dictId
      this.edit({})
    },
    edit(record) {
      if (record.id) {
        this.dictId = record.id
      }
      this.queryParams = {}
      this.queryParams.dictId = record.id
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.model.dictId = this.dictId
      this.model.status = this.status
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'itemText', 'itemValue'))
      })
      // 当其它模块调用该模块时,调用此方法加载字典数据
      this.loadData()
    },

    // 添加字典数据
    handleAdd() {
      this.$refs.modalForm.add(this.dictId)
      this.$refs.modalForm.title = '新增'
    },
    showDrawer() {
      this.visible = true
    },
    onClose() {
      this.visible = false
      this.form.resetFields()
      this.dataSource = []
    },
    // 抽屉的宽度随着屏幕大小来改变
    resetScreenSize() {
      let screenWidth = document.body.clientWidth
      if (screenWidth < 600) {
        this.screenWidth = screenWidth
      } else {
        this.screenWidth = 600
      }
    }
  }
}
</script>
<style scoped></style>
