<template>
  <div class="app-container">
    <ContainerLayout :options="view.layout" ref="layout" class="body-content" @resize="resize">
      <div slot="north">
        <div class="title" v-if="view.showTitle" ref="title">{{$_i18n(view.title)||"未设置标题"}}</div>
        <CustomToolbar v-show="view.showToolbar" ref="toolbar" :fid="fid" @click="$page_toolbar_clickHandler"
                       @ready="$_page_toolbar_initComplete" @resize="resize" @completed="completed"
                        :queryParams="queryParams" page="list" :active-oa="queryParams.cid!=null&&view.oa"></CustomToolbar>
      </div>
      <div ref="middle">
        <el-table ref="table" v-loading="queryParams.loading" :data="items.rows" element-loading-text="Loading"
                  :border="view.border" :stripe="view.stripe" size="mini" @selection-change="checked"
                  :row-class-name="tableRowClassName" @row-click="rowClick" @row-dblclick="rowDbClick"
                  @current-change="selected"  @sort-change="sorted" :style="{width:view.width}" :row-key="view.idKey"
                  :highlight-current-row="view.select" :height="view.height" :max-height="view.maxHeight"
                  :empty-text="view.emptyText" :fit="view.fit" >
          <el-table-column v-if="view.showCheckbox" type="selection" width="40">
          </el-table-column>
          <el-table-column  v-if="view.showSeq" align="center" label="序号" width="50" :fixed="view.seqFixed">
            <template slot-scope="scope">{{ scope.$index+1 }}</template>
          </el-table-column>
          <template v-for="column in items.columns" v-if="column.visible!==false&&!hiddens[column.name]">
            <el-table-column v-if="column.name==null" :label="$_i18n(column.text)" header-align="center"
                             :height="view.height" :fixed="getFixed(column)">
              <template v-for="child in column.children" v-if="child.visible!==false">
                <el-table-column v-if="view.row.list.indexOf(child.name)<0"  :label="$_i18n(child.text)"
                                 :width="adapterWidth(column)" :prop="child.name" :align="child.align"
                                 header-align="center" :min-width="column.minWidth"
                                 :sortable="child.sortable" show-overflow-tooltip >
                  <template slot-scope="scope">
                    <div v-if="!view.editable&&hasRichText(scope.row[column.name])"
                         v-html="$_i18n(scope.row[column.name])"></div>
                    <template v-else slot-scope="scope">
                      {{$_i18n(scope.row[column.name])}}
                    </template>
                  </template>
                </el-table-column>
                <el-table-column v-else align="center" :label="$_i18n(child.text)" :width="child.width" header-align="center">
                  <template slot-scope="scope">
                    <template v-for="(name,index) in stringArray(child.name)">
                      <el-button v-if="view.row.buttons[name]&&(view.buttonStyle&3)>0" size="mini"
                                 @click="handle($event , view.row.buttons[name], scope.row)"
                                 :type="$core.adapterType(view.row.buttons[name])"
                                 :class="checkButtonVisible(view.row.buttons[name].linkageRule,scope.row)"
                                 :icon="(view.buttonStyle&1)>0?getStyle(view.row.buttons[name].style||'icon-search'):''"
                                 :title="getButtonTitle(view.row.buttons[name],null,column.tooltip,index)">
                        {{(view.buttonStyle&2)>0?$_i18n(view.row.buttons[name].name):""}}
                      </el-button>
                      <a v-if="view.row.buttons[name]&&(view.buttonStyle&4)>0" class="simple-button"
                         :title="getButtonTitle(view.row.buttons[name],null,column.tooltip,index)"
                         :class="checkButtonVisible(view.row.buttons[name].linkageRule,scope.row)"
                         @click="handle($event , view.row.buttons[name], scope.row)">
                        {{$_i18n(view.row.buttons[name].name)}}
                      </a>
                    </template>
                  </template>
                </el-table-column>
              </template>
            </el-table-column>
            <template v-else>
              <el-table-column v-if="view.row.list.indexOf(column.name)<0&&column.name!=='star_score'" :label="$_i18n(column.text)"
                               :width="adapterWidth(column)" :prop="column.name" :align="column.align"
                               header-align="center" :min-width="column.minWidth"
                               :fixed="getFixed(column)" :sortable="column.sortable" show-overflow-tooltip >
                <template slot-scope="scope">
                 <div v-if="!view.editable&&hasRichText(scope.row[column.name])" v-html="$_i18n(scope.row[column.name])"></div>
                  <template v-else slot-scope="scope">
                    {{$_i18n(scope.row[column.name])}}
                  </template>
                </template>
              </el-table-column>
              <el-table-column v-else :align="column.align" :label="$_i18n(column.text)" :width="column.width" :fixed="getFixed(column)"
                               header-align="center" >
                <template slot-scope="scope">
                  <template v-if="column.name==='star_score'">
                    <el-rate v-model="scope.row[column.name]" disabled show-score text-color="#ff9900" score-template="{value}">
                    </el-rate>
                  </template>
                  <template v-else v-for="(name,index) in stringArray(column.name)">
                    <template v-if="view.row.buttons[name]">
                      <template v-if="(view.buttonStyle&3)>0">
                        <LinkButton v-if="view.row.buttons[name].type==='link'" :type="$core.adapterType(view.row.buttons[name])"
                                    :href="view.row.buttons[name].href||'javascript:void(0);'" target="_blank"
                                    :ref="view.row.buttons[name].code"
                                    @click="handle($event , view.row.buttons[name], scope.row)"
                                    :size="$store.state.settings.Size" :disabled="view.row.buttons[name].readonly===false"
                                    :underline="false" :class="checkButtonVisible(view.row.buttons[name].linkageRule,scope.row)"
                                    :icon="(view.buttonStyle&1)>0?getStyle(view.row.buttons[name]):''"
                                    :title="getButtonTitle(view.row.buttons[name],null,column.tooltip,index)">
                          {{(view.buttonStyle&2)>0?$_i18n(view.row.buttons[name].name):""}}</LinkButton>
                        <el-button v-else :size="$store.state.settings.Size"
                                   @click="handle($event , view.row.buttons[name], scope.row)"
                                   :type="$core.adapterType(view.row.buttons[name])"
                                   :class="checkButtonVisible(view.row.buttons[name].linkageRule,scope.row)"
                                   :icon="(view.buttonStyle&1)>0?getStyle(view.row.buttons[name].style||'icon-search'):''"
                                   :title="getButtonTitle(view.row.buttons[name],null,column.tooltip,index)">
                          {{(view.buttonStyle&2)>0?$_i18n(view.row.buttons[name].name):""}}
                        </el-button>
                      </template>
                      <template v-else>
                        <a v-if="(view.buttonStyle&4)>0" class="simple-button"
                           :class="checkButtonVisible(view.row.buttons[name].linkageRule,scope.row)"
                           :title="getButtonTitle(view.row.buttons[name],scope,column.tooltip,index)"
                           @click="handle($event , view.row.buttons[name], scope.row)">
                          {{view.row.buttons[name].linkageRule.name?scope.row[view.row.buttons[name].linkageRule.name]:$_i18n(view.row.buttons[name].name)}}
                        </a>
                      </template>
                    </template>
                  </template>
                </template>
              </el-table-column>
            </template>
          </template>
        </el-table>
        <el-pagination v-if="view.pageControl.visible!==false" @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" :small="view.pageControl.small"
          :current-page.sync="queryParams.p" :page-sizes="view.pageControl.pageSizes" :page-size="queryParams.s"
          layout="total, sizes, prev, pager, next, jumper" :total="(items&&items.total)||0" :pager-count="view.pageControl.pageCount">
        </el-pagination>
      </div>
      <!--使用vue动态组件加载适配-->
      <component v-if="view.layout.south && view.layout.south.component!=null && view.layout.south.visible"
                 slot="south" ref="south" :is="view.layout.south.component" :params="view.layout.south.params">
      </component>
      <!--使用vue动态组件加载适配-->
      <component v-if="view.layout.east && view.layout.east.component!=null && view.layout.east.visible"
                 slot="east" ref="east" :is="view.layout.east.component" :params="view.layout.east.params">
      </component>
    </ContainerLayout>
    <template>
      <Dialog refs="dialog" :title="dialog.title" :visible.sync="dialog.visible" :destroy-on-close="dialog.destroyOnClose"
              :width="dialog.width" :height="dialog.height" :close-on-click-modal="dialog.modalClose"
              :parentClass="view.parentClass" @close="handleDialogClose" :custom-class="view.customClass"
              :modal-append-to-body="false" :close-on-press-escape="false">
        <component v-if="dialog.visible" :is="dialog.component" :params="dialog.params"></component>
        <span v-if="dialog.footer&&dialog.footer.visible" slot="footer" class="dialog-footer">
            <el-button @click="dialog.visible = false">{{$_i18n("form.cancel")}}</el-button>
            <el-button type="primary" @click="dialog.visible = false">{{$_i18n("form.ok")}}</el-button>
          </span>
      </Dialog>
    </template>
  </div>
