<template>
  <div>
    <div class="mt-3">
      <div>
        <el-table
          ref="multipleTable"
          :data="listTableData"
          style="width: 100%"
          :height="operateTableHeight"
        >
          <!-- <el-table-column type="selection" width="55" ></el-table-column> -->
          <el-table-column
            prop="name"
            :label="$t('form.activity_name')"
            min-width="150px"
          >
            <template slot-scope="scope">
              <span @click="btnActionDataClick(scope.row)">{{
                scope.row.name
              }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('form.activity_type')" min-width="100px">
            <template slot-scope="scope">
              <span>{{ getbtnActionType(scope.row.type) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" :label="$t('form.move_up')">
            <template slot-scope="scope">
              <el-button
                size="mini"
                :disabled="scope.$index === 0"
                @click="moveUp(scope.$index, scope.row)"
              >
                <i class="el-icon-arrow-up"></i>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="address" :label="$t('form.move_down')">
            <template slot-scope="scope">
              <el-button
                size="mini"
                :disabled="scope.$index === listTableData.length - 1"
                @click="moveDown(scope.$index, scope.row)"
              >
                <i class="el-icon-arrow-down"></i>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column :label="$t('form.op')" min-width="150px">
            <template slot-scope="scope">
              <i
                class="el-icon-delete"
                style=""
                @click="showDeleteConfirm(scope.row.id)"
              ></i>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="fc" style="height: 48px">
          <el-button type="primary" plain size="mini" @click="btnActionCreat">{{
            $t('btns.create')
          }}</el-button>
        </el-row>
      </div>
    </div>
    <!-- 新建或者编辑操作弹出层界面 -->
    
    <FormOperationDialog
      v-if="dialogBtnActionVisible"
      :dialogBtnActionVisible="dialogBtnActionVisible"
      :btnActionTypeOptions="btnActionTypeOptions"
      :btnActionForm="btnActionForm"
      :activitiesData="listTableData"
      :dialogBtnActionTiTle="dialogBtnActionTiTle"
      @resetBtnActionFormData="resetBtnActionFormData"
      ref="formOperation"
      @closeBtnActionDialog="dialogBtnActionVisible = false"
      :formId="formId"
      :btnActionFromColumnId="btnActionFromColumnId"
    />
  </div>
</template>

<script>
import FormOperationDialog from '@/components/modulesDetail/FormOperationDialog'
import {updateActivityOrder} from "@/service/ViewApi.js"
import configData from  '@/assets/js/config'
import {delMsg} from '@/utils/elementui'
import {
  getFormActivityList,
  deleteOperationColumn,
} from "@/service/FormApi.js";
export default {
  name: 'FormOperation',
  data() {
    return {
      operaHeight: (document.documentElement.clientHeight || document.body.clientHeight) - 60 - 32 - 41 - 50 - 20 - 48,
      listTableData: [],
      // 操作弹层数据
      dialogBtnActionVisible: false, // 操作弹出层xianshi
      dialogBtnActionTiTle: "", // 操作弹出层标题
      btnActionForm: { 
        //操作表单
        name: "", //名称
        label: "", //标签
        multiLanguageLabel: "", //多语言标签
        type: "", //动作
        transpond: "", // 摘要模板
        withOld: false, // 带旧数据
        icon: "", // 图标类型和地址合并
        icontype: "", // 图标类型
        iconurl: "", // 图片地址
        fontUrl: "", // 字体图标地址
        colorType: "default", //颜色类型
        workFlowType: "0", // 流程处理方式，
        editMode: "0", // 指定流程启动模式
        startFlowScript: "", // 流程启动脚本
        onActionPrint: "", // 选择打印模板
        fileNameScript: "", // 文件脚本路径
        jumpMode: "0", // 类型
        moduleSelect: "", // 跳转设置模块
        formSelect: "", // 跳转设置目标表单
        targetList: "", // 跳转设置模块 + 跳转设置目标表单
        dispatcherUrl: "", // 地址脚本
        dispatcherParams: [
          // 参数
          {
            "paramKey": "",
            "paramValue": "",
          },
        ],
        jumpActOpenType: "0", // 打开方式
        stateToShow: "", // 状态
        beforeActionScript: "", //动作执行前脚本
        retractBeforeActionScript: "", // 执行回撤前脚本
        retractAfterActionScript: "", // 执行回撤后脚本
        actionSelection: "0", // 动作处理方式
        relatedFormId: "", // 动作关联表单
        actionScript: "", // 动作执行脚本
        afterActionScript: "", //动作执行后脚本
        actionType: "0", // 动作完成后操作类型
        actionDispatcherUrlScript: "", // 自定义按钮 执行后的跳转动作类型的地址脚本
        readonlyScript: "", //只读条件
        hiddenScript: "", //隐藏条件
        orderno: 0, //排序号
      },
      btnActionTypeOptions: configData.btnActionTypeOptions,
      btnActionFromColumnId: "", // 当前选中行的值
    }
  },
  components: {
    FormOperationDialog,
  },
  props: {
    formId: String
  },
  mounted(){
    this.getFormActivityList();
  },
  methods: {
    /**
     * 获取表单操作列
     */
    getFormActivityList() {
      let params = {
        id: this.formId
      }
      getFormActivityList(params, {
        onSucess: (response) => {
          if (response.data.errcode == 0) {
            this.listTableData = response.data.data ? response.data.data : []
          }
        },
      })
    },

    /**
     * 操作列新建弹窗
     */
    btnActionCreat() {
      this.dialogBtnActionVisible = true;
      this.dialogBtnActionTiTle = this.$t('form.new');
      this.btnActionFromColumnId = "";
      this.btnActionForm.orderno = this.listTableData.length;
    },

    /**
     * 点击操作获取详情
     */
    btnActionDataClick(row) {
      this.btnActionFromColumnId = row.id
      let btnAction = {
        ...this.btnActionForm,
        name: row.name, //名称
        label: row.label ? row.label : '', //标签
        multiLanguageLabel: row.multiLanguageLabel
          ? row.multiLanguageLabel
          : '', //多语言标签
        type: row.type + '', //动作
        transpond: row.transpond ? row.transpond : '', // 摘要模板
        withOld: row.withOld ? row.withOld : false, // 带旧数据
        icon: row.icon ? row.icon : '', //图标类型和地址合并
        icontype: row.icon ? JSON.parse(row.icon).type : '', // 图标类型
        iconurl:
          row.icon && JSON.parse(row.icon).type === 'img' ? row.iconurl : '', // 图片地址
        fontUrl:
          row.icon && JSON.parse(row.icon).type === 'font'
            ? JSON.parse(row.icon).icon
            : '', // 字体图标地址
        colorType: row.colorType ? row.colorType : 'default', //颜色类型
        workFlowType: row.workFlowType ? row.workFlowType.toString() : '0', // 流程处理方式，
        onActionFlow: row.onActionFlow ? row.onActionFlow : '', // 作用流程
        editMode: row.editMode ? row.editMode + '' : '0', // 指定流程启动模式
        startFlowScript: row.startFlowScript ? row.startFlowScript : '', // 流程启动脚本
        onActionPrint: row.onActionPrint ? row.onActionPrint : '', // 选择打印模板
        fileNameScript: row.fileNameScript ? row.fileNameScript : '', // 文件脚本路径
        jumpMode: row.jumpMode ? row.jumpMode + '' : '0', // 类型
        targetList: row.targetList ? row.targetList : '', // 跳转设置模块 + 跳转设置目标表单
        moduleSelect: row.targetList ? row.targetList.split('|')[1] : '', // 跳转设置模块
        formSelect: row.targetList ? row.targetList.split('|')[0] : '', // 跳转设置目标表单
        dispatcherUrl: row.dispatcherUrl ? row.dispatcherUrl : '', // 地址脚本
        dispatcherParams: row.dispatcherParams
          ? eval(row.dispatcherParams)
          : [{ "paramKey": '', "paramValue": '' }], // 参数【需要解析】
        jumpActOpenType: row.jumpActOpenType ? row.jumpActOpenType + '' : '0', // 打开方式
        stateToShow: row.stateToShow ? row.stateToShow : '', // 状态
        beforeActionScript: row.beforeActionScript
          ? row.beforeActionScript
          : '', //动作执行前脚本
        retractBeforeActionScript: row.retractBeforeActionScript
          ? row.retractBeforeActionScript
          : '', // 执行回撤前脚本
        retractAfterActionScript: row.retractAfterActionScript
          ? row.retractAfterActionScript
          : '', // 执行回撤后脚本
        actionSelection: row.actionSelection ? row.actionSelection + '' : '0', // 动作处理方式
        relatedFormId: row.relatedFormId ? row.relatedFormId : '', // 动作关联表单
        actionScript: row.actionScript ? row.actionScript : '', // 动作执行脚本
        afterActionScript: row.afterActionScript ? row.afterActionScript : '', //动作执行后脚本
        actionType: row.actionType ? row.actionType + '' : '0', // 动作完成后操作类型
        actionDispatcherUrlScript: row.actionDispatcherUrlScript
          ? row.actionDispatcherUrlScript
          : '', // 自定义按钮 执行后的跳转动作类型的地址脚本
        readonlyScript: row.readonlyScript ? row.readonlyScript : '', //只读条件
        hiddenScript: row.hiddenScript ? row.hiddenScript : '', //隐藏条件
        orderno: row.orderno, // 列表排序
      }
      // 如果有摘要模板需要请求接口
      // if (row.transpond) {
      //   this.getSummarysListData()
      // }
      this.btnActionForm = btnAction
      this.dialogBtnActionVisible = true
      this.dialogBtnActionTiTle = this.$t('form.edit')
    },

    /**
     * 批量删除操作
     */
    async showDeleteConfirm(val) {
      try{
        await delMsg(this.$t('msg.delConfirm'), this.$t('msg.tip'))
        const response = await deleteOperationColumn([val])
        if (response.data.errcode == 0) {
          this.getFormActivityList();
          this.$message.success(this.$t('msg.del_ss'));
        }
      }catch(e){
        console.log(e)
      }
    },

    /**
     * 关闭操作新建编辑重置数据
     */
    resetBtnActionFormData(val) {
      this.btnActionForm = val;
      this.btnActionFromColumnId = "";
    },

    //操作类型的数据处理
    getbtnActionType(type){
      let btnType="";
      this.btnActionTypeOptions.forEach((elm)=>{
        if(elm.value==type){
          btnType=elm.label
        }
      })
      return btnType;
    },

    /**
     * 操作向上移动
     */
    moveUp(index) {
      // 保存上一条数据
      let updata = this.listTableData[index - 1];
      // 删除上一条的数据
      this.listTableData.splice(index - 1, 1);
      // 将上一条数据插入当前的索引数组
      this.listTableData.splice(index, 0, updata);

      this.changeActivityOrder(this.listTableData[index - 1].id, this.listTableData[index].id)
    },

    /**
     * 操作排序
     */
    changeActivityOrder(oId, nId,){
      updateActivityOrder(oId, nId, {
        onSucess: (response) => {
          if (response.data.errcode == 0) {
            this.$message.success(response.data.data)
          }
        },
      })
    },

    /**
     * 操作向下移动
     */
    moveDown(index) {
      // 保存下一条数据
      let downData = this.listTableData[index + 1];
      // 删除下一条数据
      this.listTableData.splice(index + 1, 1);
      // 将下一条数据插入当前的索引中
      this.listTableData.splice(index, 0, downData);
      this.changeActivityOrder(this.listTableData[index].id, this.listTableData[index + 1].id)
    },
  },
  computed:{
    /**
     * 计算table下的按钮
     */
    operateTableHeight(){
      if((this.listTableData.length + 1) * 53 > this.operaHeight){
        return this.operaHeight
      }else{
        return (this.listTableData.length + 1) * 53
      }
    },
  }
}
</script>
<style lang='less' scoped>
</style>