<template>
  <div>
    <div class="mt-3">
      <el-table
        ref="operation"
        :data="activiteTableData"
        tooltip-effect="dark"
        style="width: 100%"
        :height="operateTableHeight"
      >
        <el-table-column
          prop="name"
          :label="$t('view.op_name')"
          min-width="60%"
        >
          <template slot-scope="scope">
            <span @click="actDataClick(scope.row)">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="actName"
          :label="$t('view.op_type')"
          min-width="60%"
        ></el-table-column>
        <el-table-column prop="address" :label="$t('view.move_up')">
          <template slot-scope="scope">
            <el-button
              size="mini"
              :disabled="scope.$index === 0"
              @click="actMoveUp(scope.$index, scope.row)"
            >
              <i class="el-icon-arrow-up"></i>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="address" :label="$t('view.move_down')">
          <template slot-scope="scope">
            <el-button
              size="mini"
              :disabled="scope.$index === activiteTableData.length - 1"
              @click="actMoveDown(scope.$index, scope.row)"
            >
              <i class="el-icon-arrow-down"></i>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column :label="$t('view.op')" min-width="150px">
          <template slot-scope="scope">
            <i
              class="el-icon-delete"
              style
              @click="deleteActList(scope.row.id)"
            ></i>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="fc" style="height: 40px">
        <el-button type="primary" plain size="mini" @click="createAct">{{
          $t('view.create')
        }}</el-button>
      </el-row>
    </div>
    

    <!-- 新建或者编辑操作弹出层界面 -->
    <ViewOperationDialog
      v-if="dialogOperationVisible"
      :dialogOperationVisible="dialogOperationVisible"
      :actForm="actForm"
      :dialogOperationTiTle="dialogOperationTiTle"
      :viewId="viewId"
      :moduleId="moduleId"
      @closeOperationDialog="dialogOperationVisible = false"
      ref="viewOperate"
      :activityId="currentActFormRow.id"
      @resetActFormData="resetActFormData"
    />
  </div>
</template>

