<template>
  <el-container
      id="methodObject"
      v-loading="loading"
      :element-loading-text="loadingText">
    <el-header :style="{'padding': '0px 20px', height: headerHeight}">
      <div class="header-div">
        <div :style="{'background-color': icon.color}" class="icon-div-repository">
          <i class="awsui-iconfont icon-dynamic-repository" v-html="icon.code"></i>
        </div>
        <div class="div-repository-title">
                    <span class="text-general-color">
                        {{ methodName }}
                    </span>
          <p class="text-second-color header-method-id">
            <b>({{ methodId }})</b>
          </p>
        </div>
        <div class="header-method-attr-config-icon">
          <el-tooltip content="文件属性配置" placement="bottom" :hide-after=2000>
            <i style="cursor: pointer;" class="iconfont" @click="handleFileAttrConfig">&#xe632;</i>
          </el-tooltip>
        </div>
      </div>
    </el-header>
    <el-main style="padding: 0px 20px;">
      <el-table
          ref="table"
          @row-click="clickTableRow"
          highlight-current-row
          :height="tableHeight"
          :data="tableData"
          size="small">
        <el-table-column
            prop="no"
            label="序号"
            width="80"
            align="center">
        </el-table-column>
        <el-table-column
            prop="icon"
            label="图标"
            width="130">
          <template slot-scope="scope">
            <img :src="scope.row.icon">
          </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="名称"
            width="250">
        </el-table-column>
        <el-table-column
            prop="id"
            label="ID">
        </el-table-column>
        <el-table-column
            prop="desc"
            label="描述">
          <template slot-scope="scope">
            <el-input v-model="scope.row.desc" placeholder="请输入内容" size="small" maxlength="50"
                      @change="updateMethodObjectDesc(scope.row.id, scope.row.desc)"></el-input>
          </template>
        </el-table-column>
        <el-table-column
            prop="modelName"
            label="所属模型"
            width="180">
        </el-table-column>
        <el-table-column
            prop="modelId"
            label="模型ID"
            width="200">
        </el-table-column>
        <el-table-column
            prop="type"
            label="类型"
            width="200">
        </el-table-column>
        <el-table-column
            prop="operate"
            label="操作"
            align="center"
            width="100">
          <template slot-scope="scope">
            <div class="operate-icon-display" style="text-align: center;height: 30px;line-height: 30px;">
              <p class="text-second-color">
                <el-tooltip v-if="scope.row.showShapeConfig" content="数据显示规则配置" placement="bottom" :hide-after=2000>
                  <i style="display: inline-block;cursor: pointer;margin-right: 10px;" class="iconfont"
                     @click="handleShapeAnchorConfig(scope.row.id)">&#xe61c;</i>
                </el-tooltip>
                <el-tooltip content="形状属性配置" placement="bottom" :hide-after=2000>
                  <i style="display: inline-block;cursor: pointer;position: relative;font-size: 23px;top: 3px;"
                     class="iconfont" @click="handleShapeAttrConfig(scope.row.id)">&#xe632;</i>
                </el-tooltip>
              </p>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <awsui-sidebar
        :title=drawer.title
        :append-to-body=false
        :modal-append-to-body=false
        :destroy-on-close=true
        :modal=false
        :visible.sync="drawer.visible"
        :before-close="handleDrawerClose">
      <div v-loading="drawer.loading">
        <div id="drawerBody" style="overflow-y: auto;">
          <!-- 扩展属性 -->
          <div v-for="item in drawer.data" class="attr-row"
               @click="(item.isUse ? item.isUse = false : item.isUse = true)">
            <span>{{ item.name }}<span class="text-second-color" style="font-size=12px;">（{{ item.id }}）</span></span>
            <i v-if="item.isUse" class="awsui-iconfont" style="float: right;color: #4E7FF9;">&#xe639;</i>
          </div>
        </div>
        <div class="drawer-footer" :style="{'background-color': '#F2F2F2', height: drawer.footerHeight}">
          <div id="drawerFooter" style="float: right;position: relative;top: 9px;">
            <awsui-button size="large" style="width: 80px;" class="button-general-color" type="primary"
                          :disabled="drawer.buttonDisabled" @click="saveAttrConfig">保存
            </awsui-button>
            <awsui-button size="large" style="width: 80px;" @click="closeDrawer">取消</awsui-button>
          </div>
        </div>
      </div>
    </awsui-sidebar>
    <MethodShapeAnchorDlg
        ref="methodShapeAnchorDlg"
        :visible.sync="shapeAnchorConfig.visible"
        :type="shapeAnchorConfig.type"
        :methodId="shapeAnchorConfig.methodId"
        :shapeName="shapeAnchorConfig.shapeName"
        :wsId="shapeAnchorConfig.wsId"
        v-on:cancel="shapeAnchorConfig.visible = false"
        v-on:getResult="handleSaveShapeAnchorConfig"
    />
    <awsui-dialog
        :title="progressBarDlg.title"
        :visible.sync="progressBarDlg.visible"
        :modal=true
        :append-to-body=true
        :destroy-on-close=true
        :close-on-press-escape=false
        :show-close=false
        width="500px"
        height="190px"
        :before-close="progressBarHandleClose">
      <!--awsui-dialog标签中的内容都可以自行去控制-->
      <div style="text-align: center;">
        <el-progress type="dashboard" :percentage="progressBarDlg.percentage" :color="progressBarDlg.colors"></el-progress>
      </div>
      <div style="text-align: center;">
        <span>总共[<b>{{ progressBarDlg.totalCount }}</b>]条，成功[<b style="color: #5cb87a">{{ progressBarDlg.okCount }}</b>]条，失败[<b style="color: #f56c6c">{{ progressBarDlg.errCount }}</b>]条</span>
      </div>
      <div style="text-align: center;">
        <span style="font-size: 12px;color: gray;">浏览器刷新、关闭等操作不会影响剩余任务的执行，详情见BPM日志</span>
      </div>
      <div style="text-align: center;">
        <span style="font-size: 12px;color: #f56c6c;">建议执行完成后再进行其他同类型操作</span>
      </div>
      <span slot="footer" class="dialog-footer">
            <awsui-button :disabled="progressBarDlg.closeBtnDisabled" @click="progressBarDlg.visible = false">关闭</awsui-button>
          </span>
    </awsui-dialog>
  </el-container>
