<template>
  <div class="dialog">
    <el-dialog :width="dialogWidth" :close-on-click-modal="false" :title="title" :visible.sync="dialogFormVisible">
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
      >
        <el-form-item v-if="catalogAdd" label="上级菜单" :label-width="formLabelWidth">
          <el-button @click="innerBtn()">{{nameTitle}}</el-button>
        </el-form-item>
        <el-form-item v-if="catalogAdd" label="菜单类型" prop="menuType" :label-width="formLabelWidth">
          <el-radio-group v-model="form.menuType">
            <el-radio label="M">目录</el-radio>
            <el-radio label="C">菜单</el-radio>
            <el-radio label="F">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="名称" prop="menuName" :label-width="formLabelWidth">
          <el-input v-model="form.menuName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="路由地址" :label-width="formLabelWidth">
          <el-input v-model="form.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="路由名称" :label-width="formLabelWidth">
          <el-input v-model="form.route" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="权限标识" :label-width="formLabelWidth">
          <el-input v-model="form.perms" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="运行方式" :label-width="formLabelWidth">
          <el-select v-model="form.runKind" >
            <el-option
              key="0"
              label="网页"
              :value="0"></el-option>
            <el-option
            key="1"
            label="delphi界面"
            :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.runKind" label="BPL包名" :label-width="formLabelWidth">
          <el-input v-model="form.delphiPackage" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item v-if="form.runKind" label="BPL参数" :label-width="formLabelWidth">
          <el-input v-model="form.delphiParams" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="显示排序" prop="sortNum" :label-width="formLabelWidth">
          <el-input v-model.number="form.sortNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标" v-if="form.menuType == 'M'" :label-width="formLabelWidth">
<!--          <el-input v-model="form.icon" autocomplete="off"></el-input>-->
<!--          <icon-picker v-model="form.icon"></icon-picker>-->

          <el-popover
            placement="bottom-start"
            width="460"
            trigger="click"
            @show="$refs['iconSelect'].reset()"
          >
            <IconSelect ref="iconSelect" @selected="selected" />
            <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
              <svg-icon
                v-if="form.icon"
                slot="prefix"
                :icon-class="form.icon"
                class="el-input__icon"
                style="height: 32px;width: 16px;"
              />
              <i v-else slot="prefix" class="el-icon-search el-input__icon" />
            </el-input>
          </el-popover>

        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :disabled="clickLoading" @click="dialogStatus==='createClient.vue'?createData('form'):updateData('form')">确 定</el-button>
      </div>

      <el-dialog
        width="30%"
        title="选择上级菜单"
        :visible.sync="innerVisible"
        append-to-body>
        <el-tree
          node-key="id"
          :data="menuData"
          :props="defaultProps"
          @node-click="handleNodeClick"
          accordion
        ></el-tree>
        <p v-if="handleTree" class="tree-span">选中的上级菜单：
          <span>{{checkName}}</span>
        </p>
        <div slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleCheck">确 定</el-button>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { getMenuInfo, getMenuTreeData, updateMenu, addMenu } from '@/api/system/system.js'
