<template>
  <div>
    <a-form @submit="handleSubmit" :form="form" class="cust-detail-form">
      <header-tool-bar>
        <span class="cust-title" slot="title">
          <a-icon type="hdd"/>通用代码明细
        </span>
        <a-button-group slot="extra">
          <a-button type='primary' htmlType='submit'>保存</a-button>
          <a-button type="primary" @click="back" ghost>返回</a-button>
        </a-button-group>
      </header-tool-bar>
      <a-card title="基础数据" class="cust-normal-card">
        <a-row>
          <a-col :span="6">
            <a-form-item
              v-bind="formItemLayout"
              label='代码编号'>
              <a-input
                v-decorator="['sysCode.code', {initialValue:sysCode.code, rules: [{ required: true, message: '请输入编号' }]}]"/>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item
              v-bind="formItemLayout"
              label='代码名称'>
              <a-input
                v-decorator="['sysCode.name', {initialValue:sysCode.name,rules: [{ required: true, message: '请输入名称' }]}]"/>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item
              v-bind="formItemLayout"
              label='代码类型'>
              <a-select
                style='width: 100%'
                v-decorator="['sysCode.type', {initialValue:sysCode.type,rules: [{ required: true, message: '请输入代码类型' }]}]"
              >
                <a-select-option v-for="item in typeList" :key="item.id" :value="item.valueInt">{{item.name}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :utter="gutter">
          <a-col :span="24">
            <a-form-item
              :labelCol="{span: 2}"
              :wrapperCol="{span: 22}"
              label='备注'>
              <a-textarea
                :rows="3"
                v-decorator="['sysCode.remark', {initialValue: sysCode.remark, rules: [{ required: false, message: '' }]}]"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>
      <a-card title="代码项" class="cust-normal-card">
        <a-button-group slot="extra">
          <a-button type="primary" @click="addRow">添加</a-button>
          <a-button type="danger" @click="delItem">删除</a-button>
        </a-button-group>
        <a-table
          :columns="columns"
          :dataSource="itemList"
          size="middle"
          :rowKey="rowKey"
          :pagination="false"
          class="cust-card-table"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: updateSelect}"
          bordered
        >
          <span slot="action" slot-scope="text, record">
            <a @click="editRow(record)">编辑</a>
          </span>
        </a-table>
      </a-card>
    </a-form>
    <sys-code-item-detail @modifyItem="modifyItem" ref="sysCodeItemDetail"/>
  </div>
</template>

<script>
  import HeaderToolBar from '@/components/page/HeaderToolBar'
  import SysCodeItemDetail from './SysCodeItemDetail'
  import {getDetail, save} from '@/api/system/sysCode'

  let listPathName = 'syscodelist';
  const columns = [
    {title: '名称', dataIndex: 'name', width: 250},
    {title: '值', dataIndex: 'valueInt',},
    {title: '字符串值', dataIndex: 'valueStr',},
    {title: '最小值', dataIndex: 'valueMin',},
    {title: '最大值', dataIndex: 'valueMax',},
    {title: '操作', key: 'operation', fixed: 'right', width: 140, scopedSlots: {customRender: 'action'}}//插槽到‘action’处
  ]

  export default {
    name: "SysCodeDetail",
    components: {HeaderToolBar, SysCodeItemDetail},
    data() {
      return {
        id: 0,
        rowKey: "id",
        form: this.$form.createForm(this),
        sysCode: {},
        itemList: [],
        tempItemId: 0,
        delIdList: [],
        typeList: [],
        columns: columns,
        currentEditDate: {},
        selectedRowKeys: [],
        formItemLayout: {
          labelCol: {
            sm: {span: 8},
          },
          wrapperCol: {
            sm: {span: 16},
          },
        },
        gutter: 8
      }
    },
    activated() {
      this.form.resetFields()
      this.selectedRowKeys = []
      this.initData()
    },
    methods: {
      initData() {
        this.id = this.$route.query.id || 0
        getDetail(this.id).then(resp => {
          if (resp && resp.code == SYS_CONST.REQUEST.SUCCEED) {
            this.sysCode = resp.data.sysCodeType
            this.itemList = resp.data.codeDetailList || []
            this.typeList = resp.data.codeMap[SYS_CONST.CODE.CODE_TYPE]
          }
        })
      },
      handleSubmit(e) {
        e.preventDefault();
        this.form.validateFieldsAndScroll((err, values) => {
          if (!err) {
            let saveListGroup = this.$extractList(this.itemList)
            let saveData = {
              sysCodeType: this.$valueCopy(this.sysCode, values.sysCode),
              updateList: saveListGroup.updateList,
              insertList: saveListGroup.insertList,
              delIdList: this.delIdList
            }

            save(saveData).then(resp => {
              if (resp && resp.code == SYS_CONST.REQUEST.SUCCEED) {
                this.$notification.success({message: '系统提示', description: "保存成功", duration: 4,});
                this.$router.push({name: listPathName, query: {isModify: this.id != 0}})
              }
            })

          }
        })
      },
      updateSelect(selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
      },
      delItem() {
        if (this.selectedRowKeys.length > 0) {
          this.itemList = this.$batchDelByRowKey(this.itemList, this.selectedRowKeys, this.delIdList)
          this.selectedRowKeys = []
        }
      },
      addRow() {
        this.$refs.sysCodeItemDetail.show(SYS_CONST.OPT_TYPE.ADD)
      },
      editRow(row) {
        this.currentEditDate = row

        this.$refs.sysCodeItemDetail.show(SYS_CONST.OPT_TYPE.MODIFY, row)
      },
      modifyItem(type, item) {
        if (type == SYS_CONST.OPT_TYPE.ADD) {
          item.id = --this.tempItemId
          this.itemList.push(item)
        } else {
          this.$valueCopy(this.currentEditDate, item)
        }
      },
      back() {
        this.$router.push({name: listPathName})
      }
    }
  };
</script>

