<template>
  <div>
    <div>
      <el-table
        ref="multipleTable"
        :data="listTableData"
        tooltip-effect="dark"
        style="width: 100%"
        :height="listTableHeight"
      >
        <el-table-column
          prop="name"
          :label="$t('view.list_name')"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span @click="onRowClick(scope.row)">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          :label="$t('view.move_up')"
          min-width="100px"
        >
          <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('view.move_down')"
          min-width="100px"
        >
          <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('view.op')" min-width="150px">
          <template slot-scope="scope">
            <i
              class="el-icon-delete"
              style
              @click="deleteList(scope.row.id)"
            ></i>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="fc" style="height: 40px">
        <el-button plain size="mini" type="primary" @click="create">{{
          $t('view.create')
        }}</el-button>
        <el-button plain size="mini" type="primary" @click="batchAddList">{{
          $t('view.batch_create')
        }}</el-button>
      </el-row>
    </div>

    <!-- 视图列新建或者编辑界面 -->
    <!-- dialogListVisible: 弹窗显示   listFrom: 【基本】内容  fromOptions：表单数据  resetListFromData：关闭弹窗重置数据  
    listFromColumnId：当前点击的行  formatList：【格式】内容  -->
    <ViewColumnDialog
      ref="viewList"
      v-if="dialogListVisible"
      :dialogListVisible="dialogListVisible"
      :listFrom="listFrom"
      @closeListDialog="dialogListVisible = false"
      @resetListFromData="resetListFromData"
      :listFromColumnId="listFromColumnId"
      :formatList="formatList"
      :viewId="viewId"
      :dialogListFromTiTle="dialogListFromTiTle"
      :listTableData="listTableData"
    />
    <!-- 批量创建弹框 -->
    <!-- transferVisible:弹框显示  closeTransferDialog: 关闭弹窗  leftData:左侧数据  formOptions：表单循环的值-->
    <TransferSelect
      ref="transferSelect"
      :transferVisible="transferVisible"
      @closeTransferDialog="closeTransferDialog"
      :leftData="batchAddFieldOptions"
      @addBatchColumnsView="addBatchColumnsView"
    />
  </div>
</template>