<script>
import { getLogoPrefixUrl } from '@/service/CommontoolsAPI.js'
import ViewOperationDialog from "@/components/modulesDetail/ViewOperationDialog";
import {
  getViewActivitys,
  delActivitysView,
  updateActivityOrder,
} from '@/service/ViewApi.js'
import {delMsg} from '@/utils/elementui'
export default {
  name: 'ViewOperation',
  data() {
    return {
      tableHeight:
        document.documentElement.clientHeight - 60 - 32 - 41 - 50 - 32 - 48, //60 头部， 32 面包屑， 41 第一层页签, 48操作列操作栏, 50 第二层页签， 20 下方按钮
      activiteTableData: [], //操作列表
      dialogOperationVisible: false, //操作弹出层
      dialogOperationTiTle: '', // 操作弹出层标题
      
      currentActFormRow: "", //当前操作行的id
      actForm: {
        //操作表单
        name: '', //名称
        label: '', //标签
        multiLanguageLabel: '', //多语言标签
        type: '', //动作
        icontype: '', // 图标类型
        iconUrl: '', // 图片地址
        fontUrl: '', // 字体图标地址
        colorType: 'default', //颜色类型
        impmappingconfigid: '', // 导入映射
        showInToolbar: true, // 在工具栏中显示
        contextMenu: true, // 右键菜单操作
        onActionForm: '', // 作用表单
        onActionView: '', // 作用视图
        fileNameScript: '', // 文件执行脚本
        dispatcherUrl: '', // 地址脚本
        dispatcherParams: [
          // 参数
          {
            paramKey: '',
            paramValue: '',
          },
        ],

        jumpActOpenType: '0', //打开方式
        beforeActionScript: '', //动作执行前脚本
        afterActionScript: '', //动作执行后脚本
        readonlyScript: '', //只读条件
        hiddenScript: '', //隐藏条件
        expSub: false, // 是否导出子表数据
        orderno: 0, // 排序
      },

    }
  },
  props:{
    viewId: String,
    moduleId: String
  },
  components:{
    ViewOperationDialog
  },
  methods: {
    /**
     * 点击操作获取详情
     */
    actDataClick(row) {
      // console.log(row);
      let actForm = {
        ...this.actForm,
        name: row.name, //名称
        label: row.label ? row.label : '', //标签
        multiLanguageLabel: row.multiLanguageLabel
          ? row.multiLanguageLabel
          : '', //多语言标签
        type: row.type + '', //动作
        icon: row.icon ? row.icon : '', // 图标类型和图标合并【需要解析】
        icontype: row.icon ? JSON.parse(row.icon).type : '', // 图标类型
        iconUrl:
          row.icon && JSON.parse(row.icon).type === 'img'
            ? this.getUrl(JSON.parse(row.icon).icon)
            : '', // 图片地址
        fontUrl:
          row.icon && JSON.parse(row.icon).type === 'font'
            ? JSON.parse(row.icon).icon
            : '', // 字体图标地址
        colorType: row.colorType ? row.colorType : 'default', //颜色类型
        impmappingconfigid: row.impmappingconfigid
          ? row.impmappingconfigid
          : '', // 导入映射
        showInToolbar: row.showInToolbar, // 在工具栏中显示
        contextMenu: row.contextMenu, // 右键菜单操作
        onActionForm: row.onActionForm ? row.onActionForm : '', // 作用表单
        onActionView: row.onActionView ? row.onActionView : '', // 作用视图
        fileNameScript: row.fileNameScript ? row.fileNameScript : '', // 文件执行脚本
        dispatcherUrl: row.dispatcherUrl ? row.dispatcherUrl : '', // 地址脚本
        dispatcherParams: row.dispatcherParams
          ? eval(row.dispatcherParams)
          : [{ paramKey: '', paramValue: '' }], // 参数【需要解析】
        jumpActOpenType: row.jumpActOpenType + '', //打开方式
        beforeActionScript: row.beforeActionScript
          ? row.beforeActionScript
          : '', //动作执行前脚本
        afterActionScript: row.afterActionScript ? row.afterActionScript : '', //动作执行后脚本
        readonlyScript: row.readonlyScript ? row.readonlyScript : '', //只读条件
        hiddenScript: row.hiddenScript ? row.hiddenScript : '', //隐藏条件
        expSub: row.expSub, // 是否导出子表数据
        orderno: row.orderno, // 排序
      }
      // console.log(actForm);
      this.currentActFormRow = row
      this.actForm = actForm
      this.dialogOperationVisible = true
      this.dialogOperationTiTle = this.$t('form.edit')
      if (row.type == 27) {
        this.$nextTick(() => this.$refs.viewOperate.getImportMap())
      }
    },
    /**
     * 操作新建
     */
    createAct() {
      let actForm = {
        ...this.actForm,
        name: '', //名称
        label: '', //标签
        multiLanguageLabel: '', //多语言标签
        type: '', //动作
        icon: '', // 图标类型和图标合并的值
        icontype: '', // 图标类型【img:图片，font图标】
        iconUrl: '', // 图片地址
        fontUrl: '', // 字体图标地址
        colorType: 'default', //颜色类型
        impmappingconfigid: '', // 导入映射
        showInToolbar: true, // 在工具栏中显示
        contextMenu: true, // 右键菜单操作
        onActionForm: '', // 作用表单
        onActionView: '', // 作用视图
        fileNameScript: '', // 文件执行脚本
        dispatcherUrl: '', // 地址脚本
        dispatcherParams: [{ paramKey: '', paramValue: '' }], // 参数
        jumpActOpenType: '0', //打开方式
        beforeActionScript: '', //动作执行前脚本
        afterActionScript: '', //动作执行后脚本
        readonlyScript: '', //只读条件
        hiddenScript: '', //隐藏条件
        expSub: false, // 是否导出子表数据
        orderno: this.activiteTableData.length, // 排序
      }
      this.actForm = actForm
      this.dialogOperationVisible = true
      this.dialogOperationTiTle = this.$t('view.new')
    },
    /**
     *关闭弹窗重置actform
     */
    resetActFormData(val) {
      this.actForm = val;
      this.currentActFormRow = "";
    },
  /**
     * 上传图标的文件夹地址
     */
    getUrl(url) {
      return getLogoPrefixUrl(url)
    },
    /**
     * 删除操作的数据
     */
    async deleteActList(val) {
      if (val) {
        try{
          await delMsg(this.$t('msg.delConfirm'), this.$t('msg.tip'))
          const response = await delActivitysView([val])
          if (response.data.errcode == 0) {
            this.$message.success(this.$t('msg.del_ss'))
            this.getViewActivitys()
          }
        }catch(e){
          console.log(e)
        }
      }
    },
    /**
     * 上移
     */
    actMoveUp(index) {
      var that = this
      // 保存下一条数据
      let upDate = that.activiteTableData[index - 1]
      // 删除下一条数据
      that.activiteTableData.splice(index - 1, 1)
      // 增添被删除的那一条数据
      that.activiteTableData.splice(index, 0, upDate)

      this.changeActivityOrder(
        that.activiteTableData[index - 1].id,
        that.activiteTableData[index].id
      )
    },
    /**
     * 下移
     */
    actMoveDown(index) {
      var that = this
      // 保存下一条数据
      let downDate = that.activiteTableData[index + 1]
      // 删除下一条数据
      that.activiteTableData.splice(index + 1, 1)
      // 增添被删除的那一条数据
      that.activiteTableData.splice(index, 0, downDate)
      this.changeActivityOrder(
        this.activiteTableData[index].id,
        this.activiteTableData[index + 1].id
      )
    },
    /**
     * 操作排序
     */
    changeActivityOrder(oId, nId) {
      updateActivityOrder(oId, nId, {
        onSucess: (response) => {
          if (response.data.errcode == 0) {
            this.$message.success(response.data.data)
          }
        },
      })
    },

    /**
     * 视图操作列表
     */
    getViewActivitys() {
      getViewActivitys(this.viewId, {
        onSucess: (response) => {
          if (response.data.errcode == 0) {
            let data = response.data.data ? response.data.data : [];
            for (let i = 0; i < data.length; i++) {
              if (data[i].type == "2") {
                data[i].actName = this.$t('view.create');
              } else if (data[i].type == "3") {
                data[i].actName = this.$t('view.del');
              } else if (data[i].type == "34") {
                data[i].actName = this.$t('form.save');
              } else if (data[i].type == "18") {
                data[i].actName = this.$t('view.clean_all');
              } else if (data[i].type == "1") {
                data[i].actName = this.$t('view.loding_view');
              } else if (data[i].type == "20") {
                data[i].actName = this.$t('view.most_submit');
              } else if (data[i].type == "29") {
                data[i].actName = this.$t('view.most_signature');
              } else if (data[i].type == "16") {
                data[i].actName = this.$t('view.out_excel');
              } else if (data[i].type == "27") {
                data[i].actName = this.$t('view.in_excel');
              } else if (data[i].type == "26") {
                data[i].actName = this.$t('view.file_download');
              } else if (data[i].type == "36") {
                data[i].actName =this.$t('view.print');
              } else if (data[i].type == "43") {
                data[i].actName = this.$t('view.jump');
              }
            }
            this.activiteTableData = data;
          }
        },
      });
    },
  },
  mounted(){
    if (this.viewId) {
        this.getViewActivitys();
      }
  },
  computed: {
    /**
     * 计算视图操作高度
     */
    operateTableHeight() {
      if ((this.activiteTableData.length + 1) * 53 > this.tableHeight) {
        return this.tableHeight
      } else {
        return (this.activiteTableData.length + 1) * 53
      }
    },
  },
}
</script>
<style lang='less' scoped>
</style>