<template>
  <!--<div v-if="visible">
    <avue-input-table :disabled="disabled" :props="props" :column="column" :formatter="formatter" :on-load="loadData" v-model="value" placeholder="請選擇"></avue-input-table>
  </div>-->
  <div>
    <el-input v-model="text" readonly @click.native="visible = true"></el-input>
    <el-dialog :append-to-body="true" :modal-append-to-body="false" :destroy-on-close="true" :visible.sync="visible" title="" width="80%">
      <basic-container v-if="visible">
        <avue-crud :option="option"
                   :search.sync="search"
                   :table-loading="loading"
                   :data="data"
                   ref="crud"
                   v-model="form"
                   :page.sync="page"
                   @row-click="rowClick"
                   @search-change="searchChange"
                   @search-reset="searchReset"
                   @selection-change="selectionChange"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @refresh-change="refreshChange"
                   @on-load="onLoad">
        </avue-crud>
        <div style="float: right;margin: 0 15px 15px">
          <el-button type="primary" :disabled="selectionList.length == 0" icon="el-icon-check" @click.native="selectUser">確 定</el-button>
        </div>
      </basic-container>
    </el-dialog>

  </div>
</template>

<script>

  import {getPageAll} from "@/api/system/user";
  import {getRoleTree} from "@/api/system/role";

  export default {
    name: "select-user",
    data(){
      return {
        text: '',

        form: {},
        search:{},
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        data: [],


        visible: false,
        option:{
          border: true,
          selection:true,
          reserveSelection:true,

          header: false,
          menu: false,
          searchMenuSpan: 6,
          // searchMenuPosition: "left",
          column: [
            {
              label: "登錄帳號",
              prop: "account",
              search: true,
              searchSpan: 4,
              display: false
            },
            {
              label: "EHR號",
              prop: "ehr",
              slot: true,
              display: false
            },
            {
              label: "用戶姓名",
              prop: "name",
              search: true,
              searchSpan: 4,
              display: false
            },
            {
              label: "所屬角色",
              prop: "roleName",
              slot: true,
              display: false
            },
            {
              label: "所屬角色",
              prop: "roleId",
              search: true,
              multiple: true,
              hide: true,
              type: "tree",
              dicData: [],
              props: {
                label: "title"
              },
              checkStrictly: true,
              slot: true,
              rules: [{
                required: true,
                message: "請選擇所屬角色",
                trigger: "click"
              }]
            },
            {
              label: "所屬部門",
              prop: "deptName",
              slot: true,
              display: false
            },
            /*{
              label: "用戶平臺",
              prop: "userTypeName",
              slot: true,
              display: false
            },
            {
              label: "用戶平臺",
              type: "select",
              dicUrl: "/api/blade-system/dict/dictionary?code=user_type",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              dataType: "number",
              search: true,
              hide: true,
              display: false,
              prop: "userType",
              rules: [{
                required: true,
                message: "請選擇用戶平臺",
                trigger: "blur"
              }]
            },*/
          ],
        },
      }
    },
    props: {
      callback: {
        type: Function
      },
      name: {
        type: String
      },
      multiple: {
        type: Boolean,
        default: false
      }
    },
    created() {
      getRoleTree("000000").then(res => {
        const column = this.findObject(this.option.column, "roleId");
        column.dicData = res.data.data;
      });
      this.init()
    },
    methods: {
      init(){
        this.text = this.name;
      },
      formatter(row){
        if(!row.name) return '';
        if (row.name && this.callback){
          this.callback(row)
        }
        return row.name;
        // return row.name + '-' + row.ehr;
      },

      rowClick(row, column, event){
        if (!this.multiple){
          this.selectionClear();
        }
        let $target = event.currentTarget.firstElementChild;
        $target.firstChild.firstChild.click();
      },
      selectUser(){
        let nameArr = [];
        let selectList = [];
        this.selectionList.forEach(item => {
          nameArr.push(item.name)
          let obj = {};
          obj.id = item.id,obj.name = item.name,obj.ehr = item.ehr;
          selectList.push(obj)
        })
        this.text = nameArr.join()
        this.callback(selectList)
        this.visible = false;
      },

      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}){
        //分頁查詢信息
        getPageAll(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          var data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          if (!this.option.reserveSelection){
            this.selectionClear();
          }
          // callback({total: data.total, data: data.records});
        })
      },
    }
  }
</script>

<style scoped>

</style>
