<template>
    <div>
        <Spin size="large" fix v-if="spinShow"></Spin>
        <Row type="flex" justify="start">
            <Col span="17" offset="3">
                <!--{{this.optionState === false ? '添加' : '修改'}}-->
                <Form label-position="left" :model="formItem" :label-width="130">
                    <FormItem label="上级菜单：">
                        <Select v-model="formItem.parent_id" style="width: 70%" ref="menuSelect" filterable clearable>
                            <Option v-for="item in getFilterMenuData" :value="item.id" :key="item.id" :label="item.name">
                                <template v-for="a in item.countArr">
                                    <span :key="a.id">----</span>
                                </template>
                                <span style="font-weight: bold">
                                    |-{{ item.name }}
                                </span>
                            </Option>
                        </Select>
                    </FormItem>
                    <!-- <FormItem label="类型：">
                        <RadioGroup v-model="formItem.type">
                            <Radio label="1">菜单</Radio>
                            <Radio label="2">按钮</Radio>
                        </RadioGroup>
                    </FormItem> -->
                    <FormItem label="按钮标识：" v-show="formItem.type==2">
                        <Input v-model="formItem.btn_permission" placeholder="按钮显示标识" style="width: 70%"></Input>
                    </FormItem>
                    <FormItem label="名称：">
                        <Input v-model="formItem.name" placeholder="必填" style="width: 70%"></Input>
                    </FormItem>
                    <FormItem label="链接：">
                        <Input v-model="formItem.href" style="width: 50%"></Input>
                        <span class="prompt-input">点击菜单跳转的页面</span>
                    </FormItem>
                    <FormItem label="微信管理端链接：">
                        <Input v-model="formItem.wx_href" style="width: 50%"></Input>
                        <span class="prompt-input">微信端点击菜单跳转的页面</span>
                    </FormItem>
                    <FormItem label="目标：">
                        <Input v-model="formItem.target" style="width: 50%"></Input>
                        <span class="prompt-input">链接地址打开的目标窗口，默认：mainFrame</span>
                    </FormItem>
                    <FormItem label="菜单标识：">
                        <Input v-model="formItem.menu_permission" style="width: 50%"></Input>
                        <span class="prompt-input">菜单标识,不可重复,可作为菜单查询接口的标记</span>
                    </FormItem>
                    <FormItem label="图标：">
                        <Input v-model="formItem.icon" style="width: 50%"></Input>
                    </FormItem>
                    <FormItem label="微信管理图标：">
                        <Input v-model="formItem.wx_icon" style="width: 50%"></Input>
                    </FormItem>
                    <FormItem label="VUE路由：">
                        <Input v-model="formItem.path" style="width: 50%"></Input>
                    </FormItem>
                    <FormItem label="VUE图标：">
                        <Input v-model="formItem.path_icon" style="width: 50%"></Input>
                    </FormItem>
                    <FormItem label="排序：">
                        <InputNumber :min="0" v-model="formItem.sort" style="width: 50%"></InputNumber>
                    </FormItem>
                    <FormItem label="可见：">
                        <RadioGroup v-model="formItem.is_show">
                            <Radio label="1">显示</Radio>
                            <Radio label="0">隐藏</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="微信管理端可见：">
                        <RadioGroup v-model="formItem.wx_show">
                            <Radio label="1">显示</Radio>
                            <Radio label="0">隐藏</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="权限标识：">
                        <Row>
                            <Button type="primary" @click="addPermission">添加</Button>
                        </Row>
                        <!-- <Row>
                          <Input v-model="onePermission" placeholder="" style="width: 30%"></Input>
                          &nbsp;
                          <Button type="primary" @click="addPermissionNew">添加</Button>
                        </Row> -->
                        <Row>
                            <Tag v-for="item in interfaceList" type="border" color="blue" closable :key="item.id"
                                 :name="item.name" @on-close="tagClick" style="cursor: pointer">{{ item.label }}
                            </Tag>
                        </Row>
                    </FormItem>
                    <FormItem label="备注信息：">
                        <Input v-model="formItem.remarks" maxlength="255" show-word-limit type="textarea"
                               :autosize="{minRows: 2,maxRows: 5}"></Input>
                    </FormItem>
                    <FormItem>
                        <Button shape="circle" type="primary" :loading="btnLoading" @click="saveOption">保存</Button>
                        <Button shape="circle" style="margin-left: 8px" @click="cancelOption">取消</Button>
                    </FormItem>
                </Form>
            </Col>
        </Row>
        <permission-modal ref="permission" v-if="modalShow" :modalShow="modalShow" :modalTitle="modalTitle"
                          :modalWidth="modalWidth"
                          :dictInfoAllList="dictInfoList" :selectedList="interfaceList"
                          @showOption="showOption" @submitOption="submitOption"></permission-modal>
    </div>