</template>

<script>
import awsuiAxios from "../../awsuiAxios";
import MethodShapeAnchorDlg from "./MethodShapeAnchorDlg";

export default {
  name: "MethodObject",
  components: {MethodShapeAnchorDlg},
  props: {
    parentHeaderHeight: {
      type: String,
      default: '0px'
    },
    methodId: {
      type: String,
      default: ''
    },
    methodName: {
      type: String,
      default: ''
    },
    searchInput: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      loadingText: "加载中",
      headerHeight: '45px',
      tableHeight: (parseInt(this.$store.getters.getTopMainHeightFn) - 45 - parseInt(this.parentHeaderHeight)) + 'px',
      tableData: [],
      tableTempData: [],
      icon: {
        code: '',
        color: ''
      },
      drawer: {
        title: '文件属性配置',
        visible: false,
        loading: false,
        data: [],
        type: 'file',// shape,file
        shapeName: '',
        footerHeight: '50px',
        buttonDisabled: false
      },
      shapeAnchorConfig: {
        visible: false,
        type: 'commonShapeConfig',
        methodId: '',
        shapeName: '',
        wsId: ''
      },
      progressBarDlg: {
        visible: false,
        title: '保存进度',
        interval: null, // 查询日志定时器
        timer: 0, // 时间戳记录
        logId: '',
        totalCount: 0,
        okCount: 0,
        errCount: 0,
        percentage: 0,
        colors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#5cb87a', percentage: 80},
          {color: '#5cb87a', percentage: 100}
        ],
        closeBtnDisabled: false
      }
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {// 初始化数据查询
      const that = this;
      that.loadingText = '加载中';
      that.loading = true;
      const params = {
        url: 'jd',
        data: {
          cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_shape_definition_data_query',
          methodId: that.methodId
        }
      };
      awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
        that.loading = false;
        if (ro.result == 'ok') {
          for (let i = 0; i < ro.data.data.length; i++) {
            ro.data.data[i].no = i + 1;
            that.tableTempData.push(ro.data.data[i]);
          }
          that.icon = ro.data.icon;
          that.search(that.searchInput);
        } else {
          alert('请求响应错误');
        }
      }).catch(error => {
        console.log(error);
        that.loading = false;
      })
    },
    handleDataNo(data) {// 处理数据的序号
      for (let i = 0; i < data.length; i++) {
        data[i].no = i + 1;
      }
      return data;
    },
    search(searchInput) {
      if (searchInput && searchInput.trim() != '') {// 根据条件搜索
        const data = [];
        for (let i = 0; i < this.tableTempData.length; i++) {
          if (this.tableTempData[i].name.indexOf(searchInput) > -1) {
            data.push(this.tableTempData[i]);
          }
        }
        this.tableData = this.handleDataNo(data);
      } else {// 显示全部
        this.tableData = this.handleDataNo(this.tableTempData);
      }
    },
    clickTableRow(row, column, event) {
      this.$refs.table.setCurrentRow(row);
    },
    /**********文件/形状属性配置***********/
    handleShapeAttrConfig(shapeName) {// 形状属性配置
      const that = this;
      that.drawer.buttonDisabled = false;
      that.drawer.data = [];
      that.drawer.title = '形状属性配置';
      that.drawer.type = 'shape';
      that.drawer.shapeName = shapeName;
      that.drawer.visible = true;
      that.$nextTick(function () {
        that.initDrawerBodyHeight();
      });
      that.drawer.loading = true;
      const params = {
        url: 'jd',
        data: {
          cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_shape_more_attr_config_query',
          methodId: that.methodId,
          shapeName: shapeName,
          wsId: that.$store.getters.getWsIdFn
        }
      };
      awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
        that.drawer.loading = false;
        if (ro.result == 'ok') {
          that.drawer.data = ro.data;
        } else {
          alert('请求响应错误');
        }
      }).catch(error => {
        console.log(error);
        that.drawer.loading = false;
      })
    },
    handleFileAttrConfig() {
      const that = this;
      that.drawer.buttonDisabled = false;
      that.drawer.data = [];
      that.drawer.title = '文件属性配置';
      that.drawer.type = 'file';
      that.drawer.shapeName = '';
      that.drawer.visible = true;
      that.$nextTick(function () {
        that.initDrawerBodyHeight();
      });
      that.drawer.loading = true;
      const params = {
        url: 'jd',
        data: {
          cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_file_more_attr_config_query',
          methodId: that.methodId,
          wsId: that.$store.getters.getWsIdFn
        }
      };
      awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
        that.drawer.loading = false;
        if (ro.result == 'ok') {
          that.drawer.data = ro.data.moreAttr;
        } else {
          alert('请求响应错误');
        }
      }).catch(error => {
        console.log(error);
        that.drawer.loading = false;
      })
    },
    saveAttrConfig() {// 保存更多配置
      const that = this;
      const type = that.drawer.type;
      if (that.drawer.data.length == 0) {
        that.$message({message: '无相关属性进行保存', type: 'warning'});
        return;
      }
      that.drawer.buttonDisabled = true;
      that.closeDrawer();
      that.closeProgressBarDlg();
      that.loadingText = '正在更新资产库文件'
      that.loading = true;
      const params = {
        url: 'jd',
        data: {
          cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_more_attr_config_save',
          attrData: JSON.stringify(that.drawer.data),
          wsId: that.$store.getters.getWsIdFn,
          type: that.drawer.type,
          shapeName: that.drawer.shapeName,
          methodId: that.methodId
        }
      };
      // 查询数据
      awsuiAxios.post(params).then(function (ro) {
        that.loading = false;
        if (ro.result == 'ok') {
          that.progressBarDlg.logId = ro.data.progressBarCacheId;
          // that.$message({message: '更新成功',type: 'success'});
          that.$nextTick(()=> {
            that.progressBarDlg.visible = true;
            that.getUpdateInfoEvent();// 查询执行过程
          });
        } else {
          that.$message.error(ro.msg);
        }
      }).catch(error => {
        console.log(error);
      })
    },
    closeProgressBarDlg() {
      this.clearInterval();
      this.progressBarDlg.closeBtnDisabled = true;
      this.progressBarDlg.visible = false;
      this.progressBarDlg.percentage = 0;
      this.progressBarDlg.interval = null;
      this.progressBarDlg.timer = 0;
      this.progressBarDlg.logId = '';
    },
    closeDrawer() {// 关闭drawer
      this.drawer.visible = false;
    },
    handleDrawerClose(done) {
      done();
    },
    initDrawerBodyHeight() {
      if (document.getElementById("drawerBody") != null) {
        document.getElementById("drawerBody").style.height =
            parseInt(this.tableHeight) + parseInt(this.headerHeight) + parseInt(this.parentHeaderHeight) - 58 - parseInt(this.drawer.footerHeight) + 'px';// 68是drawer标题高度
      }
    },
    /********形状锚点配置*********/
    handleShapeAnchorConfig(shapeName) {
      this.shapeAnchorConfig.wsId = this.$store.getters.getWsIdFn;
      this.shapeAnchorConfig.methodId = this.methodId;
      this.shapeAnchorConfig.shapeName = shapeName;
      this.shapeAnchorConfig.visible = true;
    },
    handleSaveShapeAnchorConfig(result) {
      const that = this;
      const params = {
        url: 'jd',
        data: {
          cmd: 'com.actionsoft.apps.coe.pal_pl_manage_shape_config_save',
          wsId: result.wsId,
          methodId: result.methodId,
          shapeId: result.shapeId,
          data: JSON.stringify(result.data)
        }
      };
      awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
        if (ro.result == 'ok') {
          that.shapeAnchorConfig.visible = false;
          that.$message({showClose: true, message: '保存成功', type: 'success'});
        }
      }).catch(error => {
        console.log(error);
      })
    },
    updateMethodObjectDesc(shapeName, desc) {
      const that = this;
      const params = {
        url: 'jd',
        data: {
          cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_object_desc_save',
          shapeName: shapeName,
          desc: desc,
          methodId: that.methodId
        }
      };
      // 查询数据
      awsuiAxios.post(params).then(function (ro) {
        that.loading = false;
        if (ro.result == 'ok') {
          that.$message({message: '更新成功', type: 'success'});
        } else {
          that.$message.error(ro.msg);
        }
      }).catch(error => {
        console.log(error);
      })
    },
    progressBarHandleClose() {
      this.closeProgressBarDlg();
    },
    getUpdateInfoEvent() {// 定时器查询导入日志
      this.progressBarDlg.interval = setInterval(this.queryLog, 1000)
    },
    queryLog() {
      const that = this;
      that.progressBarDlg.timer = new Date().getTime();
      const data = {
        url: 'jd',
        data: {
          cmd: "com.actionsoft.apps.coe.pal_pl_manage_method_more_attr_config_save_log_query",
          logId: that.progressBarDlg.logId,
          timer: that.progressBarDlg.timer
        }
      };
      awsuiAxios.post(data).then(function (ro) {
        if (ro.result == 'ok') {
          if (ro.data.timer == '') {
            that.clearInterval();
          } else if (parseInt(ro.data.timer) <= that.progressBarDlg.timer) {// axios异步，以时间戳对比获取最新日至内容
            // 设置结果
            that.progressBarDlg.totalCount = ro.data.totalCount;
            that.progressBarDlg.okCount = ro.data.okCount;
            that.progressBarDlg.errCount = ro.data.errCount;
            that.progressBarDlg.percentage = ro.data.percentage;
            if (that.progressBarDlg.totalCount == that.progressBarDlg.okCount + that.progressBarDlg.errCount) {
              that.clearInterval();
            }
          }
        } else if (ro.result == 'warning') {
          that.$message({message: ro.msg, type: 'warning'});
        } else {
          that.$message.error(ro.msg);
        }
      }).catch(error => {
        console.log(error);
      })
    },
    clearInterval() {
      clearInterval(this.progressBarDlg.interval);
      this.progressBarDlg.closeBtnDisabled = false;
    },
  },
  computed: {
    listenTopMainHeight() {
      return this.$store.getters.getTopMainHeightFn;
    }
  },
  watch: {
    listenTopMainHeight: function (newd, old) {
      this.tableHeight = (parseInt(newd)) - parseInt(this.headerHeight) - parseInt(this.parentHeaderHeight) + 'px';
      this.initDrawerBodyHeight();
    }
  }
}
</script>

<style scoped>
#methodObject >>> .awsui-sidebar__header {
  margin-bottom: 0px;
  padding: 15px 20px 15px 20px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 16px;
}

.icon-div-repository {
  border-radius: 50%;
  margin-left: 15px;
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  vertical-align: middle;
}

.icon-dynamic-repository {
  color: white;
  font-size: 16px;
  /*position: relative;*/
  /*top: -1px;*/
}

.div-repository-title {
  display: inline-block;
  position: relative;
  left: 10px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  vertical-align: middle;
}

.attr-row {
  padding: 10px 20px;
  height: 35px;
  line-height: 35px;
  vertical-align: middle;
}

.attr-row:hover {
  background-color: #f2f2f2;
}

.header-div {
  width: 100%;
  height: 100%;
  background-color: #F5F7FA;
  line-height: 43px;
  vertical-align: middle;
}

.header-method-id {
  display: inline-block;
  font-size: 12px;
  /*-webkit-transform: scale(0.9);*/
  position: relative;
  left: 0px;
}

.header-method-attr-config-icon {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  vertical-align: middle;
  position: relative;
  left: 10px;
}
</style>