import { getMenuTree } from '@/utils/getTable.js'
import IconSelect from '@/components/IconSelect'
export default {
  name: 'ServiceDialog',
  components: {
    IconSelect
  },
  data() {
    return {
      catalogAdd: true,
      clickLoading: false,
      dialogStatusProps: this.dialogStatus,
      nameTitle: '',
      handleTree: false,
      checkName: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      menuData: [],
      innerVisible: false,
      dialogFormVisible: this.dialogVisible,
      title: this.titleDialog,
      form: {
        parentId: '',
        icon: '',
        menuName: '',
        menuType: '',
        perms: '',
        sortNum: '',
        url: '',
        route: '',
        runKind: 0,
        delphiPackage: '',
        delphiParams: ''
      },
      formLabelWidth: '80px',
      dialogWidth: '600px',
      checkData: {},
      rules: {
        menuType: [
          { required: true, message: '请选择菜单类型', trigger: 'change' }
        ],
        menuName: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        sortNum: [
          { required: true, message: '排序不能为空' },
          { type: 'number', message: '必须为数字值' }
        ]
      }
    }
  },
  props: {
    dialogVisible: {
      type: Boolean
    },
    titleDialog: {
      type: String
    },
    menuId: [String, Number],
    dialogStatus: [String]

  },
  mounted() {
    // this.getInfo()
  },
  methods: {
    // 选择图标
    selected(name) {
      this.form.icon = name
    },

    createData(formName) {
      const _that = this
      // console.log('form', _that.form)
      this.$refs[formName].validate((valid) => {
        if (valid) {

          _that.clickLoading = true
          var data = {
            'menu': JSON.stringify(_that.form)
          }
          addMenu(data).then(response => {
            if (response.httpCode == 200) {
              _that.clickLoading = false
              _that.dialogFormVisible = false
              _that.$message({
                message: '增加成功',
                type: 'success'
              })

              _that.$emit('tableRefresh', '')
            }
          })
        }
      })
    },
    updateData(formName) {
      const _that = this
      console.log('form', _that.form)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          _that.clickLoading = true
          var data = {
            'menu': JSON.stringify(_that.form)
          }
          console.log('data', data)
          updateMenu(data).then(response => {
            if (response.httpCode == 200) {
              _that.clickLoading = false
              _that.dialogFormVisible = false
              _that.$message({
                message: '修改成功',
                type: 'success'
              })

              _that.$emit('tableRefresh', '')
            }
          })
        }
      })
    },
    createInfoAdd() {
      const _that = this
      _that.catalogAdd = false
      _that.dialogFormVisible = true
      _that.resetForm()
      _that.form.menuType = 'M'
    },
    createInfo(row) {
      const _that = this
      _that.catalogAdd = true
      _that.dialogFormVisible = true
      _that.resetForm()
      console.log('row', row)
      _that.nameTitle = row.menuName
      _that.form.parentId = row.id
    },
    getInfo(menuId) {
      const _that = this
      _that.catalogAdd = true
      _that.dialogFormVisible = true

      var data = {
        'menuId': menuId
      }
      // console.log('data', data)
      getMenuInfo(data).then(response => {
        const data = response.data
        console.log('data', data)

        _that.form = {
          id: data.id,
          parentId: data.parentId,
          icon: data.icon || '',
          menuName: data.menuName,
          menuType: data.menuType,
          perms: data.perms,
          sortNum: data.sortNum,
          url: data.url,
          route: data.route,
          runKind: data.runKind,
          delphiPackage: data.delphiPackage,
          delphiParams: data.delphiParams
        }
        if (!data.parentName) {
          _that.nameTitle = data.menuName
        } else {
          _that.nameTitle = data.parentName
        }
      })
    },
    resetForm() {
      this.form = {
        parentId: '',
        icon: '',
        menuName: '',
        menuType: '',
        perms: '',
        sortNum: '',
        url: '',
        route: '',
        runKind: 0,
        delphiPackage: '',
        delphiParams: ''
      }
    },
    handleCheck() {
      // 确定选中上级菜单
      const _that = this
      console.log('checkData', _that.checkData)
      _that.form.parentId = _that.checkData.id
      _that.nameTitle = _that.checkData.name
      _that.innerVisible = false
    },
    handleNodeClick(data) {
      const _that = this
      _that.handleTree = true
      _that.checkName = data.name
      _that.checkData = data
    },
    innerBtn() {
      const _that = this
      _that.menuData = []
      _that.handleTree = false
      _that.checkName = '',
      getMenuTreeData().then(response => {
        const data = response.data
        // console.log('data',data)
        const menuData = getMenuTree(data)
        console.log('menuData', menuData)
        _that.menuData = menuData
        _that.innerVisible = true
      })
    }

  },
  watch: {
    dialogVisible() {
      this.dialogFormVisible = this.dialogVisible
    },
    titleDialog() {
      this.title = this.titleDialog
    },
    dialogStatus() {
      this.dialogStatusProps = this.dialogStatus
    }
  }
}
</script>

<style scoped>
  .dialog {

  }

  .tree-span {
    padding-left: 15px;
  }

  .tree-span span {
    color: #E6A23C;
  }

</style>
