<template>
  <manager-dialog
    :title="command === 'add'?'新增':command == 'modify'?'修改':'查看'"
    :icon="command == 'add'?'el-icon-plus':command == 'modify'?'el-icon-edit':'el-icon-s-order'"
    :visible.sync="dialogVisible"
    width="52%"
    @opened="open"
    @closed="resetForm();dialogVisible = false"
  >
    <el-form
      ref="form"
      v-loading="loading"
      :rules="command === 'detail' ? null : rules"
      :model="dialogForm"
      size="small"
      label-width="auto"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="报表名称" prop="logAudireportConf.repoerName">
            <el-input v-model="dialogForm.logAudireportConf.repoerName" :disabled="command == 'detail'" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="审计分析任务" prop="logAudireportTaskAssocList">
            <el-select v-model="dialogForm.logAudireportTaskAssocList" filterable clearable multiple :disabled="command == 'detail'" @remove-tag="clearSelectedTask" @change="changeTaskList">
              <el-option
                v-for="item in auditAnalysisTaskList"
                :key="item.taskId"
                :label="item.taskName"
                :value="item.taskId"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin:0 0 10px 0">
        <el-col :span="10">
          <el-form-item label="布局行数" prop="logAudireportConf.rowNum">
            <el-select v-model="dialogForm.logAudireportConf.rowNum" :disabled="command == 'detail'" clearable>
              <el-option v-for="item in 3" :key="item" :value="item" :label="item" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="布局列数" prop="logAudireportConf.culumnNum">
            <el-select v-model="dialogForm.logAudireportConf.culumnNum" :disabled="command == 'detail'" clearable>
              <el-option v-for="item in 4" :key="item" :value="item" :label="item" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="command != 'detail'" :span="4" style="text-align:right">
          <el-button type="primary" size="small" style="margin-left:11px;" @click="createLayout">生成布局</el-button>
        </el-col>
      </el-row>
      <div id="dndListContainer" class="dndList-list">
        <draggable :list="list1" v-bind="{group:'article', disabled: disabled}" class="dragArea11" @start="start22" @end="end22">
          <div v-for="(element, index) in list1" :key="element.id" class="list-complete-item-layout" :style="{width:layoutWidth,marginRight:marginInit,height:layoutHeight}">
            <template v-if="element.chartType == '0'">
              <img :src="tableimg" alt="" class="imgbar" :style="{height:imgHeight,width:imgWidth,padding:dialogForm.logAudireportConf.rowNum <= 4 ? '13px':'6px'}">
            </template>
            <template v-if="element.chartType == '3'">
              <img :src="barimg" alt="" class="imgbar" :style="{height:imgHeight,width:imgWidth,padding:dialogForm.logAudireportConf.rowNum <= 4 ? '13px':'6px'}">
            </template>
            <template v-if="element.chartType == '1'">
              <img :src="lineimg" alt="" class="imgbar" :style="{height:imgHeight,width:imgWidth,padding:dialogForm.logAudireportConf.rowNum <= 4 ? '13px':'6px'}">
            </template>
            <template v-if="element.chartType == '2'">
              <img :src="pieimg" alt="" class="imgbar" :style="{height:imgHeight,width:imgWidth,padding:dialogForm.logAudireportConf.rowNum <= 4 ? '13px':'6px'}">
            </template>
            <template v-if="element.chartType == '4'">
              <img :src="mapimg" alt="" class="imgbar" :style="{height:imgHeight,width:imgWidth,padding:dialogForm.logAudireportConf.rowNum <= 4 ? '13px':'6px'}">
            </template>
            <template v-if="element.chartType == '5'">
              <img :src="radarimg" alt="" class="imgbar" :style="{height:imgHeight,width:imgWidth,padding:dialogForm.logAudireportConf.rowNum <= 4 ? '13px':'6px'}">
            </template>
            <template v-if="element.chartType == '6'">
              <img :src="tableimg" alt="" class="imgbar" :style="{height:imgHeight,width:imgWidth,padding:dialogForm.logAudireportConf.rowNum <= 4 ? '13px':'6px'}">
            </template>
            <p class="list-complete-item-handle" :style="{height:titleHeight,fontSize:dialogForm.logAudireportConf.rowNum <= 4 ?'14px':'10px',paddingBottom:dialogForm.logAudireportConf.rowNum <= 4 ?'8px':'2px'}">{{ element.taskName }}</p>
          </div>
        </draggable>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button style="border-radius: 3px" @click="dialogVisible = false;resetForm()">{{ command === 'detail' ? '关闭' : '取消' }}</el-button>
      <el-button style="border-radius: 3px" v-if="command !== 'detail'" @click="resetForm">重置</el-button>
      <el-button style="border-radius: 3px" v-if="command != 'detail'" type="primary" @click="Submit">提交</el-button>
    </span>
  </manager-dialog>
