<!--author: gengchao-->
<template>
<section>
   <el-button @click="opendialog2()" style="margin-left:20px">打开新增的 Dialog</el-button>
   <el-button  @click="opendialog3()">打开查询的 Dialog</el-button>
   <el-button  @click="opendialog4()">菜单维护</el-button>
   <el-button  @click="opendialog5()">会话失效弹框</el-button>
   <el-button  @click="opendialog6()">角色分配</el-button>
   <el-button  @click="opendialog7()">人员赋权</el-button>
   <el-button  @click="opendialog8()">数据字典</el-button>
   <Popup :dialogObj='dialogObj2' @confirmBack="confirmBack1"></Popup>
   <Popup :dialogObj='dialogObj3' @confirmBack="confirmBack2"></Popup>
   <Popup :dialogObj='dialogObj4' @confirmBack="confirmBack2"></Popup>
   <Popup :dialogObj='dialogObj5' @confirmBack="confirmBack1"></Popup>
   <treePopup :dialogObj='dialogObj' :treedialogVisible='treedialogVisible'  v-popupdra-directive="{'show': treedialogVisible}"></treePopup>
   <!-- <treePopup :dialogObj='dialogObj_distribution1' :treedialogVisible='treedialogVisible'></treePopup> -->
   <!-- <treePopup :dialogObj='dialogObj_jurisdiction' ></treePopup> -->
   <dictionaryPopup :dialogObj='dicDialogObj' @confirmBack="confirmBack1"  v-popupdra-directive="{'show': dicDialogObj.dialogVisible}" ></dictionaryPopup>

   <div class="container-fluid">
        <div class="panel panel-primary">
          <div class="panel-heading">树形接口公共弹框（）：</div>
          <div class="panel-body">
            <table class="table">
              <thead>
              <tr>
                <td>参数名称</td>
                <td>使用说明</td>
                <td>类型</td>
                <td>参数说明</td>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>type</td>
                <td>弹卡类型(权限和分配)</td>
                <td>String</td>
                <td>role / authority</td>
              </tr>
              <tr>
                <td>title</td>
                <td>弹卡标题</td>
                <td>String</td>
                <td>/</td>
              </tr>
              <tr>
                <td>defaultCheckedKeys</td>
                <td>默认勾选的节点的 key 的数组</td>
                <td>Array</td>
                <td>/</td>
              </tr>
              <tr>
                <td>getDataObj</td>
                <td>获取数据接口对象</td>
                <td>Object</td>
                <td>
        getDataObj: {'url': 'menu/selectByCode.do', params: {'roleId': 0, 'treeKey': 'parentId', 'treeRoot': 1}},
                </td>
              </tr>
              <tr>
               <td>conmitObj</td>
                <td>下发命令接口对象</td>
                <td>Object</td>
                <td>
        conmitObj: {'url': 'menu/selectByCode.do', params: {'roleId': 0, 'treeKey': 'parentId', 'treeRoot': 1}},
                </td>
              </tr>
              <tr>
                <td>dialogVisible</td>
                <td>弹框显示或隐藏</td>
                <td>Blean</td>
                <td>false / true</td>
              </tr>
              </tbody>
            </table>
          </div>
          <div class="panel-footer">
            <p class="bg-danger">
              注意点：import treePopup from './treePopup.vue'
            </p>
          </div>
        </div>
        <div class="panel panel-primary">
          <div class="panel-heading">弹框dialogObj属性：</div>
          <div class="panel-body">
            <table class="table">
              <thead>
              <tr>
                <td>参数名称</td>
                <td>使用说明</td>
                <td>默认值</td>
                <td>待完善功能</td>
                <td>坑或注意点</td>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>data.form</td>
                <td>新增用户（type：'addUser'）</td>
                <td>name: '',
            Id: '',
            password: '',
            confirmPass: '',
            company: {url: '', value: ''},
            department: '',
            email: '',
            number: '',
            status: '',
            isLogIn: '',
            tel: '',
            phone: '',
            date: '',
            mark: '',
            upload: {type: '', url: 'https://jsonplaceholder.typicode.com/posts/'}</td>
                <td></td>
                <td>／</td>
              </tr>
              <tr>
                <td>data.form</td>
                <td>新增用户（type：'query'）</td>
                <td>
              tel: '',
              phone: '',
              data: '',
              desc: '
                </td>
                <td></td>
                <td>／</td>
              </tr>
              <tr>
                <td>title</td>
                <td>弹框标题</td>
                <td>0</td>
                <td>无</td>
                <td>
                </td>
              </tr>
              <tr>
                <td>dialogVisible</td>
                <td>默认为false,隐藏弹框</td>
                <td>false</td>
                <td>／</td>
                <td>／</td>
              </tr>
             <tr>
                <td>size</td>
                <td>tiny/small/large/full</td>
                <td>small</td>
                <td>／</td>
                <td>／</td>
              </tr>
              <tr>
                <td>type</td>
                <td>弹框业务类型</td>
                <td>[addUser,query]</td>
                <td>／</td>
                <p class="bg-danger">

                </p>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="panel panel-primary">
          <div class="panel-heading">弹框方法：</div>
          <div class="panel-body">
            <table class="table">
              <thead>
              <tr>
                <td>名称</td>
                <td>使用说明</td>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>confirmBack</td>
                <td>
                  在 自定义组件 InputTemp 中绑定 confirmBack 事件<br/>
                  用来接收被选中的值。
                </td>
              </tr>
              </tbody>
            </table>
          </div>
          <div class="panel-footer">
            <p class="bg-danger">
              注意点：
            </p>
          </div>
        </div>
        <div class="panel panel-primary">
          <div class="panel-heading">弹框使用方法：</div>
          <div class="panel-body">
            <p>1、在 <span class="badge">script</span> 标签中引入组件 <span class="badge">import Popup from './Popup.vue'</span></p>
            <p>2、在 components 中 导入组件名称 <span class="badge">Popup</span> </p>
            <p>3、在 html 中 Popup 标签；绑定属性【dialogObj】；绑定方法【confirmBack】;) </p>
            <pre>4、打开弹框opendialog: a、将dialogVisible设为true； b、通过Object.assign(this.dialogObj, this.dialogObj1) 将弹框对象传进去<br>
                 例：    opendialog1: function () {
                            this.dialogObj1.dialogVisible = true
                            Object.assign(this.dialogObj, this.dialogObj1)
                         }
            </pre>
          </div>
        </div>
      </div>