</template>
<script>
import resize from '../../utils/mixins/resize';
import page from '../Common/page';
import LinkButton from '../LinkButton';

export default {
      name: "ListView",
      mixins: [resize, page],//监听外部框架的大小改变事件
      components:{
        LinkButton
      },data() {
        return {
          rid: null,
          checkedItems: [],
          items: {columns: null, rows: [], total: 0, page: 1},
          queryParams: {s: 20, p: 1, paging: "pagecount"},
          view: {//布局控制配置
            row: {list: [], buttons: {}},
            editable:false,
            //phy_del:false,//是否物理删除
            select: true,
            showCheckbox: true,
            showSeq: false,
            seqFixed: false,
            stripe: true,
            border: true,
            fit: true,
            width: "100%",
            minWidth:"200px",
            pageControl: {
              pageSizes: [20, 50, 100, 200, 500, 1000],
              height: 26,
              pageCount: 11,
              visible: true,
              small: true
            },
            layout: {
              north: {visible: true, resize: false, size: "auto"},
              south: {visible: false, size: "50%", params: {showTitle: true, inited: false}},
              east: {visible: false, params: {showTitle: true, inited: false}},
            }
          }
        }
      }, async created() {
        this.$_page_getRouter();
        await this.initFormConfig();
      }, mounted() {
        this.$refs.layout.updateLayout(this.view.layout);
      }, computed: {},
      methods: {
        tableRowClassName({row, rowIndex}) { //用于控制删除掉的数据变成灰色
          return (row.active === false || row.active==='否') ? "dis-active" : "active";
        }, visible(item) {
          return item.visible ? undefined : "hide";
        },adapterWidth(item){
          if(!item.width&&!item.minWidth)
            return 100;
          return item.width;
        },customQuery(params) {
          if (this.$refs.toolbar && this.$refs.toolbar.loaded) {
            // let needData = (params.data !== false && params.noQuery!==true);
            // delete params.data;
            this.$core.extend(this.queryParams, params);//解决搜索时，不会联动分页控件的问题
            let options = this.$core.extend({export: "json", head: !this.items.columns}, this.queryParams);
            this.clearData();
            if ((this.rid || this.view.dataUrl) && (options.head || this.queryParams.data)) {
              this.queryParams.loading = true;
              if (this.queryParams.data) { //当启用数据查询后,空数据提示,需要变更
                this.view.emptyText =this.view.queryEmptyText||"查无数据";
              }else{
                this.view.emptyText =this.view.noQueryText||"当前页面需要手动查询！";
              }
              let url = this.view.dataUrl || this.$store.state.api.report.loadReport + this.rid;
              delete options.rid;//删除重复提交的id

              this.$http(url, {data: options}).then((res) => {
                if(res.code===0) {
                  if (options.head) {
                    this.items.columns = res.columns;
                    if (this.view.headers && this.view.headers.length) {
                      let columnMap = {};
                      for (let i in res.columns) {
                        columnMap[res.columns[i].name] = res.columns[i];
                      }
                      let result = [];
                      for (let i in this.view.headers) {
                        if (typeof this.view.headers[i] == "string") {
                          let name = this.view.headers[i];
                          result[i] = columnMap[name];
                        } else {
                          let obj = this.view.headers[i];
                          result[i] = obj;
                          for (let j in obj.children) {
                            if (typeof obj.children[j] == "string") {
                              let name = obj.children[j];
                              obj.children[j] = columnMap[name];
                            }
                          }
                        }
                      }
                      // this.$core.debug().log("表格的列数据",this.items.columns);
                      this.items.columns = result;
                    }
                  }
                  if (this.queryParams.data) {//有查数据才更新分页
                    this.items.rows = res.rows;
                    this.items.total = res.total;
                    this.queryParams.p = res.page;
                  // }else{
                  //   this.items.total = 0;
                  //   this.queryParams.p = 1;
                  }
                  //自动选中之前的数据的功能
                  let item = this.$_page_keepSelectedCallback(this.items.rows);
                  this.queryParams.loading = false;
                  this.$nextTick(() => {
                    this.resize();
                    // this.$refs.table.doLayout();//解决表格存在fixed时,布局出错的问题
                    if (this.queryParams.data && this.items.rows.length > 0) {
                      this.$refs.table.setCurrentRow(item || this.items.rows[0])
                    }else{
                      this.$refs.table.setCurrentRow({});
                    }
                  });
                }else{
                  this.$_page_message(res);
                  this.queryParams.loading = false;
                }
              })
            }
          } else {
            if (this.queryHandle != null) {
              clearTimeout(this.queryHandle);
              delete this.queryHandle;
            }
            this.queryHandle = setTimeout(this.customQuery, 50, params);
          }
        }, calcHeight() {
          return this.$refs.middle.offsetHeight - (this.view.pageControl.visible !== false ? this.view.pageControl.height : 0);
        }, updatePageParams(pageParams) {
          if (pageParams.reportName) {
            this.view.title = pageParams.reportName;
            delete pageParams.reportName;
          }
          if (pageParams.rid) {
            this.rid = pageParams.rid; //拦截无穷递归
          }
        }, resize() {
          this.$nextTick(() => {
            if (this.$refs.layout)
              this.view.width = this.$refs.layout.$refs.center.$el.offsetWidth + 'px';
            let height = this.calcHeight();
            if (height > 0) { //&& this.view.height != height
              this.$set(this.view, "height", height);
              this.$nextTick(() => {
                this.$refs.table.layout.setHeight(height);

              });
            }
            this.$refs.table.doLayout();
            if (this.view.layout.south.visible && this.$refs.south) {
              // this.$core.debug().log("调整底部组件大小");
              this.$refs.south.resize();
            }
            if (this.view.layout.east.visible && this.$refs.east) {
              // this.$core.debug().log("调整底部组件大小");
              this.$refs.east.resize();
            }
          })
        }, completed() {
          // this.$core.debug().log(this.$options.name,"收到工具栏加载完成事件");
        }, selected(newRow,oldRow) {
          this.selectedItem = newRow;
          if (this.view.layout.south.visible)
            this.$_page_linkageLayout("south");
          if (this.view.layout.east.visible)
            this.$_page_linkageLayout("east");
        }, sorted(e) {
          this.$core.debug().log("排序改变事件", e);
        }, checked(e) {
          this.checkedItems = e;
          // this.checkedIds = [];
          // for (let i in e) {
          //   this.checkedIds.push(e[i][this.view.idKey]);
          //   this.checkedItems.push(e[i]);
          // }
        }, handleSizeChange(e) {
          // this.queryParams.s =( e>0?e:20）;
          // this.queryParams.p = 1;
          this.customQuery({s:e>0?e:20,p:1});
        }, handleCurrentChange(e) {
          let pages=Math.ceil(this.items.total/this.queryParams.s);
          if(e>pages)
            e=pages;
          // this.queryParams.p = e;
          this.customQuery({p:e});
        }, handle(evt,target, e) {
          //这边需要链接工具栏配置，其实包括这个按钮样式也是需要根据工具栏指示来做的，如果工具栏没有这个按钮，也是不允许在这边显示的，以保证安全协议的唯一性
          this.selectedItem = e;
          this.$refs.toolbar.handleClick(evt,target);
        }, clearData() {
          this.items.rows = [];
          this.items.total = 0;
          this.checkedItems=[];
          this.queryParams.p = 1;
          if (this.view.layout.south.visible && this.$refs.south && this.$refs.south.clearData) {
            this.$refs.south.clearData();
          }
          if (this.view.layout.east.visible && this.$refs.east && this.$refs.east.clearData) {
            this.$refs.east.clearData();
          }
        },checkButtonVisible(setting,data){
          if (setting.validate) {
            for (let key in setting.validate) {
              if (setting.validate[key].required !== false) {
                let result = this.validateCallback(setting.validate[key], key,data);
                if(result===false)
                  return "hidden";
              }
            }
          }
          return "";
        },validateCallback(item, key,data) {
          if(data==null){
            data=this.getPageParams();
          }
          // this.$core.debug().log("执行表格内容验证", item, data);
          return this.validateData(item,key,data);
        }, stringArray(data) {
          return data.split(",");
        }, rowClick(row,column,e) {
          if (this.rowClickHandle) {
            this.$core.debug().log("点击了行", row, this.view.rowClick);
            this.selectedItem = row;
            this.$refs.toolbar.handleClick(e,this.rowClickHandle);
          }
        }, rowDbClick(row,column,e) {
          if (this.rowDbClickHandle) {
            this.$core.debug().log("双击了行", row, this.view.rowDbClick);
            this.selectedItem = row;
            this.$refs.toolbar.handleClick(e,this.rowDbClickHandle);
          }
        },hasRichText(text){
          return /^[<][-\w]+([ ].*)*[>].*[<][/][-\w]+[>]$/.test(text);
        },
        getFixed:function (data){
          if(data.fixed==="false")
            return false;
          if(data.fixed==="true")
            return true;
          return data.fixed;
        },getButtonTitle:function (button,scope,tooltips,index){
          let tooltip = null;
          if(scope){
            tooltip=scope.row[button.linkageRule.name];
          }
          if(!tooltip&&tooltips)
            tooltip = this.stringArray(tooltips)[index];
          let key= tooltip||button.remark||button.name;
          return this.$_i18n(key)
        }
      }
    }
</script>

