<template>
  <div>
    <Row class="buttonClass">
      <!-- <ButtonGroup> -->
        <!-- LiuKexin 20201225 按钮样式 -->
        <Button type="primary" style="padding:0 8px;padding-left:4px;" @click.stop="showModalMethods(null)">
          <Icon custom="fa fa-plus-circle fa-fw" />添加
        </Button>
        <Button type="text" style="margin-left:8px;padding:0px" @click.stop="deleMenu">
          <Icon custom="fa fa-trash fa-fw" style="color: red" />删除
        </Button>
      <!-- </ButtonGroup> -->
      <SearchInput :value.sync="queryData" style="margin-left:7px;" @on-clear="initData" @on-click="initData" :width="260"/>
    </Row>
    <Row class="tableClass">
      <Spin size="large" fix v-if="showSpin"></Spin>
      <!-- durui 20201117 DAG-393 统一按钮和表单字体 去掉 size="small" -->
      <Table
        border
        :height="paraData.tableheight"
        :columns="columns"
        :data="tableData"
        style="border-left:0;"
        @on-selection-change="onSelectionChange"
        stripe
        tooltip
        ellipsis
      >
        <template slot-scope="{ row, index }" slot="operate">
          <ButtonGroup>
            <Button
              class="operate-button"
              @click.stop="showModalMethods(row, index)"
            >
              <Icon custom="fa fa-fw fa-edit"></Icon>
            </Button>
          </ButtonGroup>
        </template>
      </Table>
    </Row>
    <template>
      <Modal v-model="showModal" width="660" :footer-hide="true" class="modalClass">
        <p slot="header">
          <span>
            <Icon :custom="'fa fa-' + modalIcon"></Icon>
            {{ modalTitle }}
          </span>
        </p>
        <div class="form-editor">
          <iForm :model="menuModal" :label-width="80" ref="modalRef" :rules="ruleValidate">
            <Row>
              <iCol span="12">
                <FormItem label="名称" prop="title">
                  <iInput v-model="menuModal.title" placeholder="请输入中文"></iInput>
                </FormItem>
              </iCol>
              <iCol span="12">
                <FormItem label="英文标识" prop="name">
                  <iInput v-model="menuModal.name" placeholder="请输入英文"></iInput>
                </FormItem>
              </iCol>
              <iCol span="24">
                <FormItem label="访问路径" prop="path">
                  <iInput v-model="menuModal.path" placeholder="例如#/name1/name2"></iInput>
                </FormItem>
              </iCol>
              <!-- 暂时不需要操作该字段 liuyimeng 2020-03-02 -->
              <!-- <iCol span="12">
                <FormItem label="目标" prop="target">
                  <iInput
                    v-model="menuModal.target"
                    placeholder="请输入该系统在新浏览器打开的页面"
                  ></iInput>
                </FormItem>
              </iCol>-->
              <iCol span="12">
                <FormItem label="是否隐藏" prop="hidden">
                  <Select v-model="menuModal.hidden">
                    <Option
                      v-for="item in [{value:'0',label:'否'},{value:'1',label:'是'}]"
                      :value="item.value"
                      :key="item.value"
                    >{{ item.label }}</Option>
                  </Select>
                </FormItem>
              </iCol>
              <iCol span="24">
                <FormItem label="图标" prop="icon">
                  <iInput v-model="menuModal.icon" style="margin-bottom:2px;" placeholder="自定义菜单图标"></iInput>
                  <div class="lib-icons">
                    <span
                      v-for="icon in iconList"
                      :key="icon"
                      :class="{selected: icon==menuModal.icon}"
                      class="lib-icon"
                      @click="iconClick(icon)"
                    >
                    <!-- Liukexin 20201229 展示fa图标 -->
                      <Icon :custom="icon" size="24"></Icon>
                    </span>
                  </div>
                </FormItem>
              </iCol>
              <iCol span="24">
                <FormItem label="描述" prop="description">
                  <iInput v-model="menuModal.description" type="textarea" placeholder="请输入菜单描述"></iInput>
                </FormItem>
              </iCol>
              <!-- LiuKexin 20201228 按钮靠右 -->
              <iCol span="24" style="height:32px">
                <FormItem class="button-toolbar" style="text-align: right;">
                  <Button @click="resetModal()" style="margin-left:8px">
                    <Icon custom="fa fa-refresh fa-fw"></Icon>重置</Button>&nbsp;&nbsp;
                  <Button type="primary" @click="saveMenu()"><Icon custom="fa fa-fw fa-save"></Icon>保存</Button>
                </FormItem>
              </iCol>
            </Row>
          </iForm>
        </div>
      </Modal>
    </template>
  </div>
</template>