</section>
</template>

<script>
import Popup from './Popup.vue'
import treePopup from './treePopup.vue'
import dictionaryPopup from './dictionaryPopup.vue'

export default {
  data () {
    return {
      dialogObj2: {
        title: '新增用户',
        type: 'addUser',
        size: '',
        dialogVisible: false,
        data: {
          form: {
            name: '',
            Id: '',
            password: '',
            confirmPass: '',
            company: {url: 'static/json/company.json', value: ''},
            department: {url: 'static/json/department.json', value: ''},
            email: '',
            number: '',
            status: '',
            isLogIn: '',
            tel: '',
            phone: '',
            date: '',
            mark: '',
            upload: {type: '', url: 'https://jsonplaceholder.typicode.com/posts/'}
          }
        }
      },
      dialogObj3: {
        title: '查询',
        type: 'query',
        size: '',
        dialogVisible: false,
        data: {
          form: {
            date: '',
            tel: '',
            phone: '',
            desc: ''
          }
        }
      },
      dialogObj4: {
        title: '菜单维护',
        type: 'menuMaintenance',
        size: '',
        dialogVisible: false,
        data: {
          form: {
            treeValue: '',
            menuName: '',
            menuIcon: ''
          }
        }
      },
      dialogObj5: {
        title: '会话失效',
        type: 'sessionFailured',
        dialogVisible: false,
        size: 'tiny',
        data: {
          form: {
            userCode: '',
            password: ''
          }
        }
      },
      dialogObj: {
        title: '',
        type: '',
        nodeKey: 'rowId',
        dialogVisible: false,
        getDataObj: {'url': '', params: {}},
        conmitObj: {'url': '', params: {}}
      },
      /** 弹出层 **/
      dialogObj_distribution: {
        title: '角色分配',
        type: 'menu',
        nodeKey: 'rowId',
        dialogVisible: false,
        getDataObj: {'url': 'menu/selectByCode.do', params: {'roleId': 0, 'treeKey': 'parentId', 'treeRoot': 1}},
        conmitObj: {'url': 'menu/merge.do', params: {'hh': 0}}
      },
      treedialogVisible: false,
      dialogObj_distribution1: {
        title: '人员赋权',
        type: 'role',
        nodeKey: 'rowId',
        dialogVisible: false,
        getDataObj: {'url': 'orgtree/selectTreeByRole.do', params: {'roleId': '10950824385941504', 'treeKey': 'parentId', 'treeRoot': -1}},
        conmitObj: {'url': 'orgtree/merge.do', params: {'hh': 0}}
      },
      dicDialogObj: {
        title: '筛选条件',
        type: 'query',
        dialogVisible: false,
        data: [
          {'value': '', 'code': 'YC_GEO_TYPE', 'label': '市场类型', 'name': 'geoType', 'options': []},
          {'value': '', 'code': 'YC_BUSINESS_TYPE', 'label': '零售业态', 'name': 'businessType', 'options': []},
          {'value': '', 'code': 'YC_OPERATION_SCALE', 'label': '经营规模', 'name': 'operationScale', 'options': []},
          {'value': '', 'code': 'CUSTOMER_GRADE', 'label': '订货类型', 'name': 'orderMethod', 'options': []},
          {'value': '', 'code': 'CUSTOMER_GRADE', 'label': '订货类型', 'name': 'orderMethod', 'options': []}
        ]
      }
      // treedialogVisible1: false
    }
  },
  methods: {
    opendialog2: function () {
      this.dialogObj2.dialogVisible = true
      Object.assign(this.dialogObj, this.dialogObj2)
    },
    opendialog3: function () {
      this.dialogObj3.dialogVisible = true
      Object.assign(this.dialogObj, this.dialogObj3)
    },
    opendialog4: function () {
      this.dialogObj4.dialogVisible = true
    },
    opendialog5: function () {
      this.dialogObj5.dialogVisible = true
    },
    opendialog6: function () {
      Object.assign(this.dialogObj, this.dialogObj_distribution)
      this.dialogObj_distribution.dialogVisible = true
      this.treedialogVisible = true
    },
    opendialog7: function () {
      Object.assign(this.dialogObj, this.dialogObj_distribution1)
      // this.dialogObj_jurisdiction.dialogVisible = true
      this.treedialogVisible = true
    },
    opendialog8: function () {
      this.dicDialogObj.dialogVisible = true
    },
    confirmBack1: function (msg) {
      console.log(msg)
    },
    confirmBack2: function (msg) {
      console.log(msg.data.form.date)
    }
  },
  components: {
    Popup, treePopup, dictionaryPopup
  }
}
</script>