</template>

<script>
import draggable from 'vuedraggable'
import { reportConfigAdd, reportConfigUpd, getReportInfo, getLogAuditaskList } from '../api/report-config-manage'
export default {
  name: 'Dialog',
  components: { draggable },
  props: {
    command: String,
    data: Object,
    statics: Object,
    type: Number,
    reportId: Number
  },
  data() {
    return {
      disabled: false,
      id: null,
      dialogVisible: false,
      loading: false,
      dialogForm: {
        'logAudireportConf': {
          'repoerId': null,
          'repoerName': '', // 报表名称
          'rowNum': null, // 行数
          'culumnNum': null // 列数
        },
        'logAudireportTaskAssocList': [], // 审计分析任务id
        'logAudireportChartAssocList': []
      },
      list1: [],
      tableimg: require('../assets/img/table.png'),
      barimg: require('../assets/img/bar.png'),
      lineimg: require('../assets/img/line.png'),
      pieimg: require('../assets/img/pie.png'),
      mapimg: require('../assets/img/map.png'),
      radarimg: require('../assets/img/radar.png'),
      // 查询表单数组
      list1: [],
      // 拖拽参数
      layoutWidth: '', // 布局宽度
      layoutHeight: '', // 布局高度
      marginInit: '',
      imgWidth:'',// 图片宽度
      imgHeight: '', // 图片高度
      titleHeight: '',
      falgs: 'article',
      // 审计分析任务
      auditAnalysisTaskList: [],
      taskParams: {
        logAuditaskMap: {
          businessIds: []// 包含业务系统
        }
      },
      rules: {
        'logAudireportConf.repoerName': [{ required: true, message: '请输入报表名称', trigger: 'change' }],
        'logAudireportTaskAssocList': [{ required: true, message: '请选择审计分析任务', trigger: 'change', trigger: 'array' }],
        'logAudireportConf.rowNum': [{ required: true, message: '请选择行数', trigger: 'change' }],
        'logAudireportConf.culumnNum': [{ required: true, message: '请选择列数', trigger: 'change' }]
      }
    }
  },
  computed: {
    title() {
      return this.command === 'add'
        ? '新增'
        : this.command === 'modify'
          ? '修改'
          : '查看'
    }
  },
  created() {
    this.getAuditTaskList()
  },
  methods: {
    start22(event) {},
    end22(ev) {},
    handleDel(index, id) {},
    // 获取审计分析任务列表
    getAuditTaskList() {
      getLogAuditaskList(this.taskParams).then(resp => {
        if (resp.data.returnCode == '0') {
          this.auditAnalysisTaskList = resp.data.data.list
        }
      })
    },
    // 审计分析任务- 改变
    changeTaskList(val) {
      if (val.length == 0) {
        this.list1 = []
      // }else{
        // if(this.dialogForm.logAudireportConf.rowNum != null && this.dialogForm.logAudireportConf.culumnNum != null){
        //   if(this.auditAnalysisTaskList.length > (this.dialogForm.logAudireportConf.rowNum * this.dialogForm.logAudireportConf.culumnNum)){
        //     this.list1 = []
        //     this.$message.error('请点击生成布局按钮重新布局')
        //   }else{
        // this.list1 = this.myFilter2(this.auditAnalysisTaskList,this.dialogForm.logAudireportTaskAssocList)
        // }
        // }
      }
    },
    clearSelectedTask(val) {
      this.list1 = this.myFilter2(this.auditAnalysisTaskList, this.dialogForm.logAudireportTaskAssocList)
    },
    myFilter2(arr1, arr2) {
      var ret = []
      arr2.forEach(
        ele => {
          var findEle = arr1.find(x => x.taskId === ele)
          // 如果在arr1中找到,添加到arr1中
          findEle ? ret.push(findEle) : ''
        }
      )
      return ret
    },
    myFilter(arr1, arr2) {
      var ret = []
      arr2.forEach(
        ele => {
          var findEle = arr1.find(x => x.taskId === ele.taskId)
          // 如果在arr1中找到,添加到arr1中
          findEle ? ret.push(findEle) : ''
        }
      )
      return ret
    },
    createLayout() {
      if (this.dialogForm.logAudireportTaskAssocList.length != 0) {
        if (this.dialogForm.logAudireportConf.rowNum != null && this.dialogForm.logAudireportConf.culumnNum != null) {
          const count = this.dialogForm.logAudireportConf.rowNum * this.dialogForm.logAudireportConf.culumnNum
          if (count < this.dialogForm.logAudireportTaskAssocList.length) {
            this.$message.warning('任务个数超出布局行列数,请重新设置')
            this.layoutWidth = 'auto'
            this.marginInit = '0px'
            this.list1 = []
            return false
          } else {
            const containerHeight = (getComputedStyle(document.getElementById('dndListContainer'), null).height).replace(/px/, '') // 获取容器高度
            const width = 100 / this.dialogForm.logAudireportConf.culumnNum
            const height = containerHeight / this.dialogForm.logAudireportConf.rowNum - 2.6
            // if(this.dialogForm.logAudireportConf.rowNum <= 4){
            //   this.imgHeight = height-20 + 'px'
            // }else{
            //   this.imgHeight = height-20 + 'px'
            // }
            this.imgHeight = null;
            this.imgWidth = null;
            if(this.dialogForm.logAudireportConf.rowNum>=this.dialogForm.logAudireportConf.culumnNum){
              this.imgHeight = (height*0.29*this.dialogForm.logAudireportConf.rowNum) + '%'
              //this.imgWidth = height*0.2 + '%'
            }else {
              const temp = this.dialogForm.logAudireportConf.rowNum*this.dialogForm.logAudireportConf.culumnNum
              if(this.dialogForm.logAudireportConf.rowNum == 1){
                this.imgWidth = null
                this.imgHeight = height*0.7/(this.dialogForm.logAudireportConf.rowNum + this.dialogForm.logAudireportConf.culumnNum) + '%'
              }else{
                this.imgHeight = null;
                this.imgWidth = null;
              }
            }
            this.layoutWidth = width + '%'
            this.layoutHeight = height + 'px'
            this.list1 = this.myFilter2(this.auditAnalysisTaskList, this.dialogForm.logAudireportTaskAssocList)
            this.marginInit = '0px'
          }
        } else {
          this.$message.warning('请先选择行、列数！')
          return false
        }
      } else {
        this.$message.error('请先选择审计分析任务')
      }
    },
    Submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.dialogForm.logAudireportChartAssocList = []
          for (let i = 0; i < this.list1.length; i++) {
            const obj = {
              'taskId': null, // 审计分析任务id
              'taskName': '', // 任务名称
              'chartType': null, // 图表类型 0-列表，1-趋势图，2-饼图，3-柱状图，4-地图，5-雷达图
              'chartOrder': null// 顺序
              // "rowNum":null,//预留字段 图表所占行数 或者 图表x轴
              // "culumnNum": null//预留字段 图表所占列数 或者 图表y轴}
            }; const child = this.list1[i]
            obj.taskId = child.taskId
            obj.taskName = child.taskName
            obj.chartType = child.chartType
            obj.chartOrder = i
            obj.culumnNum = 24 / this.dialogForm.logAudireportConf.culumnNum // 宽度
            obj.rowNum = 24 / this.dialogForm.logAudireportConf.rowNum// 可视容器高度等分为24份，除以行数 再 乘以rowNum 即为当前图表高度
            this.dialogForm.logAudireportChartAssocList.push(obj)
          }
          if (this.command == 'add') {
            reportConfigAdd(this.dialogForm).then(resp => {
              if (resp.data.returnCode == '0') {
                this.$message.success(resp.data.returnMsg)
                this.$emit('success')
                this.dialogVisible = false
              }
            })
          } else if (this.command == 'modify') {
            reportConfigUpd(this.dialogForm).then(resp => {
              if (resp.data.returnCode == '0') {
                this.$message.success(resp.data.returnMsg)
                this.$emit('success')
                this.dialogVisible = false
              }
            })
          }
        } else {
          return false
        }
      })
    },
    resetForm() {
      this.$refs.form.resetFields()
      this.dialogForm.logAudireportConf.repoerName = ''// 报表名称
      this.dialogForm.logAudireportConf.rowNum = null// 行数
      this.dialogForm.logAudireportConf.culumnNum = null // 列数
      this.dialogForm.logAudireportTaskAssocList = []
      this.dialogForm.logAudireportChartAssocList = []
      this.list1 = []
    },
    // 获取详情
    getReportCfgInfo() {
      getReportInfo(this.reportId).then(resp => {
        if (resp.data.returnCode == '0') {
          this.dialogForm = Object.assign(resp.data.data)
          setTimeout(() => {
            const containerHeight = (getComputedStyle(document.getElementById('dndListContainer'), null).height).replace(/px/, '') // 获取容器高度
            const width = 100 / this.dialogForm.logAudireportConf.culumnNum
            const height = containerHeight / this.dialogForm.logAudireportConf.rowNum - 2.6
            this.layoutWidth = width + '%'
            this.layoutHeight = height + 'px'
            this.list1 = this.myFilter(this.auditAnalysisTaskList, resp.data.data.logAudireportChartAssocList)
            this.marginInit = '0px'
          }, 10)
          this.loading = false
        } else {
          this.loading = false
        }
      }, error => {
        this.loading = false
      })
    },
    open() {
      if (this.command === 'add') {
        this.disabled = false
      } else if (this.command === 'modify') {
        this.loading = true
        this.disabled = false
        this.getReportCfgInfo()
      } else {
        this.loading = true
        this.disabled = true
        this.getReportCfgInfo()
      }
    }
  }
}
</script>
<style scoped>
.dragArea11{
  margin: -1.2px 0;
}
.dndList-list{
  width:100%;
  border:2px solid #dedede;
  margin-bottom:5px;
  height: 314px;
  background:#F8F8F8;
  padding:2px;
}
.dndList-list::-webkit-scrollbar{
  width:1px;
  height:1px;
}
.titles{
    line-height:24px;
    height:24px;
    text-align: left;
    padding-left: 3px;
    border-left:2px solid #4AB7BD;
    font-size:13px;
    color:#4AB7BD;
}
.list-complete-item-layout{
  cursor: pointer;
  position: relative;
  display: inline-block;
  transition: all 1s;
  text-align: center;
  background-color:#dae6fa;
  border:1px solid #dedede;
}
.list-complete-item-layout:hover{
  background-color:#dae6ff;
  opacity:0.8;
}
.list-complete-item-handle{
  width:100%;
  text-align:center;
  color:#3177e5;
  max-height:16%;
  line-height:16%;
}
.list-complete-item-layout:hover .list-complete-item-handle{
  color:#fff;
}
.list-complete-item .imgbar,
.list-complete-item-layout .imgbar{
  background-size: contain;
  height:60%;
  max-width: 80%;
}
 .list-complete-item.sortable-chosen {

 }
 .list-complete-item.sortable-ghost {

 }
 .undraggable {
 /* background-color: red; */
   display:none;
 }
 .list-complete-enter,
 .list-complete-leave-active {
 opacity: 0;
 }
.border{
  border:1px solid #7C7CFC;
}
</style>