<script>
import { getLogoPrefixUrl } from '@/service/CommontoolsAPI.js'
import { getFieldData } from '@/service/FormApi.js'
import ViewColumnDialog from '@/components/modulesDetail/ViewColumnDialog'
import TransferSelect from '@/components/Common/transfer_select'
import {
  getViewColumns,
  saveBatchColumnsView,
  deleteColumnsView,
  getViewColumnsData,
  updateColumnOrder,
} from '@/service/ViewApi.js'
import {delMsg} from '@/utils/elementui'
export default {
  name: 'ViewColumn',
  props: {
    viewId: String,
    moduleId: String,
  },
  components: {
    TransferSelect,
    ViewColumnDialog,
  },
  data() {
    return {
      tableHeight:
        document.documentElement.clientHeight - 60 - 32 - 41 - 50 - 32 - 48, //60 头部， 32 面包屑， 41 第一层页签, 48操作列操作栏, 50 第二层页签， 20 下方按钮
      listTableData: [], //列模块的数据
      dialogListVisible: false, //新建编辑列的
      batchAddFieldOptions: [], // 批量编辑的表单数据
      listFrom: {
        //新建列的表单
        name: '', //列名称
        width: '', //列宽
        multiLanguageLabel: '', //多语言标签
        type: 'COLUMN_TYPE_FIELD', //类型
        showType: '01', //值类型
        formid: '', //表单
        fieldName: '', //表单字段
        isOrderByField: 'false', //默认排序
        sortStandard: '00', //排序根据--选择
        orderType: 'ASC', //排序根据--排序
        valueScript: '', // 值脚本
        buttonName: '', // 名称
        buttonType: '00', // 操作类型
        templateForm: '', // 模板表单
        icon: '', // 图标
        showAsLabel: false, // 是否显示标签
        isFilter:false,//是否筛选列
        showAsButton: false, // 是否显示按钮
        flowReturnCss: false, //流程回退标识
        imageName: '', //标识图像
        fontColor: '', //字体颜色
        sum: false, //当前页小计
        total: false, //总计
        visible: true, //视图页面可见
        visible4ExpExcel: true, //Excel导出显示
        visible4PagePrint: true, //网页打印显示
        showIcon: false, // 按图标显示
        iconMapping: '', // 按图标显示【值和图标地址】
        iconSelectCheck: false, // 显示选择图标弹窗，
        showMoon: false, // 是否在月视图中显示
        icons: [
          {
            iconValue: '',
            imgUrl: '',
          },
        ],
        actionScript: '', // 动作执行脚本
        beforeScript: '', // 动作执行前脚本
        hiddenScript: '', //隐藏条件
        mappingField: '', //映射字段
        orderno: '', // 排序
        dispatcherParams: [
          // 参数
          {
            paramKey: '',
            paramValue: '',
          },
        ],
        mappingform: '', // 映射的目标表单
        jumpMapping: '', // 跳转映射的参数
      },
      listFromColumnId: '', // 当前列获取到columnId
      listFormIconsIndex: '', // 列按图标显示点击第几个添加图标按钮
      activeNameList: 'basicList', //列标签切换
      isBasicList: true, //列标签基本
      isFormat: false, //列标签格式
      dialogListFromTiTle: '', // 列弹出层标题

      viewOptions: [], // 视图数组
      fieldNameOptions: [], //表单字段
      formatList: {
        formatType: 'simple', //类型
        displayType: '00', //显示文字方式
        displayLength: '', //显示文字长度
        showTitle: true, //显示提示文字
        decimalsNum: '1', //数值小数位
        decimalsCurr: '1', //货币小数位

        thouSign: false, //千位分隔符
        currType: 'zh_CN', //货币类型
        fontSize: '12', //大小
        color: 'rgba(0, 0, 0, 1)',
        groundColor: null,
      },
      transferVisible: false, // 批量创建弹窗
    }
  },
  methods: {
    /**
     * 新建列
     */
    create() {
      this.intViewColumnData()
      this.dialogListVisible = true
      this.dialogListFromTiTle = this.$t('form.new')
    },

    /**
     * 视图列批量创建弹窗
     */
    batchAddList() {
      this.getListFormData()
      this.transferVisible = true
    },

    /**
     * 批量新建弹窗关闭
     */
    closeTransferDialog() {
      this.transferVisible = false
    },
    /**
     * 批量新建
     */
    addBatchColumnsView(arr) {
      // 获取每个id的详情
      let aa = false//标识（视图-列）里的列名称是否和arr里的name一样
      let params = {
        appId: sessionStorage.getItem('appId'),
        moduleId: this.moduleId,
        viewId: this.viewId,
      }
      let batchViewColumnsArr = []
      let length
      if(this.listTableData.length == 0){
        length = this.listTableData.length
      }else{
        length = this.listTableData[this.listTableData.length - 1].orderno
      }

      // 取出对象遍历添加
      if( length === 0 ) {
        arr.map((item) => {
          let listFrom = {
            name: item.discript ? item.discript : item.name, //列名称
            width: '', //列宽
            multiLanguageLabel: '', //多语言标签
            type: 'COLUMN_TYPE_FIELD', //类型
            showType: '01', //值类型
            formid: this.$store.state.currentDataSourcesOption.relatedForm, //表单
            fieldName: item.discript ? item.discript : item.name, //表单字段
            isOrderByField: 'false', //默认排序
            sortStandard: '00', //排序根据--选择
            orderType: 'ASC', //排序根据--排序
            showAsLabel: false, // 是否显示标签
            isFilter:false,//是否筛选列
            showAsButton: false, // 是否显示按钮
            flowReturnCss: false, //流程回退标识
            imageName: '', //标识图像
            fontColor: '', //字体颜色
            sum: false, //当前页小计
            total: false, //总计
            visible: true, //视图页面可见
            visible4ExpExcel: true, //Excel导出显示
            visible4PagePrint: true, //网页打印显示
            actionScript: '', // 动作执行脚本
            beforescript: '', // 动作执行前脚本
            hiddenScript: '', //隐藏条件
            mappingField: '', //映射字段
            showMoon: false, // 是否在月视图中显示
            orderno: ++length,
          }
          batchViewColumnsArr.push(listFrom)
        })
      }else {
        arr.map((item) => {
          //for循环是判断批量创建的时候视图-列 里面是否有列名称和arr里item.name一样
          let fieldName = item.discript ? item.discript : item.name//列名称
          for(let i = 0;i < this.listTableData.length; i ++) {
            if(fieldName === this.listTableData[i].name) {
              aa = true
            }
          }
          if (aa === true) {
            // 计算名称加1
            let index = 1
            this.listTableData.forEach((elm) => {
              let exp = new RegExp(eval('/' + fieldName + '_[0-9]*' + '/'))
              if (elm.name.search(exp) != -1) {
                // 证明存在值
                index++
              }
            })
              fieldName = fieldName + '_' + index
          }
          let listFrom = {
            name: fieldName, //列名称
            width: '', //列宽
            multiLanguageLabel: '', //多语言标签
            type: 'COLUMN_TYPE_FIELD', //类型
            showType: '01', //值类型
            formid: this.$store.state.currentDataSourcesOption.relatedForm, //表单
            fieldName: item.name, //表单字段
            isOrderByField: 'false', //默认排序
            sortStandard: '00', //排序根据--选择
            orderType: 'ASC', //排序根据--排序
            showAsLabel: false, // 是否显示标签
            isFilter:false,//是否筛选列
            showAsButton: false, // 是否显示按钮
            flowReturnCss: false, //流程回退标识
            imageName: '', //标识图像
            fontColor: '', //字体颜色
            sum: false, //当前页小计
            total: false, //总计
            visible: true, //视图页面可见
            visible4ExpExcel: true, //Excel导出显示
            visible4PagePrint: true, //网页打印显示
            actionScript: '', // 动作执行脚本
            beforescript: '', // 动作执行前脚本
            hiddenScript: '', //隐藏条件
            mappingField: '', //映射字段
            showMoon: false, // 是否在月视图中显示
            orderno: ++length,
          }
          batchViewColumnsArr.push(listFrom)
        })
      }
      
      saveBatchColumnsView(params, batchViewColumnsArr, {
        onSucess: (response) => {
          if (response.data.errcode == 0) {
            this.$message({
              message: this.$t('msg.ss'),
              type: 'success',
            })
            this.transferVisible = false
            this.columnsList(this.viewId)
            this.$refs.transferSelect.rightData = []
          }
        },
      })
    },

    /**
     * 视图列编辑数据回显
     */
    onRowClick(row) {
      this.dialogListVisible = true
      this.listFromColumnId = row.id
      getViewColumnsData(row.id, {
        onSucess: (response) => {
          if (response.data.errcode == 0) {
            let data = response.data.data
            // 清空数组中的空值
            this.listFrom.dispatcherParams = []
            let listFrom = {
              ...this.listFrom,
              orderno: row.orderno, // 排序
              name: data.name, //列名称
              width: data.width ? data.width : '', //列宽
              multiLanguageLabel: data.multiLanguageLabel
                ? data.multiLanguageLabel
                : '', //多语言标签
              type: data.type, //类型
              showType: data.showType, //值类型
              formid: data.formid, //表单
              fieldName: data.fieldName ? data.fieldName : '', //表单字段
              icon: data.icon
                ? (data.customIcon?this.getUrl('/upload'+data.icon).replace('designer',''):this.getUrl(data.icon).replace('designer', ''))
                : '',
              isOrderByField: data.isOrderByField
                ? data.isOrderByField
                : 'false', //默认排序
              sortStandard: data.sortStandard ? data.sortStandard : '00', //排序根据--选择
              orderType: data.orderType ? data.orderType : 'ASC', //排序根据--排序
              valueScript: data.valueScript ? data.valueScript : '', // 值脚本
              buttonName: data.buttonName ? data.buttonName : '', // 名称
              buttonType: data.buttonType ? data.buttonType : '00', // 操作类型
              templateForm: data.templateForm ? data.templateForm : '', // 模板表单
              showAsLabel: data.showAsLabel ? data.showAsLabel : false, // 是否显示标签
              isFilter:data.isFilter?data.isFilter:false,//是否筛选列
              showAsButton: data.showAsButton ? data.showAsButton : false, // 是否显示按钮
              flowReturnCss: data.flowReturnCss ? data.flowReturnCss : false, //流程回退标识
              imageName: data.imageName ? data.imageName : '', //标识图像
              fontColor: data.fontColor ? data.fontColor : '', //字体颜色
              sum: data.sum ? data.sum : false, //当前页小计
              total: data.total ? data.total : false, //总计
              visible: data.visible, //视图页面可见
              visible4ExpExcel: data.visible4ExpExcel, //Excel导出显示
              visible4PagePrint: data.visible4PagePrint, //网页打印显示
              showIcon: data.showIcon, // 按图标显示
              iconMapping: data.iconMapping || '', // 按图标显示【值和图标地址】
              icons: [],
              actionScript: data.actionScript ? data.actionScript : '', // 动作执行脚本
              beforeScript: data.beforeScript ? data.beforeScript : '', // 动作执行前脚本
              hiddenScript: data.hiddenScript ? data.hiddenScript : '', //隐藏条件
              mappingField: data.mappingField ? data.mappingField : '', //映射字段【判断视图列的映射字段是否需要清空】
              mappingform: data.mappingform ? data.mappingform : '', // 目标表单
              jumpMapping: data.jumpMapping
                ? this.formatJumpMapping(
                    data.jumpMapping,
                    this.listFrom.dispatcherParams
                  )
                : [], // 跳转参数
              showMoon: data.showMoon, // 是否在月视图中显示
            }
            let formatList = {
              formatType: data.formatType ? data.formatType : 'simple', //类型
              displayType: data.displayType ? data.displayType : '00', //显示文字方式
              displayLength:
                data.displayLength && data.displayLength != '-1'
                  ? data.displayLength
                  : '', //显示文字长度
              showTitle: data.showTitle, //显示提示文字
              decimalsNum: data.decimalsNum ? data.decimalsNum : '1', //数值小数位
              decimalsCurr: data.decimalsCurr ? data.decimalsCurr : '1', //货币小数位
              thouSign: data.thouSign ? data.thouSign : false, //千位分隔符
              currType: data.currType ? data.currType : 'zh_CN', //货币类型
              fontSize: data.fontSize ? data.fontSize : '12', //大小
              color: data.color,
              groundColor: data.groundColor,
            }

            // 调用表单字段接口
            if (data.formid) {
              this.$refs.viewList.fromChange(data.formid)
            }
            // 字符串图标转为数组图标
            if (listFrom.iconMapping) {
              this.formatIcons(listFrom.iconMapping, listFrom.icons)
            }
            this.listFrom = listFrom
            this.formatList = formatList
            // 判断模板表单是否存在值
            if (data.templateForm) {
              this.getTemplateFormList()
            }
          }
        },
      })
      this.dialogListFromTiTle = this.$t('form.edit')
    },

    /**
     * 操作列中的表单项数据
     */
    getListFormData() {
      getFieldData(this.$store.state.currentDataSourcesOption.relatedForm, {
        onSucess: (response) => {
          if (response.data.errcode == 0) {
            let data = response.data.data
            let tempArr = []
            data.map((item) => {
              // 穿梭框需要用key和label
              if(item.type){
                tempArr.push({
                  ...item,
                  key: item.id,
                  label: item.discript ? item.discript : item.name
                })
              }
            })
            this.batchAddFieldOptions = tempArr
          }
        },
      })
    },

    /**
     * 格式化按图标显示的值【str2arr】
     */
    formatIcons(targetStr, targetArr) {
      let arr = targetStr.split(';')
      let newArr = []
      arr.forEach((item) => {
        newArr = item.split(':')
        targetArr.push({
          iconValue: newArr[0],
          imgUrl: newArr[1],
        })
      })
    },
    /**
     * 格式化映射参数【str2arr】
     */
    formatJumpMapping(targetStr, targetArr) {
      let arr = targetStr.split(';')
      let newArr = []
      arr.forEach((item) => {
        newArr = item.split(':')
        targetArr.push({
          paramKey: newArr[0],
          paramValue: newArr[1],
        })
      })
    },

    /**
     * 关闭弹窗重置listfrom
     */
    resetListFromData(val) {
      this.listFrom = val
      this.listFromColumnId = ''
    },

    /**
     * 上移
     */
    moveUp(index) {
      var that = this
      // 保存下一条数据
      let upDate = that.listTableData[index - 1]
      // 删除下一条数据
      that.listTableData.splice(index - 1, 1)
      // 增添被删除的那一条数据
      that.listTableData.splice(index, 0, upDate)
      this.changeColumnOrder(
        that.listTableData[index - 1].id,
        that.listTableData[index].id
      )
    },

    /**
     * 下移
     */
    moveDown(index) {
      var that = this
      // 保存下一条数据
      let downDate = that.listTableData[index + 1]
      // 删除下一条数据
      that.listTableData.splice(index + 1, 1)
      // 增添被删除的那一条数据
      that.listTableData.splice(index, 0, downDate)
      this.changeColumnOrder(
        that.listTableData[index].id,
        that.listTableData[index + 1].id
      )
    },

    /**
     * 移除列的数据
     */
    async deleteList(val) {
      if (val) {
        try{
          await delMsg(this.$t('msg.delConfirm'), this.$t('msg.tip'))
          const response = await deleteColumnsView([val])
          if (response.data.errcode == 0) {
            this.$message.success(this.$t('msg.del_ss'));
            this.columnsList(this.viewId)
          }
        }catch(e){
          console.log(e)
        }
      }
    },

    /**
     * 列排序
     */
    changeColumnOrder(oId, nId) {
      updateColumnOrder(oId, nId, {
        onSucess: (response) => {
          if (response.data.errcode == 0) {
            this.$message.success(response.data.data)
          }
        },
      })
    },

    /**
     * 上传图标的文件夹地址
     */
    getUrl(url) {
      return getLogoPrefixUrl(url)
    },

    /**
     * 获取列列表数据
     */
    async columnsList(viewId) {
      let response =await getViewColumns(viewId)
      this.listTableData = response.data.data ? response.data.data : []
    },

    /**
     * 用于初始化的数据
     */
    intViewColumnData(){
      let neworderno = this.listTableData.length==0?0:this.listTableData[this.listTableData.length - 1].orderno+1;
      let listFrom = {
        ...this.listFrom,
        name: '', //列名称
        width: '', //列宽
        multiLanguageLabel: '', //多语言标签
        type: 'COLUMN_TYPE_FIELD', //类型
        showType: '01', //值类型
        formid: '', //表单
        icon: '', // 图标
        fieldName: '', //表单字段
        isOrderByField: 'false', //默认排序
        sortStandard: '00', //排序根据--选择
        orderType: 'ASC', //排序根据--排序
        showAsLabel: false, // 是否显示标签
        isFilter:false,//是否筛选列
        showAsButton: false, // 是否显示按钮
        flowReturnCss: false, //流程回退标识
        imageName: '', //标识图像
        fontColor: '', //字体颜色
        sum: false, //当前页小计
        total: false, //总计
        visible: true, //视图页面可见
        visible4ExpExcel: true, //Excel导出显示
        visible4PagePrint: true, //网页打印显示
        showIcon: false, // 按图标显示
        iconMapping: '', // 按图标显示【值和图标地址】
        iconSelectCheck: false, // 显示选择图标弹窗，
        icons: [
          {
            iconValue: '',
            imgUrl: '',
          },
        ],
        actionScript: '', // 动作执行脚本
        beforeScript: '', // 动作执行前脚本
        hiddenScript: '', //隐藏条件
        mappingField: '', //映射字段
        showMoon: false, // 是否在月视图中显示
        orderno: neworderno, //排序号
        mappingform: '', // 目标表单
        dispatcherParams: [
          {
            paramKey: '',
            paramValue: '',
          },
        ], // 参数
        jumpMapping: '', // 跳转参数
        buttonName: '', // 名称
        buttonType: '00', // 操作类型
        templateForm: '', // 模板表单
        valueScript: '', // 值脚本
      }
      let formatList = {
        formatType: 'simple', //类型
        displayType: '00', //显示文字方式
        displayLength: '', //显示文字长度
        showTitle: true, //显示提示文字
        decimalsNum: '1', //数值小数位
        decimalsCurr: '1', //货币小数位
        thouSign: false, //千位分隔符
        currType: 'zh_CN', //货币类型
        fontSize: '12', //大小
        color: 'rgba(0, 0, 0, 1)',
        groundColor: null,
      }
      this.listFrom = listFrom
      this.formatList = formatList
    },
  },
  mounted() {
    this.columnsList(this.viewId)
  },
  computed: {
    /**
     * 计算视图列高度
     */
    listTableHeight() {
      if ((this.listTableData.length + 1) * 53 > this.tableHeight) {
        return this.tableHeight
      } else {
        return (this.listTableData.length + 1) * 53
      }
    },
  },
}
</script>
<style lang='less' scoped>
</style>