</template>

<script>
import {
  getInForMenu,
  getDictInfoList,
  updateMenu,
  getMenuById
} from '../../../../../api/system/system'
import { getAllApi } from '@/api/eventlist'
import PermissionModal from '../permission-modal'

export default {
  name: 'menuOption',
  components: { PermissionModal },
  props: {
    companyId: {
      type: String,
      default: () => {
        return ''
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    menuData: {
      type: Array,
      default: () => {
        return []
      }
    },
    optionState: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      btnLoading: false,
      interfaceList: [],
      dictInfoList: [],
      formItem: {},
      spinShow: false,
      modalShow: false,
      modalTitle: '',
      modalWidth: 700,
      result: {},
      onePermission: '',
      apiList: []
    }
  },
  computed: {
    getFilterMenuData () {
      let data = this.menuData
      data.forEach(item => {
        item.countArr = (item.parent_ids || '').split(',')
      })
      return data
    }
  },
  mounted () {
    // this.getAllApi()
  },
  methods: {
    showOption () {
      this.modalShow = false
    },
    addPermission () {
      this.getDictInfoList()
      setTimeout(() => {
        this.modalShow = true
        this.modalTitle = '分配接口'
        this.modalWidth = 1200
      }, 300)
    },
    addPermissionNew () {
      console.log(this.interfaceList)
      let data = this.onePermission
      console.log('data:' + data)
      if (data) {
        let params = {
          'description': data,
          'id': data,
          'label': data,
          'name': data
        }
        this.interfaceList.push(params)
      }
      this.onePermission = ''
    },
    getDictInfoList () {
      getDictInfoList({ type: 'sys_center_type' }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.dictInfoList = data.data
        } else {
          this.error(data)
        }
      })
    },
    getAllApi () {
      getAllApi().then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.apiList = data.data
          this.dictInfoList = data.data
        } else {
          this.error(data)
        }
      })
    },
    tagClick (checked, name) {
      let index = -1
      this.interfaceList.forEach((item, i) => {
        if (item.name === name) {
          index = i
        }
      })
      this.interfaceList.splice(index, 1)
    },
    getInForMenu (data) {
      getInForMenu(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          data.data.forEach(item => {
            item.label = item.name + ' ' + item.id
            item.flag = true
          })
          // this.interfaceList = data.data
        } else {
          this.error(data)
        }
      })
    },
    getById (data) {
      this.spinShow = true
      getMenuById(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.formItem = {
            ...data.data,
            ...this.formItem
          }
          this.strToArray(this.formItem.permission)
          // this.formItem = data.data
          this.result = this.$common.xeUtils.clone(this.formItem)
          this.spinShow = false
        } else {
          this.error(data)
        }
      })
    },
    // 接口数组转为字符串处理
    arrayToStr (data) {
      let str = ''
      data.forEach(item => {
        str += item.id + ','
      })
      // 去掉最后一个逗号
      if (str.length > 0) {
        str = str.substr(0, str.length - 1)
      }
      this.formItem.permission = str
    },
    strToArray (data) {
      this.interfaceList = []
      var stringResult = data.split(',')
      stringResult.forEach(item => {
        let data = item
        if (data) {
          let params = {
            'description': data,
            'id': data,
            'label': data,
            'name': data
          }
          this.interfaceList.push(params)
        }
      })
    },
    saveOption () {
      this.arrayToStr(this.interfaceList)
      // 保存操作
      this.btnLoading = true
      if (this.formItem.parent_id === this.result.parent_id) {
        this.formItem.parent_id = ''
      }
      updateMenu(this.formItem).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.btnLoading = false
          this.success()
          this.$emit('saveOption')
        } else {
          this.btnLoading = false
          this.error(data)
        }
      })
    },
    cancelOption () {
      this.$emit('cancelOption')
    },
    submitOption (data) {
      this.modalShow = false
      this.arrayToStr(data)
    },
    success () {
      this.$Message.success('操作成功')
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  watch: {
    formData () {
      this.formItem = this.$common.xeUtils.clone(this.formData)
    }
  }
}
</script>

<style scoped>
    .prompt-input {
        margin-left: 3%;
        font-size: 13px;
        color: #C5C8CE;
    }
</style>