<script>
import SearchInput from '_c/search-input/searchInput'
import { getMenuList, saveMenuData, deleteMenu } from '@/api/menu'
import { iconList, columns } from './static-data'
export default {
  components: {
    SearchInput
  },
  props: {
    paraData: {
      type: Object
    }
  },
  data() {
    /**
     * 对必填项进行校验 liuyimeng 2020-03-02
     * **/

    const validateTitle = (rule, value, callback) => {
      // lidecai 20200327 YZJ-2307 字符串校验不正确
      let reg = /^[\u4E00-\u9FA5]+$/
      if (value === '') {
        callback(new Error('名称不能为空'))
      } else {
        if (!reg.test(value)) {
          callback(new Error('请输入中文'))
        }
        callback()
      }
    }
    const validateName = (rule, value, callback) => {
      let ext = /(^[a-zA-Z]+$)/
      if (value === '') {
        callback(new Error('英文标识不能为空'))
      } else {
        if (!ext.test(value)) {
          callback(new Error('请输入英文'))
        }
        callback()
      }
    }
    const validatePath = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('访问路径不能为空'))
      } else {
        callback()
      }
    }

    return {
      iconList,
      /**
       * 对必填项进行校验 liuyimeng 2020-03-02
       * **/

      ruleValidate: {
        title: [{ required: true, validator: validateTitle, trigger: 'blur' }],
        name: [{ required: true, validator: validateName, trigger: 'blur' }],
        path: [{ required: true, validator: validatePath, trigger: 'blur' }],
        hidden: [
          { required: true, message: '请选择是否隐藏菜单', trigger: 'blur' }
        ]
      },
      columns,
      showSpin: false,
      showModal: false,
      modalIcon: '',
      modalTitle: '',
      menuModal: {
        title: '',
        name: '',
        path: ''
      },
      tableSelectData: {},
      tableData: [],
      queryData: '',
      oldMenuModal: ''
    }
  },
  watch: {
    'paraData.id'() {
      this.initData()
    },
    queryData() {
      if (!this.queryData) {
        this.initData()
      }
    }
  },
  methods: {
    iconClick(icon) {
      //选择图标
      this.menuModal.icon = icon
    },
    initData() {
      //初始化table
      this.showSpin = true
      let params = {
        sysId: this.paraData.id,
        condStr: this.queryData
      }
      getMenuList(params).then(res => {
        if (res.data.state == 'ok') {
          let data = res.data.data
          this.tableData = data
          this.tableSelectData = []
        }else {
          this.$Notice.error({title:'提示',desc: res.data.msg})
        }
        this.showSpin = false
      })
    },
    showModalMethods(row) {
      //显示modal表单
      this.resetModal()
      if (row) {
        this.oldMenuModal = row
        this.menuModal = Object.assign({}, row)
        this.menuModal.hidden = row.hidden ? '1' : '0'
        this.modalTitle = '编辑'
        this.modalIcon = 'edit'
      } else {
        this.modalTitle = '添加'
        this.modalIcon = 'plus-circle'
        this.resetModal()
      }
      this.showModal = true
    },
    resetModal() {
      //重置Modal信息
      if (this.modalTitle === '添加') {
        this.$refs.modalRef.resetFields()
        this.menuModal = {
          id: null,
          title: '',
          name: '',
          path: '',
          hidden: '0',
          description: '',
          icon: 'fa fa-file', //LiuKexin 20201229 修改默认图标
          target: null
        }
      }
      if (this.modalTitle === '编辑') {
        this.menuModal = Object.assign({}, this.oldMenuModal) //对重置按钮添加判断 liuyimeng 2020-03-01
      }
    },
    saveMenu() {
      //保存菜单
      this.$refs.modalRef.validate(valid => {
        if (valid) {
          this.menuModal.systemId = this.paraData.id
          let param = {
            menu: this.menuModal
          }
          saveMenuData(param).then(res => {
            this.$Notice[res.data.state == 'ok' ? 'success' : 'error']({
              title:'提示',desc: res.data.msg
            })
            this.showModal = false
            this.initData()
          })
          this.modal = false
        }
      })
    },
    deleMenu() {
      //删除菜单
      if (!this.tableSelectData.length) {
        this.$Notice.warning({title:'提示',desc:  '请至少选择一条数据!' })
        return
      }
      this.$Modal.confirm({
        title: '温馨提示',
        content: '确定要删除吗?',
        loading: true,
        onOk: () => {
          let params = {
            ids: this.tableSelectData.map(item => item.id).join(',')
          }
          deleteMenu(params).then(res => {
            this.$Notice[res.data.state == 'ok' ? 'success' : 'error']({
              title:'提示',desc: res.data.msg
            })
            //删除成功后清空所选的数据 Liuyimeng 20200430 YZJ-3216
            this.tableSelectData.length = 0
            this.$Modal.remove()
            this.initData()
          })
        }
      })
    },
    onSelectionChange(row) {
      //选择框
      this.tableSelectData = Object.assign([], row)
    }
  },
  mounted() {
    this.initData()
  }
}
</script>
<style>
.lib-icons {
  padding: 5px;
  border: 1px solid #dcdee2;
  border-radius: 4px;
}
.lib-icons .selected {
  border: 1px dotted #2d8cf0;
  color: #2d8cf0;
}
/* LiuKexin 20201229 调整样式 */
.lib-icon {
  display: inline-block;
  padding:4px;
  cursor: pointer;
  border: 1px solid #fff;
  border-radius: 4px;
  height:34px;
  width:7%;
  text-align: center;
}
.ivu-card-bordered {
  border: 0px;
}
.buttonClass {
  border-top: 1px solid #d7dde4;
  height: 43px;
  line-height: 42px;
  background-color: #fff;
  padding-left: 4px;
}
.ivu-input-default {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.modalClass /deep/ .ivu-modal-body{
  padding:0px
}
</style>
